/* ═══════════════════════════════════════════════════════════
   FIELDCUT. THE LANDING PAGE
   Rebuilt 16 September 2026 to read the way spacefs.com reads: a floating
   pill nav, a left-aligned hero beside pinned product art, a quiet feature
   trio, a four-scene dark walkthrough, one honest price, an FAQ, a close.

   Nothing here invents a value. Every colour, radius, shadow, weight, size,
   space and duration is a var(--fc-*) from ui/css/tokens.css, which is
   frozen. Every .btn / .chip box model comes from ui/css/components.css —
   this file never redefines them, only places them.

   Two things carried over on purpose, because they were already right:
     · the frame is drawn in HTML, not photographed,
     · the page still follows the device, white in light and black in dark.
       The one deliberate exception is the four-scene section, a genuine
       data-theme="dark" island, same as a photo stage never following it.

   Only transform and opacity are ever transitioned. Never `all`.
   ═══════════════════════════════════════════════════════════ */

html{scroll-behavior:smooth}
body{-webkit-tap-highlight-color:transparent}
main{position:relative;overflow:clip}

/* ── THE PILL NAV ─────────────────────────────────────────
   Floating over the hero from the first frame, on purpose: nothing behind
   it needs hiding, so there is no reason to wait for a scroll. The same
   #bar the old sub-nav used to slide in — the element and its is-on
   toggle are the script below, working unchanged. What changed is what
   is.is-on now MEANS: not "slide down", but "put glass under me". */
/* components.css has a .bar of its own — the kit's thin progress bar — at
   6px tall with its own border-radius and overflow:hidden. Same class name,
   different job; all three are reset here or the nav would sit clipped
   inside a 6px strip, same fix the previous version of this file made. */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:60;height:auto;min-height:64px;
  padding:var(--fc-s-3) 0;border-radius:0;overflow:visible;
  background:transparent;background-color:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--fc-dur-tap) var(--fc-ease),border-color var(--fc-dur-tap) var(--fc-ease);
}
.bar.is-on{
  background:var(--fc-glass);
  -webkit-backdrop-filter:var(--fc-glass-fx);backdrop-filter:var(--fc-glass-fx);
  border-bottom-color:var(--fc-border);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:var(--fc-s-4);position:relative}

/* The round mark. 40px of reach even though the drawn mark is smaller,
   because a logo is still a link home. */
.nav-mark{
  width:var(--fc-hit);height:var(--fc-hit);border-radius:var(--fc-r-pill);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--fc-ac);
}
.nav-mark svg{width:var(--fc-s-6);height:var(--fc-s-6);display:block}

/* The menu pill. Drawn at the reference's own 32px, with its hit area
   pushed out to 40px by an invisible centred square rather than by
   growing the pill itself, which would throw off the whole bar's rhythm. */
.nav-menu-btn{
  position:relative;display:inline-flex;align-items:center;gap:var(--fc-s-2);
  min-height:var(--fc-ctrl-h-sm);padding:var(--fc-s-2) var(--fc-s-3);
  color:var(--fc-fg);
}
.nav-menu-btn::before{
  content:'';position:absolute;top:50%;left:50%;
  width:var(--fc-hit);height:var(--fc-hit);transform:translate(-50%,-50%);
}
.nav-menu-btn:active{transform:scale(var(--fc-press))}
.nav-burger{display:inline-flex;flex-direction:column;gap:var(--fc-s-0);width:var(--fc-s-4);flex-shrink:0}
.nav-burger i{display:block;height:var(--fc-s-0);background:currentColor;border-radius:var(--fc-r-pill)}

/* The dropdown. A short, real list: the sections this one page actually
   has. Positioned under the bar, never covering it, so is-on's glass and
   the panel's own surface never fight for the same hairline. */
.nav-menu{
  position:absolute;top:calc(100% + var(--fc-s-3));right:0;z-index:61;
  display:flex;flex-direction:column;min-width:180px;
  background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:var(--fc-r-box);
  box-shadow:var(--fc-sh-pop);padding:var(--fc-s-2);
}
.nav-menu a{
  display:flex;align-items:center;min-height:var(--fc-hit);padding:0 var(--fc-s-3);
  border-radius:var(--fc-radius);color:var(--fc-fg2);font-size:var(--fc-fs-4);font-weight:var(--fc-fw-mid);
  text-decoration:none;transition:background-color var(--fc-dur-tap) var(--fc-ease),color var(--fc-dur-tap) var(--fc-ease);
}
.nav-menu a:hover{background:var(--fc-bg2);color:var(--fc-fg)}

