/*
 * Apertura site component layer for the NEW page types (landing-design lane).
 *
 * LINK ORDER on every new page (after styles.css is NOT required; this sheet is
 * self-sufficient and every rule is scoped under .ap-page so it cannot fight the
 * home page's styles.css):
 *     <link rel="stylesheet" href="../tokens.css">
 *     <link rel="stylesheet" href="../pages.css">
 *     <body class="ap-page">
 * (en pages: ./tokens.css ./pages.css at the same depth as styles.css; locale and
 * nested pages add the matching ../ prefixes.)
 *
 * CLASS VOCABULARY (the contract for landing-pages and news-publish):
 *   chrome       from scripts/layout.mjs: skip-link, site-header, brand, menu-toggle,
 *                nav-links, nav-list, nav-item, nav-item-has-menu, nav-disclosure,
 *                nav-menu, nav-cta, lang-switch, site-footer, footer-top, footer-brand,
 *                footer-line, footer-feeds, footer-sitemap, footer-column,
 *                footer-heading, footer-bottom, footer-note
 *   layout       shell, main-flow, breadcrumbs
 *   hero         hero-band > shell > (eyebrow, h1, lede, actions) [+ hero-band-media]
 *   section      section-shell [.section-alt] > shell > section-head (eyebrow, h2, lede)
 *   features     feature-grid > feature-item (feature-icon, h3, p)
 *   modules      module-grid > module-card (module-tier, game-tile, h3, p, module-meta)
 *   comparison   compare-wrap > table.compare-table (th[scope], td[data-yes|data-no])
 *   pricing      pricing-grid > pricing-card[.is-featured] (pricing-name, price,
 *                price-note, pricing-list, button)
 *   docs         docs-layout > (docs-sidebar > docs-nav, docs-article.article-body)
 *   status       status-board > status-row (status-name, status-pill[data-state])
 *   company      company-band > shell > company-grid > company-card
 *   news         news-grid > news-card (news-card-media, news-meta, news-tag, h3, p);
 *                news-lead for the first card; article-header, article-body,
 *                source-list, feed-links
 *   generic      button [.button-primary|.button-secondary], badge, callout
 * Motion lives ONLY inside @media (prefers-reduced-motion: no-preference) and the
 * reduce block at the end turns off anything that slips through.
 */

