/* ============================================================================
   FitCheck marketing site: stylesheet for index-new.html

   Translated from design_handoff_site/design/FitCheck Website.dc.html, which is
   a design-tool template (it uses {{ bindings }}, <sc-if>/<sc-for>, style-hover
   attributes and CDN <ion-icon> elements) and cannot run outside its runtime.
   Every colour, size, radius and timing below is the value from that prototype
   or from design_handoff_site/README.md, which is authoritative.

   Loads after tokens.css. The marketing CSP is script-src 'self', so all
   behaviour lives in same-origin .js files; style-src allows 'unsafe-inline'
   so one-off inline style attributes are still fine in the markup.

   Two things the prototype drove from JS off `window.innerWidth < 760` are
   media queries here instead (the nav swap and the 44px tap targets). The
   result is identical and it removes a layout dependency on JS. Everything
   else follows README §1: no media queries for layout, every grid is
   repeat(auto-fit, minmax(min(100%, Npx), 1fr)).
   ========================================================================== */

/* ---------------------------------------------------------------- fonts ---
   DM Serif Display is self-hosted from the repo. The other four families come
   from Google Fonts, which the marketing CSP already allows explicitly
   (style-src ... https://fonts.googleapis.com; font-src 'self'
   https://fonts.gstatic.com in firebase.json). Self-hosting the remaining four
   is still worth doing for performance and privacy; it needs the woff2 files
   downloaded into assets/fonts first. */
@font-face {
  font-family: 'DM Serif Display';
  src: url('assets/fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- base --- */
* { box-sizing: border-box; }

/* Load-bearing. Almost everything JS toggles with the `hidden` attribute also
   carries a display rule below (flex/grid/block), and a class selector beats
   the UA's `[hidden] { display: none }`. Without this the detail panel, the
   empty states and the spent-deck panel would all show at once. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fc-bg);
  color: var(--fc-text-primary);
  font-family: var(--fc-font-sans);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* overflow-x: clip rather than hidden. Hidden on an ancestor silently kills
   position: sticky, which both pinned sections depend on. */
.fc-root { background: var(--fc-bg); min-height: 100vh; overflow-x: clip; }

a { color: var(--fc-navy); text-decoration: none; }
a:hover { color: var(--fc-accent-deep); }
img { display: block; max-width: 100%; }
input, button, select { font: inherit; color: inherit; }
input:focus { outline: none; }
::selection { background: var(--fc-accent); color: var(--fc-navy-deep); }

:focus-visible { outline: 2px solid var(--fc-navy); outline-offset: 2px; }

.fc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.fc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--fc-navy-deep); color: #FFFFFF;
  padding: 12px 18px; border-radius: 0 0 var(--fc-radius-md) 0; font-weight: 600;
}
.fc-skip:focus { left: 0; color: #FFFFFF; }

/* Icons. Drawn here as stroke geometry rather than pulled from a CDN icon
   font, because the CSP forbids the CDN and the prototype's <ion-icon> elements are
   runtime components, not markup we can lift. */
.fc-i { width: 1em; height: 1em; display: block; flex: none; fill: none;
        stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
        stroke-linejoin: round; }
.fc-i--solid { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------ container --- */
.fc-wrap {
  max-width: var(--fc-container);
  margin: 0 auto;
  padding: 0 var(--fc-gutter);
}

.fc-sec { position: relative; padding: var(--fc-section-top) 0 var(--fc-section-bottom); }
.fc-sec--surface { background: var(--fc-surface); border-top: 1px solid var(--fc-border); }
.fc-sec--navy { background: var(--fc-navy-deep); color: #FFFFFF; }

/* Numbered overline: 01 · 52px rule · LABEL */
.fc-over { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.fc-over-n,
.fc-over-t {
  font-family: var(--fc-font-mono);
  font-size: var(--fc-overline);
  letter-spacing: .16em;
}
.fc-over-n { color: var(--fc-accent-deep); }
.fc-over-t { color: var(--fc-text-secondary); }
.fc-over-r { width: 52px; height: 1px; background: var(--fc-border); }
.fc-sec--surface .fc-over-r { background: var(--fc-border-strong); }
.fc-sec--navy .fc-over-n { color: var(--fc-accent); }
.fc-sec--navy .fc-over-r { background: rgba(255, 255, 255, .16); }
.fc-sec--navy .fc-over-t { color: rgba(255, 255, 255, .42); }

.fc-h2 {
  margin: 0;
  font-size: var(--fc-h2);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--fc-text-primary);
}
.fc-sec--navy .fc-h2 { color: #FFFFFF; }

.fc-lede {
  margin: 0 0 8px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--fc-text-secondary);
  max-width: 490px;
}
.fc-sec--navy .fc-lede { color: rgba(255, 255, 255, .62); }

/* Head block: title left, lede right, collapsing to one column with no media
   query: min(100%, 330px) lets the track fall below its floor. */
.fc-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(26px, 5vw, 64px);
  align-items: end;
}

/* --------------------------------------------------------------- reveal --- */
[data-reveal] { will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ nav --- */
.fc-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.fc-nav-inner {
  position: relative;
  max-width: var(--fc-container);
  margin: 0 auto;
  padding: 12px var(--fc-gutter);
  min-height: 72px;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 2.8vw, 36px);
}
.fc-nav-link {
  display: flex; align-items: center;
  font-size: 15.5px; letter-spacing: -.01em; white-space: nowrap;
  color: var(--fc-text-secondary);
  transition: color .2s var(--fc-ease-micro);
}
.fc-nav-link:hover { color: var(--fc-text-primary); }
.fc-nav-link.is-active { color: var(--fc-accent-deep); }
.fc-nav-link.is-active:hover { color: var(--fc-navy); }
.fc-nav-mark { display: flex; align-items: center; flex: none; }
.fc-nav-mark span {
  font-family: var(--fc-font-wordmark);
  font-size: clamp(22px, 4.6vw, 28px);
  color: var(--fc-text-primary);
  letter-spacing: -.02em; white-space: nowrap;
}

/* Legal pages: wordmark left, one way back. No burger, so these pages need no
   JS at all beyond the stylesheet. */
.fc-nav--doc .fc-nav-inner { justify-content: space-between; }
.fc-nav-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; letter-spacing: -.01em; color: var(--fc-text-secondary); }
.fc-nav-back:hover { color: var(--fc-text-primary); }

.fc-burger {
  display: none; place-items: center;
  position: absolute; right: var(--fc-gutter); top: 14px;
  width: 44px; height: 44px; border-radius: var(--fc-radius-md);
  background: var(--fc-surface); border: 1px solid var(--fc-border);
  color: var(--fc-text-primary); cursor: pointer; font-size: 22px;
}
.fc-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--fc-bg);
  border-bottom: 1px solid var(--fc-border);
  box-shadow: 0 18px 40px rgba(15, 27, 48, .12);
}
.fc-menu.is-open { display: block; }
.fc-menu-link {
  display: flex; align-items: center; min-height: 52px;
  padding: 0 var(--fc-gutter);
  font-size: 16px; color: var(--fc-text-primary); letter-spacing: -.01em;
  border-top: 1px solid var(--fc-border);
  transition: background .2s var(--fc-ease-micro);
}
.fc-menu-link:hover { background: var(--fc-surface); color: var(--fc-text-primary); }
.fc-menu-cta {
  display: flex; align-items: center; justify-content: center; min-height: 56px;
  margin: 14px var(--fc-gutter) 18px;
  background: var(--fc-navy-deep); color: #FFFFFF;
  border-radius: var(--fc-radius-pill); font-size: 15.5px; font-weight: 600;
}
.fc-menu-cta:hover { color: #FFFFFF; background: #16243D; }

/* ----------------------------------------------------------------- hero --- */
.fc-hero { background: var(--fc-bg); color: var(--fc-text-primary); position: relative; }
/* min-height, not height: long copy grows instead of clipping. */
.fc-hero-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 75vh;
  padding: clamp(44px, 8vw, 96px) 0 clamp(36px, 5vw, 64px);
}
.fc-hero-col { width: 100%; max-width: 860px; }
.fc-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 20px; background: var(--fc-surface);
  border-radius: var(--fc-radius-pill);
  font-size: 15px; color: var(--fc-text-primary); letter-spacing: -.01em;
}
/* 22.5% is the iOS icon corner ratio. */
.fc-badge img { width: 22px; height: 22px; border-radius: 22.5%; flex: none; }