@media (max-width:600px),(pointer:coarse) and (max-width:768px){
  .desk-only{display:none}
  /* With the desktop primary gone, the outline capsule beside it is the only
     action in the hero — and an outline button is the kit's QUIET one. On a
     phone it has to carry the weight the filled one was carrying, so it puts
     on the ink fill for as long as it is alone. */
  .acts .btn--ghost{background-color:var(--fc-fg);border-color:transparent;color:var(--fc-canvas)}
  .acts .btn--ghost:hover{background-color:var(--fc-fg2);border-color:transparent}
}

/* ── THE HERO + THE STAGE ────────────────────────────────
   One pinned section doing two jobs, same as before: on arrival it is the
   hero, left copy beside the floating frame; as you scroll, the copy
   swaps to one feature at a time while the frame — same element, same
   film — holds still. The geometry the script reads (.stage's own
   height, .stick's own sticky box) is unchanged, so its scroll logic
   never has to change either. Only the arrangement inside is new. */
.stage{position:relative;height:420vh}
.stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.stage-grid{
  position:relative;z-index:1;width:100%;
  display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"copy art" "cap cap";
  align-items:center;column-gap:var(--fc-s-8);row-gap:var(--fc-s-6);
}
.stage-copy{grid-area:copy;display:flex;flex-direction:column;gap:var(--fc-s-7);text-align:left}

/* The zone above the buttons. Hero copy and the three feature blocks share
   one grid cell, stacked, so the frame never moves and the zone measures
   itself from whichever block is tallest. */
.above{position:relative;width:100%;display:grid}
.hero-copy,.feat{
  grid-area:1 / 1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--fc-s-4);
  will-change:transform,opacity;
}
.feat{opacity:0;pointer-events:none}

.hero-chip{margin:0 0 var(--fc-s-2)}

/* Also worn by an <h2> (the scenes section's title), so it states the
   tracking and leading base.css would otherwise hand a heading. */
.kicker{font-size:var(--fc-fs-4);font-weight:var(--fc-fw-mid);color:var(--fc-ac-ink);margin:0;
  letter-spacing:normal;line-height:var(--fc-lh)}

/* The headline. Line one at full ink, line two quiet — the reference sets
   its sub-brand line this way, one size, two weights of colour. */
.lede{font-size:var(--fc-fs-11);line-height:var(--fc-lh-tight);letter-spacing:var(--fc-ls-tight);margin:0;max-width:11ch}
.lede .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.lede .ln>i{display:block;font-style:normal;transform:translateY(105%);
  animation:lnUp var(--fc-dur-slow) var(--fc-ease-out) var(--fc-stagger) forwards}
.lede .ln:nth-child(2)>i{animation-delay:calc(var(--fc-stagger) * 4)}
.lede .quiet{color:var(--fc-fg2)}
@keyframes lnUp{to{transform:none}}

.sub{font-size:var(--fc-fs-lead);line-height:1.5;color:var(--fc-fg2);max-width:var(--fc-prose-narrow);margin:0;
  animation:rise var(--fc-dur-slow) var(--fc-ease-out) calc(var(--fc-stagger) * 7) both}

.feat-t{font-size:var(--fc-fs-9);line-height:var(--fc-lh-snug);letter-spacing:var(--fc-ls-tight);font-weight:var(--fc-fw-mid);margin:0}
.feat-p{font-size:var(--fc-fs-read);line-height:1.55;color:var(--fc-fg2);max-width:36ch;margin:0}

.acts{display:flex;align-items:center;gap:var(--fc-s-4);flex-wrap:wrap;
  animation:rise var(--fc-dur-slow) var(--fc-ease-out) calc(var(--fc-stagger) * 11) backwards;will-change:opacity}

/* ── THE FRAME ───────────────────────────────────────────
   A macOS window, drawn in HTML, with the film inside it. Sharp at any
   size; the caption in the title bar is real, selectable text. */