.ap-page {
  margin: 0;
  background: var(--ap-bg);
  color: var(--ap-text);
  font-family: var(--ap-font-sans);
  font-size: var(--ap-fs-base);
  line-height: var(--ap-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ap-page *, .ap-page *::before, .ap-page *::after { box-sizing: border-box; }
.ap-page img { display: block; max-width: 100%; height: auto; }
.ap-page a { color: var(--ap-link); text-underline-offset: 0.2em; }
.ap-page h1, .ap-page h2, .ap-page h3, .ap-page h4 { margin: 0; font-weight: var(--ap-fw-semibold); }
.ap-page p { margin: 0; }
/* One focus-ring recipe for the whole sheet. Every rule below that changes the
   ring changes only its COLOUR, so width, offset and radius can never drift
   between the page body, the chrome and the scroll containers. */
.ap-page :focus-visible {
  outline: var(--ap-focus-ring-width) solid var(--ap-focus);
  outline-offset: var(--ap-focus-ring-offset);
  border-radius: var(--ap-radius-xs);
}
.ap-page .shell { width: var(--ap-shell); margin-inline: auto; }
.ap-page .main-flow { display: block; min-height: 60vh; }

/* The skip link is a real control, not an ornament: it is positioned off the
   top edge with a transform, which means it is also a focus target while
   off-screen for anyone who tabs to it before it moves. Two rules keep it
   honest in both directions -- it must come back into view on keyboard focus
   (:focus, not :focus-visible, because a programmatic focus after a hash
   navigation has no keyboard modality), and it must never paint over the page
   at rest. Logical properties only: `inset-inline-start` mirrors under
   dir="rtl" so an Arabic tree does not open its skip link from the far corner
   and then animate it sideways. */
.skip-link {
  position: fixed; inset-inline-start: var(--ap-space-4); inset-block-start: var(--ap-space-3); z-index: 100;
  padding: var(--ap-space-3) var(--ap-space-4);
  border-radius: var(--ap-radius-sm);
  background: var(--ap-chrome-text); color: var(--ap-chrome-bg);
  font-weight: var(--ap-fw-bold);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
/* The ring is drawn OUTSIDE the control, so on the skip link it would land on
   the header's dark slab -- which is exactly where the light chip already is.
   Draw it inside the chip instead, in the chip's own ink, and it stays visible
   in both schemes without a second colour token. */
.skip-link:focus-visible { outline-offset: calc(var(--ap-focus-ring-offset) * -1); outline-color: var(--ap-chrome-bg); }

/* Skip-link and in-page anchor landings must clear the sticky header, or the
   heading the reader asked for sits UNDER it (WCAG 2.2 2.4.11 Focus Not
   Obscured). --ap-header-h is the same token the header itself is sized from,
   so the offset follows the 72px -> 64px breakpoint with no second number. */
.ap-page [id] { scroll-margin-block-start: calc(var(--ap-header-h) + var(--ap-space-3)); }

/* ---- header + mega nav ----------------------------------------------------
 * Deliberately NOT under .ap-page. Home, news and the legacy pages load this
 * sheet but do not carry .ap-page, and scoping the header there is exactly why
 * their nav rendered as a bare list. Every selector below starts at .site-header
 * (or .skip-link), so nothing here can reach the home hero. */
.site-header {
  position: sticky; top: 0; z-index: 30;
  min-height: var(--ap-header-h);
  padding: 0 max(var(--ap-space-5), calc((100vw - 1180px) / 2));
  display: flex; align-items: center; gap: var(--ap-space-5);
  background: var(--ap-chrome-bg);
  color: var(--ap-chrome-text);
  border-bottom: 1px solid var(--ap-chrome-line);
  font-family: var(--ap-font-sans);
}
.site-header a { color: var(--ap-chrome-muted); text-decoration: none; }
.site-header :focus-visible { outline: var(--ap-focus-ring-width) solid var(--ap-chrome-accent); outline-offset: var(--ap-focus-ring-offset); border-radius: var(--ap-radius-xs); }
.site-header .brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ap-chrome-text); font-size: 1.0625rem; font-weight: var(--ap-fw-bold);
  letter-spacing: -0.02em;
}
.site-header .brand img { border-radius: var(--ap-radius-icon); }
.site-header .menu-toggle {
  display: none; margin-inline-start: auto; min-height: var(--ap-touch); padding: 0 var(--ap-space-4);
  color: var(--ap-chrome-text); background: transparent;
  border: 1px solid var(--ap-chrome-line); border-radius: var(--ap-radius-xs);
  font: inherit; cursor: pointer;
}
.site-header .nav-links { margin-inline-start: auto; display: flex; align-items: center; gap: var(--ap-space-5); font-size: var(--ap-fs-sm); }
.site-header .nav-list { display: flex; align-items: center; gap: var(--ap-space-2); margin: 0; padding: 0; list-style: none; }
.site-header .nav-item { position: relative; display: flex; align-items: center; }
.site-header .nav-item > a {
  display: inline-flex; align-items: center; min-height: var(--ap-touch);
  padding: 0 var(--ap-space-3); border-radius: var(--ap-radius-xs);
}
.site-header .nav-item > a:hover, .site-header .nav-item > a[aria-current="page"] { color: var(--ap-chrome-text); }
.site-header .nav-item > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ap-chrome-accent); }
.site-header .nav-disclosure {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; min-height: var(--ap-touch); margin-inline-start: -6px; padding: 0;
  background: transparent; border: 0; color: var(--ap-chrome-muted); cursor: pointer;
}
.site-header .nav-disclosure span {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.site-header .nav-disclosure[aria-expanded="true"] span { transform: translateY(1px) rotate(225deg); }
.site-header .nav-cta {
  display: inline-flex; align-items: center; min-height: var(--ap-touch); padding: 0 var(--ap-space-4);
  border: 1px solid var(--ap-chrome-line); border-radius: var(--ap-radius-pill);
  color: var(--ap-chrome-text) !important;
}

/* Submenu: opens on hover and focus-within with no script (keyboard users reach
   it by tabbing into the link); [aria-expanded=true] on the disclosure button
   keeps it open for touch where a script sets it. */
.site-header .nav-menu {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 40;
  min-width: 14rem; margin: 0; padding: var(--ap-space-2); list-style: none;
  background: var(--ap-chrome-menu-bg);
  border: 1px solid var(--ap-chrome-line); border-radius: var(--ap-radius-sm);
  box-shadow: var(--ap-elev-3);
  visibility: hidden; opacity: 0; transform: translateY(-4px);
}
.site-header .nav-item-has-menu:hover > .nav-menu,
.site-header .nav-item-has-menu:focus-within > .nav-menu,
.site-header .nav-disclosure[aria-expanded="true"] ~ .nav-menu { visibility: visible; opacity: 1; transform: none; }
.site-header .nav-menu a {
  display: flex; align-items: center; min-height: var(--ap-touch);
  padding: 0 var(--ap-space-3); border-radius: var(--ap-radius-xs);
  color: var(--ap-chrome-muted);
}
.site-header .nav-menu a:hover { color: var(--ap-chrome-text); background: rgba(255, 255, 255, 0.06); }
/* The submenu is a 14rem popover whose rows are 44px tall, and the mint ring
   is drawn 3px OUTSIDE the row, so the last row's ring fell outside the panel
   and the first/last rows' vertical rings clipped against the padding box.
   Inset the ring to the row itself: same thickness, same colour, fully inside
   the region it marks. Also covers the mobile menu, where .nav-menu is static
   and its rows sit directly on the panel background. */
.site-header .nav-menu a:focus-visible { outline-offset: calc(var(--ap-focus-ring-offset) * -1); border-radius: var(--ap-radius-xs); }

.site-header .lang-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 0.75rem; letter-spacing: 0.03em; }
.site-header .lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; padding: 0 6px; border-radius: var(--ap-radius-xs);
}
.site-header .lang-switch a[aria-current="page"] { color: var(--ap-chrome-text); font-weight: var(--ap-fw-bold); box-shadow: inset 0 -2px 0 var(--ap-chrome-accent); }