.fc-hero h1 {
  margin: 0;
  font-family: var(--fc-font-display);
  font-weight: 400;
  font-size: var(--fc-h1);
  line-height: 1.02;
  letter-spacing: -.02em;
  /* No hard <br>: a break chosen against the desktop column orphans on mobile. */
  text-wrap: balance;
}
.fc-hero-sub {
  margin: clamp(20px, 2.6vw, 32px) auto 0;
  max-width: 620px;
  font-size: var(--fc-lede);
  line-height: 1.36;
  color: var(--fc-text-secondary);
  letter-spacing: -.012em;
  text-wrap: balance;
}
.fc-hero-fine {
  margin-top: clamp(16px, 2vw, 26px);
  font-size: 14.5px; color: var(--fc-text-secondary); letter-spacing: -.005em;
}

/* --------------------------------------------------------- waitlist form --- */
.fc-form { margin: clamp(30px, 4.4vw, 56px) auto 0; max-width: 560px; text-align: left; }
.fc-form-stack { display: flex; flex-direction: column; gap: 10px; }
.fc-pill {
  display: flex; align-items: center; gap: 4px;
  background: var(--fc-bg);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-pill);
  padding: 0 22px;
  transition: border-color .2s var(--fc-ease-micro);
}
.fc-pill:focus-within { border-color: var(--fc-navy-deep); }
.fc-pill input {
  /* min-width: 0 is load-bearing. Without it the flex item cannot shrink below
     the input's intrinsic width and the submit button leaves the viewport. */
  flex: 1; min-width: 0;
  background: none; border: none; height: 56px;
  font-size: 16px; color: var(--fc-text-primary); letter-spacing: -.01em;
}
.fc-pill input::placeholder { color: var(--fc-text-tertiary); }
.fc-pill-at { font-size: 16px; color: var(--fc-text-tertiary); }
.fc-pill-hint { font-size: 12px; white-space: nowrap; color: var(--fc-text-secondary); }

.fc-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
/* min-width: 0 is what stops the button leaving the viewport, but on its own it
   also lets the field shrink to a ~30px stub rather than wrapping. The 200px
   flex-basis is the wrap trigger: once the field and button no longer both fit,
   the row breaks instead of crushing the field. */
.fc-form-row .fc-mail { flex: 1 1 200px; min-width: 0; }
.fc-submit {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--fc-navy); color: #FFFFFF;
  border: none; border-radius: var(--fc-radius-pill);
  padding: 0 30px; height: 56px;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  transition: background .2s, transform .2s var(--fc-ease-micro);
}
.fc-submit:hover { background: var(--fc-navy-deep); transform: translateY(-1px); }
.fc-form-err { font-size: 13px; color: var(--fc-like); }

/* dark variant, closing section */
.fc-form--dark .fc-pill {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.fc-form--dark .fc-pill:focus-within { border-color: var(--fc-accent); }
.fc-form--dark .fc-pill input { height: 54px; font-size: 15.5px; color: #FFFFFF; }
.fc-form--dark .fc-pill input::placeholder { color: rgba(255, 255, 255, .38); }
.fc-form--dark .fc-pill-at {
  font-family: var(--fc-font-mono); font-size: 15.5px; color: rgba(255, 255, 255, .4);
}
.fc-form--dark .fc-pill-hint {
  font-family: var(--fc-font-mono); font-size: 9px; letter-spacing: .11em;
  color: rgba(255, 255, 255, .34);
}
.fc-form--dark .fc-form-stack { gap: 8px; }
.fc-form--dark .fc-form-row { gap: 8px; }
.fc-form--dark .fc-submit {
  background: var(--fc-accent); color: var(--fc-navy-deep);
  height: 54px; font-size: 15.5px;
}
.fc-form--dark .fc-submit:hover { background: var(--fc-accent-hover); }
.fc-form--dark .fc-form-err {
  font-family: var(--fc-font-mono); font-size: 9.5px; letter-spacing: .11em;
}

/* --------------------------------------------------- app preview + phone --- */
.fc-preview {
  background: var(--fc-surface);
  padding: clamp(18px, 2.6vw, 32px) clamp(14px, 3vw, 32px) clamp(48px, 7vw, 88px);
}
.fc-preview-inner { max-width: var(--fc-container); margin: 0 auto; }
.fc-pin { position: relative; }
.fc-stick { position: sticky; top: 88px; }
.fc-stage {
  background: var(--fc-bg);
  border-radius: clamp(16px, 2.2vw, 28px);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 1.5vw, 18px);
  padding: clamp(18px, 2.4vw, 28px) 20px clamp(16px, 2vw, 24px);
  perspective: 1700px;
  perspective-origin: 50% 42%;
}
/* Hinges on its own bottom edge as it stands up. */
.fc-phone { transform-origin: 50% 100%; will-change: transform; backface-visibility: hidden; }
.fc-phone-shell {
  position: relative;
  width: min(340px, 86vw, 35vh);
  aspect-ratio: 1350 / 2760;
  filter: drop-shadow(var(--fc-shadow-phone));
}
/* The bezel PNG is 89.6% transparent: the aperture is a real cutout and the
   dynamic island and side buttons are opaque, so laying the frame OVER the DOM
   gives correct corner clipping and a real island for free. The insets were
   measured from the image's alpha channel; do not re-derive them by eye. */
.fc-bezel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.fc-screen {
  position: absolute;
  left: 5.407%; top: 3.043%;
  width: 89.111%; height: 93.877%;
  /* two-axis radius: the aperture is far taller than it is wide */
  border-radius: 12% / 5.6%;
  overflow: hidden;
  background: var(--fc-bg);
  /* Every interior size below is cqw against this box. The shell scales with
     vh, so fixed px chrome would break at every width except exactly 340px. */
  container-type: inline-size;
  display: flex; flex-direction: column;
  z-index: 1;
}
.fc-hint { font-size: 13.5px; color: var(--fc-text-secondary); letter-spacing: -.01em; text-align: center; }

/* ---- phone screen interior. Reference: screen = 303px wide, 1cqw ≈ 3.03px --- */
.ph-status {
  flex: none; height: 13.201cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6.601cqw;
}
.ph-time { font-size: 4.125cqw; font-weight: 600; color: var(--fc-text-primary); letter-spacing: -.01em; }
.ph-sys { display: flex; align-items: center; gap: 1.32cqw; color: var(--fc-text-primary); }
.ph-sys .fc-i { stroke-width: 1.6; }
.ph-sys-cell { font-size: 4.29cqw; }
.ph-sys-wifi { font-size: 4.29cqw; }
.ph-sys-batt { font-size: 5.281cqw; }

.ph-head { flex: none; padding: 1.98cqw 5.941cqw 0; }
.ph-head-row { display: flex; align-items: center; justify-content: space-between; gap: 3.3cqw; }
.ph-title {
  font-family: var(--fc-font-price); font-weight: 700;
  font-size: 8.581cqw; line-height: 1.1;
  color: var(--fc-text-primary); letter-spacing: -.02em;
}
.ph-head-tools { display: flex; align-items: center; gap: 2.31cqw; flex: none; }
.ph-refresh {
  width: 10.231cqw; height: 10.231cqw; border-radius: 50%;
  background: var(--fc-surface); border: none; color: var(--fc-text-secondary);
  cursor: pointer; display: grid; place-items: center; font-size: 4.95cqw;
  transition: color .2s var(--fc-ease-micro);
}
.ph-refresh:hover { color: var(--fc-text-primary); }
.ph-count {
  height: 10.231cqw; display: inline-flex; align-items: center;
  padding: 0 4.29cqw; border-radius: var(--fc-radius-pill);
  background: var(--fc-surface);
  font-size: 4.125cqw; font-weight: 600; color: var(--fc-text-primary);
  letter-spacing: -.01em; white-space: nowrap;
}
.ph-sub { font-size: 3.795cqw; color: var(--fc-text-secondary); margin-top: 1.65cqw; letter-spacing: -.01em; }
.ph-rule { height: 1px; background: var(--fc-border); margin-top: 3.63cqw; }

.ph-deck { flex: 1; min-height: 0; position: relative; margin: 4.29cqw 5.281cqw 0; }
.ph-ghost { position: absolute; inset: 0; border-radius: 6.601cqw; }
.ph-ghost--2 { transform: translateY(8.581cqw) scale(.9); background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); }
.ph-ghost--1 { transform: translateY(4.29cqw) scale(.95); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .10); }