.stage-art{grid-area:art;display:flex;flex-direction:column;align-items:center;gap:var(--fc-s-5)}
.app{
  width:100%;max-width:560px;background:var(--fc-photo);color:var(--fc-photo-fg);
  border:0;border-radius:var(--fc-r-xl);overflow:hidden;
  box-shadow:0 0 0 1px var(--fc-photo-line),var(--fc-sh-float);
  display:flex;flex-direction:column;text-align:left;
  animation:rise var(--fc-dur-slow) var(--fc-ease-out) calc(var(--fc-stagger) * 9) both;
}
.app-bar{
  position:relative;display:flex;align-items:center;gap:var(--fc-s-3);flex-shrink:0;height:38px;
  padding:0 var(--fc-s-3);border-bottom:1px solid var(--fc-photo-line);
  font-size:var(--fc-fs-2);color:var(--fc-photo-fg2);background:rgba(255,255,255,.03);
}
.lights{display:flex;gap:var(--fc-s-2);flex-shrink:0}
.lights i{width:12px;height:12px;border-radius:var(--fc-r-pill);display:block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
.l-close{background:#ff5f57}.l-min{background:#febc2e}.l-zoom{background:#28c840}
.app-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:var(--fc-s-2);white-space:nowrap}
.app-title b{font-weight:var(--fc-fw-up);color:var(--fc-photo-fg)}
.app-cap::before{content:'·';margin-right:var(--fc-s-2);opacity:.5}
.app-body{position:relative;flex:none;aspect-ratio:16 / 9}
.film{display:block;width:100%;height:100%;object-fit:cover;outline:0;background:var(--fc-photo)}

.stage-caption{
  grid-area:cap;justify-self:center;text-align:center;margin:0;
  font-size:var(--fc-fs-4);color:var(--fc-fg2);display:flex;align-items:center;gap:var(--fc-s-2);
}
.play-mark{color:var(--fc-fg3);font-size:.85em}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-height:900px){
  .lede{font-size:var(--fc-fs-10)}
}

@media (max-width:900px){
  .stage-grid{grid-template-columns:1fr;grid-template-areas:"copy" "art" "cap"}
  .stage-copy{text-align:center}
  .above,.hero-copy,.feat{align-items:center}
  .acts{justify-content:center}
  .lede{max-width:none}
}
@media (max-width:760px){
  .stage{height:360vh}
  .app-title .app-cap{display:none}
  .acts .btn{flex:1 1 220px}
}

/* ── REDUCED MOTION ───────────────────────────────────────
   Nothing pins, nothing fades, nothing waits for a scroll position. The
   copy blocks come out of their stack and lay down the page in reading
   order: hero, frame, buttons, caption, then one feature after another. */
@media (prefers-reduced-motion:reduce){
  .stage{height:auto}
  .stick{position:static;height:auto;padding:var(--fc-s-8) 0}
  .stage-grid{display:flex;flex-direction:column;align-items:center;gap:var(--fc-s-7);text-align:center}
  .stage-copy{align-items:center;text-align:center}
  .above{display:contents}
  .lede .ln>i,.sub,.app,.acts{animation:none;transform:none;opacity:1}
  .hero-copy{position:static;order:0;align-items:center}
  .stage-art{order:1}
  .acts{order:2}
  .stage-caption{order:3}
  .feat{position:static;order:4;opacity:1;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:var(--fc-s-3)}
}

/* ── THE FEATURE TRIO ─────────────────────────────────────── */
.trio{padding:var(--fc-s-10) 0}
.trio-head{max-width:var(--fc-prose-max);margin:0 0 var(--fc-s-8)}
.trio-head h2{
  font-size:var(--fc-fs-10);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);
  line-height:var(--fc-lh-snug);margin:0 0 var(--fc-s-4);
}
.trio-head p{font-size:var(--fc-fs-lead);color:var(--fc-fg2);line-height:1.5;margin:0}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fc-s-8)}
.trio-item{display:flex;flex-direction:column;gap:var(--fc-s-3)}
.trio-num{font-size:var(--fc-fs-2);color:var(--fc-fg3)}
.trio-item h3{font-size:var(--fc-fs-9);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);line-height:var(--fc-lh-snug);margin:0}
.trio-item p{font-size:var(--fc-fs-read);color:var(--fc-fg2);line-height:1.55;margin:0}
@media (max-width:760px){
  .trio-grid{grid-template-columns:1fr;gap:var(--fc-s-7)}
}

/* ── THE FOUR DARK SCENES ─────────────────────────────────
   One island section, dark regardless of the device, same as a photo
   stage never following the theme either. The art pins; the copy scrolls
   past it and hands off to the next scene when it arrives — the identical
   sticky-plus-progress technique the stage above uses, run again for four
   items instead of three, with its own script below. */