/* ---- generic atoms --------------------------------------------------------- */
.ap-page .eyebrow {
  margin: 0 0 var(--ap-space-4);
  color: var(--ap-text-muted);
  font: 600 0.75rem/1.2 var(--ap-font-mono);
  letter-spacing: var(--ap-ls-eyebrow); text-transform: uppercase;
}
.ap-page .lede { color: var(--ap-text-muted); font-size: var(--ap-fs-md); max-width: 40rem; }
.ap-page .actions { display: flex; flex-wrap: wrap; gap: var(--ap-space-3); margin-top: var(--ap-space-6); }

.ap-page .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ap-space-2);
  min-height: var(--ap-touch); padding: 0 var(--ap-space-5);
  border: 1px solid transparent; border-radius: var(--ap-radius-sm);
  font: inherit; font-size: var(--ap-fs-sm); font-weight: var(--ap-fw-bold);
  text-decoration: none; cursor: pointer;
}
.ap-page .button-primary { background: var(--ap-accent-fill); color: var(--ap-on-accent); }
.ap-page .button-secondary { background: var(--ap-fill-faint); color: var(--ap-text); border-color: var(--ap-line-strong); }
.ap-page .button:disabled, .ap-page .button[aria-disabled="true"] { color: var(--ap-text-faint); background: var(--ap-fill-subtle); border-color: var(--ap-line); cursor: not-allowed; }
.ap-page .badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--ap-space-3);
  border: 1px solid var(--ap-line-strong); border-radius: var(--ap-radius-pill);
  color: var(--ap-text-muted); font-size: var(--ap-fs-xs); font-weight: var(--ap-fw-medium);
}
.ap-page .callout {
  padding: var(--ap-space-4) var(--ap-space-5);
  border: 1px solid var(--ap-line); border-inline-start: 3px solid var(--ap-info);
  border-radius: var(--ap-radius-sm); background: var(--ap-surface); color: var(--ap-text-muted);
}

.ap-page .breadcrumbs { margin: 0 0 var(--ap-space-5); color: var(--ap-text-faint); font-size: var(--ap-fs-xs); }
.ap-page .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--ap-space-2); margin: 0; padding: 0; list-style: none; }
.ap-page .breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: var(--ap-space-2); }
.ap-page .breadcrumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ap-text-muted); }
.ap-page .breadcrumbs [aria-current="page"] { color: var(--ap-text); }

/* ---- hero band --------------------------------------------------------------- */
.ap-page .hero-band {
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem) clamp(3rem, 2rem + 4vw, 6rem);
  border-bottom: 1px solid var(--ap-line);
  background:
    radial-gradient(60rem 28rem at 78% -10%, var(--ap-glow-blue), transparent 70%),
    radial-gradient(44rem 22rem at 8% 0%, var(--ap-glow), transparent 70%),
    var(--ap-bg);
}
.ap-page .hero-band h1 {
  max-width: 18ch; font-size: var(--ap-fs-display); line-height: var(--ap-lh-display);
  letter-spacing: var(--ap-ls-display); font-weight: var(--ap-fw-semibold);
  text-wrap: balance;
}
.ap-page .hero-band .lede { margin-top: var(--ap-space-5); }
.ap-page .hero-band-media {
  margin-top: var(--ap-space-8); border: 1px solid var(--ap-line); border-radius: var(--ap-radius-md);
  background: var(--ap-surface); box-shadow: var(--ap-elev-3), var(--ap-edge-light); overflow: hidden;
}

/* ---- section shell ----------------------------------------------------------- */
.ap-page .section-shell { padding-block: var(--ap-section-y); }
.ap-page .section-shell + .section-shell { border-top: 1px solid var(--ap-line); }
.ap-page .section-alt { background: var(--ap-surface); }
.ap-page .section-head { max-width: 46rem; margin-bottom: var(--ap-space-8); }
.ap-page .section-head h2 {
  font-size: var(--ap-fs-5); line-height: var(--ap-lh-headline);
  letter-spacing: var(--ap-ls-headline); text-wrap: balance;
}
.ap-page .section-head .lede { margin-top: var(--ap-space-4); }