.ph-card {
  position: absolute; inset: 0;
  border-radius: 6.601cqw; overflow: hidden;
  background: var(--fc-tone-navy-bg);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 7.921cqw 19.802cqw rgba(0, 0, 0, .45);
  cursor: grab;
  /* Without touch-action: none a touch drag scrolls the page instead. */
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.ph-card:active { cursor: grabbing; }
.ph-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ph-card img.is-contain { object-fit: contain; }

.ph-tile {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 9.901cqw; text-align: center;
}
.ph-tile-cat { font-family: var(--fc-font-mono); font-size: 3.135cqw; letter-spacing: .2em; margin-bottom: 5.281cqw; }
.ph-tile-brand { font-family: var(--fc-font-price); font-style: italic; font-size: 14.521cqw; line-height: 1; letter-spacing: -.02em; }
.ph-tile-rule { width: 11.221cqw; height: 1px; margin: 6.601cqw 0; }
.ph-tile-t { font-size: 4.29cqw; letter-spacing: .02em; max-width: 66.007cqw; line-height: 1.5; }

.ph-scrim-b { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.28) 45%, transparent); pointer-events: none; }
.ph-scrim-t { position: absolute; left: 0; right: 0; top: 0; height: 26.403cqw; background: linear-gradient(to bottom, rgba(0,0,0,.32), transparent); pointer-events: none; }

.ph-pips { position: absolute; top: 4.62cqw; left: 4.62cqw; right: 4.62cqw; display: flex; gap: 1.65cqw; pointer-events: none; }
.ph-pip { flex: 1; height: 0.825cqw; border-radius: 0.66cqw; background: rgba(255, 255, 255, .28); }
.ph-pip.is-on { background: rgba(255, 255, 255, .9); }

.ph-stamp {
  position: absolute; top: 19.802cqw; opacity: 0;
  border-width: 0.825cqw; border-style: solid;
  border-radius: 2.64cqw; padding: 1.65cqw 4.29cqw;
  font-family: var(--fc-font-mono); font-size: 4.95cqw; font-weight: 500; letter-spacing: .14em;
  pointer-events: none; background: rgba(15, 27, 48, .35); z-index: 3;
}
.ph-stamp--like { left: 6.601cqw; transform: rotate(-11deg); border-color: var(--fc-success); color: var(--fc-success); }
.ph-stamp--pass { right: 6.601cqw; transform: rotate(11deg); border-color: var(--fc-like); color: var(--fc-like); }

.ph-desc {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(11, 21, 38, .94);
  backdrop-filter: blur(3.96cqw); -webkit-backdrop-filter: blur(3.96cqw);
  padding: 7.261cqw;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none; animation: fcFade .22s ease;
}
.ph-desc-brand { font-family: var(--fc-font-mono); font-size: 2.97cqw; letter-spacing: .2em; color: var(--fc-accent); }
.ph-desc-t { font-size: 6.271cqw; font-weight: 600; letter-spacing: -.02em; color: #FFFFFF; margin-top: 3.3cqw; line-height: 1.25; }
.ph-desc-p { font-family: var(--fc-font-price); font-size: 8.251cqw; color: #FFFFFF; margin-top: 1.98cqw; }
.ph-desc-k { font-family: var(--fc-font-mono); font-size: 2.97cqw; letter-spacing: .2em; color: rgba(255, 255, 255, .4); margin-bottom: 3.96cqw; }
.ph-desc-d { font-size: 4.785cqw; line-height: 1.62; color: rgba(255, 255, 255, .88); }
.ph-desc-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3.96cqw; overflow: hidden; margin-top: 6.601cqw;
}
.ph-desc-spec { background: var(--fc-tone-navy-bg); padding: 3.3cqw 4.29cqw; }
.ph-desc-spec dt { font-family: var(--fc-font-mono); font-size: 2.805cqw; letter-spacing: .15em; color: rgba(255, 255, 255, .38); }
.ph-desc-spec dd { margin: 1.32cqw 0 0; font-size: 4.125cqw; font-weight: 500; color: #FFFFFF; }

.ph-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 6.601cqw; pointer-events: none; }
.ph-tags { display: flex; gap: 1.98cqw; margin-bottom: 3.96cqw; }
.ph-tag {
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(4.62cqw); -webkit-backdrop-filter: blur(4.62cqw);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--fc-radius-pill); padding: 1.32cqw 3.3cqw;
  font-family: var(--fc-font-mono); font-size: 2.97cqw; letter-spacing: .13em; color: #FFFFFF;
}
.ph-info-t { font-size: 5.611cqw; font-weight: 600; letter-spacing: -.02em; color: #FFFFFF; line-height: 1.25; }
.ph-info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 3.3cqw; margin-top: 2.97cqw; }
.ph-info-price { font-family: var(--fc-font-price); font-size: 6.931cqw; color: var(--fc-accent); letter-spacing: -.01em; white-space: nowrap; flex: none; }
.ph-info-meta {
  font-family: var(--fc-font-mono); font-size: 2.97cqw; letter-spacing: .07em;
  color: rgba(255, 255, 255, .66);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}