.scenes{padding:var(--fc-s-10) 0}
.scenes-eyebrow{margin:0 0 var(--fc-s-7)}
.scenes-wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--fc-s-9)}

.scene{min-height:72vh;display:flex;flex-direction:column;justify-content:center;gap:var(--fc-s-3);max-width:var(--fc-prose-narrow)}
.scene:first-child{min-height:56vh}
.scene:last-child{padding-bottom:var(--fc-s-8)}
.scene h3{font-size:var(--fc-fs-9);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);line-height:var(--fc-lh-snug);margin:0}
.scene p{font-size:var(--fc-fs-read);color:var(--fc-fg2);line-height:1.55;margin:0}

.scenes-stick{position:sticky;top:12vh;align-self:start;height:76vh}
.scene-art{position:absolute;inset:0;opacity:0;transition:opacity var(--fc-dur-slow) var(--fc-ease)}
.scene-art:first-child,.scene-art.is-active{opacity:1}
.scene-art .app{
  max-width:none;height:100%;border-radius:var(--fc-r-panel);
  box-shadow:0 0 0 1px var(--fc-photo-line),var(--fc-sh-float);
  animation:none;
}
.scene-art .app-body{flex:1;aspect-ratio:auto}

@media (max-width:900px){
  .scenes-wrap{display:flex;flex-direction:column;gap:0}
  .scenes-copy,.scenes-stick{display:contents}
  .scene{min-height:0;padding:var(--fc-s-6) 0;max-width:none}
  .scene:first-child{min-height:0}
  .scene[data-scene="0"]{order:0}.scene-art[data-scene-art="0"]{order:1}
  .scene[data-scene="1"]{order:2}.scene-art[data-scene-art="1"]{order:3}
  .scene[data-scene="2"]{order:4}.scene-art[data-scene-art="2"]{order:5}
  .scene[data-scene="3"]{order:6}.scene-art[data-scene-art="3"]{order:7}
  .scene-art{position:static;opacity:1;height:44vh;margin-bottom:var(--fc-s-6)}
  .scene-art .app{border-radius:var(--fc-r-panel)}
}
@media (prefers-reduced-motion:reduce){
  .scenes-wrap{display:flex;flex-direction:column;gap:0}
  .scenes-copy,.scenes-stick{display:contents}
  .scene{min-height:0;padding:var(--fc-s-6) 0;max-width:none}
  .scene:first-child{min-height:0}
  .scene[data-scene="0"]{order:0}.scene-art[data-scene-art="0"]{order:1}
  .scene[data-scene="1"]{order:2}.scene-art[data-scene-art="1"]{order:3}
  .scene[data-scene="2"]{order:4}.scene-art[data-scene-art="2"]{order:5}
  .scene[data-scene="3"]{order:6}.scene-art[data-scene-art="3"]{order:7}
  .scene-art{position:static;opacity:1;height:44vh;margin-bottom:var(--fc-s-6);transition:none}
}

/* ── THE REVEAL ───────────────────────────────────────────
   One scroll effect, used everywhere on the page: a block fades up as it
   arrives, once, then is never watched again. Transform and opacity only.
   Anything the checkout script unhides is deliberately left out of this. */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity var(--fc-dur-slow) var(--fc-ease-out),transform var(--fc-dur-slow) var(--fc-ease-out)}
[data-reveal="1"]{transition-delay:calc(var(--fc-stagger) * 2)}
[data-reveal="2"]{transition-delay:calc(var(--fc-stagger) * 4)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
}

/* ── PRICING ─────────────────────────────────────────────── */
.close{position:relative;z-index:1;padding:var(--fc-s-10) 0 var(--fc-s-9);scroll-margin-top:80px}
.plan-card{
  max-width:560px;margin:0 auto;background:var(--fc-bg);border-radius:var(--fc-r-panel);
  box-shadow:var(--fc-sh-1);padding:var(--fc-s-8) var(--fc-s-7);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--fc-s-4);
}
.close-t{font-size:var(--fc-fs-9);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);line-height:var(--fc-lh-snug);margin:0}
.close-p{color:var(--fc-fg2);font-size:var(--fc-fs-read);line-height:1.55;margin:0;max-width:44ch}

.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--fc-s-2);text-align:left;align-self:stretch}
.ticks li{display:flex;align-items:baseline;gap:var(--fc-s-2);color:var(--fc-fg2);font-size:var(--fc-fs-4)}
.ticks li::before{content:'✓';color:var(--fc-ac-ink);font-weight:var(--fc-fw-mid);flex-shrink:0}

