/* Marketing site layout. Class prefix: site-
   ------------------------------------------------------------------------
   Page furniture, not design-system components: these compose cld-* parts
   into the homepage. Same contract as components.css — every value resolves
   to a token, nothing is hardcoded, and every breakpoint literal mirrors a
   --bp-* token from tokens/spacing.css.

   This file exists because the kit previously carried its layout as inline
   style objects. Inline styles win over the stylesheet, which silently broke
   the documented link hover across all 18 links on the page. */

.wrap{width:100%;max-width:var(--width-max);margin:0 auto;padding:0 var(--gutter-page)}

/* The header is sticky, so anything the browser scrolls to the top of the
   viewport lands underneath it — in-page anchors, and per WCAG 2.4.11 any
   element sequential focus navigation brings into view. scroll-padding-top on
   the scroll container clears both.

   This holds a constant only because the header's height is a constant wherever
   it is sticky: above --bp-md it is a single 68px row, and at or below that it
   stops being sticky (see the breakpoint block), so there is nothing to clear.
   If the header ever reflows while sticky, this number stops being true. */
:root{--site-header-h:69px}
html{scroll-padding-top:calc(var(--site-header-h) + var(--space-4))}

/* A grid/flex item's default min-width:auto is its content's intrinsic width,
   so one wide child (the evidence table) drags its whole track past 1fr and
   the page scrolls sideways even though every grid collapsed correctly.
   min-width:0 lets the track actually be 1fr and hands overflow to the child
   that owns it — .cld-tablewrap, which has its own scroll container. */
.site-hero__inner>*,.site-split>*,.site-cards>*,.site-steps>*,
.site-footer__grid>*,.site-contact>*,.site-form>*{min-width:0}
.cld-tablewrap{min-width:0}

/* ---- Header ---------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ink-800) 92%,transparent);backdrop-filter:var(--blur-veil);border-bottom:1px solid var(--border-inverse)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-10);min-height:68px}
.site-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}

.site-wordmark{font-family:var(--font-display);font-size:var(--size-title-3);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-title);color:var(--bone-000);line-height:1.1;flex:none}
.site-wordmark--lg{font-size:var(--size-title-2)}
.site-wordmark__dash{color:var(--cinnabar-400)}

.site-nav{display:flex;gap:var(--space-8);margin-left:var(--space-6)}
/* Links here are chrome, not prose: no resting underline, but they must still
   answer the hover. Previously these carried inline colour, so a:hover in the
   base layer could never apply. */
.site-nav__link,.site-footer__link,.site-lang{border-bottom:1px solid transparent;transition:var(--transition-control)}
/* min-height/min-width, not padding: WCAG 2.2's 24x24 minimum measures the
   target, and a 12px line of text is nowhere near it on its own. */
.site-nav__link,.site-lang{display:inline-flex;align-items:center;min-height:24px}
.site-nav__link{font:var(--text-copy-sm);color:var(--ink-100)}
.site-nav__link:hover,.site-nav__link[aria-current="page"]{color:var(--bone-000);border-bottom-color:currentColor}
.site-lang{justify-content:center;min-width:32px;font:var(--text-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-300)}
.site-lang:hover{color:var(--bone-000);border-bottom-color:currentColor}
.site-footer__link{min-height:24px;display:inline-flex;align-items:center}

/* Routes that do not exist yet. Rendered as text, not as a link to "#":
   a link that announces itself and then goes nowhere is worse than a label.
   Give them a real href and drop the modifier to turn them back into links. */
.site-nav__link--pending,.site-footer__link--pending{color:var(--ink-300);cursor:default}

/* ---- Sections -------------------------------------------------------- */
.site-section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.site-section--band{background:var(--surface-card);padding-top:var(--space-16);padding-bottom:var(--space-16)}
.site-section--band-top{border-top:1px solid var(--border-hairline)}
.site-section--band-bottom{border-bottom:1px solid var(--border-hairline)}
.site-section--inverse{background:var(--ink-800)}