/* ---- feature grid + module cards -------------------------------------------- */
.ap-page .feature-grid, .ap-page .module-grid, .ap-page .company-grid, .ap-page .news-grid {
  display: grid; gap: var(--ap-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.ap-page .feature-item, .ap-page .module-card, .ap-page .company-card {
  padding: var(--ap-space-5);
  border: 1px solid var(--ap-line); border-radius: var(--ap-radius-md);
  background: var(--ap-surface); box-shadow: var(--ap-elev-1), var(--ap-edge-light);
}
.ap-page .feature-item h3, .ap-page .module-card h3, .ap-page .company-card h3 {
  font-size: var(--ap-fs-1); line-height: var(--ap-lh-tight); letter-spacing: var(--ap-ls-headline);
}
.ap-page .feature-item p, .ap-page .module-card p, .ap-page .company-card p { margin-top: var(--ap-space-3); color: var(--ap-text-muted); }

/* Card-level focus affordance.
 *
 * A card is a unit of content with one or more controls inside it (a link, a
 * button, a summary). The control already draws its own ring; what a keyboard
 * visitor could not see is WHICH CARD they are inside when the ring is small
 * and the card is large. This adds a second, inset ring on the card, so the
 * two together read as "you are in this card, on this control".
 *
 * Inset, not outset: an outside ring on a grid cell lands in the 16px gutter
 * and is clipped by a neighbour at narrow widths. Inset stays inside the cell
 * at every width and never collides with the child's outer ring.
 *
 * .news-card is the important one: its headline anchor is stretched over the
 * whole card with `::after { inset: 0 }`, so the anchor's own box -- and its
 * ring -- is the headline line, while the clickable area is the card. The card
 * ring is the only indicator that matches what the pointer actually hits.
 *
 * Keyed on :has(:focus-visible), not :focus-within, so a mouse click inside a
 * card paints only the control's own ring the way it always did; the card ring
 * is reserved for the keyboard modality that needs it. A browser without :has
 * simply skips this rule -- the control's ring still shows, so the loss is the
 * extra context, never the indicator. */
.ap-page .feature-item:has(:focus-visible),
.ap-page .module-card:has(:focus-visible),
.ap-page .company-card:has(:focus-visible),
.ap-page .news-card:has(:focus-visible),
.ap-page .pricing-card:has(:focus-visible),
.ap-page .status-row:has(:focus-visible) {
  outline: var(--ap-focus-ring-width) solid var(--ap-focus);
  outline-offset: calc(var(--ap-focus-ring-offset) * -1);
}
.ap-page .feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--ap-space-4);
  border-radius: var(--ap-radius-sm); background: var(--ap-fill-subtle); color: var(--ap-accent);
}
.ap-page .module-tier {
  display: inline-block; margin-bottom: var(--ap-space-3);
  color: var(--ap-text-muted); font: 600 0.6875rem/1.2 var(--ap-font-mono);
  letter-spacing: var(--ap-ls-eyebrow); text-transform: uppercase;
}
.ap-page .module-meta {
  display: flex; flex-wrap: wrap; gap: var(--ap-space-2); margin: var(--ap-space-4) 0 0; padding: 0; list-style: none;
  color: var(--ap-text-faint); font-size: var(--ap-fs-xs);
}

/* Pixel-art tiles for the arcade cards: an inline 8x8 SVG drawn with <rect>s,
   so there is nothing to download and nothing generated. The box is the only
   thing styled — no motion, no filters, so Reduce Motion has nothing to stop. */
.ap-page .game-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--ap-space-4);
  border: 1px solid var(--ap-line); border-radius: var(--ap-radius-sm);
  background: var(--ap-sunken);
  color: var(--ap-accent);
}
.ap-page .game-tile svg { width: 24px; height: 24px; display: block; }
.ap-page .game-tile[data-tone="info"] { color: var(--ap-info); }
.ap-page .game-tile[data-tone="success"] { color: var(--ap-success); }
.ap-page .game-tile[data-tone="warning"] { color: var(--ap-warning); }
.ap-page .game-tile[data-tone="danger"] { color: var(--ap-danger); }

/* ---- comparison table -------------------------------------------------------- */
.ap-page .compare-wrap { overflow-x: auto; border: 1px solid var(--ap-line); border-radius: var(--ap-radius-md); background: var(--ap-surface); }
.ap-page .compare-wrap:focus-visible { outline-offset: calc(var(--ap-focus-ring-offset) * -1); }
.ap-page .compare-table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--ap-fs-sm); }
.ap-page .compare-table th, .ap-page .compare-table td { padding: var(--ap-space-4) var(--ap-space-5); border-bottom: 1px solid var(--ap-line); text-align: start; vertical-align: top; }
.ap-page .compare-table thead th { color: var(--ap-text); font-weight: var(--ap-fw-semibold); background: var(--ap-surface-2); position: sticky; top: 0; }
.ap-page .compare-table tbody th { font-weight: var(--ap-fw-medium); color: var(--ap-text); }
.ap-page .compare-table td { color: var(--ap-text-muted); }
.ap-page .compare-table tr:last-child > * { border-bottom: 0; }
.ap-page .compare-table [data-yes] { color: var(--ap-success); font-weight: var(--ap-fw-semibold); }
.ap-page .compare-table [data-no] { color: var(--ap-text-faint); }