.ph-done {
  position: absolute; inset: 0; border-radius: 6.601cqw;
  background: var(--fc-tone-navy-bg); border: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 11.221cqw;
  box-shadow: 0 7.921cqw 19.802cqw rgba(0, 0, 0, .45);
  color: #FFFFFF;
}
.ph-done-n { font-family: var(--fc-font-price); font-size: 18.482cqw; line-height: 1; color: var(--fc-accent); }
.ph-done-k { font-family: var(--fc-font-mono); font-size: 3.3cqw; letter-spacing: .16em; color: rgba(255, 255, 255, .5); margin-top: 3.96cqw; }
.ph-done-t { font-size: 6.271cqw; font-weight: 600; letter-spacing: -.02em; margin-top: 7.261cqw; line-height: 1.3; }
.ph-done-p { margin: 3.3cqw 0 0; font-size: 4.455cqw; line-height: 1.6; color: rgba(255, 255, 255, .58); max-width: 75.908cqw; }
.ph-done-btn {
  margin-top: 7.921cqw; background: none;
  border: 1px solid rgba(255, 255, 255, .28); color: #FFFFFF;
  border-radius: var(--fc-radius-pill); padding: 3.3cqw 6.601cqw;
  font-size: 4.455cqw; font-weight: 500; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.ph-done-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }

.ph-actions { flex: none; display: flex; align-items: center; justify-content: center; gap: 5.941cqw; padding: 4.95cqw 0 4.29cqw; }
.ph-act {
  border-radius: 50%; background: var(--fc-bg); border: 1px solid var(--fc-border);
  cursor: pointer; display: grid; place-items: center;
  transition: transform var(--fc-dur-micro) var(--fc-ease-micro), background .2s, border-color .2s;
}
.ph-act:hover { transform: scale(1.07); }
.ph-act--pass { width: 15.182cqw; height: 15.182cqw; color: var(--fc-like); font-size: 7.591cqw; }
.ph-act--pass:hover { background: #FFF1F3; border-color: var(--fc-like); }
.ph-act--like { width: 15.182cqw; height: 15.182cqw; color: var(--fc-success); font-size: 6.931cqw; }
.ph-act--like:hover { background: #ECFDF5; border-color: var(--fc-success); }
.ph-act--eye { width: 12.871cqw; height: 12.871cqw; color: var(--fc-text-secondary); font-size: 6.271cqw; }
.ph-act--eye.is-on { background: var(--fc-navy); border-color: var(--fc-navy); color: #FFFFFF; }

.ph-tabs {
  flex: none; margin: 0 3.63cqw 2.97cqw; padding: 2.64cqw 1.98cqw;
  border-radius: 7.261cqw; background: var(--fc-surface);
  display: flex; align-items: center;
}
.ph-tab {
  display: flex; flex-direction: column; align-items: center; gap: 0.99cqw; flex: 1;
  font-size: 2.805cqw; letter-spacing: -.005em; color: var(--fc-text-tertiary);
  position: relative;
}
.ph-tab .fc-i { font-size: 5.611cqw; }
.ph-tab.is-active { color: var(--fc-text-primary); font-weight: 600; }
.ph-tab.is-active .fc-i { color: var(--fc-navy); }
.ph-badge {
  position: absolute; top: -0.99cqw; left: calc(50% + 1.65cqw);
  min-width: 5.281cqw; height: 5.281cqw; padding: 0 1.32cqw;
  border-radius: var(--fc-radius-pill); background: var(--fc-like); color: #FFFFFF;
  font-size: 3.135cqw; font-weight: 700; display: grid; place-items: center;
  animation: fcCardIn .26s cubic-bezier(.34, 1.56, .64, 1);
}
.ph-home { flex: none; height: 2.31cqw; display: grid; place-items: center; padding-bottom: 1.65cqw; }
.ph-home span { width: 34.323cqw; height: 1.32cqw; border-radius: var(--fc-radius-pill); background: var(--fc-text-primary); }

/* --------------------------------------------------------------- ticker --- */
.fc-ticker { background: var(--fc-bg); border-top: 1px solid var(--fc-border); border-bottom: 1px solid var(--fc-border); overflow: hidden; }
.fc-ticker-track { display: flex; width: max-content; animation: fcMarquee 46s linear infinite; }
.fc-ticker-item { display: flex; align-items: center; gap: 34px; padding: 0 17px; height: 54px; }
.fc-ticker-item span:first-child {
  font-family: var(--fc-font-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--fc-text-secondary); white-space: nowrap;
}
.fc-ticker-item.is-accent span:first-child { color: var(--fc-accent-deep); }
.fc-ticker-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fc-border-strong); flex: none; }
@media (prefers-reduced-motion: reduce) {
  .fc-ticker-track { animation: none; }
}

/* ------------------------------------------------- 01 · taste engine ------ */
.fc-panel { border: 1px solid var(--fc-border); border-radius: var(--fc-radius-panel); overflow: hidden; background: var(--fc-bg); }
.fc-panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--fc-border); background: var(--fc-surface);
}
.fc-panel-bar span { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .15em; color: var(--fc-text-secondary); }
/* Hairline-gap grid: gap 1px over a border-coloured background. Per-cell
   border-right leaves a dangling hairline once the columns stack. */