.pitch{display:flex;flex-direction:column;align-items:center;gap:var(--fc-s-3);width:100%;margin-top:var(--fc-s-2)}
.pitch .btn{width:100%}
.pitch-alt{font:inherit;font-size:var(--fc-fs-4);color:var(--fc-fg2);background:none;border:0;
  min-height:var(--fc-hit);padding:var(--fc-s-2) 0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--fc-border);text-underline-offset:4px;
  transition:color var(--fc-dur-tap) var(--fc-ease)}
.pitch-alt:hover{color:var(--fc-fg)}
.pitch-alt b{color:var(--fc-fg);font-weight:var(--fc-fw)}

.buy{width:100%;max-width:460px;margin:0 auto;text-align:left;
  display:flex;flex-direction:column;gap:var(--fc-s-4);animation:rise var(--fc-dur-slow) var(--fc-ease-out) both}

.foot-link{font:inherit;font-size:inherit;color:var(--fc-fg2);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--fc-border);text-underline-offset:3px}
.foot-link:hover{color:var(--fc-fg)}
.step{width:100%;max-width:460px;margin:var(--fc-s-6) auto 0;text-align:left;
  display:flex;flex-direction:column;align-items:stretch;gap:var(--fc-s-3);
  animation:rise var(--fc-dur-slow) var(--fc-ease-out) both}
.step .kicker{display:flex;align-items:center;gap:var(--fc-s-3)}
.step-n{display:none;width:24px;height:24px;border-radius:var(--fc-r-sm);background:var(--fc-ac);color:var(--fc-ac-on);
  font-size:var(--fc-fs-2);font-weight:var(--fc-fw-up);align-items:center;justify-content:center;flex:none}
.close.issued .step-n{display:inline-flex}
.issued-l{color:var(--fc-ok);margin:var(--fc-s-6) 0 0;text-align:left;width:100%;max-width:460px}
.install-p{color:var(--fc-fg2);margin:0;max-width:44ch}
.line{display:flex;align-items:center;gap:var(--fc-s-3);flex-wrap:wrap;margin:0;
  padding:var(--fc-s-3) var(--fc-s-4);border:1px solid var(--fc-border);border-radius:var(--fc-radius)}
.line code{font-family:var(--fc-font-mono);font-size:var(--fc-fs-3);color:var(--fc-fg);word-break:break-all}
.line-copy{font:inherit;font-size:var(--fc-fs-2);color:var(--fc-fg2);background:none;cursor:pointer;
  min-height:var(--fc-hit);border:1px solid var(--fc-border);border-radius:var(--fc-r-pill);padding:var(--fc-s-1) var(--fc-s-3);
  transition:color var(--fc-dur-tap) var(--fc-ease),border-color var(--fc-dur-tap) var(--fc-ease)}
.line-copy:hover{color:var(--fc-fg);border-color:var(--fc-border2)}
.install-film{display:block;width:100%;height:auto;aspect-ratio:1280/800;
  border-radius:var(--fc-radius);background:var(--fc-bg2);box-shadow:0 0 0 1px var(--fc-border)}
.foot-line{width:100%;margin:var(--fc-s-7) 0 0;font-size:var(--fc-fs-note);color:var(--fc-fg2);text-align:center}

@media (max-width:760px){
  .close{padding:var(--fc-s-8) 0 var(--fc-s-7)}
  .plan-card{padding:var(--fc-s-6) var(--fc-s-5)}
}

/* ═══════════════════════════════════════════════════════════
   THE CHECKOUT. Moved from the download page with its script, unchanged.
   Every id and class below is one src/checkout.js writes into, or reads
   from — never renamed, only restyled.
   ═══════════════════════════════════════════════════════════ */
.actions{display:flex;flex-wrap:wrap;gap:var(--fc-s-3);margin-bottom:var(--fc-s-5);width:100%}
.actions .btn{flex:1 1 auto;min-width:200px}
.pending{border:1px solid var(--fc-border);border-radius:var(--fc-radius);padding:var(--fc-s-5);max-width:46ch}
.pending b{display:block;font-weight:var(--fc-fw-up);color:var(--fc-fg);margin-bottom:var(--fc-s-2)}
.pending p{font-size:var(--fc-fs-4);color:var(--fc-fg2);line-height:var(--fc-lh-prose)}
.meta{display:flex;flex-wrap:wrap;gap:var(--fc-s-2) var(--fc-s-5);
  font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em;font-variant-numeric:tabular-nums;
  color:var(--fc-fg2)}