/* ---- pricing ----------------------------------------------------------------- */
.ap-page .pricing-grid { display: grid; gap: var(--ap-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ap-page .pricing-card {
  display: flex; flex-direction: column; gap: var(--ap-space-4); padding: var(--ap-space-6);
  border: 1px solid var(--ap-line); border-radius: var(--ap-radius-md);
  background: var(--ap-surface); box-shadow: var(--ap-elev-2), var(--ap-edge-light);
}
.ap-page .pricing-card.is-featured { border-color: var(--ap-accent); }
.ap-page .pricing-name { font-size: var(--ap-fs-md); font-weight: var(--ap-fw-semibold); }
.ap-page .price { font-size: var(--ap-fs-4); line-height: 1; letter-spacing: var(--ap-ls-headline); font-weight: var(--ap-fw-semibold); }
.ap-page .price-note { color: var(--ap-text-muted); font-size: var(--ap-fs-sm); }
.ap-page .pricing-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ap-space-3); flex: 1; color: var(--ap-text-muted); font-size: var(--ap-fs-sm); }
.ap-page .pricing-list li { padding-top: var(--ap-space-3); border-top: 1px solid var(--ap-line); }
.ap-page .pricing-card .button { width: 100%; }

/* ---- docs sidebar + article body -------------------------------------------- */
.ap-page .docs-layout {
  display: grid; gap: var(--ap-space-7); align-items: start;
  grid-template-columns: var(--ap-sidebar) minmax(0, 1fr);
  padding-block: var(--ap-space-8) var(--ap-section-y);
}
.ap-page .docs-sidebar { position: sticky; top: calc(var(--ap-header-h) + var(--ap-space-5)); max-height: calc(100vh - var(--ap-header-h) - var(--ap-space-6)); overflow-y: auto; }
.ap-page .docs-nav { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--ap-fs-sm); }
.ap-page .docs-nav a {
  display: flex; align-items: center; min-height: var(--ap-touch); padding: 0 var(--ap-space-3);
  border-radius: var(--ap-radius-xs); color: var(--ap-text-muted); text-decoration: none;
}
.ap-page .docs-nav a:hover { color: var(--ap-text); background: var(--ap-fill-subtle); }
.ap-page .docs-nav a[aria-current="page"] { color: var(--ap-text); background: var(--ap-fill-subtle); font-weight: var(--ap-fw-semibold); }

.ap-page .article-body { max-width: var(--ap-prose); }
.ap-page .article-body > * + * { margin-top: var(--ap-space-5); }
.ap-page .article-body h1 { font-size: var(--ap-fs-5); line-height: var(--ap-lh-headline); letter-spacing: var(--ap-ls-headline); text-wrap: balance; }
.ap-page .article-body h2 { margin-top: var(--ap-space-8); font-size: var(--ap-fs-3); line-height: var(--ap-lh-headline); letter-spacing: var(--ap-ls-headline); }
.ap-page .article-body h3 { margin-top: var(--ap-space-6); font-size: var(--ap-fs-1); line-height: var(--ap-lh-tight); }
.ap-page .article-body p, .ap-page .article-body li { max-width: var(--ap-measure); color: var(--ap-text-muted); }
.ap-page .article-body strong { color: var(--ap-text); }
.ap-page .article-body ul, .ap-page .article-body ol { padding-inline-start: var(--ap-space-5); }
.ap-page .article-body li + li { margin-top: var(--ap-space-2); }
.ap-page .article-body code {
  padding: 0.1em 0.4em; border-radius: var(--ap-radius-xs);
  background: var(--ap-sunken); color: var(--ap-text); font: 0.9em var(--ap-font-mono);
}
.ap-page .article-body pre { padding: var(--ap-space-4) var(--ap-space-5); overflow-x: auto; border: 1px solid var(--ap-line); border-radius: var(--ap-radius-sm); background: var(--ap-sunken); }
.ap-page .article-body pre code { padding: 0; background: none; }
.ap-page .article-body blockquote { margin-inline: 0; padding-inline-start: var(--ap-space-5); border-inline-start: 3px solid var(--ap-line-strong); color: var(--ap-text-muted); }
.ap-page .article-body img { border: 1px solid var(--ap-line); border-radius: var(--ap-radius-sm); }
.ap-page .article-body figure { margin-inline: 0; }
.ap-page .article-body figcaption { margin-top: var(--ap-space-2); color: var(--ap-text-faint); font-size: var(--ap-fs-xs); }