.fc-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr));
  gap: 1px; background: var(--fc-border);
}
.fc-col { padding: 30px 28px 34px; background: var(--fc-bg); display: flex; flex-direction: column; }
.fc-col--alt { background: #FCFCFC; }
.fc-col-k { font-family: var(--fc-font-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--fc-text-tertiary); margin-bottom: 22px; }
.fc-field-k { font-size: 12px; font-weight: 600; letter-spacing: -.005em; color: var(--fc-text-primary); margin-bottom: 10px; }
.fc-field-sub { font-size: 11.5px; color: var(--fc-text-secondary); margin-bottom: 10px; }

.fc-seg { display: flex; gap: 6px; margin-bottom: 26px; }
.fc-seg button {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1; padding: 9px 0; border-radius: var(--fc-radius-sm);
  border: 1px solid var(--fc-border); background: transparent; color: var(--fc-text-secondary);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s var(--fc-ease-micro);
}
.fc-seg button[aria-pressed="true"] { background: var(--fc-navy-deep); color: #FFFFFF; }

.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 13px; border-radius: var(--fc-radius-pill);
  border: 1px solid var(--fc-border); background: var(--fc-bg); color: var(--fc-text-primary);
  font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all .2s var(--fc-ease-micro);
}
.fc-chip[aria-pressed="true"] { background: var(--fc-navy-deep); border-color: var(--fc-navy-deep); color: #FFFFFF; }

.fc-slider-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.fc-slider-head span:first-child { font-size: 12px; font-weight: 600; color: var(--fc-text-primary); }
.fc-slider-val { font-family: var(--fc-font-mono); font-size: 12.5px; color: var(--fc-navy); }
.fc-slider { position: relative; height: 26px; display: flex; align-items: center; cursor: pointer; touch-action: none; padding: 0 7px; }
.fc-slider-track { position: absolute; left: 7px; right: 7px; height: 2px; background: var(--fc-border); border-radius: 2px; }
.fc-slider-fill { position: absolute; left: 7px; height: 2px; background: var(--fc-navy-deep); border-radius: 2px; transition: width .22s var(--fc-ease-micro); }
.fc-slider-ticks { position: absolute; left: 7px; right: 7px; height: 2px; display: flex; justify-content: space-between; align-items: center; }
.fc-slider-ticks span { width: 6px; height: 6px; border-radius: 50%; background: var(--fc-border-strong); }
.fc-slider-ticks span:first-child { margin-left: -3px; }
.fc-slider-ticks span:last-child { margin-right: -3px; }
.fc-slider-rail { position: absolute; left: 7px; right: 7px; height: 15px; pointer-events: none; }
/* No `top`: the static position centres it in whichever box holds it. Pinning
   top: 0 works inside the 15px rail but rides high in the taller browse track. */
.fc-slider-knob {
  position: absolute; width: 15px; height: 15px; margin-left: -7.5px;
  border-radius: 50%; background: var(--fc-bg); border: 1.5px solid var(--fc-navy-deep);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14); transition: left .22s var(--fc-ease-micro);
}
.fc-slider-scale { display: flex; justify-content: space-between; font-family: var(--fc-font-mono); font-size: 9.5px; color: var(--fc-text-tertiary); margin-top: 6px; }

.fc-empty { border: 1px dashed var(--fc-border); border-radius: var(--fc-radius-md); padding: 26px 20px; text-align: center; }
.fc-empty div { font-size: 13.5px; color: var(--fc-text-secondary); line-height: 1.6; }

.fc-bars { display: flex; flex-direction: column; gap: 15px; }
.fc-bar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.fc-bar-k { font-size: 13px; font-weight: 500; color: var(--fc-text-primary); letter-spacing: -.01em; }
.fc-bar-p { font-family: var(--fc-font-mono); font-size: 10px; color: var(--fc-text-secondary); }
.fc-bar-rail { height: 5px; border-radius: 3px; background: var(--fc-surface-alt); overflow: hidden; }
.fc-bar-fill { height: 100%; border-radius: 3px; background: var(--fc-navy-deep); transition: width .5s var(--fc-ease); }
.fc-bar-fill.is-top { background: var(--fc-accent); }

.fc-weights {
  margin-top: auto; padding-top: 24px; border-top: 1px solid var(--fc-border);
  font-family: var(--fc-font-mono); font-size: 9.5px; line-height: 1.9; letter-spacing: .06em;
  color: var(--fc-text-tertiary);
}
.fc-weights div { display: flex; justify-content: space-between; }
.fc-weights b { font-weight: 400; color: var(--fc-text-secondary); }

.fc-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.fc-col-count { font-family: var(--fc-font-mono); font-size: 10px; color: var(--fc-navy); }
.fc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fc-tile { border-radius: var(--fc-radius-md); overflow: hidden; border: 1px solid var(--fc-border); background: var(--fc-surface); }
.fc-tile-img { aspect-ratio: 3/4; position: relative; overflow: hidden; }
.fc-tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #F2F2F2; }
.fc-tile-img img.is-contain { object-fit: contain; }
.fc-tile-tone { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; }
.fc-tile-tone div { font-family: var(--fc-font-price); font-style: italic; font-size: 21px; line-height: 1.1; }
.fc-tile-body { padding: 9px 10px 11px; background: var(--fc-bg); }
.fc-tile-t { font-size: 11.5px; font-weight: 500; color: var(--fc-text-primary); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-tile-p { font-family: var(--fc-font-mono); font-size: 10.5px; color: var(--fc-accent-deep); margin-top: 3px; }
.fc-col-foot { margin-top: auto; padding-top: 24px; font-family: var(--fc-font-mono); font-size: 9.5px; line-height: 1.8; letter-spacing: .06em; color: var(--fc-text-tertiary); }

/* FIG. 01 + numbered points */
.fc-fig {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 72px;
}
.fc-fig-media { position: relative; }
.fc-fig-media img { width: 100%; height: auto; }
.fc-fig-cap { font-family: var(--fc-font-mono); font-size: 9.5px; letter-spacing: .18em; color: var(--fc-text-tertiary); margin-top: 14px; }
.fc-fig h3 { margin: 0 0 28px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.14; letter-spacing: -.03em; font-weight: 600; color: var(--fc-text-primary); }
.fc-points { display: flex; flex-direction: column; border-bottom: 1px solid var(--fc-border); }
.fc-point { display: grid; grid-template-columns: 38px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--fc-border); }
.fc-point-n { font-family: var(--fc-font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--fc-accent-deep); padding-top: 3px; }
/* An <h3>, so the UA margin has to go. Same for the other sub-headings below:
   they carry the page's keyword content and were <div>s in the prototype. */
.fc-point-t { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; color: var(--fc-text-primary); }
.fc-point-d { font-size: 14px; line-height: 1.6; color: var(--fc-text-secondary); margin-top: 5px; }

/* --------------------------------------------------------- 02 · browse --- */
.fc-filters { background: var(--fc-bg); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-lg); padding: 16px 20px; margin-bottom: 26px; }
.fc-filters-top { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--fc-border); }
.fc-filters-bot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 14px; }
.fc-filters .fc-chip { padding: 7px 14px; }
.fc-vr { width: 1px; height: 26px; background: var(--fc-border); flex: none; }
.fc-maxwrap { display: flex; align-items: center; gap: 14px; min-width: 210px; flex: 1; }
.fc-maxwrap > span:first-child { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .12em; color: var(--fc-text-secondary); white-space: nowrap; }
.fc-max { position: relative; flex: 1; height: 26px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.fc-max .fc-slider-track { left: 0; right: 0; }
/* left + width only: adding right as well over-constrains the box and the
   width is what the JS drives. No transition, so the knob tracks the pointer. */
.fc-max .fc-slider-fill { left: 0; right: auto; transition: none; }
.fc-max .fc-slider-knob { transition: none; }
.fc-max-val { font-family: var(--fc-font-mono); font-size: 11.5px; color: var(--fc-navy); white-space: nowrap; min-width: 66px; text-align: right; }
.fc-sort { border: 1px solid var(--fc-border); background: var(--fc-bg); border-radius: var(--fc-radius-sm); padding: 8px 11px; font-size: 12.5px; color: var(--fc-text-primary); cursor: pointer; }

.fc-grid-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.fc-grid-meta span { font-family: var(--fc-font-mono); font-size: 10.5px; letter-spacing: .13em; color: var(--fc-text-secondary); white-space: nowrap; }
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 212px), 1fr)); gap: 18px; }

.fc-card {
  cursor: pointer; background: var(--fc-bg); border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-card); overflow: hidden; text-align: left; padding: 0;
  font: inherit; color: inherit;
  transition: transform .3s var(--fc-ease), box-shadow .3s;
}
.fc-card:hover { transform: translateY(-4px); box-shadow: var(--fc-shadow-hover); }
/* The card is a <button>, so its children are spans. Blockify them or
   aspect-ratio and text-overflow have nothing to apply to. */