.site-h2{font:var(--text-headline);letter-spacing:var(--tracking-display);max-width:22ch}
.site-h2--onInverse{color:var(--bone-000)}
.site-h2--tight{max-width:20ch}
.site-lede{font:var(--text-copy-lg);color:var(--text-body);max-width:var(--measure-prose)}
.site-lede--muted{color:var(--text-muted);font:var(--text-copy)}
.site-eyebrow--accent{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--cinnabar-400)}
/* Same reasoning as the :lang(zh) block in tokens/base.css — uppercase is a
   no-op on Han glyphs and only makes the tracking read as broken spacing. */
:lang(zh) .site-eyebrow--accent,
:lang(zh) .site-footer__head,
:lang(zh) .site-endorsement,
:lang(zh) .site-alliance__chip{text-transform:none}
.site-stack{margin-top:var(--space-4)}
.site-stack-lg{margin-top:var(--space-10)}

/* ---- Hero ------------------------------------------------------------ */
.site-hero{position:relative;overflow:hidden;background:var(--ink-800);color:var(--ink-100);padding-top:var(--section-y);padding-bottom:var(--section-y)}
/* No brightness lift here. The footage's own highlights — dockside sodium
   lamps, the pharmacy cross — are the brightest thing on the page, and boosting
   them pushed the metric captions to 1.01:1 against the worst frame of the
   loop. Saturation and a little contrast keep the grade without the blowout. */
.site-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(1.12) contrast(1.02)}
/* Weighted for where the text actually sits. The previous ramp started at 22%
   and only reached 62% at the very bottom of the section — below the fold of
   the content — so the headline and metrics sat on the thinnest part of it.
   Verified against the brightest pixel behind every hero element, sampled at
   six points across the 9s loop: worst case is now 3.4:1 on the accent headline
   (large text, needs 3) and 5.3:1 on the smallest caption (needs 4.5), on both
   the English and Chinese homepages. */