/* ---- status board ------------------------------------------------------------ */
.ap-page .status-board { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ap-line); border-radius: var(--ap-radius-md); background: var(--ap-surface); overflow: hidden; }
.ap-page .status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-4); padding: var(--ap-space-4) var(--ap-space-5); }
.ap-page .status-row + .status-row { border-top: 1px solid var(--ap-line); }
.ap-page .status-name { font-weight: var(--ap-fw-medium); }
.ap-page .status-pill {
  display: inline-flex; align-items: center; gap: var(--ap-space-2); min-height: 28px; padding: 0 var(--ap-space-3);
  border: 1px solid currentColor; border-radius: var(--ap-radius-pill); font-size: var(--ap-fs-xs); font-weight: var(--ap-fw-semibold);
}
.ap-page .status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ap-page .status-pill[data-state="ok"] { color: var(--ap-success); }
.ap-page .status-pill[data-state="degraded"] { color: var(--ap-warning); }
.ap-page .status-pill[data-state="down"] { color: var(--ap-danger); }
.ap-page .status-pill[data-state="unknown"] { color: var(--ap-text-muted); }

/* ---- company band ------------------------------------------------------------ */
.ap-page .company-band { padding-block: var(--ap-section-y); background: var(--ap-surface); border-block: 1px solid var(--ap-line); }

/* ---- news -------------------------------------------------------------------- */
.ap-page .news-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ap-page .news-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--ap-line); border-radius: var(--ap-radius-md);
  background: var(--ap-surface); box-shadow: var(--ap-elev-1), var(--ap-edge-light);
}
.ap-page .news-card-media { aspect-ratio: 16 / 9; background: var(--ap-sunken); }
.ap-page .news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.ap-page .news-card > :not(.news-card-media) { margin-inline: var(--ap-space-5); }
.ap-page .news-card > :last-child { margin-bottom: var(--ap-space-5); }
.ap-page .news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ap-space-3); margin-top: var(--ap-space-4); color: var(--ap-text-faint); font-size: var(--ap-fs-xs); }
.ap-page .news-tag { padding: 2px var(--ap-space-3); border: 1px solid var(--ap-line-strong); border-radius: var(--ap-radius-pill); color: var(--ap-text-muted); font-weight: var(--ap-fw-medium); }
.ap-page .news-card h3 { margin-top: var(--ap-space-3); font-size: var(--ap-fs-1); line-height: var(--ap-lh-tight); letter-spacing: var(--ap-ls-headline); }
.ap-page .news-card h3 a { color: var(--ap-text); text-decoration: none; }
.ap-page .news-card h3 a::after { content: ""; position: absolute; inset: 0; }
.ap-page .news-card { position: relative; }
.ap-page .news-card p { margin-top: var(--ap-space-3); color: var(--ap-text-muted); font-size: var(--ap-fs-sm); }
.ap-page .news-lead { grid-column: 1 / -1; }
@media (min-width: 981px) {
  .ap-page .news-lead { flex-direction: row; }
  .ap-page .news-lead .news-card-media { flex: 1 1 55%; aspect-ratio: auto; min-height: 20rem; }
  .ap-page .news-lead > :not(.news-card-media) { margin-inline: var(--ap-space-6); }
  .ap-page .news-lead h3 { font-size: var(--ap-fs-3); }
}
.ap-page .article-header { max-width: var(--ap-prose); padding-block: var(--ap-space-8) var(--ap-space-6); }
.ap-page .article-header h1 { font-size: var(--ap-fs-5); line-height: var(--ap-lh-headline); letter-spacing: var(--ap-ls-headline); text-wrap: balance; }
.ap-page .article-header .lede { margin-top: var(--ap-space-4); }

.ap-page .source-list { max-width: var(--ap-prose); margin-top: var(--ap-space-7); padding: var(--ap-space-5); border: 1px solid var(--ap-line); border-radius: var(--ap-radius-sm); background: var(--ap-surface); }
.ap-page .source-list h2 { font-size: var(--ap-fs-sm); letter-spacing: var(--ap-ls-eyebrow); text-transform: uppercase; color: var(--ap-text-muted); }
.ap-page .source-list ol { margin: var(--ap-space-3) 0 0; padding-inline-start: var(--ap-space-5); display: grid; gap: var(--ap-space-2); color: var(--ap-text-muted); font-size: var(--ap-fs-sm); }
.ap-page .source-list a { display: inline-flex; align-items: center; min-height: 24px; }
.ap-page .feed-links { display: flex; flex-wrap: wrap; gap: var(--ap-space-3); margin: var(--ap-space-5) 0 0; padding: 0; list-style: none; }
.ap-page .feed-links a { display: inline-flex; align-items: center; min-height: var(--ap-touch); padding: 0 var(--ap-space-4); border: 1px solid var(--ap-line-strong); border-radius: var(--ap-radius-pill); text-decoration: none; }