.fc-card-img, .fc-card-body, .fc-card-brand, .fc-card-t { display: block; }
.fc-card-img { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #F2F2F2; }
.fc-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 990v6 runners ships with whitespace around the shoe, so it contains. */
.fc-card-img img.is-contain { object-fit: contain; }
.fc-card-tone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.fc-card-tone-b { font-family: var(--fc-font-price); font-style: italic; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; }
.fc-card-tone-r { width: 26px; height: 1px; margin: 14px 0; }
.fc-card-tone-c { font-family: var(--fc-font-mono); font-size: 9px; letter-spacing: .18em; }
.fc-card-heart {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(15, 27, 48, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center; color: rgba(255, 255, 255, .85); font-size: 15px;
}
.fc-card-heart.is-liked { color: var(--fc-like); }
.fc-card-cond {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius-pill);
  padding: 3px 9px; font-family: var(--fc-font-mono); font-size: 9px;
  letter-spacing: .11em; color: var(--fc-text-primary);
}
.fc-card-body { padding: 13px 14px 15px; }
.fc-card-brand { font-family: var(--fc-font-mono); font-size: 9px; letter-spacing: .13em; color: var(--fc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-card-t { font-size: 14px; font-weight: 500; letter-spacing: -.015em; color: var(--fc-text-primary); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; }
.fc-card-price { font-family: var(--fc-font-price); font-size: 19px; color: var(--fc-navy); white-space: nowrap; }
.fc-card-size { font-size: 11.5px; color: var(--fc-text-secondary); white-space: nowrap; }

.fc-grid-empty { border: 1px dashed var(--fc-border-strong); border-radius: var(--fc-radius-lg); padding: 60px 20px; text-align: center; }
.fc-grid-empty-t { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--fc-text-primary); }
.fc-grid-empty-d { font-size: 14.5px; color: var(--fc-text-secondary); margin-top: 8px; }

/* detail panel */
.fc-detail { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: flex-end; }
.fc-detail[hidden] { display: none; }
.fc-detail-scrim { position: absolute; inset: 0; background: rgba(15, 27, 48, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fcFade .3s ease; border: none; padding: 0; cursor: pointer; }
.fc-sheet {
  position: relative; width: min(560px, 100%); height: 100%;
  background: var(--fc-bg); overflow-y: auto;
  box-shadow: var(--fc-shadow-panel);
  animation: fcSlideIn .42s var(--fc-ease);
}
.fc-sheet-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fc-border);
}
.fc-sheet-ref { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .15em; color: var(--fc-text-secondary); }
.fc-sheet-x {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--fc-border);
  background: var(--fc-bg); color: var(--fc-text-primary); cursor: pointer;
  display: grid; place-items: center; font-size: 15px; transition: background .2s;
}
.fc-sheet-x:hover { background: var(--fc-surface); }
.fc-sheet-img { position: relative; aspect-ratio: 4/3.4; overflow: hidden; background: #F2F2F2; }
.fc-sheet-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fc-sheet-tone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fc-sheet-tone-b { font-family: var(--fc-font-price); font-style: italic; font-size: 52px; letter-spacing: -.02em; }
.fc-sheet-tone-r { width: 34px; height: 1px; margin: 18px 0; }
.fc-sheet-tone-c { font-family: var(--fc-font-mono); font-size: 9.5px; letter-spacing: .2em; }
.fc-sheet-body { padding: 28px 28px 40px; }
.fc-sheet-brand { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .16em; color: var(--fc-text-secondary); }
.fc-sheet-t { margin: 10px 0 0; font-size: 27px; line-height: 1.16; letter-spacing: -.03em; font-weight: 600; color: var(--fc-text-primary); }
.fc-sheet-p { font-family: var(--fc-font-price); font-size: 34px; color: var(--fc-navy); margin-top: 12px; }
.fc-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--fc-border); border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md); overflow: hidden; margin-top: 24px;
}
.fc-spec { background: var(--fc-bg); padding: 13px 15px; }
.fc-spec dt { font-family: var(--fc-font-mono); font-size: 9px; letter-spacing: .15em; color: var(--fc-text-tertiary); }
.fc-spec dd { margin: 5px 0 0; font-size: 14px; font-weight: 500; color: var(--fc-text-primary); }
.fc-bp { margin-top: 22px; border: 1px solid var(--fc-border); border-radius: var(--fc-radius-md); padding: 16px 18px; background: var(--fc-surface); }
.fc-bp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.fc-bp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fc-success); }
.fc-bp-head span:last-child { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--fc-text-primary); }
.fc-bp p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--fc-text-secondary); }
.fc-cost { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.fc-cost-row { display: flex; justify-content: space-between; gap: 16px; color: var(--fc-text-secondary); }
.fc-cost-row b { font-weight: 400; color: var(--fc-text-primary); }
.fc-cost-note { font-size: 12px; color: var(--fc-text-tertiary); margin-top: -3px; }
.fc-cost-total { display: flex; justify-content: space-between; gap: 16px; padding-top: 11px; border-top: 1px solid var(--fc-border); font-weight: 600; color: var(--fc-text-primary); }
.fc-bag {
  width: 100%; margin-top: 24px; background: var(--fc-navy-deep); color: #FFFFFF;
  border: none; border-radius: var(--fc-radius-md); height: 52px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  transition: background .22s, transform .22s var(--fc-ease-micro);
}
.fc-bag:hover { transform: translateY(-1px); }
.fc-bag.is-in { background: var(--fc-success); }
.fc-sheet-fine { text-align: center; margin-top: 14px; font-size: 12.5px; color: var(--fc-text-tertiary); }

/* --------------------------------------------------- 03 · how it works --- */
.fc-toggle { display: flex; background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-pill); padding: 4px; margin-bottom: 8px; align-self: end; justify-self: end; }
.fc-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 26px; border-radius: var(--fc-radius-pill); border: none;
  background: transparent; color: var(--fc-text-secondary);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  transition: all .22s var(--fc-ease-micro);
}
.fc-toggle button[aria-pressed="true"] { background: var(--fc-bg); color: var(--fc-text-primary); }

.fc-steps-rule { border-top: 1px solid var(--fc-text-primary); margin-top: 58px; }
/* Side by side the grid is pulled into the gutter so column 1 sits flush;
   stacked the pull is 0 so the dividers align with the text. */
.fc-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: 1px; background: var(--fc-border);
  margin-inline: calc(-1 * var(--fc-gutter));
}
.fc-step { background: var(--fc-bg); padding: 34px var(--fc-gutter) 42px; }
/* accent-deep, not accent: this is the only numeral the accent would put on a
   white background, and the accent is tuned for dark surfaces. Matches every
   other white-background numeral (section overlines, FIG. 01, trust pillars). */
.fc-step-n { font-family: var(--fc-font-price); font-size: 58px; line-height: 1; color: var(--fc-accent-deep); letter-spacing: -.02em; }
.fc-step-t { margin: 24px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -.025em; color: var(--fc-text-primary); }
.fc-step-d { margin: 12px 0 0; font-size: 15px; line-height: 1.66; color: var(--fc-text-secondary); max-width: 330px; }

