/* WISPWARE site chrome — SHARED stylesheet.
 *
 * Lifted VERBATIM out of wispware/index.html (2026-09-06) so the hand-authored landing page and
 * the GENERATED face pages (tools/gen-site.js) render from one stylesheet instead of three
 * copies of it. Nothing here was redesigned in the move: the approved variant-A look from
 * wispware/mockups/wispware-site.html is unchanged, and the design hold in wispware/README.md still
 * stands for any NEW page look.
 *
 * Edit this file, not a copy in a page. Every page links it as /assets/site.css.
 */
  :root{
    /* ---- warm dark consumer palette (distinct from GLASSCODE green terminal) ---- */
    --bg:#0b0f0e;            /* warm near-black */
    --bg-2:#0e1413;
    --surface:#121a18;      /* panel */
    --raised:#182320;       /* raised panel */
    --line:#243430;
    --line-soft:#1a2723;
    --ink:#eef4f1;          /* headings / hero text */
    --ink-2:#cdd9d4;
    --mut:#8fa39c;          /* body copy */
    --dim:#5e726c;          /* captions */
    /* WISPWARE / Wisp free-tier accents — the signature trio */
    --teal:#35e3d1;         /* primary phosphor accent */
    --teal-deep:#1e8f88;
    --gold:#f5c542;         /* premium / Pro */
    --gold-deep:#a8790f;
    --pink:#f58ab4;         /* playful / companion */
    --coral:#f0885e;
    --mint:#4be3b0;
    --blue:#6ea8ff;
    /* type */
    --mono:ui-monospace,'SF Mono','Space Mono',Menlo,Consolas,monospace; /* Space Mono in production */
    --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --maxw:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; color:var(--ink); background:var(--bg);
    font:16px/1.65 var(--sans);
    overflow-x:hidden;
    background-image:
      radial-gradient(900px 520px at 82% -8%, rgba(53,227,209,.10), transparent 60%),
      radial-gradient(760px 480px at 6% 2%, rgba(245,197,66,.06), transparent 55%),
      radial-gradient(1200px 900px at 50% 120%, rgba(245,138,180,.05), transparent 60%);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:rgba(53,227,209,.28); color:#fff}
  a{color:var(--teal); text-decoration:none}
  h1,h2,h3{margin:0; letter-spacing:-.02em; font-weight:650; text-wrap:balance}
  p{margin:0}
  img,svg{max-width:100%}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  .kick{font:600 12px/1 var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--teal)}
  .mono{font-family:var(--mono)}
  .skip{position:absolute; left:-9999px; top:0}
  .skip:focus{left:12px; top:12px; z-index:100; background:var(--teal); color:#04120f; padding:10px 14px; border-radius:9px}

  /* ---------------- nav ---------------- */
  nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(12px);
    background:linear-gradient(180deg,rgba(11,15,14,.86),rgba(11,15,14,.55));
    border-bottom:1px solid var(--line-soft)}
  .nav-in{display:flex; align-items:center; gap:22px; height:66px}
  .brand{display:flex; align-items:center; gap:11px; font:700 18px/1 var(--mono); letter-spacing:.14em; color:var(--ink)}
  .brand .dot{color:var(--teal)}
  .nav-links{display:flex; gap:26px; margin-left:14px}
  .nav-links a{color:var(--mut); font-size:14.5px}
  .nav-links a:hover{color:var(--ink)}
  .nav-cta{margin-left:auto; display:flex; align-items:center; gap:16px}
  .price-tag{font:600 13px/1 var(--mono); color:var(--dim)}
  .btn{display:inline-flex; align-items:center; gap:9px; font:600 14.5px/1 var(--sans);
    padding:12px 20px; border-radius:11px; cursor:pointer; border:1px solid transparent; transition:.16s}
  .btn-primary{color:#04120f; background:linear-gradient(180deg,#54ecdc,var(--teal));
    box-shadow:0 0 0 1px rgba(53,227,209,.4),0 8px 26px -10px rgba(53,227,209,.6)}
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(53,227,209,.6),0 12px 30px -8px rgba(53,227,209,.7)}
  .btn-ghost{color:var(--ink); background:transparent; border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
  .btn-gold{color:#160f00; background:linear-gradient(180deg,#ffd964,var(--gold));
    box-shadow:0 0 0 1px rgba(245,197,66,.35),0 8px 26px -10px rgba(245,197,66,.55)}
  .btn-gold:hover{transform:translateY(-1px)}

  /* ---------------- hero ---------------- */
  .hero{position:relative; overflow:hidden; padding:76px 0 40px}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
  .boot{font:12px/1 var(--mono); color:var(--dim); letter-spacing:.06em; margin-bottom:22px}
  .boot b{color:var(--teal); font-weight:600}
  .cursor{display:inline-block; width:8px; height:14px; background:var(--teal); margin-left:3px;
    vertical-align:-2px; animation:blink 1.1s steps(1) infinite; box-shadow:0 0 8px var(--teal)}
  @keyframes blink{50%{opacity:0}}
  .hero h1{font-size:clamp(38px,5.6vw,62px); line-height:1.02; margin:16px 0 0}
  .hero h1 .glow{color:var(--teal); text-shadow:0 0 26px rgba(53,227,209,.5)}
  .lede{margin-top:22px; font-size:19px; color:var(--ink-2); max-width:34ch; line-height:1.5}
  .lede b{color:var(--ink); font-weight:600}
  .sib{margin-top:14px; font-size:15px; color:var(--ink-2)}
  .sib a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
  .hero-cta{margin-top:32px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
  .hero-cta .sub{font:13px/1.4 var(--mono); color:var(--dim)}
  .hero-cta .sub b{color:var(--gold)}
  .trust-row{margin-top:30px; display:flex; gap:10px 22px; flex-wrap:wrap; font:12.5px/1 var(--mono);
    color:var(--mut); letter-spacing:.04em}
  .trust-row span{display:inline-flex; align-items:center; gap:8px}
  .trust-row .tk{color:var(--teal)}

  /* device / watch render */
  .stage{position:relative; display:flex; justify-content:center; align-items:center}
  .glow-pool{position:absolute; width:340px; max-width:80%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle,rgba(53,227,209,.22),transparent 62%); filter:blur(8px); z-index:0}
  .device{position:relative; z-index:1; width:300px; max-width:78vw; padding:14px; border-radius:52px;
    background:linear-gradient(155deg,#2b2f31,#141618 58%,#0b0c0d);
    box-shadow:0 40px 80px -30px #000, inset 0 1px 0 #3d4144, inset 0 0 0 1px #000, 0 0 60px -20px rgba(53,227,209,.4)}
  .device .btns{position:absolute; right:-4px; top:34%; width:5px; height:56px; border-radius:3px;
    background:linear-gradient(90deg,#0a0b0c,#2f3336); box-shadow:0 1px 2px #000}
  .device .btns.b2{top:56%; height:40px}
  .screen-box{position:relative; background:#000; border-radius:36px; padding:14px; overflow:hidden}
  .screen{display:block; width:100%; height:auto; border-radius:3px}
  /* bezel border overlaid ON TOP of the screen — frames it without clipping the image */
  .screen-box::after{content:""; position:absolute; inset:0; border-radius:36px; pointer-events:none;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.10), inset 0 0 0 3px rgba(0,0,0,.85)}
  .cap{margin-top:16px; text-align:center; font:12px/1.5 var(--mono); color:var(--dim)}
  .cap b{color:var(--ink-2); font-weight:600}
  .float{animation:float 6s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .float,.cursor,.star-streak{animation:none!important} }

  /* ---------------- section frame ---------------- */
  section{padding:78px 0}
  .sec-head{max-width:60ch}
  .sec-head h2{font-size:clamp(28px,3.4vw,40px); margin-top:14px; line-height:1.08}
  .sec-head p{margin-top:16px; color:var(--mut); font-size:17px}
  .divider{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)}

  /* ---------------- features / free vs pro ---------------- */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px}
  .plan{position:relative; border-radius:20px; padding:30px 28px; background:linear-gradient(180deg,var(--surface),var(--bg-2));
    border:1px solid var(--line)}
  .plan.pro{border-color:rgba(245,197,66,.42); background:linear-gradient(180deg,#1a1710,#120f09);
    box-shadow:0 0 0 1px rgba(245,197,66,.12),0 30px 60px -30px rgba(245,197,66,.25)}
  .plan-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
  .plan-name{font:600 13px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase}
  .plan.free .plan-name{color:var(--teal)} .plan.pro .plan-name{color:var(--gold)}
  .plan-price{font:700 34px/1 var(--sans); letter-spacing:-.02em}
  .plan-price small{font:500 14px/1 var(--mono); color:var(--dim); letter-spacing:.02em}
  .plan .tagline{margin-top:6px; color:var(--mut); font-size:14.5px}
  .feat{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:13px}
  .feat li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2)}
  .feat li .ic{flex:none; margin-top:2px}
  .feat li b{color:var(--ink); font-weight:600}
  /* the device table on a field's page (web.devices): scrolls inside its own box on a phone, never the page */
  .dev-scroll{margin-top:34px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--surface)}
  .dev-table{width:100%; border-collapse:collapse; font-size:14.5px; color:var(--ink-2); min-width:760px}
  .dev-table th,.dev-table td{padding:13px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-soft)}
  .dev-table thead th{font:600 11.5px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mut); background:var(--bg-2)}
  .dev-table tbody th{color:var(--ink); font-weight:600}
  .dev-table td:last-child{white-space:nowrap}
  .dev-table tbody tr:last-child th,.dev-table tbody tr:last-child td{border-bottom:0}
  .mk{font:600 13px/1 var(--mono)} .mk-yes{color:var(--teal)} .mk-pro{color:var(--gold)} .mk-no{color:var(--mut)}
  .dev-notes{margin:16px 0 0; padding-left:18px; color:var(--mut); font-size:14.5px; display:grid; gap:4px}
  .plan .cta-row{margin-top:28px}
  .badge{position:absolute; top:-11px; right:22px; font:600 10px/1 var(--mono); letter-spacing:.16em;
    text-transform:uppercase; padding:6px 11px; border-radius:999px; background:var(--gold); color:#160f00}

  /* companion band */
  .companion{margin-top:70px; display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center}
  .mood-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .mood{background:#000; border:1px solid var(--line); border-radius:16px; padding:14px 10px 12px; text-align:center}
  .mood .mlabel{margin-top:8px; font:700 11px/1.3 var(--mono); letter-spacing:.08em}
  .mood .msub{margin-top:5px; font:10px/1.2 var(--mono); color:var(--dim); text-transform:uppercase; letter-spacing:.08em}

  /* craft strip */
  .craft{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:64px}
  .craft-card{border:1px solid var(--line-soft); border-radius:16px; padding:24px; background:linear-gradient(180deg,var(--surface),transparent)}
  /* The marker sits ON the title row. As its own block it reserved an empty line above every
     heading, and with the same glyph on every card that read as a gap rather than as texture. */
  .craft-card h3{font-size:17px; margin-bottom:8px; display:flex; gap:10px; align-items:baseline}
  .craft-card h3::before{content:"▸"; color:var(--teal); flex:none; font-size:.92em}
  .craft-card p{color:var(--mut); font-size:14.5px}

  /* ---------------- how it works / delivery ---------------- */
  .delivery{background:
    radial-gradient(700px 400px at 20% 0%, rgba(245,197,66,.05), transparent 60%),
    linear-gradient(180deg,transparent,rgba(53,227,209,.03),transparent)}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px}
  .step{position:relative; border:1px solid var(--line); border-radius:16px; padding:24px 22px; background:var(--surface)}
  .step .n{font:700 12px/1 var(--mono); color:#04120f; background:var(--teal); width:26px; height:26px;
    border-radius:8px; display:grid; place-items:center; letter-spacing:0}
  .step h3{margin-top:16px; font-size:16px}
  .step p{margin-top:8px; color:var(--mut); font-size:14px}
  .step .arw{position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--dim); z-index:2}

  .unlock-panel{margin-top:44px; display:grid; grid-template-columns:1.05fr .95fr; gap:0; border:1px solid var(--line);
    border-radius:22px; overflow:hidden; background:var(--surface)}
  .up-left{padding:36px 34px; border-right:1px solid var(--line); background:linear-gradient(180deg,#12100a,#0e0c07)}
  .up-left .kick{color:var(--gold)}
  .up-left h3{font-size:24px; margin-top:14px}
  .up-left .voice{margin-top:16px; font:15px/1.6 var(--mono); color:var(--ink-2)}
  .up-left .voice b{color:var(--gold)}
  .co-summary{margin-top:26px; border-top:1px dashed var(--line); padding-top:22px; display:flex; flex-direction:column; gap:13px}
  .co-summary .row{display:flex; justify-content:space-between; gap:14px; font-size:14.5px; color:var(--mut)}
  .co-summary .row b{color:var(--ink)}
  .co-summary .total{border-top:1px solid var(--line); padding-top:14px; font-size:16px}
  .co-summary .total b{font:700 20px/1 var(--sans)}
  .up-right{padding:36px 34px; display:flex; flex-direction:column; justify-content:center}
  .up-right h3{font-size:20px}
  .up-right p{margin-top:12px; color:var(--mut); font-size:14.5px}
  .up-right .pay-btn{margin-top:24px; width:100%; justify-content:center; padding:15px}
  .paynote{margin-top:20px; display:flex; gap:11px; align-items:flex-start; border:1px solid rgba(245,197,66,.3);
    background:rgba(245,197,66,.06); border-radius:12px; padding:13px 15px}
  .paynote .pt{font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
  .paynote p{margin-top:6px; font-size:12.5px; color:var(--mut); line-height:1.5}

  /* ---------------- legal / fine print ---------------- */
  .legal{background:#080b0a; border-top:1px solid var(--line)}
  .legal .lgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px}
  .lcard{border:1px solid var(--line-soft); border-radius:16px; padding:26px 26px; background:linear-gradient(180deg,var(--surface),transparent); scroll-margin-top:84px}
  .lcard.span{grid-column:1 / -1}
  .lcard h3{font:600 13px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:16px}
  .lcard p{color:var(--mut); font-size:14.5px; margin-top:12px}
  .lcard p:first-of-type{margin-top:0}
  .lcard ol{color:var(--mut); font-size:14.5px; margin:12px 0 0; padding-left:22px}
  .lcard ol li{margin-top:6px}
  .lcard b{color:var(--ink-2); font-weight:600}
  .lcard .price-line{font:700 22px/1 var(--sans); color:var(--ink); margin-bottom:6px}
  .lcard .price-line small{font:500 13px/1 var(--mono); color:var(--dim)}
  .lcard a{word-break:break-word}
  .lcard.pay h3{color:var(--gold)}

  /* ---------------- footer ---------------- */
  footer{border-top:1px solid var(--line-soft); padding:56px 0 46px; margin-top:20px}
  .foot-grid{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap}
  .maker{display:flex; align-items:center; gap:14px}
  .maker .mk-name{font:700 17px/1.1 var(--sans); letter-spacing:.01em}
  .maker .mk-sub{font:12px/1.4 var(--mono); color:var(--dim); margin-top:4px}
  .foot-nav{font:12.5px/1.9 var(--mono); color:var(--mut); text-align:right}
  .foot-nav a{color:var(--mut)} .foot-nav a:hover{color:var(--teal)}
  .foot-nav .sep{color:var(--dim)}
  .foot-bottom{margin-top:38px; padding-top:24px; border-top:1px solid var(--line-soft);
    display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font:12px/1.6 var(--mono); color:var(--dim)}
  .foot-bottom a{color:var(--mut)}

  @media (max-width:900px){
    .hero-grid,.companion,.unlock-panel,.split,.steps,.craft,.legal .lgrid{grid-template-columns:1fr}
    .up-left{border-right:none; border-bottom:1px solid var(--line)}
    .nav-links{display:none}
    .step .arw{display:none}
    .foot-nav{text-align:left}
    .lcard.span{grid-column:auto}
  }

  /* =================================================================================
     CATALOGUE + FACE PAGES (added 2026-09-06 with tools/gen-site.js, TASK-40).
     Built from the tokens and components above rather than a new visual language:
     the cards borrow .craft-card's frame and .plan's panel treatment. This is the
     one part of the site the variant-A mockup never covered, so TASK-82's design
     pass should confirm it rather than inherit it.
     ================================================================================= */
  .page-head{padding:64px 0 8px}
  .face-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; margin-top:12px}
  .fc{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; overflow:hidden;
    background:linear-gradient(180deg,var(--surface),var(--bg-2)); transition:.16s}
  .fc:hover{border-color:var(--teal); transform:translateY(-2px)}
  /* All / Square / Round (owner, 2026-10-23): .fc's display:flex would otherwise beat the hidden attribute. */
  .fc[hidden], .shape-filter[hidden]{display:none}
  .shape-filter{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
  .sf-btn{font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; padding:9px 14px;
    border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--mut); cursor:pointer}
  .sf-btn:hover{border-color:var(--teal); color:var(--teal)}
  .sf-btn[aria-pressed="true"]{border-color:var(--teal); background:var(--teal); color:var(--bg)}
  .sf-btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
  .fc-soon{opacity:.86}
  .fc-soon:hover{border-color:var(--line-soft); transform:none}
  /* FIXED media height, not the image's own. A store screenshot is a tall portrait watch photo
     and a placeholder is short, so letting the image set the height left one card's body floating
     halfway down a stretched grid row. contain, not cover: cropping a watch face is not an option. */
  /* FIXED media height so every card matches whatever its capture's proportions are. The card
     shows the WATCH, not a bare face: the same .device bezel the hero uses, scaled down, over a
     soft pool of light so it sits IN the card rather than on a black hole.
     Sizes are explicit pixels, deliberately. Percentage heights inside this box do not resolve
     reliably (that is what left the image at its natural size and cropped, twice), so each layer
     states its own height and the width follows the capture's aspect ratio. 268 - 28 padding = 240
     device, less 2x7 = 226 screen-box, less 2x7 = 212 of actual face. */
  .fc-media{display:flex; align-items:center; justify-content:center; height:268px; padding:14px;
    border-bottom:1px solid var(--line); line-height:0; overflow:hidden; background:#000;
    background-image:radial-gradient(220px 180px at 50% 50%, rgba(53,227,209,.13), transparent 70%)}
  .fc-media .device{display:block; position:relative; height:240px; width:auto; padding:7px; border-radius:26px;
    background:linear-gradient(155deg,#2b2f31,#141618 58%,#0b0c0d);
    box-shadow:0 18px 34px -14px #000, inset 0 1px 0 #3d4144, inset 0 0 0 1px #000,
      0 0 34px -12px rgba(53,227,209,.45)}
  .fc-media .device .btns{position:absolute; right:-2px; top:34%; width:3px; height:28px; border-radius:2px;
    background:linear-gradient(90deg,#0a0b0c,#2f3336)}
  .fc-media .device .btns.b2{top:56%; height:20px}
  .fc-media .screen-box{display:block; position:relative; height:226px; padding:7px; border-radius:19px;
    background:#000; overflow:hidden}
  .fc-media .screen-box::after{border-radius:19px}
  .fc-media .screen{height:212px; width:auto; display:block; border-radius:2px}
  .fc-media-empty{display:grid; place-items:center; line-height:1.4; padding:0;
    background:repeating-linear-gradient(135deg,#0d1211 0 10px,#101614 10px 20px)}
  .fc-media-empty span{font:600 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
  .fc-body{padding:24px 24px 22px; display:flex; flex-direction:column; flex:1}
  .fc-status{font:600 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
  .fc-status.is-live{color:var(--teal)}
  .fc-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
  .fc-kind{font:600 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; padding:5px 9px;
    border-radius:999px; border:1px solid var(--line); color:var(--mut)}
  .fc-kind-datafield{border-color:var(--pink); color:var(--pink)}
  .fc-where{margin-top:8px; font:500 12px/1.45 var(--mono); color:var(--dim)}
  .fc-body h3{margin-top:12px; font-size:19px}
  .fc-tag{margin-top:10px; color:var(--mut); font-size:14.5px}
  .fc-foot{margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
  .fc-price{font:600 14px/1.4 var(--sans); color:var(--ink)}
  .fc-price small{font:500 12px/1 var(--mono); color:var(--dim); display:block; margin-top:6px}
  .fc-price-soon{color:var(--dim); font-weight:500}

  .shot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-top:40px}
  .shot{margin:0; background:#000; border:1px solid var(--line); border-radius:16px; overflow:hidden; line-height:0}
  .shot img{width:100%; height:auto; display:block}
  .anim-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:40px}
  .anim{margin:0}
  .anim img{width:100%; height:auto; display:block; image-rendering:auto; border-radius:14px; background:#000}
  .anim figcaption{margin-top:10px; color:var(--ink-2); font-size:.95rem}

  /* Face-page hero image. A storefront screenshot already contains the watch, so it gets no
     .device bezel; it just sits on the glow pool. */
  .hero-shot{position:relative; z-index:1; width:330px; max-width:78vw; height:auto; display:block;
    filter:drop-shadow(0 40px 60px rgba(0,0,0,.65))}
  /* .hero-shot sets display:block and is declared after .fc-media-empty, so the empty state has
     to restate its own centring or the label sits in the top-left corner. */
  .hero-shot.fc-media-empty{display:grid; place-items:center; border:1px solid var(--line); border-radius:28px}
  /* the landing page's way into the face finder (TASK-127) */
  .quiz-cta{margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; border:1px solid var(--line); border-radius:16px; padding:18px 20px}
  .quiz-cta p{margin:0; color:var(--ink-2); font-size:17px}