/* ---- footer sitemap ------------------------------------------------------------ */
.site-footer {
  /* width/display reset the legacy .site-footer in styles.css, a three-column
     row sized to --shell. pages.css is linked after styles.css on every page, so
     equal specificity is enough; these must stay or that grid comes back. */
  width: auto; display: block;
  margin: var(--ap-space-9) 0 0; padding: var(--ap-space-8) max(var(--ap-space-5), calc((100vw - 1180px) / 2)) var(--ap-space-6);
  background: var(--ap-chrome-bg); color: var(--ap-chrome-muted);
  border-top: 1px solid var(--ap-chrome-line); font-size: var(--ap-fs-sm);
}
.site-footer a { color: var(--ap-chrome-muted); text-decoration: none; }
.site-footer a:hover { color: var(--ap-chrome-text); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--ap-chrome-accent); }
.site-footer .footer-top { display: grid; gap: var(--ap-space-3); max-width: 36rem; }
.site-footer .footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ap-chrome-text); font-weight: var(--ap-fw-bold); }
.site-footer .footer-brand img { border-radius: var(--ap-radius-icon); }
.site-footer .footer-feeds { margin-top: var(--ap-space-2); }
.site-footer .footer-sitemap { display: grid; gap: var(--ap-space-6); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--ap-space-8); }
.site-footer .footer-column ul { margin: var(--ap-space-3) 0 0; padding: 0; list-style: none; }
.site-footer .footer-column a { display: inline-flex; align-items: center; min-height: 32px; }
.site-footer .footer-heading { color: var(--ap-chrome-text); font-size: var(--ap-fs-xs); letter-spacing: var(--ap-ls-eyebrow); text-transform: uppercase; font-weight: var(--ap-fw-semibold); }
.site-footer .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ap-space-3); margin-top: var(--ap-space-8); padding-top: var(--ap-space-5); border-top: 1px solid var(--ap-chrome-line); font-size: var(--ap-fs-xs); }

/* ---- module filters ----------------------------------------------------------
   Built by app.js, so this block styles a toolbar that only exists when the
   script ran; a visitor without JS sees the untouched static module list. Every
   control is at least --ap-touch tall, the pressed chip inverts to the primary
   button pair, and the only state colour is the text itself — nothing here
   animates, so Reduce Motion has nothing to suppress. The [hidden] rules are
   REQUIRED, not tidiness: .module-grid and .module-filter-reset both set their
   own `display`, and an author display rule beats the UA [hidden] rule, so
   without them a "hidden" filtered-out list would still paint. */
.ap-page .module-filter-shell { padding-block: var(--ap-space-6) 0; }
.ap-page .module-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ap-space-4);
  padding: var(--ap-space-4) var(--ap-space-5);
  border: 1px solid var(--ap-line); border-radius: var(--ap-radius-md);
  background: var(--ap-surface); box-shadow: var(--ap-elev-1), var(--ap-edge-light);
}
.ap-page .module-filter-field { display: grid; gap: var(--ap-space-2); flex: 1 1 16rem; min-width: 0; }
.ap-page .module-filter-label {
  color: var(--ap-text-muted); font-size: var(--ap-fs-xs);
  font-weight: var(--ap-fw-semibold); letter-spacing: var(--ap-ls-eyebrow); text-transform: uppercase;
}
.ap-page .module-filter-input {
  width: 100%; min-height: var(--ap-touch); padding: 0 var(--ap-space-4);
  border: 1px solid var(--ap-line-strong); border-radius: var(--ap-radius-sm);
  background: var(--ap-sunken); color: var(--ap-text); font: inherit; font-size: var(--ap-fs-sm);
}
.ap-page .module-filter-input::placeholder { color: var(--ap-text-faint); }
.ap-page .module-filter-chips { display: flex; flex-wrap: wrap; gap: var(--ap-space-2); flex: 1 1 20rem; min-width: 0; }
.ap-page .module-filter-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ap-touch); padding: 0 var(--ap-space-4);
  border: 1px solid var(--ap-line-strong); border-radius: var(--ap-radius-pill);
  background: var(--ap-fill-faint); color: var(--ap-text-muted);
  font: inherit; font-size: var(--ap-fs-sm); font-weight: var(--ap-fw-medium); cursor: pointer;
}
.ap-page .module-filter-chip[aria-pressed="true"] {
  background: var(--ap-accent-fill); border-color: var(--ap-accent-fill); color: var(--ap-on-accent);
}
.ap-page .module-filter-status { flex: 1 1 100%; margin: 0; color: var(--ap-text-muted); font-size: var(--ap-fs-sm); }
.ap-page .module-filter-status[data-empty="true"] { color: var(--ap-text); font-weight: var(--ap-fw-medium); }
.ap-page .module-filter-reset {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ap-touch); padding: 0 var(--ap-space-5);
  border: 1px solid var(--ap-line-strong); border-radius: var(--ap-radius-sm);
  background: var(--ap-fill-subtle); color: var(--ap-text); font: inherit;
  font-size: var(--ap-fs-sm); font-weight: var(--ap-fw-bold); cursor: pointer;
}
.ap-page .module-filter-reset[hidden], .ap-page .module-grid[hidden], .ap-page .section-shell[hidden] { display: none; }
@media (max-width: 720px) {
  .ap-page .module-filters { padding: var(--ap-space-4); }
  .ap-page .module-filter-chip { flex: 1 1 auto; }
}