/* ----------------------------------------------------------- 04 · sell --- */
.fc-sell-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 26px; align-items: stretch; }
.fc-calc { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--fc-radius-panel); overflow: hidden; background: var(--fc-tone-navy-bg); display: flex; flex-direction: column; }
.fc-calc-bar { padding: 14px 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fc-calc-bar span { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .15em; color: rgba(255, 255, 255, .55); }
.fc-calc-bar span:last-child { color: var(--fc-accent); }
.fc-calc-body { padding: 30px 30px 34px; }
.fc-calc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.fc-calc-head span:first-child { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .78); }
.fc-calc-price { font-family: var(--fc-font-price); font-size: 38px; color: #FFFFFF; letter-spacing: -.01em; }
.fc-calc-slider { position: relative; height: 30px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.fc-calc-slider .fc-slider-track { left: 0; right: 0; background: rgba(255, 255, 255, .16); }
.fc-calc-slider .fc-slider-fill { left: 0; right: auto; background: var(--fc-accent); transition: none; }
.fc-calc-knob { position: absolute; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--fc-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.fc-calc-scale { display: flex; justify-content: space-between; font-family: var(--fc-font-mono); font-size: 9.5px; color: rgba(255, 255, 255, .32); margin-top: 2px; }
.fc-calc-rows { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 13px; font-size: 14px; }
.fc-calc-row { display: flex; justify-content: space-between; gap: 16px; color: rgba(255, 255, 255, .6); }
.fc-calc-row b { font-family: var(--fc-font-mono); font-weight: 400; color: #FFFFFF; white-space: nowrap; }
.fc-calc-note { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .38); margin-top: -6px; }
.fc-calc-out { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.fc-calc-box { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--fc-radius-card); padding: 18px 18px 20px; }
.fc-calc-box-k { font-family: var(--fc-font-mono); font-size: 9.5px; letter-spacing: .14em; color: rgba(255, 255, 255, .42); }
.fc-calc-box-v { font-family: var(--fc-font-price); font-size: 30px; margin-top: 9px; color: #FFFFFF; }
.fc-calc-box--pay { background: var(--fc-accent); border: none; color: var(--fc-navy-deep); }
.fc-calc-box--pay .fc-calc-box-k { color: rgba(15, 27, 48, .6); }
.fc-calc-box--pay .fc-calc-box-v { color: var(--fc-navy-deep); }
.fc-calc-keep { text-align: center; margin-top: 16px; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .11em; color: rgba(255, 255, 255, .4); }

.fc-flow { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--fc-radius-panel); padding: 28px 28px 30px; background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; }
.fc-flow-k { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .15em; color: rgba(255, 255, 255, .42); margin-bottom: 22px; }
.fc-flow-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.fc-flow-row { display: grid; grid-template-columns: 26px 1fr; gap: 16px; padding: 17px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.fc-flow-n { font-family: var(--fc-font-mono); font-size: 10.5px; color: var(--fc-accent); padding-top: 3px; }
.fc-flow-t { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }
.fc-flow-d { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .52); margin-top: 4px; }

.fc-also { margin-top: 26px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--fc-radius-panel); padding: 28px; background: rgba(255, 255, 255, .03); }
.fc-also-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: 24px 32px; }
.fc-also-v { font-family: var(--fc-font-price); font-size: 26px; color: var(--fc-accent); line-height: 1; }
.fc-also-k { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .55); margin-top: 8px; }

/* ------------------------------------------------------ 05 · protection --- */
.fc-ord-pin { position: relative; }
.fc-ord-stick { position: sticky; top: 88px; }
.fc-ord-card { width: 100%; border: 1px solid var(--fc-border); border-radius: var(--fc-radius-panel); overflow: hidden; background: var(--fc-navy-deep); color: #FFFFFF; margin-top: 58px; }
.fc-ord-bar { padding: 14px 26px; border-bottom: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fc-ord-bar span { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .15em; color: rgba(255, 255, 255, .55); }
.fc-ord-bar span:last-child { color: rgba(255, 255, 255, .4); }
.fc-ord-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1px; background: rgba(255, 255, 255, .1); }
.fc-ord-main { padding: 38px clamp(22px, 3vw, 34px) 40px; background: var(--fc-navy-deep); }
/* repeat(4, 1fr), NOT auto-fit: auto-fit orphans "Completed" onto its own row
   in the ~900-1100px band. */
.fc-ord-steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.fc-ord-step { cursor: pointer; padding: 0 10px 0 0; background: none; border: none; text-align: left; color: inherit; font: inherit; }
.fc-ord-step-line { display: flex; align-items: center; margin-bottom: 16px; }
.fc-ord-dot { width: 13px; height: 13px; border-radius: 50%; background: rgba(255, 255, 255, .18); flex: none; transition: all .3s; }
.fc-ord-bar-l { flex: 1; height: 1.5px; background: rgba(255, 255, 255, .14); transition: background .3s; }
.fc-ord-step:last-child .fc-ord-bar-l { background: transparent; }
.fc-ord-step.is-done .fc-ord-dot { background: var(--fc-accent); }
.fc-ord-step.is-done .fc-ord-bar-l { background: var(--fc-accent); }
.fc-ord-step.is-done:last-child .fc-ord-dot { background: var(--fc-success); }
.fc-ord-step.is-done:last-child .fc-ord-bar-l { background: transparent; }
.fc-ord-step.is-current .fc-ord-dot { box-shadow: 0 0 0 5px rgba(var(--fc-accent-rgb), .18); }
.fc-ord-step.is-current .fc-ord-bar-l { background: rgba(255, 255, 255, .14); }
.fc-ord-n { font-family: var(--fc-font-mono); font-size: 9.5px; letter-spacing: .14em; color: rgba(255, 255, 255, .34); }
.fc-ord-name { font-size: clamp(11.5px, 1.05vw, 14px); font-weight: 600; letter-spacing: -.015em; color: rgba(255, 255, 255, .42); margin-top: 6px; transition: color .3s; }
.fc-ord-step.is-done .fc-ord-name { color: #FFFFFF; }
.fc-ord-copy { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fc-ord-title { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
/* min-height sized to the longest string: without it the card resizes between
   stages and the pinned card visibly jolts. */
.fc-ord-p { margin: 12px 0 0; min-height: 82px; font-size: 15.5px; line-height: 1.66; color: rgba(255, 255, 255, .6); max-width: 480px; }
.fc-ord-side { padding: 38px clamp(22px, 3vw, 34px) 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #131F35; }
.fc-ord-side-k { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .16em; color: rgba(255, 255, 255, .42); }
.fc-ord-timer { font-family: var(--fc-font-mono); font-size: 38px; letter-spacing: -.02em; color: var(--fc-accent); margin-top: 16px; }
.fc-ord-side-p { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .5); max-width: 250px; }

.fc-pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: 1px; background: var(--fc-border);
  border: 1px solid var(--fc-border); border-radius: 18px; overflow: hidden; margin-top: 26px;
}
.fc-pillar { background: var(--fc-bg); padding: 30px 28px 34px; transition: background .3s; }
.fc-pillar:hover { background: var(--fc-surface); }
.fc-pillar-n { font-family: var(--fc-font-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--fc-accent-deep); }
.fc-pillar-t { margin: 18px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.022em; color: var(--fc-text-primary); }
.fc-pillar-d { margin: 10px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--fc-text-secondary); }

/* --------------------------------------------------------- 06 · styles --- */
.fc-tribes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(26px, 5vw, 64px); align-items: start; }
.fc-tribe-h { margin: 0; font-weight: 600; font-size: var(--fc-h2); line-height: 1.02; letter-spacing: -.03em; color: var(--fc-text-primary); min-height: 1.05em; }
.fc-tribe-p { margin: 22px 0 0; font-size: 16.5px; line-height: 1.68; color: var(--fc-text-secondary); max-width: 430px; }
.fc-tribe-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-tribe-chips .fc-chip { padding: 11px 18px; font-size: 14px; letter-spacing: -.01em; transition: all .22s var(--fc-ease-micro); }
.fc-tribe-chips .fc-chip:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------------ FAQ ---
   The FAQPage structured data in the <head> marks up these five answers, and
   Google requires the marked-up content to be visible on the page, so this
   section is what makes that schema legitimate rather than a policy breach.
   Built on <details>/<summary> so it needs no JS under script-src 'self'. */
.fc-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(26px, 5vw, 64px);
  align-items: start;
}
.fc-faq-list { border-top: 1px solid var(--fc-border); }
.fc-faq-item { border-bottom: 1px solid var(--fc-border); }
.fc-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0;
}
.fc-faq-item summary::-webkit-details-marker { display: none; }
/* A real <h3> inside the summary: these questions are the page's keyword
   surface, and the old index.html carried them as headings. */