.meta span{display:inline-flex;align-items:center;gap:var(--fc-s-2)}
.meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--fc-border2);flex-shrink:0}

.buyer{max-width:100%;margin-bottom:var(--fc-s-4);width:100%}
.buyer label{display:block;font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em;
  color:var(--fc-fg2);margin-bottom:var(--fc-s-2)}
.buyer input{width:100%;background:transparent;border:1px solid var(--fc-border);border-radius:var(--fc-r-sm);color:var(--fc-fg);
  padding:var(--fc-s-3) var(--fc-s-4);font-size:var(--fc-fs-5);font-family:inherit;outline:none;
  transition:border-color var(--fc-dur) var(--fc-ease)}
.buyer input::placeholder{color:var(--fc-fg3)}
.buyer input:hover{border-color:var(--fc-border2)}
/* The kit's own .input:focus draws a 2px ink ring at 2px offset. These fields
   had outline:none with only a border-colour change standing in for it, which
   is the one thing AGENTS.md says never to do — and it was on the name, email
   and country of the checkout, the highest-stakes form on the site. */
.buyer input:focus{border-color:var(--fc-fg);
  outline:var(--fc-bw2) solid var(--fc-ring);outline-offset:2px}
.buyer #email-fld{margin-top:var(--fc-s-4)}
.fld-note{font-size:var(--fc-fs-3);color:var(--fc-fg2);line-height:1.5;margin-top:var(--fc-s-2)}
.buy-line{font-size:var(--fc-fs-4);color:var(--fc-fg2);line-height:1.55;margin-bottom:var(--fc-s-5)}
.buy-line b{color:var(--fc-fg);font-weight:var(--fc-fw);font-family:var(--fc-font-mono);font-variant-numeric:tabular-nums}
.buyer select{width:100%;background:transparent;border:1px solid var(--fc-border);
  border-radius:var(--fc-r-sm);color:var(--fc-fg);padding:var(--fc-s-3) var(--fc-s-4);font-size:var(--fc-fs-5);
  font-family:inherit;outline:none;transition:border-color var(--fc-dur) var(--fc-ease)}
.buyer select:hover{border-color:var(--fc-border2)}
.buyer select:focus{border-color:var(--fc-fg);outline:var(--fc-bw2) solid var(--fc-ring);outline-offset:2px}
.buyer select option{background:var(--fc-bg);color:var(--fc-fg)}
.buyer #country-fld{margin-top:var(--fc-s-4)}

.plans{display:grid;margin-bottom:var(--fc-s-5);border:1px solid var(--fc-border);border-radius:var(--fc-radius);overflow:hidden;width:100%}
.plan{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:var(--fc-s-1) var(--fc-s-3);
  width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--fc-border);
  color:var(--fc-fg);font-family:inherit;padding:var(--fc-s-4) var(--fc-s-4);cursor:pointer;
  transition:background-color var(--fc-dur) var(--fc-ease)}
.plan:first-child{border-top:0}
.plan:hover{background:var(--fc-bg2)}
.plan:active{transform:scale(var(--fc-press))}
.plan:focus-visible{outline-offset:-3px}
.plan::before{content:'';grid-row:1 / span 2;align-self:start;margin-top:var(--fc-s-1);
  width:14px;height:14px;border-radius:var(--fc-r-sm);border:1px solid var(--fc-border2);
  box-shadow:inset 0 0 0 3px var(--fc-bg);
  transition:background-color var(--fc-dur) var(--fc-ease),border-color var(--fc-dur) var(--fc-ease)}
