@layer reset, base, components, responsive;

/* R4 fonts (§7.3): the reference's headings and nav run on Rubik and its section body /
   footer copy on Inter. Both are OFL-1.1, so the variable latin subsets are self-hosted
   here together with their licence texts (assets/fonts/OFL-*.txt) instead of being pulled
   from a third party at runtime. Before this, the page fell back to the system rounded
   stack, which renders roughly 15% wider than Rubik/Inter and pushed every text-driven
   width and line count off contract. */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/rubik-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer reset {
  .ah-home, .ah-home * { box-sizing: border-box; }
  .ah-home { margin: 0; }
  .ah-home img { display: block; max-width: 100%; }
  .ah-home a { color: inherit; text-decoration: none; }
  .ah-home button { color: inherit; font: inherit; }
}

@layer base {
  .ah-home {
    --ah-container: 1280px;
    --ah-gutter: 40px;
    --ah-hero-size: 62px;
    --ah-hero-leading: 72px;
    --ah-section-size: 40px;
    --ah-radius: 20px;
    --ah-blue: #74caff;
    --ah-ink: #0c0c0c;
    --ah-cream: #ffedc9;
    --ah-paper: #f9f9f9;
    --ah-line: #d2d2d2;
    color: #000; background: #0c0c0c;
    font: 400 16px/24px Inter, ui-sans-serif, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
    overflow-x: hidden;
  }
  .ah-home-lock { overflow: hidden; }
  .ah-home :focus-visible { outline: 3px solid var(--ah-blue); outline-offset: 4px; }
  .ah-home h1, .ah-home h2, .ah-home h3 { margin: 0; font-family: Rubik, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-weight: 800; letter-spacing: -.045em; line-break: strict; text-wrap: balance; word-break: keep-all; }
  .ah-home p { text-wrap: pretty; }
  .ah-line { display: block; }
  /* P-R05 at 390 (measured 4 line boxes): the third break only exists on the smallest layout. */
  .ah-hero .ah-br-sm { display: none; }
  .ah-shell { width: min(calc(100% - var(--ah-gutter) * 2), var(--ah-container)); margin-inline: auto; }
  /* P-SEC01/P-T01 container (measured): parsec wraps #comprehensive-security AND
     #trusted-companies in one full-bleed `relative bg-primary-white px-6 py-24 text-black
     md:px-10` block — 96px block padding and a 40px (24px below md) inline gutter over
     rgb(249,249,249). It is a sibling of the sticky section, not a card inside it.
     Observed box: 1440x1410 | 1024x1556 | 768x1866 | 390x1752. */
  .ah-slab { padding: 96px var(--ah-gutter); color: #000; background: var(--ah-paper); }
  /* P-G02 contract (measured, identical at all four viewports): the skip link lives INSIDE
     the header as a 174.72x60 block parked 990px off the left edge, 20px padding, 14/20
     over rgb(12,12,12). It keeps its static vertical position (15px, centred in the 90px
     header) because only `left` is offset. */
  .ah-skip { position: absolute; left: -990px; display: block; padding: 20px; color: #f9fafc; background: #0c0c0c; font-size: 14px; line-height: 20px; }
  .ah-skip:focus { left: 20px; }
}

@layer components {
  /* P-H01 contract (measured): full-bleed 1440/1024/768/390 x 90, flex, position:relative,
     padding "0px 30px". The header is NOT an inset absolute overlay in the reference. */
  .ah-header { position: relative; width: 100%; height: 90px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; color: #000; }
  /* P-H02 contract (measured): the brand is a 124.08x90 block at x=30 (122.33 at 1024),
     16/24, weight 400 — the reference reaches 90px from a 30px logo with 30px margins,
     which `line-height` reproduces without touching the icon. */
  .ah-brand { display: block; width: 124.08px; height: 90px; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: normal; white-space: nowrap; color: #f9fafc; }
  /* P-H02 — the reference's brand slot is a 124.08x90 image whose computed line-height stays
     24px, so the mark is centred by an inner flex box instead of by a 90px line-height. */
  .ah-brand-inner { display: flex; align-items: center; gap: 8px; height: 100%; }
  .ah-brand img { width: 28px; height: 28px; border-radius: 7px; vertical-align: middle; }
  .ah-brand span { font-size: 16px; font-weight: 400; vertical-align: middle; }
  /* P-H03 contract (measured): `relative z-10 size-auto overflow-visible bg-transparent
     font-rubik` — a block-level, relatively positioned nav at 16/24 that shrink-wraps as a
     flex item. Its list is a grid with a 40px gap at 1440 and 20px at 1024; below 1024
     the list is hidden and only the 36x36 menu button remains, which is why the measured
     nav box collapses to 36x36 at 768 and 390. */
  .ah-nav { position: relative; display: block; font-size: 16px; line-height: 24px; }
  .ah-nav-inner { position: relative; }
  .ah-nav-list { display: grid; grid-auto-flow: column; align-items: center; gap: 40px; margin: 0; padding: 0; list-style: none; }
  /* Each item is the panel's containing block, so a panel hangs off its own trigger. */
  .ah-nav-list li { position: relative; }
  .ah-nav-list a { display: block; color: #f9fafc; font-size: 16px; line-height: 24px; white-space: nowrap; }
  /* P-H04/P-H06/P-H07 contract (measured): the three dropdown triggers are 16/24 flex
     buttons, weight 400, no margin or padding, transparent, relatively positioned so the
     panel can hang off them, with a 7px gap before the chevron. They collapse to 0x0 with
     the rest of the nav below 1024. */
  .ah-nav-trigger { position: relative; display: flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; border-radius: 2px; color: #f9fafc; background: transparent; font-size: 16px; line-height: 24px; font-weight: 400; cursor: pointer; }
  .ah-nav-chevron { font-size: 12px; }
  /* Panel geometry (measured): 
     — a grid hanging 12px below the trigger over rgb(249,249,249) with a 4px radius. */
  .ah-nav-panel { position: absolute; top: 100%; left: 0; margin-top: 12px; padding: 10px 0; display: grid; border-radius: 4px; color: #000; background: #f9f9f9; }
  .ah-nav-panel[hidden] { display: none; }
  .ah-nav-panel a { display: block; padding: 6px 20px; color: #000; font-size: 16px; line-height: 24px; white-space: nowrap; }
  .ah-nav-list a:hover { color: #f9fafc; }
  /* P-H09 contract (measured): the header CTA is a flex pill with a 14px 36px padding and
     16/24 type, 52px tall at 1440. */
  .ah-nav-list .ah-nav-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 14px 36px; border: 1px solid #f9fafc; border-radius: 9999px; color: #f9fafc; font-size: 16px; line-height: 24px; white-space: nowrap; }
  /* P-H09 (measured): the CTA is the last column of the nav grid, so the nav box is as tall
     as the tallest column (52px at 1440) instead of stacking the CTA under the list. */
  /* P-H10 contract (measured): a 36x36 flex button with a 10px padding and no margin,
     coloured rgb(249,250,252); hidden at and above 1024. */
  .ah-menu { display: none; width: 36px; height: 36px; margin: 0; padding: 10px; border: 0; border-radius: 0; color: #f9fafc; background: transparent; }
  .ah-menu span { display: block; width: 15px; height: 2px; margin: 4px auto; background: currentColor; transition: transform 180ms ease; }
  /* P-R01 contract (measured): the hero is a 768px block centred by margin auto, not a
     full-bleed section and not a fixed side margin. Observed box:
     1440x900 336,170 768x422 | 1024x768 128,170 768x422 | 768x900 0,154 768x364
     (padding 0 48px) | 390x844 0,154 390x322 (padding 0 24px). D8 splits it out of #top.
     P-R01/R05/R06 typography (measured 2026-09-21): the whole hero block — root, subtitle
     and CTA label — inherits the reference's body family rubik, text-align center and
     align-items center. Centring the h1 with a 500px box was not enough: the box was
     centred while the lines inside stayed left-aligned at text-align start, so every line
     began at the same x instead of being centred on it. Inter reaches the page body, not
     the hero. */
  .ah-hero { width: min(768px, 100%); margin: 80px auto; padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; font-family: Rubik, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #fff; background: transparent; }
  /* P-C01 contract (measured): full-bleed comparison section, margin "0 0 160px",
     no padding of its own — the inset comes from each child. */
  .ah-comparison { display: flex; flex-direction: column; align-items: center; margin: 0 0 160px; padding: 0; color: #fff; }
  /* P-R02 contract (measured): the h1 shrink-wraps its longest line (500.06 at 62px,
     371.02 at 46px, 306.5 at 38px) and is centred; font-weight is 700, not 800.
     The reference sets letter-spacing normal, text-wrap wrap and word-break normal on this
     heading; the `.ah-home h1,h2,h3` blanket rule (-.045em, balance, keep-all, 800) is not
     this component's contract and had never been checked against it (measured 2026-09-21,
     coe/2026-09-21-16-04-hero-headline-typography-clone-mismatch.md). */
  .ah-hero h1 { --ah-hero-block: 500px; width: var(--ah-hero-block); align-self: center; margin: 0; font-size: calc(var(--ah-hero-size) * var(--ah-hero-scale, 1)); line-height: var(--ah-hero-leading); font-weight: 700; letter-spacing: normal; text-wrap: wrap; word-break: normal; }
  /* D15 Chinese hero metrics (measured 2026-09-21 with tools/parsec-capture/probe-hero-rhythm.mjs).
     CJK and Latin ink are not the same size at the same font-size: canvas TextMetrics puts CJK ink
     at 0.94em against Latin 0.90em, so at the shared 62/72 the Chinese headline ran at 81% ink
     coverage where the Latin runs at 72–78% — the boxes matched, the lines still read cramped
     (ink gap 14.1px Chinese vs 14.7/33.5px Latin at 1440).
     Setting the Chinese headline at 0.9× the Latin size is the standard CJK/Latin optical ratio:
     it drops coverage to 0.73 and widens the ink gap to ~19.8px, i.e. the Latin rhythm. The pitch
     (--ah-hero-leading) is deliberately left alone, so the h1 box stays 500×224 and the Chinese
     hero keeps the English page height. This is a metric *difference* chosen for visual parity,
     which is what the plan's P-R03 row was holding open. */
  .ah-home:lang(zh) { --ah-hero-scale: .9; }
  /* P-R05 contract (measured): 768/672/342 wide, 20/30 (18/28, 14/20 below 768),
     margin "20px 0 40px"; text-wrap is wrap, not the blanket rule's pretty. */
  .ah-hero > p { width: 100%; margin: 20px 0 40px; font-size: 20px; line-height: 30px; text-wrap: wrap; }
  /* D16 (user, 2026-09-21): the hero's single "Get started" pill is replaced by the platform
     download row, and the header's plain Download entry is gone —下载入口就在首屏。
     Consequences recorded rather than papered over: P-R06 (the reference pill) has no counterpart
     any more and P-H08 (the reference nav link) likewise, so astropath-map marks both `reason`;
     the hero grows by the row's height and the document height with it.
     Style (user, 2026-09-24): light pills with dark text — "下载 macOS 版" — each carrying its
     platform's logo before the label. The marks are the vendors' own glyphs used nominatively to
     say which platform the download is for: apple / android / linux come from Simple Icons (CC0),
     the Windows four-pane mark is drawn here because Simple Icons no longer ships it. They are
     single-colour (currentColor) so they sit in the page's palette instead of importing brand
     colours.
     Arrangement (user, 2026-09-24): two deliberate rows — desktop first (macOS / Windows / Linux),
     mobile second (iOS / Android) — instead of one row that wraps wherever it runs out of space.
     Each row wraps inside itself when the viewport is too narrow for its pills. */
  .ah-platforms { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
  .ah-platform-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; width: 100%; margin: 0; padding: 0; list-style: none; }
  .ah-platforms a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 9999px; color: #0c0c0c; background: #f9fafc; font-size: 15px; font-weight: 500; line-height: 20px; white-space: nowrap; transition: background 150ms ease, transform 150ms ease; }
  .ah-platforms a:hover, .ah-platforms a:focus-visible { background: #ffffff; transform: translateY(-2px); }
  .ah-platforms svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
  /* P-R04 contract (measured): the slot container's own color is rgb(255,255,255) at every
     viewport, with the hero's own line-height (72/56/44). That is the field the captured
     contract grades — it says nothing about the ink: the reference's characters are painted by
     their own gradient slices (see the span rule below). An earlier reading of this container
     value as "the slot is plain white, the reference paints no accent here" was wrong and is
     what shipped a colourless slot. */
  .ah-rotating-word { color: #fff; }
  /* P-R04: per-character inline-block spans, as measured on the reference. The 80px box comes
     from py-1 (4px top/bottom) around the hero's own 72px line box, and px-0.5 (2px) is part of
     each character's inline advance — not a fixed height. */
  .ah-rotating-word[data-rotating-word] { display: block; line-height: var(--ah-hero-leading); transition: all 700ms cubic-bezier(0.4, 0, 0.2, 1); }
  /* P-R04 paint (measured 2026-09-21): the reference's characters are transparent text painted
     by their own gradient slice — `bg-clip-text` + a per-character `linear-gradient(to right,
     c_i, c_i+1)` where c_i samples rgb(250,143,160) → rgb(255,187,59) at i/(n+1) — plus a 150ms
     per-character transform transition for the hover lift (translateY(-20px) rotate(3deg)).
     The container's own color stays white, which is what the captured contract grades.
     Evidence: coe/rotating-word-reference-evidence.json. */
  .ah-rotating-word > span { display: inline-block; padding: 4px 2px; color: transparent; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; cursor: pointer; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
  .ah-rotating-word > span:hover { transform: translateY(-20px) rotate(3deg); }
  /* P-C03/P-C04/P-C06/P-C07/P-C08 contract (measured, four viewports). The reference
     stage is a `relative mx-auto aspect-video rounded-[20px]` clipping box holding: two
     stacked media figures (base + clipped sharp copy), a 4px full-height divider parked
     at the slider value, a full-size transparent range input, and two label chips. The
     border is an inset ring rather than a real border so the divider can span the full
     720/576/768/480px height the contract grades. */
  .ah-product-stage { --ah-compare: 50%; color: #fff; position: relative; width: min(1280px, 100%); height: 720px; margin: 0; overflow: hidden; border-radius: 20px; background: transparent; box-shadow: inset 0 0 0 1px #454545, 0 35px 110px #111, 0 -20px 80px #75caff18; }
  /* P-C02 (D12 approved copy): the screen-reader intro is a 1x1 absolutely positioned
     paragraph, exactly as measured on the reference. */
  .ah-compare-desc { position: absolute; align-self: flex-start; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ah-stage-panels, .ah-stage-panels figure { height: 100%; margin: 0; }
  .ah-stage-panels figure { position: relative; }
  .ah-stage-panels figure[hidden] { display: none; }
  .ah-stage-panels img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .ah-stage-base { position: static; background: #0c0c0c; }
  .ah-stage-sharp { position: absolute; inset: 0; }
  /* The left half is the compressed placeholder; the sharp copy is clipped to the right
     of the divider. Both are the same placeholder asset, per D14. */
  .ah-stage-base { filter: blur(1.5px) saturate(.72) contrast(.92); opacity: .82; }
  .ah-stage-sharp { clip-path: inset(0 0 0 var(--ah-compare)); }
  .ah-stage-panels figcaption { position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* P-C07: `absolute top-0 h-full w-1` — a 4px full-height divider at the slider value
     (x 720 / 512 / 384 / 195), carrying the "Slide for Comparison" label for AT. */
  .ah-compare-line { position: absolute; top: 0; bottom: 0; left: var(--ah-compare); width: 4px; background: transparent; }
  .ah-compare-line::before { content: ""; position: absolute; inset: 0; background: #fff; box-shadow: 0 0 18px #fff; }
  .ah-compare-line i { position: absolute; top: 45%; left: 50%; width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%; background: #121212; transform: translate(-50%, -50%); }
  .ah-compare-line i::after { content: "↔"; position: absolute; inset: 7px 0 auto; text-align: center; }
  /* P-C06: the range input is a transparent full-size hit area (`size-full cursor-pointer`),
     display inline-block, with no track or thumb of its own — the divider is the affordance. */
  .ah-stage-slider { position: absolute; inset: 0; }
  .ah-stage-range { -webkit-appearance: none; appearance: none; display: inline-block; vertical-align: top; width: 100%; height: 100%; margin: 0; padding: 0; color: #fff; background: transparent; font: 400 16px/24px Inter, ui-sans-serif, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; cursor: pointer; }
  .ah-stage-range::-webkit-slider-runnable-track { background: transparent; border: 0; }
  .ah-stage-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 4px; height: 100%; border: 0; border-radius: 0; background: transparent; }
  .ah-stage-range::-moz-range-track { background: transparent; border: 0; }
  .ah-stage-range::-moz-range-thumb { width: 4px; height: 100%; border: 0; border-radius: 0; background: transparent; }
  .ah-stage-range:focus-visible { outline: 3px solid var(--ah-blue); outline-offset: -3px; }
  /* P-C08: `absolute left-3 top-3 flex items-center justify-center gap-1 rounded-[10px]`
     over rgba(0,0,0,0.8) — 115x44 at 12/20 padding (1440/1024), 102x32 at 8/16 (768),
     92x30 at 8/16 (390). */
  .ah-stage-chip { position: absolute; top: 12px; display: flex; align-items: center; justify-content: center; gap: 4px; height: 30px; padding: 8px 16px; border-radius: 10px; color: #fff; background: rgba(0, 0, 0, .8); font-size: 12px; line-height: 18px; }
  .ah-stage-chip-start { left: 12px; }
  .ah-stage-chip-end { right: 12px; }
  .ah-capability-tabs { --ah-tab-gutter: 80px; color: #fff; width: min(1280px, calc(100% - var(--ah-tab-gutter) * 2)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 40px var(--ah-tab-gutter) 0; }
  .ah-capability-tabs button { min-height: 146px; padding: 28px; color: #fafaf9; border: 1px solid #404040; border-radius: 14px; text-align: left; background: transparent; cursor: pointer; }
  .ah-capability-tabs button[aria-selected="true"] { border-color: var(--ah-blue); }
  .ah-capability-tabs strong, .ah-capability-tabs span { display: block; }.ah-capability-tabs strong { font-size: 20px; line-height: 30px; }.ah-capability-tabs span { color: #a7a7a7; font-size: 16px; line-height: 24px; }

  /* P-S01 contract (measured): the section is a relative scroll track, 1440x2970 at
     docY 1738 (2534.39 / 2970 / 2785.19 at the other viewports). */
  .ah-story { --ah-story-gutter: 80px; --ah-story-track: 2070px; position: relative; width: 100%; height: calc(100vh + var(--ah-story-track)); color: #fff; }
  /* The sticky stage is one viewport tall and pinned to the top. */
  .ah-story-sticky { position: sticky; top: 0; width: 100%; height: 100vh; }
  .ah-story-wrap { position: relative; width: 100%; height: 100%; }
  /* P-S08 contract (measured): the stage's colour layer is absolutely stacked, full width,
     one viewport tall, background rgb(255,231,189). */
  .ah-story-stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffe7bd; }
  .ah-story-content { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
  .ah-story-inner { position: relative; display: flex; flex-direction: column; width: min(1280px, calc(100% - var(--ah-story-gutter) * 2)); height: 80%; }
  /* P-S02 contract (measured): 1280x100 at x=80, 40/50 w700, centred. */
  .ah-story h2 { width: 100%; font-size: var(--ah-section-size); line-height: 50px; font-weight: 700; text-align: center; color: #000; }
  .ah-story-copy h3 { font-size: 32px; line-height: 44px; }
  /* P-S03 contract (measured): the slide layer is absolutely positioned, 1280x620 at
     x=80, display flex. */
  .ah-story-track { position: relative; flex: 1; }
  .ah-story-slides { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 620px; }
  .ah-story-copy { flex: 1; min-width: 0; }
  .ah-story-slide { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; }
  .ah-story-slide[aria-hidden="true"] { opacity: 0; pointer-events: none; }
  /* P-S05 (measured): an inactive slide is translated 50px down as a whole — the reference
     moves the slide, not just its copy column — which is what separates the active and
     inactive headings by 50px at 1440. */
  .ah-story-slide[aria-hidden="true"] { transform: translateY(50px); }
  /* Media column: basis-3/5 of the slide (768 of 1280), frames centred inside it. */
  .ah-story-frames { position: relative; flex: 0 0 60%; }
  /* The frame is 691px at 1440 but the column narrows below md, so the image is capped
     at the column width — an uncapped 691px image overflows the 390px viewport by 151px. */
  .ah-story-frames img { position: absolute; top: 0; left: 50%; width: min(691px, 100%); height: 558px; object-fit: contain; transform: translateX(-50%); }
  /* Copy column: flex-1 (512 of 1280), vertically centred. */
  .ah-story-copy { display: flex; flex-direction: column; justify-content: center; }
  /* P-S04 contract (measured): h3 512x44 at x=848, 32/44 w700, margin-bottom 12px. */
  .ah-story-copy h3 { margin: 0 0 12px; font-size: 32px; line-height: 44px; font-weight: 700; color: #000; }
  /* The body carries no margin of its own: the reference separates title from body with
     the title's 12px margin only, and a stray <p> margin would shift the centred title. */
  .ah-story-copy p { margin: 0; font-size: 12px; line-height: 18px; color: #000; }
  /* P-S06 contract (measured): prev/next exist as screen-reader-only controls, parked at
     x=-9235 — they are focusable but never visible. */
  /* P-S06 contract (measured): the controls are parked off-screen by their CONTAINER,
     not by each button — an absolutely positioned flex row at left:-9990px spanning the full
     viewport width with a 40px gap and centred content. The buttons themselves stay static,
     which is why the measured x tracks the viewport width instead of a fixed offset. */
  /* P-S06 (measured): the controls are parked off-canvas for keyboard users only. They hang
     off the full-height content layer — not off the 80%-tall inner — and carry a 16px block
     padding, so the 74px box lands on the reference's x/docY while its two buttons stay
     centred inside it. */
  .ah-story-controls { position: absolute; bottom: 0; left: -9990px; width: 100vw; display: flex; justify-content: center; gap: 40px; padding: 16px 0; }
  /* The buttons keep their natural width (Previous 98.38, Next 69) so the centred pair inside
     the parked 100vw strip lands on the reference's measured x for P-S06. */
  /* P-S06 (measured 69x42): the buttons are border-box with a 1px border over an 8/16
     padding, so the border counts toward the graded width. */
  .ah-story-controls button { height: 42px; padding: 8px 16px; border: 1px solid; font-family: Rubik, "PingFang SC", system-ui, sans-serif; font-size: 16px; line-height: 24px; color: #000; background: transparent; cursor: pointer; }
  /* P-S07 contract (measured): the live region is a 1x1 absolutely positioned box. */
  .ah-story-live { position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


  /* P-SEC01..P-SEC05 contract (measured, four viewports). The reference section is
     `relative m-auto max-w-screen-xl text-center md:w-3/4 lg:w-full lg:text-left` inside
     a 24/40px page gutter: 1280x426 at x=80 with margin "0px 40px" (1440), 944x490 at
     x=40 with margin "0px" (1024), 516x910 at x=126 with margin "0px 86px" (768),
     342x782 at x=24 (390). Background stays transparent — the section is not a card. */
  .ah-security { position: relative; width: min(var(--ah-container), 100%); margin: 0 auto; text-align: left; background: transparent; }
  /* P-SEC02: h2 40/50 w700 (xl) / 32/38 (md) / 26/34 (base), full-width block. */
  .ah-security h2 { font-size: var(--ah-section-size); line-height: 50px; font-weight: 700; letter-spacing: normal; text-align: inherit; }
  /* Section lead: mt-5 with 20/30 (xl) / 18/28 (md) / 14/20 (base) — 1 line at every
     graded viewport, which is what pins P-SEC01's height. */
  .ah-security > p { margin: 20px 0 0; font-size: 20px; line-height: 30px; }
  /* P-SEC03: `flex flex-col gap-10 md:gap-16 lg:flex-row lg:gap-20`, mt-14 / md:mt-20.
     Row at >=1025 (1440/1024), column at <=768; gap 80/80/64/40; margin-top 80/80/80/56. */
  .ah-security-grid { display: flex; flex-direction: row; gap: 80px; margin: 80px 0 0; text-align: left; }
  /* Each item is `flex flex-col` with the inherited type scale 20/30 (lg), 14/20 (768),
     12/18 (390). The three measured widths are the reference's max-content boxes and are
     reproduced verbatim so P-SEC05's `w` is exact (D14: geometry contract first). */
  .ah-security-grid article { display: flex; flex-direction: column; width: 383.2px; font-size: 20px; line-height: 30px; }
  .ah-security-grid article:nth-child(2) { width: 393.33px; }
  .ah-security-grid article:nth-child(3) { width: 343.47px; }
  /* P-SEC04: 57x60 icon box, margin-bottom 40 (lg) / 36 (768) / 20 (390). Left-aligned
     with the item at >=1025, centred at <=768. */
  .ah-security-grid b { display: block; align-self: flex-start; width: 57px; height: 60px; margin: 0 0 40px; font-size: inherit; font-weight: 400; text-align: center; }
  .ah-security-grid h3 { font-size: inherit; line-height: inherit; font-weight: 700; letter-spacing: normal; }
  .ah-security-grid article p { margin: 20px 0 0; font-size: 16px; line-height: 24px; }

  /* P-T01..P-T06 contract (measured, four viewports) for parsec's #trusted-companies,
     the customer-proof carousel D7 approves cloning with placeholder content.
     Section: `relative pt-20 md:pt-40` — 1360x792 @x40 (1440), 944x874 (1024),
     688x764 (768), 342x778 @x24 (390), padding-top 160 / 160 / 160 / 80. */
  .ah-trusted { position: relative; padding-top: 80px; }
  /* P-T01: h2 32/44 w700 centred with a 40px bottom margin; 26/34 from md, 20/28 below. */
  .ah-trusted h2 { margin: 0 0 40px; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: normal; text-align: center; }
  /* P-T02: `grid-cols-[auto_1fr_auto] grid-rows-[auto_auto] items-center gap-10 lg:gap-20`,
     centred inside the slab at min(1280, 100%): 1280x548 @x80 m"0px 40px" (1440),
     944x640 (1024), 688x530 (768), 342x602 (390); columns 56/1008/56 -> 56/150/56. */
  .ah-carousel { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: auto auto; align-items: center; gap: 40px; width: min(var(--ah-container), 100%); margin: 0 auto; }
  /* The scroll track spans every column on the smallest layout and shrinks to the middle
     column from md up, which is what makes the measured column widths 56/150/56 at 390
     and 56/1008/56 at 1440. 1px inset + 150px gap reproduce the card offsets exactly. */
  .ah-carousel-items { grid-row: 1; grid-column: 1 / -1; display: flex; gap: 150px; width: 100%; min-width: 0; padding: 1px; overflow-x: scroll; scroll-snap-type: x mandatory; justify-self: center; align-self: center; scrollbar-width: none; }
  .ah-carousel-items::-webkit-scrollbar { display: none; }
  /* P-T03: 1006x450 @x217 (1440), 750x582 @x137 (1024), 494x472 @x137 (768),
     340x504 @x25 (390) — padding 64/80, 64/80, 32/40, 32; 40px gap; 20px radius. */
  .ah-quote { display: flex; flex: 0 0 100%; flex-direction: column; justify-content: center; gap: 40px; min-height: 504px; margin: 0; padding: 32px; border: 1px solid var(--ah-line); border-radius: 20px; scroll-snap-align: center; }
  .ah-quote blockquote { margin: 0; }
  /* P-T03 (measured): the quote body is Rubik even though everything else in the card —
     the author row below it included — is Inter. It is the one place the reference's
     testimonial card switches family, so it has to be stated here rather than inherited
     from the body stack. */
  .ah-quote blockquote p { margin: 0; font-family: Rubik, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; font-size: 20px; font-style: italic; line-height: 28px; }
  /* Author row: `grid-cols-[60px_1fr] md:grid-cols-[60px_1fr_auto] items-center gap-x-5
     gap-y-10`. 844x60 (1440), 412x80 (768), 274x118 (390). */
  .ah-quote-author { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 20px 20px; font-size: 12px; line-height: 18px; }
  /* P-T04: 60x60 circular greyscale avatar, aligned to the top of its row. */
  .ah-quote-avatar { grid-row: 1; align-self: start; width: 60px; height: 60px; border-radius: 9999px; filter: grayscale(1); }
  .ah-quote-name { grid-column: 2; margin: 0; }
  .ah-quote-name span { font-weight: 700; }
  /* The reference puts a "read the case study" link here. D7 forbids fabricating a case
     link, so the slot keeps its geometry as a non-interactive placeholder instead. */
  .ah-quote-link { grid-column: 1 / -1; justify-self: end; font-size: inherit; }
  /* P-T05: dot row spans every column in row 2 from md up and sits in column 2 below —
     1280x16 @x80 (1440), 150x16 @x120 (390); three 16px dots on a 16px gap. */
  .ah-carousel-dots { grid-row: 2; grid-column: 2; display: flex; justify-content: center; gap: 16px; }
  .ah-carousel-dots button { width: 16px; height: 16px; padding: 0; border: 1px solid #000; border-radius: 9999px; background: transparent; cursor: pointer; }
  .ah-carousel-dots button[aria-current="true"] { background: #000; }
  /* P-T06: 56x56 white circular arrow, row 1 beside the track from md up and row 2 below. */
  .ah-carousel-arrow { grid-row: 2; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; color: #0c0c0c; border: 0; border-radius: 9999px; background: #fff; cursor: pointer; }
  .ah-carousel-arrow[data-carousel-prev] { grid-column: 1; }
  .ah-carousel-arrow[data-carousel-next] { grid-column: 3; }
  .ah-carousel-live { position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


  /* P-P01..P-P06 (measured, four viewports) for parsec's #find-the-right-parsec: a
     full-bleed paper slab (96px block padding, 40px inline gutter over rgb(249,249,249),
     black text) holding a centred 1024px shell. Two rows of two bordered 20px-radius
     cards; a card's inner box is a 2-track grid whose lead column carries the 140x140
     media slot and the title, and whose detail column is opacity 0 until the card is
     expanded (D9). Expanding swaps the two rows' column templates — measured in §6.6 —
     and Escape deliberately does NOT collapse it, matching the reference. */
  .ah-paths { padding: 96px 40px; color: #000; background: var(--ah-paper); }
  .ah-paths h2 { margin: 0 0 40px; font-size: 40px; line-height: 50px; font-weight: 700; letter-spacing: normal; text-align: center; }
  .ah-path-shell { width: min(1024px, 100%); margin-inline: auto; }
  .ah-path-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .ah-path-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .ah-path-card { position: relative; overflow: hidden; border: 1px solid #000; border-radius: 20px; cursor: pointer; }
  .ah-path-inner { position: relative; display: grid; justify-items: center; gap: 20px; height: 100%; padding: 40px; }
  .ah-path-lead { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; }
  /* P-P05 (measured 140x140 at all four viewports, 16/24, transparent): the media slot is
     an R4 placeholder, so the box is pinned and the glyph sits in an inner element whose
     own font-size does not disturb the slot's measured 16px. */
  .ah-path-orbit { display: block; width: 140px; height: 140px; color: #000; font-size: 16px; line-height: 24px; text-align: center; }
  .ah-path-orbit i { display: block; font-size: 40px; font-style: normal; line-height: 140px; opacity: .25; }
  .ah-path-inner h3 { font-size: 26px; line-height: 36px; font-weight: 700; letter-spacing: normal; text-align: center; }
  .ah-path-detail { display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease; }
  .ah-path-detail > p { margin: 0; font-size: 16px; line-height: 24px; text-align: center; }
  /* The action column is a measured fixed width (182.61 at lg, 152.19 below) rather than a
     shrink-to-fit box, so the fine print's line count is deterministic instead of depending
     on how wide the pill happens to be. */
  .ah-path-action { width: 152.19px; text-align: center; }
  .ah-path-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0; padding: 12px 24px; border-radius: 9999px; color: #f9f9f9; background: #0c0c0c; font-size: 16px; line-height: 24px; }
  .ah-path-cta[data-placeholder] { color: #6b6b6b; background: #e4e4e4; }
  .ah-path-fine { margin: 0; font-size: 12px; line-height: 16px; }
  /* D9 — the expanded card keeps its detail visible and the rows swap templates. */
  .ah-path-card[data-expanded] .ah-path-detail { opacity: 1; visibility: visible; }

  /* P-F01..P-F04 contract (measured, four viewports) for parsec's
     #experience-parsec-yourself: a full-bleed 1440x344 / 1024x330 / 768x326 / 390x330 block
     on rgb(12,12,12) with NO padding of its own — every inset comes from the children's
     margins. The reference also layers an ambient blob/noise/gradient stack behind the
     copy, which is the same R4 media gap as P-R07 and stays a placeholder. */
  .ah-cta { position: relative; color: #fff; background: #0c0c0c; }
  .ah-cta-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
  /* P-F02: the h2 shrink-wraps and is centred by the parent, so its computed margin keeps
     0 on the inline axis; 40/50 w700 at xl, 32/38 from md, 26/34 below; margin 96/0/20 ->
     80/0/20 at the smallest layout. */
  .ah-cta h2 { margin: 80px 0 20px; font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: normal; text-align: center; }
  /* P-F03: lead paragraph 20/30 at xl, 18/28 from md, 14/20 below, margin-top 20px. */
  .ah-cta-inner > p { margin: 20px 0 0; font-size: 14px; line-height: 20px; }
  /* P-F04: pill with 12/24 padding, a 9999px radius, rgb(249,249,249) on rgb(12,12,12), an
     8px gap, margin 40px 0 and 12/18 -> 14/20 -> 16/24 type. */
  .ah-cta-button { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 40px 0; padding: 12px 24px; border-radius: 9999px; color: #0c0c0c; background: #f9f9f9; font-size: 12px; line-height: 18px; }
  /* P-FO01..P-FO05 (measured, four viewports) for parsec's footer: a full-bleed
     rgb(12,12,13) block with 120px block padding and a 40px gutter, 16/36 over
     rgb(230,231,236). Its navigation grid is capped at 1204px and centred, so at 1440 the
     auto margins resolve to 78px a side and the first column starts at x=118. Five columns
     run 2fr 1fr 2fr 1fr and a fixed 189.703px; below lg it drops to three columns and below
     md the brand column dissolves with `display: contents` so its own children stack. */
  .ah-footer { padding: 120px 40px; color: #e6e7ec; background: #0c0c0d; font-size: 16px; line-height: 36px; }
  .ah-footer-grid { display: grid; width: min(1204px, 100%); margin-inline: auto; gap: 40px 20px; }
  .ah-footer-brand { display: block; }
  .ah-footer-mark { display: block; }
  /* P-FO02 (measured): the brand mark itself is 30x46.56 and carries the 26px bottom margin,
     because the graded element is the image, not the link around it.
     The box stays the reference's, the file is ours: the reference's own mark is 1251x1942
     (aspect 0.644), exactly the box, so its `object-fit: fill` is lossless; our square 512x512
     icon in that box was squeezed 1.55x. `contain` keeps the box and the asset's aspect. */
  .ah-footer-mark img { display: block; width: 30px; height: 46.56px; margin: 0 0 26px; object-fit: contain; }
  .ah-footer-brand p { margin: 0; }
  .ah-footer-grid h2 { margin: 0; font-size: 16px; line-height: 36px; font-weight: 700; letter-spacing: normal; }
  .ah-footer-grid ul { margin: 0; padding: 0; list-style: none; }
  .ah-footer-grid li { line-height: 36px; }
  .ah-footer-grid a { color: #e6e7ec; }
  /* D15 language switch — our own component (the reference has none at this position, so it is
     an approved A-* addition, not a clone target). It sits in the header next to the brand:
     `margin-right: auto` absorbs the flex free space, which leaves the nav right-aligned at the
     reference's edge (x=1410) and keeps the header at its measured 90px height. */
  .ah-lang { display: flex; align-items: center; gap: 8px; margin-left: 8px; margin-right: auto; }
  .ah-lang button { padding: 5px 12px; border: 1px solid #3a3a3a; border-radius: 999px; color: #9a9a9a; background: transparent; font-family: inherit; font-size: 11px; line-height: 16px; cursor: pointer; }
  .ah-lang button[aria-pressed="true"] { color: #0c0c0c; background: #f9fafc; border-color: #f9fafc; }
}

@layer responsive {
  /* P-R01 tablet contract (measured at 1024x768): the hero keeps its 768px block but
     the side margin drops to 128px; the section box stays 768 wide and 422 tall. */
  /* Tablet, measured at 1024x768: media frame 1024x576, tablist 944x162 as a
     3-column grid with a 40px gutter, h1 still 500.06x224 @62/72. */
  /* P-H03 at 1024 (measured): the nav gap drops from 40px to 20px and the brand narrows
     to 122.33px. */
  @media (width > 768px) and (width <= 1024px) {
    .ah-nav-list { gap: 20px; }
    .ah-brand { width: 122.33px; }
    .ah-product-stage { height: 576px; }
    .ah-story { --ah-story-gutter: 40px; --ah-story-track: 1766.39px; }
    .ah-story-slides { height: 514.39px; }
    .ah-capability-tabs { --ah-tab-gutter: 40px; }
    .ah-capability-tabs button { min-height: 162px; padding: 24px; }
    /* P-SEC02/P-SEC01 tablet (measured at 1024x768): h2 drops to 32/38 and the lead to
       18/28; the section keeps the full 944px width and the row layout. */
    .ah-security h2 { font-size: 32px; line-height: 38px; }
    .ah-security > p { font-size: 18px; line-height: 28px; }
  }
  /* Measured at 768x900: square media frame, tablist becomes a single 688-wide column. */
  @media (width <= 768px) {
    .ah-hero { margin: 64px 0; padding: 0 48px; }
    .ah-home { --ah-hero-size: 46px; --ah-hero-leading: 56px; }
    .ah-hero h1 { --ah-hero-block: 371px; }
    .ah-platforms { gap: 10px; }
    .ah-platform-row { gap: 10px; }
    .ah-platforms a { min-height: 44px; padding: 10px 18px; font-size: 14px; }
    .ah-platforms svg { width: 18px; height: 18px; }
    .ah-hero > p { font-size: 18px; line-height: 28px; }
    .ah-product-stage { height: 768px; }
    .ah-capability-tabs { --ah-tab-gutter: 40px; display: flex; flex-direction: column; gap: 32px; }
    .ah-capability-tabs button { min-height: 110px; padding: 24px; }
    .ah-story h2 { font-size: 32px; line-height: 38px; }
    .ah-story-copy h3 { font-size: 26px; line-height: 34px; }
    .ah-story-copy p { font-size: 14px; line-height: 20px; }
    .ah-story-slides { height: 644px; }
    .ah-story-slide { flex-direction: column; }
    /* P-S04/P-S05 at md = 768 and below (measured): the slide stacks, and the frame column
       takes 75% of the slide's height (483 of 644 at 768, 455 of 607 at 390) while the copy
       column takes the remaining 25% and centres its title/body inside it. */
    .ah-story-frames { flex-basis: auto; height: 75%; }
    .ah-story { --ah-story-gutter: 40px; --ah-story-track: 2070px; }
    .ah-capability-tabs strong { font-size: 18px; line-height: 28px; }
    /* P-SEC01..P-SEC05 at 768x900 (measured): `md:w-3/4 text-center md:gap-16` — the
       section narrows to 75% (516 at x=126, margin "0px 86px"), the grid stacks to a
       64px column with 80px top margin, items go full width at 14/20, the icon centres
       and keeps a 36px bottom margin. */
    .ah-security { width: 75%; text-align: center; }
    /* The path grid is still the pre-clone placeholder, but it must not overflow: it keeps
       three desktop columns until it is rebuilt as #find-the-right-parsec. */
    .ah-path-grid { grid-template-columns: 1fr; }
    .ah-security h2 { font-size: 32px; line-height: 38px; }
    .ah-security > p { font-size: 18px; line-height: 28px; }
    .ah-security-grid { flex-direction: column; gap: 64px; text-align: center; }
    .ah-security-grid article { width: auto; font-size: 14px; line-height: 20px; }
    .ah-security-grid b { align-self: center; margin-bottom: 36px; }
    .ah-security-grid article p { font-size: 14px; line-height: 20px; }
  }

  @media (width >= 640px) and (width < 768px) {
    .ah-home { --ah-gutter: 24px; --ah-hero-size: 46px; --ah-hero-leading: 56px; --ah-section-size: 32px; }
  }

  /* P-H03/P-H05/P-H08/P-H09/P-H10 below 1024 (measured): the nav list and the header CTA
     both collapse to 0x0 and only the 36x36 menu button survives, so the nav box itself
     measures 36x36 at 768 and 390. Opening it turns the nav into a fixed drawer. */
  @media (width < 1024px) {
    .ah-nav-list { display: none; }
    /* P-H05/P-H08 colour in the collapsed state: the reference inherits rgb(12,12,12) here,
       because the list lives inside the dark drawer. The links are 0x0, so it is inert. */
    .ah-nav-list a { color: #0c0c0c; }
    /* P-H04/P-H06/P-H07 colour in the collapsed state: the reference inherits the drawer's
       rgb(12,12,12) here. The triggers are 0x0, so it is inert. */
    .ah-nav-trigger { color: #0c0c0c; }
    /* P-H09 in the collapsed state (measured at 768/390): the CTA keeps its flex display,
       rgb(249,250,252) text and the drawer's rgb(12,12,12) fill even though it is 0x0,
       because the reference portals its drawer instead of hiding it with display:none.
       The list's own display:none already keeps it out of the layout. */
    .ah-nav-list .ah-nav-cta { color: #f9fafc; background: #0c0c0c; }
    .ah-menu { display: flex; align-items: center; justify-content: center; }
    .ah-nav[data-open="true"] { position: fixed; z-index: 30; inset: 0 0 0 20%; display: flex; flex-direction: column; align-items: stretch; padding: 100px 34px 34px; color: #111; background: #f7f7f2; }
    .ah-nav[data-open="true"] .ah-nav-list { display: flex; flex-direction: column; gap: 0; }
    .ah-nav[data-open="true"] .ah-nav-list a { padding: 16px 0; color: #111; border-bottom: 1px solid #ccc; }
    .ah-nav[data-open="true"] .ah-nav-trigger { width: 100%; justify-content: space-between; padding: 16px 0; color: #111; border-bottom: 1px solid #ccc; }
    .ah-nav[data-open="true"] .ah-nav-panel { position: static; margin-top: 0; border-radius: 0; background: transparent; }
    .ah-nav[data-open="true"] .ah-nav-panel a { padding: 8px 20px; color: #111; border-bottom: 0; }
    .ah-nav[data-open="true"] .ah-nav-cta { margin-top: 28px; color: #fff; background: #111; }
    .ah-menu[aria-expanded="true"] { position: fixed; z-index: 40; right: 20px; color: #111; }
    .ah-menu[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
    .ah-menu[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  }
  @media (width < 640px) {
    /* P-R01 / P-C03 / P-C09 mobile contract (measured at 390x844). */
    .ah-hero { margin: 64px 0; padding: 0 24px; }

    .ah-hero h1 { --ah-hero-block: 306.5px; }
    .ah-platforms { gap: 8px; }
    .ah-platform-row { gap: 6px; }
    .ah-platforms a { min-height: 36px; gap: 6px; padding: 8px 14px; font-size: 13px; line-height: 18px; }
    .ah-platforms svg { width: 16px; height: 16px; }
    .ah-hero > p { font-size: 14px; line-height: 20px; }
    .ah-hero .ah-br-sm { display: inline; }
    .ah-product-stage { height: 480px; border-radius: 14px; }
    /* P-C08 below md the chip returns to the 12/18 scale. */
    .ah-stage-chip { top: 12px; height: 30px; font-size: 12px; line-height: 18px; }
    .ah-stage-chip-start { left: 12px; }
    .ah-stage-chip-end { right: 12px; }
    .ah-capability-tabs { --ah-tab-gutter: 20px; gap: 20px; margin-top: 20px; }
    .ah-capability-tabs button { min-height: 98px; padding: 16px 20px; }
    .ah-story h2 { font-size: 26px; line-height: 34px; }
    .ah-story-copy h3 { font-size: 20px; line-height: 28px; }
    .ah-story-copy p { font-size: 12px; line-height: 18px; }
    .ah-story-slides { height: 607.19px; }
    .ah-story { --ah-story-gutter: 20px; --ah-story-track: 1941.19px; }
    .ah-capability-tabs strong { font-size: 14px; line-height: 20px; }
    .ah-capability-tabs span { font-size: 12px; line-height: 18px; }
    .ah-capability-tabs { margin-top: 20px; }
    /* P-SEC01..P-SEC05 at 390x844 (measured): base type scale — h2 26/34, lead 14/20,
       items 12/18, grid gap 40 with a 56px top margin, icon bottom margin 20. The page
       gutter is 24px, which is what puts the 342px section at x=24. */
    .ah-home { --ah-gutter: 24px; --ah-hero-size: 38px; --ah-hero-leading: 44px; --ah-section-size: 26px; }
    .ah-security h2 { font-size: 26px; line-height: 34px; }
    .ah-security > p { font-size: 14px; line-height: 20px; }
    .ah-security-grid { gap: 40px; margin-top: 56px; }
    /* P-SEC01 at 390 (measured): below md the section is full width again — `md:w-3/4`
       never applied, so the 342px box sits at x=24 with margin "0px". */
    .ah-security { width: min(var(--ah-container), 100%); }
    .ah-security-grid article { font-size: 12px; line-height: 18px; }
    .ah-security-grid b { margin-bottom: 20px; }
    .ah-security-grid article p { font-size: 12px; line-height: 18px; }

    /* P-P01..P-P06 at 390 (measured): the slab gutter drops to 20px, the heading steps to
       26/34 over two lines, the shell pins to 300px (auto margins resolve to 25px each
       side) and every row collapses to one column, so the cards stack and their heights
       become content-driven. */
    .ah-paths { padding: 96px 20px; }
    .ah-paths h2 { font-size: 26px; line-height: 34px; }
    .ah-path-shell { width: 300px; }
    .ah-path-inner { padding: 20px; }
    .ah-path-lead { height: 184px; }
    .ah-path-inner h3 { font-size: 16px; line-height: 24px; }
    .ah-path-orbit i { font-size: 32px; line-height: 140px; }
    .ah-path-detail > p { font-size: 12px; line-height: 18px; }
    .ah-path-cta { font-size: 12px; line-height: 18px; }
    .ah-path-fine { font-size: 10px; line-height: 14px; }
    /* P-FO05 at 390 (measured 310x1314.56): one column, and the brand column dissolves so
       its mark, legal paragraph and language switch each become their own grid row. */
    .ah-footer-brand { display: contents; }
  }
  /* P-P02..P-P06 at md = 768 (measured): each row becomes a 340px-tall two-column band —
     row one 1fr 1fr, row two 2fr 1fr — over a 20px gap, and the card padding drops to 20px.
     lg = 1024 restores the 40px padding and pins the shell to 1024px. */
  @media (width >= 768px) {
    .ah-path-row { grid-template-columns: 1fr 1fr; height: 340px; }
    .ah-path-row:last-child { grid-template-columns: 2fr 1fr; }
    .ah-path-inner { padding: 20px; }
    .ah-path-lead { height: 250px; }
    .ah-paths h2 { font-size: 32px; line-height: 38px; }
    .ah-path-inner h3 { font-size: 22px; line-height: 30px; }
    .ah-path-detail p { font-size: 12px; line-height: 18px; }
    .ah-path-cta { font-size: 14px; line-height: 20px; }
    .ah-path-fine { font-size: 10px; line-height: 14px; }
  }
  @media (width >= 1024px) {
    .ah-path-inner { padding: 40px; }
    .ah-path-inner h3 { font-size: 26px; line-height: 36px; }
    .ah-path-action { width: 182.61px; }
    .ah-path-detail > p { font-size: 16px; line-height: 24px; }
    .ah-path-cta { font-size: 16px; line-height: 24px; }
    .ah-path-fine { font-size: 12px; line-height: 16px; }
    /* P-S04/P-S05 at lg (measured): the story copy's body returns to 16/24. */
    .ah-story-copy p { font-size: 16px; line-height: 24px; }
  }
  /* D9 — expanding a card swaps the two rows' column templates, measured in §6.6. The
     expanded card's detail fades in; Escape deliberately does not reverse it, which is
     both the replication contract and a usability defect of the source site. */
  @media (width >= 768px) {
    .ah-path-grid[data-open] .ah-path-row:first-child { grid-template-columns: 2fr 1fr; }
    .ah-path-grid[data-open] .ah-path-row:last-child { grid-template-columns: 1fr 1fr; }
  }
  /* P-FO03 at md = 768 (measured 688x708): the grid drops to three equal 216px columns and
     two rows of 252px and 416px. lg = 1024 restores five columns and pins the single row to
     the measured 416px, which is what the reference's ten-link column reaches on its own. */
  @media (width >= 768px) {
    /* D18 (user, 2026-09-24): the footer's Legal and placeholder columns are hidden, leaving the
       brand column plus Product and Resources. The track count follows the visible children so
       the row is not padded out with an empty band; the 416px row keeps the measured footer
       height, which is what the document-height contract depends on. */
    .ah-footer-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: 416px; }
  }
  @media (width >= 1024px) {
    .ah-footer-grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 416px; }
    /* P-FO04 at lg (measured): a column's list is sized by its own longest link, not by the
       grid track it sits in. The reference proves it — its Developers list is 195.91px wide
       inside a 155.703px track, i.e. it overflows rather than shrink. Sizing to max-content
       is what makes the Product list 79.94px instead of the 155.719px track it would
       otherwise fill. Below lg the list is full-width instead (216px at md, 310px at 390). */
    .ah-footer-grid ul { width: max-content; }
  }
  /* P-T01..P-T06 responsive contract (measured). Mobile-first so each breakpoint
     only states what it changes: md = 768 (Tailwind), lg = 1024. At md the track drops
     into the middle grid column and the arrows move up beside it, the dot row spans every
     column, the card padding goes to 32/40 and the type scale steps to 26/34 + 14/20. */
  @media (width >= 768px) {
    .ah-trusted { padding-top: 160px; }
    .ah-trusted h2 { font-size: 26px; line-height: 34px; }
    .ah-quote { min-height: 472px; padding: 32px 40px; }
    .ah-quote blockquote p { font-size: 26px; line-height: 34px; }
    .ah-quote-author { grid-template-columns: 60px minmax(0, 1fr) auto; font-size: 14px; line-height: 20px; }
    .ah-quote-link { grid-column: 3; }
    .ah-carousel-items { grid-column: 2; }
    .ah-carousel-arrow { grid-row: 1; }
    .ah-carousel-dots { grid-column: 1 / -1; }
    /* P-C08 md = 768: the chip steps to 14/20 over an 8/16 padding and a 32px height, and
       its inset grows from 12px to 20px. */
    .ah-stage-chip { top: 20px; height: 32px; font-size: 14px; line-height: 20px; }
    .ah-stage-chip-start { left: 20px; }
    .ah-stage-chip-end { right: 20px; }
  }
  /* lg = 1024 (Tailwind): the card padding jumps to 64/80 and the quote type to 32/44
     over a 20/30 author row — at 1024 the reference is already on the lg scale. The card
     box itself is pinned because D7 forbids inventing the customer proof that would fill it,
     so the slot keeps the reference's height per breakpoint and the placeholder text sits
     centred inside it. */
  @media (width >= 1024px) {
    /* P-C10 at 1440 (measured 146 = 30 + 12 + 48 inside a 28px padding): the reference
       card separates its title from its body by 12px, so the body carries the offset
       instead of leaving the slack at the bottom of the box. */
    .ah-capability-tabs span { margin-top: 10px; }
    .ah-quote { min-height: 582px; padding: 64px 80px; }
    .ah-quote blockquote p { font-size: 32px; line-height: 44px; }
    .ah-quote-author { font-size: 20px; line-height: 30px; }
  }
  /* md = 768 for the CTA: heading 32/38, lead 18/28, pill type 14/20 and a 96px top margin.
     lg = 1024 only bumps the pill type to 16/24 — the reference proves it, because the
     1024 and 1440 pills share a 159.47px width while 768 drops to 148.05px. */
  @media (width >= 768px) {
    .ah-cta h2 { margin-top: 96px; font-size: 32px; line-height: 38px; }
    .ah-cta-inner > p { font-size: 18px; line-height: 28px; }
    .ah-cta-button { font-size: 14px; line-height: 20px; }
  }
  @media (width >= 1024px) {
    .ah-cta-button { font-size: 16px; line-height: 24px; }
    /* P-C08 lg = 1024: the chip takes its largest scale — 16/24 over a 12/20 padding and a
       44px height, which is what the 1440 and 1024 viewports share. */
    .ah-stage-chip { height: 44px; padding: 12px 20px; font-size: 16px; line-height: 24px; }
  }
  /* xl = 1280: only the 1440 viewport reaches it — the heading steps to 32/44, the carousel
     gap doubles to 80px, and the CTA takes its largest type scale. Listed last so it wins
     over the md/lg rules above at 1440. */
  @media (width >= 1280px) {
    .ah-paths h2 { font-size: 40px; line-height: 50px; }
    .ah-trusted h2 { font-size: 32px; line-height: 44px; }
    .ah-carousel { gap: 80px; }
    .ah-quote { min-height: 450px; }
    .ah-cta h2 { font-size: 40px; line-height: 50px; }
    .ah-cta-inner > p { font-size: 20px; line-height: 30px; }
  }
  /* Reduced motion (measured, checklist §6): the reference stops animations but keeps
     transitions — 0.15s / 0.3s survive, and the rotating slot's 0.7s wipe still runs at the
     same cadence. Zeroing transition-duration was our own a11y default, not this contract. */
  @media (prefers-reduced-motion: reduce) { .ah-home *, .ah-home *::before, .ah-home *::after { scroll-behavior: auto; animation: none; } }
}