.site-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--ink-900) 58%,transparent) 0%,color-mix(in srgb,var(--ink-900) 68%,transparent) 55%,color-mix(in srgb,var(--ink-900) 76%,transparent) 100%)}
.site-hero__motif{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(var(--border-inverse) 1px,transparent 1px),linear-gradient(90deg,var(--border-inverse) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(120% 90% at 78% 20%,#000,transparent 72%);-webkit-mask-image:radial-gradient(120% 90% at 78% 20%,#000,transparent 72%)}
.site-hero__inner{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:var(--space-16);align-items:end}
.site-hero__title{font-size:var(--size-display-1);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--bone-000);margin-top:var(--space-6)}
.site-hero__title-accent{color:var(--cinnabar-400)}
.site-hero__lede{margin-top:var(--space-6);font:var(--text-copy-lg);color:var(--ink-100);max-width:58ch}
.site-hero__actions{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.site-hero__metrics{display:grid;gap:var(--space-8);padding-bottom:var(--space-2)}
/* Over footage, "muted" has to be less muted. --text-faint (ink-300) and
   cinnabar-400 are correct on the flat inverse ground everywhere else on the
   page and stay put there; against the video's bright passes they were the last
   two failures after the scrim was fixed. Scoped to the hero on purpose — this
   is a property of the photographic ground, not of the tokens. */
.site-hero .cld-metric__foot{color:var(--ink-200)}
.site-hero .site-eyebrow--accent{color:var(--cinnabar-200)}
/* WCAG 2.2.2. Sits above the scrim so it is reachable and legible over any
   frame of the video; the ink fill guarantees the label's contrast rather than
   leaving it to whatever the footage happens to be showing. */
.site-hero__videotoggle{position:absolute;right:var(--gutter-page);bottom:var(--space-5);z-index:2;display:inline-flex;align-items:center;min-height:var(--control-h-sm);padding:0 var(--space-3);background:color-mix(in srgb,var(--ink-900) 78%,transparent);color:var(--bone-000);border:1px solid var(--border-strong);border-radius:var(--radius-control);font-family:var(--font-sans);font-size:var(--size-label);font-weight:var(--weight-medium);cursor:pointer;transition:var(--transition-control)}
.site-hero__videotoggle:hover{background:var(--ink-900);border-color:var(--bone-000)}
.site-hero__videotoggle:focus-visible{outline:none;box-shadow:var(--focus-ring-inverse)}

/* The video is decoration. Under reduced-motion it is removed outright — the
   ink ground, scrim and grid motif already carry the hero on their own. */
@media (prefers-reduced-motion:reduce){
  .site-hero__video{display:none}
}

/* ---- Split (headline beside prose) ----------------------------------- */
.site-split{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-16);align-items:start}
.site-split--evidence{grid-template-columns:1fr 1.5fr;gap:var(--space-12)}
.site-prose{display:grid;gap:var(--space-5);max-width:var(--measure-prose)}

/* ---- Capability cards ------------------------------------------------ */
.site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.site-capability__title{margin-top:var(--space-4);font:var(--text-subtitle);font-family:var(--font-sans);color:var(--text-strong)}
.site-capability__body{margin-top:var(--space-3);font:var(--text-copy-sm);color:var(--text-muted)}

/* ---- Method steps ---------------------------------------------------- */
/* An <ol>: the steps are a sequence, and 01–04 are already on screen, so the
   list's own markers are suppressed rather than doubled up. */
.site-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);margin:var(--space-10) 0 0;padding:0;list-style:none}
.site-step{border-top:2px solid var(--cinnabar-500);padding-top:var(--space-5)}
.site-step__num{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label);color:var(--cinnabar-400)}
/* Same fall-through as .site-contact__title: font-* set piecemeal, so leading
   came from the body. Most visible on step 03, whose two-line title opened a
   gap wide enough to read as two separate headings. */
.site-step__title{margin-top:var(--space-3);font-family:var(--font-display);font-size:var(--size-title-2);line-height:var(--leading-snug);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-title);color:var(--bone-000)}
.site-step__body{margin-top:var(--space-3);font:var(--text-copy-sm);color:var(--ink-200)}

/* ---- Contact band ---------------------------------------------------- */
.site-contact{display:flex;align-items:center;justify-content:space-between;gap:var(--space-10)}
/* line-height explicitly, because this rule sets font-size on its own rather
   than going through the `font:` shorthand the way .site-h2 does — so leading
   fell through to the body's --leading-loose and this heading alone sat at 1.62
   while every other display heading on the page was at 1.22. */
.site-contact__title{font-size:var(--size-title-1);line-height:var(--leading-snug);letter-spacing:var(--tracking-title)}
.site-contact__body{margin-top:var(--space-3);font:var(--text-copy);color:var(--text-muted);max-width:56ch}

/* ---- Footer ---------------------------------------------------------- */
.site-footer{background:var(--ink-900);color:var(--ink-200);padding-top:var(--space-16);padding-bottom:var(--space-10)}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-10)}
.site-footer__tagline{margin-top:var(--space-4);font:var(--text-copy-sm);color:var(--ink-200);max-width:36ch}
.site-footer__head{font:var(--text-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-300)}
.site-footer__links{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.site-footer__link{font:var(--text-copy-sm);color:var(--ink-100)}
.site-footer__link:hover{color:var(--bone-000);border-bottom-color:currentColor}
.site-footer__legal{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--border-inverse);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;font:var(--text-copy-sm);font-size:var(--size-label);color:var(--ink-300)}