.fc-faq-q {
  margin: 0;
  font-size: 16.5px; font-weight: 600; letter-spacing: -.02em;
  color: var(--fc-text-primary);
}
.fc-faq-sign { position: relative; width: 15px; height: 15px; flex: none; }
.fc-faq-sign::before,
.fc-faq-sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--fc-accent-deep);
  transition: transform var(--fc-dur-micro) var(--fc-ease-micro),
              opacity var(--fc-dur-micro) var(--fc-ease-micro);
}
.fc-faq-sign::before { width: 13px; height: 1.5px; transform: translate(-50%, -50%); }
.fc-faq-sign::after { width: 1.5px; height: 13px; transform: translate(-50%, -50%); }
.fc-faq-item[open] .fc-faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.fc-faq-a {
  margin: 0; padding: 0 0 24px;
  font-size: 15px; line-height: 1.68;
  color: var(--fc-text-secondary); max-width: 62ch;
}

/* ------------------------------------------------------ legal documents ---
   Prose styling for privacy.html and terms.html. The point of this block is
   that the approved text can be pasted in as plain h2/h3/p/ul/ol/table markup
   and come out correctly styled with no per-page CSS. Do not add page-specific
   rules to those files; extend this instead. */
.fc-doc { padding: clamp(40px, 6vw, 72px) 0 var(--fc-section-bottom); }
.fc-doc-head { max-width: 72ch; margin-bottom: clamp(32px, 4vw, 52px); }
.fc-doc-head h1 {
  margin: 0;
  font-family: var(--fc-font-display); font-weight: 400;
  font-size: clamp(38px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.02em;
  color: var(--fc-text-primary);
}
.fc-doc-meta {
  margin-top: 18px;
  font-family: var(--fc-font-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--fc-text-secondary);
}
.fc-doc-intro { margin: 20px 0 0; font-size: 16.5px; line-height: 1.68; color: var(--fc-text-secondary); }

.fc-legal { max-width: 72ch; }
.fc-legal > * + * { margin-top: 18px; }
.fc-legal h2 {
  margin: clamp(38px, 4vw, 56px) 0 0;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.025em;
  font-weight: 600; color: var(--fc-text-primary);
}
.fc-legal h2 + * { margin-top: 14px; }
.fc-legal h3 {
  margin: 28px 0 0;
  font-size: 17px; line-height: 1.3; letter-spacing: -.015em;
  font-weight: 600; color: var(--fc-text-primary);
}
.fc-legal h3 + * { margin-top: 10px; }
.fc-legal p,
.fc-legal li { font-size: 15.5px; line-height: 1.72; color: var(--fc-text-secondary); }
.fc-legal ul, .fc-legal ol { padding-left: 22px; }
.fc-legal li + li { margin-top: 8px; }
.fc-legal strong { color: var(--fc-text-primary); font-weight: 600; }
.fc-legal a { color: var(--fc-navy); text-decoration: underline; text-underline-offset: 2px; }
.fc-legal a:hover { color: var(--fc-accent-deep); }
.fc-legal hr { border: none; border-top: 1px solid var(--fc-border); margin: clamp(32px, 4vw, 48px) 0; }
/* Fee schedules and similar tables must scroll inside their own box rather
   than push the page sideways on a narrow screen. */
.fc-legal-table { overflow-x: auto; border: 1px solid var(--fc-border); border-radius: var(--fc-radius-md); }
.fc-legal table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 14.5px; }
.fc-legal th, .fc-legal td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--fc-border); }
.fc-legal th {
  font-family: var(--fc-font-mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--fc-text-secondary); background: var(--fc-surface); font-weight: 400;
}
.fc-legal td { color: var(--fc-text-secondary); }
.fc-legal tr:last-child th, .fc-legal tr:last-child td { border-bottom: none; }

/* Delete this along with the placeholder block once the approved text lands. */
.fc-doc-pending {
  border: 1px dashed var(--fc-border-strong); border-radius: var(--fc-radius-lg);
  padding: clamp(28px, 4vw, 44px); max-width: 72ch;
}
.fc-doc-pending p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--fc-text-secondary); }
.fc-doc-pending p:first-child { margin-top: 0; }

/* -------------------------------------------------------- waitlist/foot --- */
.fc-close { background: var(--fc-navy-deep); color: #FFFFFF; padding: clamp(76px, 9vw, 126px) 0 clamp(78px, 9vw, 130px); position: relative; overflow: hidden; }
.fc-close-inner { text-align: center; max-width: 820px; margin: 0 auto; }
.fc-close-k { font-family: var(--fc-font-mono); font-size: 10.5px; letter-spacing: .18em; color: var(--fc-accent); margin-bottom: 30px; }
.fc-close h2 { margin: 0; font-size: clamp(42px, 5.4vw, 78px); line-height: .98; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.fc-close-p { margin: 26px auto 0; max-width: 480px; font-size: 17px; line-height: 1.62; color: rgba(255, 255, 255, .62); }
.fc-close .fc-form { margin: 40px auto 0; max-width: 520px; }
.fc-close-fine { margin-top: 18px; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .13em; color: rgba(255, 255, 255, .35); }

.fc-foot { background: var(--fc-footer); color: #FFFFFF; border-top: 1px solid rgba(255, 255, 255, .1); padding: clamp(38px, 9vw, 64px) 0 clamp(20px, 9vw, 34px); }
.fc-foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: 48px; }
.fc-foot-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.fc-foot-mark img { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.fc-foot-mark span { font-family: var(--fc-font-wordmark); font-size: 19px; }
.fc-foot p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .45); max-width: 290px; }
.fc-foot-h { font-family: var(--fc-font-mono); font-size: 9.5px; letter-spacing: .16em; color: rgba(255, 255, 255, .32); margin-bottom: 18px; }
.fc-foot-col-links { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.fc-foot-col-links a { display: inline-flex; align-items: center; font-size: 14px; color: rgba(255, 255, 255, .62); letter-spacing: -.01em; transition: color .2s; }
.fc-foot-col-links a:hover { color: var(--fc-accent); }
.fc-foot-bottom {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .09);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .12em; color: rgba(255, 255, 255, .3);
}

/* ------------------------------------------------------------ mobile ------
   The prototype set these two from JS off window.innerWidth < 760. Media
   queries give the identical result with no JS dependency and no flash. */
@media (max-width: 759.98px) {
  .fc-nav-link { display: none; }
  .fc-burger { display: grid; }

  /* Every interactive control clears 44px. They size from padding plus a ~17px
     line box otherwise, landing at 17-41px. Desktop chips stay at 31px. */
  .fc-tap,
  .fc-chip,
  .fc-seg button,
  .fc-toggle button,
  .fc-sort,
  .fc-ord-step,
  .fc-nav-mark,
  .fc-foot-col-links a { min-height: 44px; }

  /* The three sliders are 26-30px tall by design. min-height only grows the
     hit area: the track, ticks and knob all sit at their static position, so
     the flex centring keeps them exactly where they were. */
  .fc-slider,
  .fc-max,
  .fc-calc-slider { min-height: 44px; }

  /* Stacked: no gutter pull, so the dividers line up with the text. */
  .fc-steps { margin-inline: 0; }
  .fc-step { padding-left: 0; padding-right: 0; }

  .fc-toggle { align-self: start; justify-self: start; }
}

/* Narrow enough that the field and the button cannot share a row: give the
   button its own full-width line rather than leaving it stranded left. */
@media (max-width: 559.98px) {
  .fc-form-row .fc-submit { flex: 1 1 100%; }
}