.plan[aria-pressed="true"]{background:var(--fc-bg2)}
.plan[aria-pressed="true"]::before{background:var(--fc-fg);border-color:var(--fc-fg)}
.plan-n{grid-column:2;font-size:var(--fc-fs-5);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-mid)}
.plan-p{grid-column:3;font-family:var(--fc-font-mono);font-size:var(--fc-fs-4);color:var(--fc-fg2);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.plan[aria-pressed="true"] .plan-p{color:var(--fc-fg)}
.plan-d{grid-column:2;font-size:var(--fc-fs-3);color:var(--fc-fg2);line-height:1.45}
.plan-tag{display:inline-block;font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em;
  color:var(--fc-fg2);border:1px solid var(--fc-border);border-radius:var(--fc-r-pill);padding:var(--fc-s-1) var(--fc-s-2) var(--fc-s-0);
  margin-left:var(--fc-s-2);vertical-align:2px}

.pay-msg{font-size:var(--fc-fs-4);color:var(--fc-fg);line-height:1.5;margin-bottom:var(--fc-s-4);width:100%}
.paid{border:1px solid var(--fc-border);border-radius:var(--fc-radius);padding:var(--fc-s-5);margin-bottom:var(--fc-s-5);
  width:100%;max-width:460px;margin-left:auto;margin-right:auto;text-align:left}
.paid .warn-l{color:var(--fc-ok)}
.paid b{display:block;font-weight:var(--fc-fw-up);color:var(--fc-fg);font-size:var(--fc-fs-5);margin-bottom:var(--fc-s-3)}
.paid p{font-size:var(--fc-fs-4);color:var(--fc-fg2);line-height:var(--fc-lh-prose);margin-top:var(--fc-s-3)}
.warn-l{display:block;font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em;
  color:var(--fc-fg2);margin-bottom:var(--fc-s-3)}
.cmd{display:flex;align-items:center;gap:var(--fc-s-3);margin-top:var(--fc-s-3);
  border:1px solid var(--fc-border);border-radius:var(--fc-r-sm);background:var(--fc-bg);padding:var(--fc-s-3)}
.cmd code{font-family:var(--fc-font-mono);font-size:var(--fc-fs-4);color:var(--fc-fg);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;overflow-x:auto;white-space:nowrap;flex:1;min-width:0}
.copy{flex-shrink:0;font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em;
  color:var(--fc-fg);background:transparent;
  border:1px solid var(--fc-border);border-radius:var(--fc-r-sm);padding:var(--fc-s-2) var(--fc-s-3);cursor:pointer;
  min-height:var(--fc-hit);
  transition:background-color var(--fc-dur) var(--fc-ease),color var(--fc-dur) var(--fc-ease),border-color var(--fc-dur) var(--fc-ease)}
.copy:hover{background:var(--fc-fg);color:var(--fc-bg);border-color:var(--fc-fg)}
.copy:active{transform:scale(var(--fc-press))}
.copy.done,.copy.done:hover{background:transparent;color:var(--fc-ok);border-color:var(--fc-ok)}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{padding:var(--fc-s-10) 0}
.faq-head h2{font-size:var(--fc-fs-10);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);
  line-height:var(--fc-lh-snug);margin:0 0 var(--fc-s-8);max-width:var(--fc-prose-max)}
.faq-list{max-width:var(--fc-prose-max);border-top:1px solid var(--fc-border)}
.faq-list details{border-bottom:1px solid var(--fc-border)}
/* The padding belongs to the summary, not to the <details> around it: only
   the summary toggles the row, so padding on the parent looks like a big
   target and is not one. With it here the whole row is the control, and
   --fc-hit guarantees the 40px the kit asks for even on a one-word question. */
.faq-list summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--fc-s-4);cursor:pointer;
  min-height:var(--fc-hit);padding:var(--fc-s-5) 0;
  font-size:var(--fc-fs-6);font-weight:var(--fc-fw-mid);color:var(--fc-fg);list-style:none;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:'';flex-shrink:0;width:var(--fc-s-4);height:var(--fc-s-4);
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  color:var(--fc-fg2);transition:transform var(--fc-dur-tap) var(--fc-ease);
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin-top:var(--fc-s-3);color:var(--fc-fg2);font-size:var(--fc-fs-read);line-height:var(--fc-lh-prose);max-width:var(--fc-prose-narrow)}

/* ── OUTRO ───────────────────────────────────────────────── */
.outro{
  background:var(--fc-fg);color:var(--fc-canvas);padding:var(--fc-s-10) 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--fc-s-6);
}
.outro h2{font-size:var(--fc-fs-10);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);line-height:var(--fc-lh-snug);margin:0}
.outro .btn--primary{background:var(--fc-canvas);color:var(--fc-fg)}
.outro .btn--ghost{border-color:var(--fc-canvas);color:var(--fc-canvas)}

@media (max-width:760px){
  .trio,.scenes,.faq{padding:var(--fc-s-8) 0}
  .outro{padding:var(--fc-s-8) 0}
}