/* ---- responsive (breakpoints match styles.css: 980 and 720) ------------------- */
@media (max-width: 980px) {
  .ap-page .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .ap-page .docs-sidebar { position: static; max-height: none; }
  .site-footer .footer-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .site-header { min-height: var(--ap-header-h); padding-inline: 14px; flex-wrap: wrap; row-gap: 6px; padding-block: 8px; }
  .site-header .menu-toggle { display: inline-flex; align-items: center; }
  .site-header .nav-links {
    display: none; position: absolute; top: calc(100% + 1px); inset-inline: 14px;
    padding: var(--ap-space-3); flex-direction: column; align-items: stretch; gap: var(--ap-space-1);
    max-height: calc(100vh - 80px); overflow-y: auto;
    background: var(--ap-chrome-menu-bg); border: 1px solid var(--ap-chrome-line);
    border-radius: var(--ap-radius-sm); box-shadow: var(--ap-elev-3);
  }
  .site-header .nav-links[data-open="true"] { display: flex; }
  .site-header .nav-list { flex-direction: column; align-items: stretch; }
  .site-header .nav-item { flex-wrap: wrap; }
  .site-header .nav-item > a { flex: 1; }
  .site-header .nav-menu { position: static; visibility: visible; opacity: 1; transform: none; flex-basis: 100%; min-width: 0; box-shadow: none; border: 0; padding: 0; padding-inline-start: var(--ap-space-4); }
  .site-header .nav-disclosure { display: none; }
  .site-header .lang-switch { margin-inline-start: 0; flex: 0 1 auto; min-width: 0; max-width: 100%; }
  .ap-page .actions .button { flex: 1 1 100%; }
  .ap-page .status-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .site-footer .footer-sitemap { grid-template-columns: minmax(0, 1fr); }
}

/* ---- motion: ONLY here, and only when the visitor has not asked for less ------- */
@media (prefers-reduced-motion: no-preference) {
  .ap-page .button { transition: border-color var(--ap-dur-base) var(--ap-ease-standard), background-color var(--ap-dur-base) var(--ap-ease-standard), transform var(--ap-dur-fast) var(--ap-ease-standard); }
  .ap-page .button:active:not(:disabled) { transform: scale(0.98); }
  .site-header .nav-item > a, .site-header .nav-menu a, .ap-page .docs-nav a, .site-footer .footer-column a { transition: color var(--ap-dur-base) var(--ap-ease-standard), background-color var(--ap-dur-base) var(--ap-ease-standard); }
  .site-header .nav-menu { transition: opacity var(--ap-dur-base) var(--ap-ease-standard), transform var(--ap-dur-base) var(--ap-ease-emphasized), visibility 0s linear var(--ap-dur-base); }
  .site-header .nav-item-has-menu:hover > .nav-menu,
  .site-header .nav-item-has-menu:focus-within > .nav-menu { transition-delay: 0s; }
  .ap-page .feature-item, .ap-page .module-card, .ap-page .news-card, .ap-page .pricing-card { transition: transform var(--ap-dur-slow) var(--ap-ease-emphasized), box-shadow var(--ap-dur-slow) var(--ap-ease-standard); }
  @media (hover: hover) and (pointer: fine) {
    .ap-page .feature-item:hover, .ap-page .module-card:hover, .ap-page .news-card:hover { transform: translateY(-3px); box-shadow: var(--ap-elev-2), var(--ap-edge-light); }
  }
  .ap-page .news-card-media img { transition: transform var(--ap-dur-reveal) var(--ap-ease-emphasized); }
  .ap-page .news-card:hover .news-card-media img { transform: scale(1.03); }
  @keyframes ap-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .ap-page .hero-band .shell > * { animation: ap-rise var(--ap-dur-reveal) var(--ap-ease-emphasized) both; }
  .ap-page .hero-band .shell > :nth-child(2) { animation-delay: 60ms; }
  .ap-page .hero-band .shell > :nth-child(3) { animation-delay: 120ms; }
  .ap-page .hero-band .shell > :nth-child(4) { animation-delay: 180ms; }
}

/* Belt and braces: anything above that animates is also listed here, so a future
   rule that slips outside the guard above still stops for Reduce Motion. */
@media (prefers-reduced-motion: reduce) {
  .ap-page *, .ap-page *::before, .ap-page *::after,
  .site-header *, .site-header *::before, .site-header *::after,
  .skip-link, .skip-link::before, .skip-link::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .site-header .nav-menu { transition: none; }
  /* The skip link is in the list above on purpose: its only animation is the
     transform that HIDES it, and Reduce Motion still needs it hidden. The
     transform itself is declared on the base rule, so with the transition
     forced to none, hiding and revealing are both instant -- the control keeps
     working, it just stops sliding. */
}