.site-alliance{margin-top:var(--space-5);display:inline-flex;border-radius:var(--radius-pill);overflow:hidden}
.site-alliance__chip{font:var(--text-eyebrow);font-family:var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:var(--space-1) var(--space-3)}
.site-alliance__chip--cn{background:var(--cinnabar-500);color:var(--bone-000)}
.site-alliance__chip--gold{background:var(--gold-500);color:var(--ink-800);padding-left:var(--space-2);padding-right:var(--space-2)}
.site-alliance__chip--br{background:var(--jade-600);color:var(--bone-000)}
.site-endorsement{margin-top:var(--space-2);font:var(--text-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-300)}

/* ---- Contact dialog form grid ---------------------------------------- */
.site-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.site-form__full{grid-column:1 / -1}
/* Failed submit: one alert naming every problem, ahead of the fields, with a
   link to each. Focus lands here so the failure is announced instead of the
   submit button appearing to do nothing. */
.site-form__summary{margin-bottom:var(--space-5);padding:var(--space-4);border:1px solid var(--cinnabar-500);border-left-width:3px;border-radius:var(--radius-control);background:var(--surface-accent-soft)}
.site-form__summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.site-form__summary-title{font:var(--text-copy-sm);font-weight:var(--weight-semibold);color:var(--text-strong)}
.site-form__summary-list{margin:var(--space-2) 0 0;padding-left:var(--space-5);font:var(--text-copy-sm);color:var(--text-body)}
.site-form__summary-list a{color:var(--cinnabar-700)}
.site-toastdock{position:fixed;right:var(--space-6);bottom:var(--space-6);left:auto;z-index:80}

/* ======================================================================
   Breakpoints. Literals mirror --bp-* in tokens/spacing.css.
   ====================================================================== */

@media (max-width:1024px){ /* --bp-lg */
  .site-hero__inner{grid-template-columns:1fr;gap:var(--space-12);align-items:start}
  .site-hero__metrics{grid-template-columns:repeat(3,1fr);gap:var(--space-6);padding-bottom:0}
  .site-split,.site-split--evidence{grid-template-columns:1fr;gap:var(--space-8)}
  .site-cards{grid-template-columns:repeat(2,1fr)}
  .site-steps{grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-10)}
  .site-h2,.site-h2--tight{max-width:28ch}
}

@media (max-width:768px){ /* --bp-md */
  /* Nav drops to its own row and wraps. Five short labels fit in two lines at
     320px, so wrapping beats a scroller: no item is clipped, nothing needs a
     scroll affordance, and no disclosure JS is involved.

     That wrapping makes the header ~193px at 375px. Sticking 193px of chrome to
     the top of an 812px phone viewport costs a quarter of the screen and buries
     every anchor target behind it, so below --bp-md the header scrolls away
     with the page. --site-header-h drops to 0 to match: nothing to clear. */
  :root{--site-header-h:0px}
  .site-header{position:static}
  .site-header__inner{flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-3);padding-bottom:var(--space-3)}
  .site-nav{order:3;width:100%;margin-left:0;gap:var(--space-3) var(--space-5);flex-wrap:wrap}
  .site-nav__link{white-space:nowrap}
  .site-header__actions{gap:var(--space-2)}

  .site-hero__metrics{grid-template-columns:1fr;gap:var(--space-5)}
  .site-hero__lede{max-width:none}
  .site-cards{grid-template-columns:1fr}
  .site-steps{grid-template-columns:1fr;gap:var(--space-6)}
  .site-contact{flex-direction:column;align-items:flex-start;gap:var(--space-6)}
  .site-footer__grid{grid-template-columns:1fr;gap:var(--space-8)}
  .site-footer__tagline{max-width:none}
  .site-footer__legal{flex-direction:column;gap:var(--space-2)}
  .site-form{grid-template-columns:1fr}
  .site-toastdock{right:var(--space-4);left:var(--space-4);bottom:var(--space-4)}
  .site-h2,.site-h2--tight{max-width:none}
}

@media (max-width:480px){ /* --bp-sm */
  .site-hero__actions .cld-btn{width:100%}
  .site-alliance{flex-wrap:wrap}
}