/* Variant F, round 4. Colours come from brand.css (the logo's palette), loaded after this file. */
:root { --side: 328px; --text-display: clamp(2.75rem, 4.6vw + 0.5rem, 5.25rem); --text-lead: clamp(1.125rem, 0.3vw + 1rem, 1.3125rem); --nav-h: 64px; }

/* ---------- hero: the real copy, light paper or the factory video ---------- */
.fhero { position: relative; isolation: isolate; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding: calc(60px + var(--nav-h) + 24px) 0 64px; }
.fhero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--brand-low); opacity: 0; }
.fhero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the reverse vignette: darkest under the copy, the edges keep their light */
.fhero__shade { position: absolute; inset: 0; opacity: 0.9; background: radial-gradient(ellipse 62% 58% at 50% 46%, rgb(12 17 22 / 0.78) 0%, rgb(12 17 22 / 0.7) 45%, rgb(12 17 22 / 0.34) 80%, rgb(12 17 22 / 0.22) 100%); }
html[data-hero="video"] .fhero__media { opacity: 1; }
.fnav { position: absolute; inset: 60px 0 auto; z-index: 6; }
.fnav__pill { display: flex; align-items: center; gap: var(--space-lg); width: min(100% - 2 * (var(--gutter) - 16px), var(--content) + 32px); min-height: var(--nav-h); margin-inline: auto; padding: 0 16px; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.66); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.75), 0 8px 24px -12px rgb(17 26 35 / 0.22); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
html[data-hero="video"] .fnav__pill { background: rgb(245 247 250 / 0.82); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 10px 30px -16px rgb(12 17 22 / 0.5); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.fnav__mark { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; color: var(--color-ink); text-decoration: none; }
.fnav__mark .wordmark { width: auto; height: 22px; }
.fnav__links { display: flex; gap: 4px; margin-inline: auto; }
.fnav__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; }
.fnav__links a:hover { background: rgb(17 26 35 / 0.06); }
.fbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-primary-ink); font-weight: 500; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.fbtn:hover { background: var(--color-primary-hover); }
.fbtn--nav { min-height: 44px; padding: 0 16px; font-size: var(--text-sm); }
.fbtn:focus-visible, .flink:focus-visible, .fnav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.flink { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.fhero__copy { position: relative; z-index: 6; }
.fhero__text { display: grid; justify-items: center; gap: var(--space-lg); width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; }
.fhero__title { max-width: 16ch; margin: 0; font-size: var(--text-display); font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.fhero__lede { max-width: 46ch; margin: 0; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); text-wrap: pretty; }
.fhero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm) var(--space-md); }
html[data-hero="video"] .fhero__title, html[data-hero="video"] .fhero__lede, html[data-hero="video"] .flink { color: var(--color-paper); }
html[data-hero="video"] .flink { text-decoration-color: rgb(245 247 250 / 0.7); }
html[data-hero="video"] .fhero__actions .fbtn { background: var(--color-paper); color: var(--color-ink); }
html[data-hero="video"] .fhero__actions .fbtn:hover { background: var(--color-paper-3); }

/* ---------- the home page's blocks (index.html, site.css inside them); the belt keeps to the side column ---------- */
.fs { position: relative; padding-block: 112px; }
.fs__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--gap-columns); align-items: start; }
.fs[data-lane="L"] .fs__grid { grid-template-columns: var(--side) minmax(0, 1fr); }
.fs[data-lane="L"] .fs__side { order: -1; }
.fs__main { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; container: hb / inline-size; }
/* a block fills the main column: its own container drops the page gutters, the band keeps its own spacing */
.fs--hb { padding-block: 0; }
.fs__main .container { max-width: none; padding-inline: 0; }
.fs__side { position: relative; z-index: 2; display: grid; justify-items: center; align-self: center; }   /* above the route: the line disappears inside a frame */

/* station frames: dashed, opaque like the block under them, the step as a small label inside */
.fframe { position: relative; width: 312px; height: 248px; border-radius: var(--radius-window); background: var(--color-paper); }
.fframe__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fframe__outline path { fill: none; stroke: var(--route); stroke-width: 1.5; }
.fframe__label { position: absolute; top: 12px; left: 16px; font-size: 12px; font-weight: 500; color: var(--color-ink-2); }
.fframe__label b { margin-right: 4px; font-weight: 500; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* the route: one thin line; the frames' dashes are the same colour, a little heavier.
   Static: no draw-on, no scroll link. Its stroke is a gradient in page space, transparent at the start point and
   solid 100 px lower (f.js), so only the line's first 100 px fade. */
.f-route .track__line { fill: none; stroke: url(#route-fade); stroke-width: 1; stroke-linejoin: round; }   /* CSS, so base.css .track__line cannot override it */
.route-stop { stop-color: var(--track); }   /* the colour the line has always shown */

/* ---------- hero ring ---------- */
.f-pile__in { position: absolute; inset: 0; will-change: transform; }
.f-bit { position: absolute; top: 0; left: 0; will-change: transform, opacity; }
.scene--still .f-bit { will-change: auto; }

/* ---------- the object: one card format for every state (.o-station in brand.css) ---------- */

/* ---------- finale: the CTA frame (final.css); the route ends in its dock ---------- */
.fs--final { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; }
.fs--final > .container { position: relative; z-index: 0; }

/* ---------- phone: no belt; frames become small station cards in the flow, the object rides in the corner ---------- */
@media (max-width: 47.5rem) {
  .fhero { padding-top: calc(60px + var(--nav-h) + 16px); align-content: start; }
  .fnav__links { display: none; }
  .fnav__pill { justify-content: space-between; }
  .fhero__title { font-size: clamp(2.5rem, 10.5vw, 3rem); }
  .fhero__actions { flex-direction: column; width: 100%; }
  .fhero__actions .fbtn { width: 100%; }
  .fs { padding-block: 72px; }
  .fs__grid, .fs[data-lane="L"] .fs__grid { grid-template-columns: minmax(0, 1fr); }
  .fs[data-lane="L"] .fs__side { order: 0; }
  .fframe { width: 100%; max-width: 320px; height: 84px; }
  .fs__side:empty { display: none; }
  .plate [data-hero-mode] { min-width: 0; padding: 0 8px; }
}

/* footer: a thin row (©, section links, email), then the wordmark across the container, cut by the page's bottom edge.
 * It stands on the page ground right under the chat window: no plate, no second call to action, the route stops above it. */
.fs--final { padding-bottom: 0; }
.ffoot { margin-top: 72px; color: var(--color-ink-2); font-size: var(--text-sm); }
.ffoot__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 16px 40px; }
.ffoot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.ffoot a { color: var(--color-ink-2); text-decoration: none; }
.ffoot a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.ffoot a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.ffoot .ffoot__mail { color: var(--color-ink); font-weight: 500; }
.ffoot__copy { color: var(--color-muted); }
.ffoot__wm { height: clamp(64px, 13.6vw, 196px); margin-top: 48px; overflow: hidden; color: var(--color-ink); line-height: 0; }
.ffoot__wm svg { display: block; width: 100%; height: auto; }
@media (max-width: 47.5rem) {
  .ffoot__row { grid-template-columns: minmax(0, 1fr); }
  .ffoot__links { justify-content: start; }
  .ffoot__wm { margin-top: 36px; }
}