/**
 * BAND — one stylesheet, two pages.
 *
 * Lifted out of index.html when the offer moved to its own page at /reserve: the
 * price card, the size and shipping fields and the result panels are now read on
 * a different URL than the one they were written for, and a copy of their rules
 * on each page is a copy that drifts. Both pages link this, so the purchase page
 * cannot stop looking like the site it belongs to.
 *
 * Still one request either way — the file is versioned in the markup and
 * revalidated with it, so a deploy can never hand a visitor new markup and the
 * previous day's rules.
 *
 * ---------------------------------------------------------------------------
 * THE INSTRUMENT FACEPLATE
 *
 * The page is drawn as the front panel of a measuring device, because that is
 * what the product is: BAND reads a quantity and reports it. The old styling
 * said "cinematic tech" — pill buttons, floating glass, a neon accent with a
 * bloom around it. Handsome, and it described a launch rather than an
 * instrument. Everything here is the other reading:
 *
 *   - Nothing is a pill. Radius is 0 on plates and 2px on controls, which is as
 *     much as a machined part gets. A rounded rectangle is furniture; a cut
 *     rectangle is a component.
 *   - Every panel carries corner registration ticks, drawn as eight hairline
 *     gradients in its own background rather than as elements, so they cost no
 *     DOM and cannot land over a hit area.
 *   - The hairline calibration grid behind the page is one fixed, pointer-
 *     transparent layer. Fixed because a grid that scrolls with the content is a
 *     repaint on every frame; the section backgrounds are transparent so it
 *     shows through the whole column.
 *   - Rules are rulers. Every `.rule` in the markup is now a tick scale with
 *     numbered intervals implied by the spacing, not a plain 1px line.
 *   - Figures are tabular everywhere a number can change under the reader, so a
 *     price or a clock never shifts the words beside it.
 *   - The base surface is PANTONE 19-4012 TCX "Carbon", and the whole neutral
 *     ramp is solved off it rather than chosen beside it. See :root below.
 *   - The accent green is desaturated off the old neon (#39FF6A -> #35C46A). It
 *     has to sit next to the band photography without out-shouting the actual
 *     glow in the picture, which is the thing being sold. The three signal
 *     colours are left exactly as the product defines them; they are content,
 *     not palette, so they were not re-derived when the base changed.
 *   - Motion is mechanical: sweeps, steps and snaps on transform/opacity only.
 *     The intro plate used to drift on a loop like something suspended. It now
 *     seats itself once and holds, because a panel is bolted down.
 *
 * Type is Archivo throughout — a grotesque with a real width axis, so headings
 * are set expanded like the silkscreen on a control surface while body copy
 * stays at normal width — with JetBrains Mono for every label, readout and
 * measurement. Two families, two jobs.
 *
 * The class and id names are untouched. Every hook assets/reserve.js toggles
 * (`reserve-live`, `reserve-shut`, `reserve-region`, `sale-live`,
 * `reserve-open`, `is-missing`, `is-ok`, `is-err`, `is-open`) means exactly what
 * it meant before, so the payment path is styled differently and wired
 * identically.
 */
:root{
  /* The site's colour is PANTONE 19-4012 TCX "Carbon" — #272F38, the standard sRGB
     rendering of that standard. Pantone files it under Purple-Blue in the Fashion,
     Home + Interiors cotton library; on screen it reads as a very dark, cool
     charcoal blue. The product is a carbon meter, so the base surface is the
     colour the industry's own reference library calls Carbon. It is not a stylistic
     near-black any more; it is a specified value and should be treated as fixed.

     Everything below it in the ramp is derived from it rather than picked beside it.
     Carbon is about 1.4x lighter than the near-black it replaced, so the old scale
     could not simply be kept — the panels used to be lighter than the page, and at
     their old values they would now be darker than it, inverting the elevation. Each
     neutral here was instead solved to reproduce its predecessor's exact contrast
     ratio against the new base, on Carbon's own hue (212), with saturation tapering
     as the ramp lightens so surfaces stay in the family and reading text stays
     near-neutral. The hierarchy is therefore numerically the one the design was
     drawn with, on a different foundation.

     --ink is the one exception: it is pinned by lightness, not by ratio. Its old
     15.6:1 is unreachable against a base this light — pure white tops out at
     13.6:1 — and pure white is not a reading colour. It lands at 10.8:1, still
     well inside AAA. */
  --bg:#272F38;            /* PANTONE 19-4012 TCX Carbon                        */
  --bg-panel:#2B343D;      /* 1.07:1 on Carbon — the plate, a step off the page */
  --bg-panel-2:#2F3842;    /* 1.14:1 — the well inside a plate                  */
  --line:#38424E;          /* 1.33:1 — the hairline                             */
  --ink:#E4E5E7;           /* 10.8:1                                            */
  --ink-muted:#A7AEB6;     /* 6.05:1                                            */
  /* Desaturated from #39FF6A. Still unmistakably the band's green, no longer a
     light source of its own. */
  --green:#35C46A;
  --blue:#3B87E8;
  --red:#E8443A;
  --amber:#D99A3C;
  /* The same red, raised in lightness until it clears AA on all three surfaces
     (5.15:1 on the page, 4.80:1 on a plate, 4.52:1 in a well). --red itself is a
     lamp colour: it is read as a dot, a rule or a border, where 3.4:1 is fine and
     3:1 is the standard. Sentences are different, so the two places red carries a
     sentence use this instead. Hue and saturation are the red's exactly (3.5 deg,
     0.79); only lightness moves, and only as far as it has to. */
  --red-text:#EF7F78;

  /* --- faceplate hardware ------------------------------------------------ */
  --line-2:#46525F;        /* 1.70:1 — brighter hairline: ticks, engraved edges */
  --ink-dim:#717E8D;       /* 3.27:1 — quietest ink, for units and notes        */
  --tick:#4F5B68;          /* 1.95:1 — corner registration marks               */
  --tick-len:9px;
  --grid:rgba(228,229,231,0.028);
  --display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Expanded display width, stated once. Archivo's variable width axis carries
     it; the static fallback instances round to the nearest keyword. */
  --wide:112%;
  --r:2px;                 /* the whole radius budget for a control */
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--display);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden makes body a scroll container and breaks sticky descendants */
  overflow-x:clip;
}
/* The calibration grid. One fixed layer, pointer-transparent, painted under
   everything: it never scrolls, so it never costs a repaint, and every section
   leaves its own background transparent so this reads the full height of the
   page. Deliberately near-invisible — it should register as texture, and only
   resolve into lines if someone looks for them.

   z-index:-1, not 0. A positioned layer at z-index:0 paints in the same step as
   the page's own positioned boxes and therefore *above* the in-flow text of
   every element that is not itself positioned — a faint veil over most of the
   copy on the site. At -1 it paints in the negative step instead: above the
   canvas, which is where `body`'s own background ends up once it propagates to
   the root, and below every line of content. Nothing then needs a z-index of
   its own just to stay in front of the texture.

   Nothing that creates a stacking context goes on `body` itself, because `nav`
   blends in `difference` against the page and would stop seeing it. */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:76px 76px;
}
::selection{ background:var(--green); color:#272F38; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:var(--mono); letter-spacing:0.02em; font-variant-numeric:tabular-nums; }
.display{ font-family:var(--display); font-stretch:var(--wide); }

/* Every figure that can be rewritten under the reader — prices, totals, clocks,
   counts — is tabular, so the words beside it never move when it changes. */
[data-reserve-amount], [data-reserve-total], [data-reserve-retail],
[data-reserve-saving], [data-booking-amount], [data-booking-balance],
[data-booking-total], [data-reserve-units], [data-sale-was]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- focus ---------- */
/* Square, and offset far enough to clear a control's own hairline. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:0;
}

/* ---------- registration ticks ---------- */
/* The faceplate signature, shared by every plate on the site. Eight hairline
   gradients in the element's own background paint an L at each corner: no
   pseudo-elements, so a plate keeps ::before and ::after for its own use, and
   no positioned children that could sit between a finger and a button.

   background-color still fills the plate, so this composes with the panel
   colour instead of replacing it — which also means no rule below may set the
   `background` shorthand on one of these, or it takes the ticks with it.

   `.swatch` is deliberately not in this list: its <img> covers the plate edge to
   edge, so ticks would show through the dimmed inactive state at half strength
   and disappear entirely on the active one. A registration mark that comes and
   goes is worse than none. */
.token,
.wl-panel,
.rr-card,
.hero-film-frame,
.rc-email{
  --t:linear-gradient(var(--tick), var(--tick));
  background-image:
    var(--t), var(--t),   /* top-left    */
    var(--t), var(--t),   /* top-right   */
    var(--t), var(--t),   /* bottom-left */
    var(--t), var(--t);   /* bottom-right*/
  background-size:
    var(--tick-len) 1px, 1px var(--tick-len),
    var(--tick-len) 1px, 1px var(--tick-len),
    var(--tick-len) 1px, 1px var(--tick-len),
    var(--tick-len) 1px, 1px var(--tick-len);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat:no-repeat;
}

/* ---------- tick scales ---------- */
/* Every `.rule` span in the markup was a 36px hairline. They are ruler
   segments now: a repeating tick comb sitting on a baseline, which is the one
   detail that does the most to say "measurement" for the least markup. */
.rule{
  flex:none;
  width:46px; height:7px;
  background-image:repeating-linear-gradient(
    to right,
    var(--ink-dim) 0 1px,
    transparent 1px 6px
  );
  background-repeat:repeat-x;
  background-position:left top;
  border-bottom:1px solid var(--ink-dim);
}

/* ---------- indicator lamps ---------- */
/* `.dot` was a glowing circle with a bloom around it. A panel lamp is square,
   bezelled, and states one thing by being lit. It pulses on opacity only —
   a box-shadow that grows is a bloom, and this palette has no blooms. */
.dot{
  width:8px; height:8px; flex:none;
  border-radius:1px;
  background:var(--green);
  box-shadow:0 0 0 1px rgba(53,196,106,0.26);
  animation:pulseDot 2.4s steps(1, end) infinite;
}
@keyframes pulseDot{
  0%,54%{ opacity:1; }
  55%,100%{ opacity:0.34; }
}

/* ---------- intro: one headline on Carbon before the page is handed over ---------- */
/* Set on <html> in the source so the gate is locked from the first paint, not after JS. */
html.intro-on, html.intro-on body{ overflow:hidden; }

#intro{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  overflow:hidden;
  transition:opacity 0.9s ease;
}
#intro.is-gone{ opacity:0; pointer-events:none; }
#introChrome{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:22px clamp(20px,5vw,56px) clamp(28px,5vh,52px);
}
#introTop{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#introWordmark .brand-logo{ height:18px; }
#introControls{ display:flex; gap:10px; }
#introSkip{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(0,0,0,0.12);
  border:1px solid rgba(0,0,0,0.45);
  border-radius:var(--r);
  color:var(--ink);
  padding:9px 15px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
#introSkip::before{
  content:''; width:6px; height:6px; flex:none;
  background:var(--ink-muted);
  transition:background 0.2s ease;
}
#introSkip:hover{ background:rgba(0,0,0,0.24); border-color:rgba(0,0,0,0.7); }
#introSkip:hover::before{ background:var(--green); }

/* The headline is the whole intro, set like a campaign slogan: one family, all caps,
   heaviest cut, tight leading, stacked dead centre. It is pinned to the middle of the
   gate itself (not the space under the top bar), so the Carbon around it is equal on
   every side. */
#introHeadline{
  position:absolute; top:50%; left:50%;
  width:calc(100% - 2 * clamp(20px,6vw,72px));
  margin:0;
  text-align:center;
  font-family:var(--display);
  font-stretch:100%;
  font-weight:900;
  font-size:clamp(44px,11.5vw,168px);
  line-height:0.86;
  letter-spacing:-0.035em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0; transform:translate3d(-50%,calc(-50% + 18px),0);
  transition:opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.9,.2,1);
}
#introHeadline span{ display:block; }
#introHeadline.is-visible{ opacity:1; transform:translate3d(-50%,-50%,0); }

@media (max-width:760px){
  #introChrome{ padding:18px 20px 26px; }
  #introSkip{ padding:8px 12px; font-size:9.5px; }
}

/* ---------- sound button on the hero film ---------- */
/* The icon and the wording follow aria-pressed, so the control can never disagree
   with what the visitor is actually hearing. */
.is-sound-btn .ico-on{ display:none; }
.is-sound-btn .ico-off{ display:block; }
.is-sound-btn[aria-pressed="true"] .ico-on{ display:block; }
.is-sound-btn[aria-pressed="true"] .ico-off{ display:none; }
.sound-label{ font-family:var(--mono); }

/* While the browser is still holding the audio back, the control is the one thing on
   screen that needs finding — so it marks itself until the sound is actually on.
   A hard two-state blink of the border rather than a halo: the same information,
   in hardware's vocabulary. */
.is-sound-btn.is-waiting{
  border-color:rgba(53,196,106,0.62);
  animation:sound-wait 1.6s steps(1, end) infinite;
}
@keyframes sound-wait{
  0%,49%{ border-color:rgba(53,196,106,0.62); }
  50%,100%{ border-color:rgba(228,229,231,0.22); }
}
@media (prefers-reduced-motion: reduce){
  .is-sound-btn.is-waiting{ animation:none; }
}

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  /* Kept: this is what holds the bar legible when a cream reserve pill or a bright swatch
     scrolls under it. It applies to the whole bar, the logo included — over the page's
     near-black the three dots come through within a few percent of their true colour, and
     over the rare bright element the mark inverts with the rest of the nav rather than
     going missing, which reads as the bar doing it on purpose.

     Nothing above may create a stacking context on <body>, or this stops seeing
     the page it is blending against. */
  mix-blend-mode:difference;
}
/* The wordmark is the logo now, not letter-spaced text. One copy of the artwork lives in
   a hidden sprite at the top of the body and every slot points at it, so the nav, the intro
   and the footer can never drift apart. The lettering is drawn in `currentColor`, which is
   what lets the same artwork serve the dark page and the intro's white gate; the three dots
   carry their own red, green and blue, the band's three glow states. */
.brand-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.wordmark{ display:flex; align-items:center; color:var(--ink); }
.brand-logo{
  display:block;
  height:17px;
  /* The width/height attributes on the element give it its intrinsic ratio; the
     aspect-ratio repeats it for anything that sizes replaced SVG less willingly. */
  width:auto;
  aspect-ratio:480 / 104.3;
}
.navlinks{ display:flex; gap:26px; align-items:center; }
/* Section links are set as panel legends: mono, small, tracked, with a tick
   that lights under the pointer. */
.navlinks a{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-muted);
  transition:color 0.2s ease;
}
.navlinks a:hover{ color:var(--ink); }
/* The CTA is the one hard-edged switch in the bar. Square, filled in ink,
   inverting to the panel colour on hover. */
.nav-cta{
  display:inline-flex; align-items:center;
  border:1px solid var(--ink);
  border-radius:var(--r);
  padding:9px 16px;
  font-size:11.5px;
  /* Reserve is a link to /reserve now rather than a button that opened an overlay in
     place, and the waitlist pill beside it was always a link. Both are reset here so a
     <button> in this slot would still look like the switch the rest of them are. */
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  letter-spacing:0.12em; text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
/* The reserve switch reads in full ink at the size the rest of the CTA was set in. As a
   <button> it was out of reach of the muted `.navlinks a` colour above; as a link it is
   not, so it says so at the specificity that rule brings. */
.navlinks a.nav-cta-reserve{ color:var(--ink); font-size:11.5px; }
/* And inverts on hover like the switch it is — stated at the same specificity, or the
   colour above would outrank `.nav-cta:hover` and hold the ink through the fill. */
.navlinks a.nav-cta-reserve:hover{ color:#272F38; }
.nav-cta:hover{ background:var(--ink); color:#272F38; }
/* The reserve CTA holds three parts on one line, so it lays them out rather than
   relying on the whitespace between spans. */
.nav-cta-reserve{
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.nav-cta-tag{ letter-spacing:0.12em; opacity:0.58; }
/* The amount is ruled off the verb, the way a readout is ruled off its legend. */
.nav-cta-amt{
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
  padding-left:9px;
  border-left:1px solid currentColor;
  opacity:0.72;
}

/* ---------- hero ---------- */
/* No background of its own any more: the grid behind the page is the hero's
   backdrop, which is what lets the texture run unbroken from the first screen
   to the last. */
/* Stacks from the top: the reel, then the pitch straight beneath it. It used to
   fill the screen and pin the pitch to the bottom, which left a dead gap under the
   reel on tall phones. */
#hero{
  display:flex; flex-direction:column;
  padding:0 clamp(20px,5vw,56px) 64px;
}
.hero-eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink-muted);
  margin-top:140px; margin-bottom:26px;
  display:flex; align-items:center; gap:11px;
}
/* The headline is the silkscreen on the panel: expanded width, tight leading,
   set in the display face at its heaviest. */
h1{
  font-family:var(--display);
  font-stretch:var(--wide);
  font-weight:700;
  font-size:clamp(38px, 6.4vw, 92px);
  line-height:0.96;
  letter-spacing:-0.022em;
  max-width:15ch;
}
/* The hero headline sets its own line breaks, so give it room to hold them. */
#hero h1{
  max-width:22ch;
}
/* One plain paragraph under the headline — no rules, no sections. */
.hero-sub{
  margin-top:26px;
  max-width:52ch;
  font-size:clamp(14.5px,1.6vw,17px);
  font-weight:400;
  color:var(--ink-muted);
  line-height:1.72;
}
.hero-sub [data-reserve-amount]{ color:var(--ink); }
.hero-sub p + p{ margin-top:1.05em; }
/* The opening line carries the thesis, so it reads a step louder than the rest. */
.hero-sub .hero-lead{
  font-size:clamp(17px,2vw,21px);
  line-height:1.5;
  color:var(--ink);
  font-weight:500;
}
/* The three states, keyed by a lamp dot rather than tinted type, so the words
   keep full contrast against Carbon. */
.hue{ color:var(--ink); white-space:nowrap; }
.hue::before{
  content:""; display:inline-block;
  width:7px; height:7px; border-radius:50%;
  margin:0 0.4em 0.12em 0.1em; vertical-align:middle;
}
.hue-green::before{ background:var(--green); box-shadow:0 0 8px var(--green); }
.hue-blue::before{ background:var(--blue); box-shadow:0 0 8px var(--blue); }
.hue-red::before{ background:var(--red); box-shadow:0 0 8px var(--red); }
/* The edition line: the facts stamped like a serial plate, then the one action. */
.hero-sub .hero-edition{
  margin-top:1.6em;
  padding-top:1.3em;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
}
.hero-edition-line{
  font-size:11px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink); line-height:1.6;
}
.hero-edition-cta{
  font-size:11px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  padding:10px 16px;
  border:1px solid var(--ink-dim);
  border-radius:var(--r);
  transition:border-color .2s, background-color .2s;
}
.hero-edition-cta:hover,
.hero-edition-cta:focus-visible{ border-color:var(--ink); background:rgba(228,229,231,0.06); }
/* The reel sits directly above the pitch; the top margin clears the fixed nav. */
.hero-reel{
  width:100%; max-width:880px;
  margin-top:120px;
}
.hero-reel + .hero-eyebrow{ margin-top:48px; }

/* The Netlify Forms email row: one squared field and one squared switch, butted
   together with a shared hairline instead of nested in a rounded capsule. */
form.waitlist{
  display:flex; gap:0;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:0;
  max-width:440px;
  width:100%;
  background:var(--bg-panel);
  transition:border-color 0.2s ease;
}
form.waitlist:focus-within{ border-color:var(--ink-muted); }
form.waitlist input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--ink);
  padding:14px 16px;
  font-size:14px;
  font-family:var(--display);
  min-width:0;
}
form.waitlist input::placeholder{ color:var(--ink-dim); }
form.waitlist button{
  background:var(--ink);
  color:#272F38;
  border:none;
  border-radius:0;
  padding:14px 22px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.2s ease;
}
form.waitlist button:hover{ background:var(--green); }
form.waitlist button:active{ background:var(--green); }
/* Status lines are readouts: mono, tracked, with a coloured tick in front so the
   state is legible before the sentence is read. */
.form-success{
  font-size:12px; color:var(--green); margin-top:11px; display:none;
  font-family:var(--mono); letter-spacing:0.06em;
}
.form-error{
  font-size:12px; color:var(--red-text); margin-top:11px; display:none;
  font-family:var(--mono); letter-spacing:0.06em;
}
form.waitlist button[disabled]{ opacity:0.55; cursor:default; }
.hp{ display:none; }

/* ---------- reserve: the founding-price booking that replaced the waitlist ---------- */
/* One switch shape for every CTA on the page, so "Reserve the band" reads the
   same in the nav and at the close. Squared, filled, with a leading indicator
   block that goes green when the pointer is on it — the panel telling you which
   control is live.

   `overflow:hidden` and the ::after sweep together give it the one piece of
   mechanical motion on the page: a hairline passing left to right across the
   face on hover, like a needle crossing a scale. */
.btn-reserve{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ink); color:#272F38;
  border:0; border-radius:var(--r);
  padding:16px 24px;
  font-family:var(--mono);
  font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:background 0.2s ease, color 0.2s ease;
}
.btn-reserve::before{
  content:''; width:7px; height:7px; flex:none;
  background:#272F38;
  transition:background 0.2s ease;
  position:relative; z-index:1;
}
.btn-reserve::after{
  content:''; position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(90deg, transparent, rgba(39,47,56,0.11), transparent);
  transform:translateX(-140%);
  pointer-events:none;
}
.btn-reserve:hover::after{ animation:btnSweep 0.62s cubic-bezier(.4,0,.2,1); }
@keyframes btnSweep{ to{ transform:translateX(360%); } }
.btn-reserve > *{ position:relative; z-index:1; }
/* The amount is ruled off the verb inside the switch, matching the nav. */
.btn-reserve .amt{
  font-family:var(--mono);
  font-size:12px; letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
  padding-left:11px;
  border-left:1px solid rgba(39,47,56,0.28);
  opacity:0.68;
}
.btn-reserve:hover{ background:var(--green); }
.btn-reserve:hover::before{ background:#272F38; }
.btn-reserve:active{ background:var(--green); }
.btn-reserve[disabled]{ opacity:0.45; cursor:default; }
.btn-reserve[disabled]::after{ animation:none; }
.btn-reserve svg{ width:16px; height:16px; display:block; position:relative; z-index:1; }

/* Only ever visible when the gateway reports test credentials. */
.reserve-testmode{
  margin:16px 0 0; padding:9px 12px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.09em; line-height:1.6;
  color:var(--amber);
  border:1px solid rgba(217,154,60,0.34);
  border-left-width:3px;
  border-radius:var(--r);
  background:rgba(217,154,60,0.06);
}
.reserve-testmode[hidden]{ display:none; }

/* The email form. Once the CTA itself, now only the waitlist shown while the
   gateway is dormant — the price card is the single reserve CTA when it is live. */
.notify{ margin-top:18px; }
.notify-body{ display:block; margin-top:14px; }

/* ---------- gateway dormant ---------- */
/* The page is written around the founding-price booking, but a "Reserve the band" button must never be
   shown when the server cannot actually open an order — a CTA that answers with an error costs
   more than no CTA at all. So the reserve furniture waits to be told it can work.

   There are three states here rather than two, and the third one is the fix for a page that
   spent every load advertising the wrong offer. It used to be that "not yet told" and "told no"
   were the same state, which meant the free waitlist form was what /reserve opened on — for the
   tenth of a second to two seconds it took /api/reserve/config to answer, on every visit, with
   a live gateway. Long enough to read, and long enough to submit: the site collected addresses
   for a waitlist it had stopped running.

   Now nothing to do with the offer is shown until the state is known: `.reserve-live` reveals the
   price card, `.reserve-shut` reveals the waitlist fallback, and neither class reveals neither.
   The state is normally already on the element when the page arrives — netlify/edge-functions/
   reserve-state.ts puts it there from the same credentials the gateway reads — so this is the
   answer to a config call that failed or a script that never ran, and it degrades to a page
   missing a section rather than one making an offer that isn't real.

   Untouched by the redesign: these are the payment path's own switches. */
html:not(.reserve-live) [data-reserve],
html:not(.reserve-live) [data-reserve-only]{ display:none !important; }
html:not(.reserve-shut) [data-reserve-off]{ display:none !important; }

/* The shut state splits in two, and only the wording differs — both open the same waitlist.
   `.reserve-shut` alone means the site cannot take a payment from anyone; `.reserve-region`
   means it can, just not from this visitor, because their country has no method this Razorpay
   account accepts. Telling them apart matters because the generic copy ("reservations aren't
   open yet") is false about the site for most of this page's traffic, and a visitor who reads
   it waits for an opening that already happened. `[data-reserve-off]` above stays common to
   both, so the form itself is written once. */
html:not(.reserve-shut) [data-reserve-closed],
html.reserve-region [data-reserve-closed]{ display:none !important; }
html:not(.reserve-region) [data-reserve-region]{ display:none !important; }

/* ---------- the flash-sale hour ---------- */
/* Switched on exactly the way the reserve furniture above it is, and for the
   same reason: the sale copy is hidden in the source and revealed only once
   /api/reserve/config reports an hour that is actually open. So this page is
   the ordinary founding-price site before the sale, and becomes it again the
   moment the hour is up — nothing to deploy, nothing to remember to take down.
   `[data-sale-off]` is the copy the sale replaces while it runs. */
html:not(.sale-live) [data-sale-only]{ display:none !important; }
html.sale-live [data-sale-off]{ display:none !important; }

/* ---------- sales closed ---------- */
/* The Founder's 100 is sold out and buying BAND outright is closed: the only door left is
   the paid waitlist. Everything that sells the band — every buy button, the price card, the
   flash-sale furniture — is switched off here unconditionally, whatever the gateway or the
   sale clock says, and /api/reserve/order refuses to open an order behind it. To reopen
   sales, delete this block and the refusal in netlify/functions/reserve.mts. */
[data-reserve],
[data-buy-only],
[data-sale-only]{ display:none !important; }

/* The announcement itself: a strip along the bottom of the window rather than
   the top, where the fixed nav already sits in difference blend mode — a
   second bar up there either covers it or shifts the whole hero out from
   under it.

   Drawn as hazard tape, which is the one place an industrial panel is allowed
   to shout: amber diagonal hatching along the top edge, a flat dark plate
   under it, no blur. It is the only warm element on the site and it is only
   ever on screen for an hour. */
.sale-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:clamp(10px,2.2vw,22px);
  padding:13px clamp(16px,4vw,40px);
  background-color:#363020;
  border-top:1px solid rgba(217,154,60,0.5);
  box-shadow:0 -18px 40px rgba(0,0,0,0.55);
  transition:transform 0.45s cubic-bezier(.2,.9,.2,1), opacity 0.3s ease;
}
/* The hatched warning edge, as a background layer rather than an element so it
   cannot intercept a tap meant for the switch. */
.sale-bar::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(217,154,60,0.85) 0 6px,
    transparent 6px 12px
  );
  pointer-events:none;
}
/* Out of the way behind the gate and behind the payment card: the film owns
   the first seventy-five seconds, and a clock ticking over an open card is a
   distraction beside a form someone is typing an address into. */
html.intro-on .sale-bar,
html.reserve-open .sale-bar{
  transform:translateY(120%); opacity:0; pointer-events:none;
}
.sale-bar-label{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--amber);
}
.sale-bar-label .dot{
  width:8px; height:8px; border-radius:1px; background:var(--amber); flex:none;
  box-shadow:0 0 0 1px rgba(217,154,60,0.34);
  animation:salePulse 1.4s steps(1, end) infinite;
}
@keyframes salePulse{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0.2; } }
.sale-bar-price{
  display:inline-flex; align-items:baseline; gap:11px;
  font-family:var(--display);
  font-stretch:var(--wide);
  font-weight:700;
  font-size:clamp(17px,2.4vw,22px); letter-spacing:-0.015em;
  font-variant-numeric:tabular-nums;
}
.sale-bar-price s{ font-size:12.5px; font-weight:400; color:var(--ink-dim); }
.sale-bar-words{
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink-muted);
}
/* The clock, wherever it appears. Tabular figures so a strip centred on the
   window does not twitch sideways once a second. */
.sale-clock{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:13px; letter-spacing:0.09em; color:var(--ink);
  padding:6px 11px; border-radius:var(--r);
  background:rgba(217,154,60,0.12);
  border:1px solid rgba(217,154,60,0.38);
}
.sale-bar .btn-reserve{ padding:11px 18px; font-size:11px; }
/* The strip is fixed over the page, so the page is given the height back:
   without this the last line of the site — and the scroll cue at the bottom of
   the hero — sit permanently underneath it. Only while the sale runs, so the
   ordinary page keeps its own spacing exactly. */
html.sale-live body{ padding-bottom:86px; }
/* The clock inline in a line of mono copy, where the panel styling would read
   as a second button. */
.sale-inline{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:var(--amber);
}
/* The digits tick every second, so they are kept out of the accessibility
   tree and the closing time is given in words alongside — a screen reader
   reads "ends at 4:15 pm" once instead of announcing sixty numbers a minute. */
.sale-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* On narrow screens the strip keeps the two things it has to say — the price
   and the time left — and drops the words between them. */
@media (max-width:640px){
  .sale-bar{ gap:10px 14px; padding:13px 16px; }
  .sale-bar-words{ display:none; }
  /* Two lines rather than one down here, so the page owes the strip more room. */
  html.sale-live body{ padding-bottom:128px; }
}
@media (prefers-reduced-motion: reduce){
  .sale-bar{ transition:none; }
  .sale-bar-label .dot{ animation:none; }
}

/* ---------- reserve confirm: the small step before the card form ---------- */
/* The address the receipt will go to, shown back as a readout: mono, ruled,
   ticked at the corners like every other plate. */
.rc-email{
  margin-top:16px; padding:11px 13px;
  background-color:var(--bg-panel);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:0.05em; color:var(--ink-muted);
  overflow-wrap:anywhere;
}
.rc-pay{ width:100%; justify-content:center; margin-top:18px; }

/* Why the Pay button below is not pressable. Amber rather than red: nothing has
   gone wrong for the visitor and nothing was charged — the gateway is simply not
   switched on, which is a state this panel now says out loud instead of not opening. */
.rc-note{
  margin-top:16px; padding:12px 13px;
  background:rgba(217,154,60,0.07);
  border:1px solid rgba(217,154,60,0.32);
  border-left-width:3px;
  border-radius:var(--r);
  font-size:12.5px; line-height:1.65; color:var(--amber);
}

/* ---------- reserve result: one panel for every outcome ---------- */
/* The panel the payment path reports into. Every id and state class below is
   read by assets/reserve.js and is unchanged; only the drawing is new — a
   squared plate on a flat scrim, with a status legend instead of a halo. */
.reserve-result{
  position:fixed; inset:0; z-index:120;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(24,29,35,0.92);
}
.reserve-result.is-open{ display:flex; }
html.reserve-open, html.reserve-open body{ overflow:hidden; }
.reserve-result .rr-card{
  width:100%; max-width:460px;
  background-color:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:0;
  padding:30px;
  /* The one place the page uses a top edge as a status light: the colour is set
     by the is-ok / is-err classes below, so the outcome is legible before a
     single word of it is read. */
  border-top:2px solid var(--line-2);
}
.reserve-result.is-ok .rr-card{ border-top-color:var(--green); }
.reserve-result.is-err .rr-card{ border-top-color:var(--red); }
/* The success mark: a square bezel rather than a circle, matching the lamps. */
.rr-success-mark{
  display:none;
  width:50px; height:50px;
  align-items:center; justify-content:center;
  margin:2px 0 22px;
  border:1px solid rgba(53,196,106,0.45);
  border-radius:var(--r);
  background:rgba(53,196,106,0.07);
  color:var(--green);
}
.reserve-result.is-ok .rr-success-mark{
  display:flex;
  animation:rrSuccessIn 0.34s cubic-bezier(.2,.9,.2,1) both;
}
.rr-success-mark svg{ width:25px; height:25px; display:block; }
.rr-success-mark path{
  stroke-dasharray:26;
  stroke-dashoffset:26;
  animation:rrCheckDraw 0.4s 0.14s ease-out forwards;
}
@keyframes rrSuccessIn{
  from{ opacity:0; transform:translate3d(0,6px,0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}
@keyframes rrCheckDraw{ to{ stroke-dashoffset:0; } }
.rr-label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink-muted);
  padding-bottom:13px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.rr-dot{
  width:8px; height:8px; border-radius:1px; background:var(--ink-muted); flex:none;
  box-shadow:0 0 0 1px rgba(167,174,182,0.24);
}
.reserve-result.is-ok .rr-dot{ background:var(--green); box-shadow:0 0 0 1px rgba(53,196,106,0.3); }
.reserve-result.is-err .rr-dot{ background:var(--red); box-shadow:0 0 0 1px rgba(232,68,58,0.3); }
#reserveResultHeading{
  font-family:var(--display);
  font-stretch:var(--wide);
  font-size:23px; font-weight:700; line-height:1.18; letter-spacing:-0.015em;
  margin-bottom:12px;
}
#reserveResultBody{ font-size:14px; color:var(--ink-muted); line-height:1.68; }
#reserveResultNext{
  display:none; margin-top:18px; padding:13px 14px;
  background:rgba(53,196,106,0.06);
  border-left:3px solid var(--green);
  font-size:13px; color:var(--ink); line-height:1.58;
  overflow-wrap:anywhere;
}
#reserveResultDetail{
  display:none; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.07em; color:var(--ink-dim);
  overflow-wrap:anywhere;
}
#reserveResultClose{
  margin-top:22px; width:100%;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  padding:13px 20px; cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
#reserveResultClose:hover{ background:var(--bg-panel-2); border-color:var(--ink-muted); }
@media (prefers-reduced-motion:reduce){
  .reserve-result.is-ok .rr-success-mark,
  .rr-success-mark path{ animation:none; }
  .rr-success-mark path{ stroke-dashoffset:0; }
}

/* The scroll cue: a needle crossing a tick scale. The rail is the ruler comb
   `.rule` draws everywhere else; the sweep is a single lit tick travelling it. */
.scroll-cue{
  margin-top:44px;
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink-dim);
}
.scroll-cue .rule{
  position:relative; overflow:hidden;
  width:72px;
}
.scroll-cue .rule::after{
  content:''; position:absolute; top:0; bottom:0; width:9px;
  background:var(--green);
  transform:translateX(-101%);
  animation:cueSweep 3.4s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes cueSweep{
  0%{ transform:translateX(-101%); }
  60%,100%{ transform:translateX(800%); }
}

/* ---------- hero film (the former intro film, now inline below the pitch) ---------- */
.hero-film{
  margin-top:52px;
  width:100%;
  max-width:880px;
}
.hero-film-frame{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
  background-color:#000;
  box-shadow:0 24px 60px -30px rgba(0,0,0,0.75);
}
.hero-film-frame video{
  display:block; width:100%; height:100%;
  object-fit:cover;
  opacity:0.95;
}
/* Keeps the sound button legible over a bright frame without dimming the whole film. */
.hero-film-frame::after{
  content:''; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, rgba(39,47,56,0.62), transparent);
  pointer-events:none;
}
.hero-film-sound{
  position:absolute; right:14px; bottom:16px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(39,47,56,0.66);
  border:1px solid rgba(228,229,231,0.28);
  border-radius:var(--r);
  color:var(--ink);
  padding:9px 14px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.15em; text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.hero-film-sound:hover{ background:rgba(39,47,56,0.88); border-color:rgba(228,229,231,0.5); }
.hero-film-sound svg{ width:13px; height:13px; display:block; }
/* Segmented, like the intro's timer: the same readout in a smaller frame. */
.hero-film-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  background:rgba(228,229,231,0.12);
}
.hero-film-progress span{
  display:block; height:100%; width:0%;
  background:var(--green);
  -webkit-mask-image:repeating-linear-gradient(to right, #000 0 5px, transparent 5px 7px);
  mask-image:repeating-linear-gradient(to right, #000 0 5px, transparent 5px 7px);
}
.hero-film-cap{
  margin-top:14px;
  display:flex; align-items:center; gap:11px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink-dim);
}

/* ---------- status strip (signature element) ---------- */
#status{
  padding:120px clamp(20px,5vw,56px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.status-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:28px; flex-wrap:wrap;
  margin-bottom:60px;
}
.status-head h2{
  font-family:var(--display);
  font-stretch:var(--wide);
  font-size:clamp(26px,3.4vw,44px);
  font-weight:700;
  letter-spacing:-0.02em;
  max-width:16ch;
  line-height:1.08;
}
.status-head p{
  max-width:36ch; color:var(--ink-muted); font-size:14.5px; line-height:1.72;
  padding-left:18px; border-left:1px solid var(--line);
}
.status-live{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-muted);
}
/* The three states now share a row with the step they illustrate, so the grid
   runs vertically and the photo is held to a column rather than a third of the
   viewport. */
.signal-eyebrow{
  display:flex; align-items:center; gap:13px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:12px;
}
.signal-rows{ display:grid; }
.signal-row{
  display:grid;
  grid-template-columns:minmax(0, 300px) 1fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
  border-top:1px solid var(--line);
  padding:clamp(30px,3.6vw,48px) 0;
}
.signal-row:last-child{ border-bottom:1px solid var(--line); }
/* The band photograph, mounted: squared, hairlined, corner-ticked, and holding
   its own state legend at the foot like a specimen plate. */
.swatch{
  background-color:var(--bg-panel);
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:0;
}
.swatch img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.02);
  opacity:0.52;
  transition:opacity 0.4s ease;
}
/* No slow scale on the active frame any more: a mounted plate does not creep.
   The state reads through brightness alone. */
.swatch.active img{ opacity:1; }
.swatch-tag{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px;
  display:flex; justify-content:space-between; align-items:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,0.82), transparent 78%);
}
.swatch-tag .label{
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
}
/* The measurement, ruled off the state name the way a value is ruled off its
   legend everywhere else on the panel. */
.swatch-tag .range{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
  color:var(--ink-muted);
  padding-left:10px;
  border-left:1px solid rgba(228,229,231,0.22);
}
.swatch[data-state="low"] .swatch-tag .label{ color:var(--green); }
.swatch[data-state="moderate"] .swatch-tag .label{ color:var(--blue); }
.swatch[data-state="high"] .swatch-tag .label{ color:var(--red); }

/* ---------- how it works — the step copy, now sitting beside its band state ---------- */
/* The step index is the plate number: large, mono, ruled under, the way a
   control on a faceplate is numbered rather than bulleted. */
.step .num{
  font-family:var(--mono);
  color:var(--ink-dim);
  font-size:11px; letter-spacing:0.18em;
  display:block;
  padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
  max-width:120px;
}
.step h3{
  font-family:var(--display);
  font-stretch:var(--wide);
  font-size:clamp(20px,2.1vw,26px);
  font-weight:700;
  letter-spacing:-0.015em;
  margin-bottom:12px;
}
.step p{
  color:var(--ink-muted);
  font-size:14.5px;
  line-height:1.75;
  max-width:46ch;
}

@media (max-width:900px){
  .signal-row{ grid-template-columns:minmax(0, 210px) 1fr; gap:26px; }
}

/* ---------- mission ---------- */
/* Set left inside a centred measure rather than centre-set: the line is an
   engraved statement on the panel, and engraving is not centred prose. */
#mission{
  padding:132px clamp(20px,5vw,56px);
  border-top:1px solid var(--line);
  display:flex; justify-content:center;
}
#mission p{
  font-family:var(--display);
  font-stretch:var(--wide);
  font-size:clamp(24px,4vw,46px);
  font-weight:600;
  line-height:1.28;
  letter-spacing:-0.02em;
  max-width:24ch;
  padding-left:clamp(18px,3vw,30px);
  border-left:2px solid var(--line-2);
}
#mission .accent{ color:var(--green); }

/* ---------- the note film: the last picture before the letter ---------- */
/* Its own band between the mission line and the note, so the letter keeps the quiet
   opening it was written for and the film is not pushed inside the reading column.
   Borrows the hero film's frame, sound toggle and progress rail rather than inventing
   a second set of film chrome — same component, one screen further down. */
#note-film{
  padding:104px clamp(20px,5vw,56px);
  border-top:1px solid var(--line);
  display:flex; justify-content:center;
}
/* The hero spaces its film off the pitch copy above it; here the section padding does
   that job, so the component's own top margin would only double it. */
#note-film .hero-film{ margin-top:0; }

/* ---------- the note: a letter, not a pitch ---------- */
/* The last thing read before the price. Set left inside a centred column, because a
   letter that is centre-set stops reading like one, and left on the page background
   rather than in a card so it never reads as a second offer beside the price panel.

   The old radial ember under it is gone: a glow behind text is the vocabulary this
   redesign dropped. What marks the letter out instead is that it is the one block on
   the site set in the display face at a reading size — the panel's engraving voice
   used at length. */
#note{
  padding:110px clamp(20px,5vw,56px);
  border-top:1px solid var(--line);
  display:flex; justify-content:center;
  position:relative; overflow:hidden;
}
.note-letter{ position:relative; width:100%; max-width:650px; }
/* Scoped past `.note-letter p` below, which would otherwise win on specificity and
   set the eyebrow at letter size. */
.note-letter .note-eyebrow{
  display:flex; align-items:center; gap:13px;
  font-family:var(--mono);
  font-size:10px; font-weight:400; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--ink-muted);
  padding-bottom:26px; margin-bottom:30px;
  border-bottom:1px solid var(--line);
}
/* A letter, so: lighter than the pitch copy and set a step larger to carry the weight
   down. Brightened to keep the light weight from going faint against the panel black. */
.note-letter p{
  font-size:clamp(16px,1.5vw,17.5px); line-height:1.88;
  font-weight:300;
  color:#D0D3D7;
  max-width:60ch;
}
.note-letter p + p{ margin-top:22px; }
.note-letter .accent{ color:var(--green); }
/* The signature sits under a rule: contact details, not more of the letter. */
.note-letter .note-sign{
  margin-top:34px; padding-top:24px;
  border-top:1px solid var(--line);
  font-size:14px; font-weight:400; line-height:1.85; color:var(--ink-muted);
}
.note-sign a{
  font-family:var(--mono);
  color:var(--ink);
  font-size:13px; letter-spacing:0.04em; white-space:nowrap;
  border-bottom:1px solid rgba(53,196,106,0.5);
  padding-bottom:1px;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.note-sign a:hover{ color:var(--green); border-bottom-color:var(--green); }

/* ---------- the offer, now its own page at /reserve ---------- */
#reserve{
  padding:100px clamp(20px,5vw,56px) 120px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:22px;
}
/* On the landing page the hero cleared the fixed nav for everything under it. The
   purchase page opens on the card itself, so the card is what has to clear it — and
   there is nothing above it for a top border to divide it from. */
.page-reserve #reserve{ padding-top:132px; border-top:none; }
/* The nav links and the old /reserve URL jump straight to these sections, and the nav
   is fixed, so each one keeps clear of it when it is scrolled to. */
#reserve, #waitlist{ scroll-margin-top:72px; }
.reserve-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink-dim);
}
/* The country name is written in by reserve.js from Intl, which gives it back
   capitalised as prose — "Bangladesh" in a line that is otherwise all caps. The
   eyebrow is typed in caps rather than transformed to them, so this is the one
   string on it that has to be. */
.reserve-eyebrow [data-reserve-country]{ text-transform:uppercase; }
#reserve h2{
  font-family:var(--display);
  font-stretch:var(--wide);
  font-size:clamp(28px,4vw,52px);
  font-weight:700;
  letter-spacing:-0.022em;
  line-height:1.04;
  max-width:18ch;
}
#reserve .reserve-lede{
  color:var(--ink-muted);
  font-size:14.5px; line-height:1.72;
  max-width:52ch;
}

/* The price panel: what the money buys, stated before the overlay opens.
   The faceplate's main plate — squared, corner-ticked, and split by a hairline
   down the middle so the two columns read as two ganged sections of one
   instrument rather than as two cards that happen to touch. */
.token{
  width:100%; max-width:800px;
  margin-top:8px;
  text-align:left;
  background-color:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:0;
  padding:32px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:0;
}
/* The engraved divider between the two ganged sections. It is a background on the
   right-hand column, and the gutter is that column's padding, so the line's
   position comes from the grid itself — a positioned pseudo-element would need a
   percentage recomputed by hand every time the column ratio or the plate padding
   changed, and would sit a couple of pixels off the gutter's centre until it was.
   Sized short of full height so it reads as engraved between the sections rather
   than ruled from edge to edge. */
.token > div:first-child{ padding-right:34px; }
.token > div:last-child{
  padding-left:34px;
  background-image:linear-gradient(var(--line), var(--line));
  background-repeat:no-repeat;
  background-size:1px calc(100% - 18px);
  background-position:left 9px;
}
.token-label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink-muted);
  padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
/* The headline figure: the instrument's primary readout. Tabular, expanded,
   and in ink rather than in the accent — the accent is reserved for what the
   offer *saves*, which is the number that is actually news. */
.token-price{
  font-family:var(--display);
  font-stretch:var(--wide);
  font-size:clamp(34px,5vw,48px); font-weight:700;
  letter-spacing:-0.03em; line-height:0.98;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
/* The founding price beside retail. Both numbers have to sit together — the
   offer is the distance between them — so this row carries the struck retail
   figure and the saving, and reserve.js drops the pair if the charged amount
   ever rises to meet retail. */
.token-compare{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.05em; color:var(--ink-muted);
  font-variant-numeric:tabular-nums;
  margin-top:13px; line-height:1.6;
}
.token-compare .strike s{ color:var(--ink-dim); }
.token-compare .save{
  color:var(--green);
  border:1px solid rgba(53,196,106,0.34);
  border-radius:var(--r);
  padding:3px 9px;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
}
.token-rows .row s{ color:var(--ink-dim); }
.token-rows .row .save-amt{ color:var(--green); }
.token-note{
  font-size:13px; color:var(--ink-muted); line-height:1.72;
  margin-top:20px; max-width:40ch;
}
/* The spec sheet. A dotted leader runs from each label to its value, which is
   how a specification table has been set for a century and is the single most
   instrument-like thing on the page. The leader is drawn by the first span's
   ::after, so the two-span markup is untouched. */
.token-rows{ margin-top:4px; }
.token-rows .row{
  display:flex; align-items:baseline; gap:0;
  padding:11px 0;
  font-size:13px;
}
.token-rows .row span:first-child{
  display:flex; align-items:baseline; gap:9px;
  flex:1 1 auto; min-width:0;
  color:var(--ink-muted);
}
.token-rows .row span:first-child::after{
  content:''; flex:1 1 auto; min-width:14px;
  border-bottom:1px dotted var(--line-2);
  transform:translateY(-4px);
}
.token-rows .row span:last-child{
  flex:none; padding-left:10px;
  font-family:var(--mono); font-size:12px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* ---------- the total row, under the price breakdown ---------- */
/* Every figure above it is per band, so with more than one on the order the
   only number that answers "what will I be charged" is this one. It is
   separated from the list rather than being one more line in it. */
.token-rows .row.total{
  border-top:1px solid var(--line-2);
  margin-top:6px; padding-top:14px;
}
.token-rows .row.total span:first-child{
  color:var(--ink);
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.13em; text-transform:uppercase;
}
.token-rows .row.total span:last-child{ color:var(--green); font-size:14.5px; }

/* ---------- how many bands, inside the price card ---------- */
/* A reservation covers a household or a team as often as a single wrist, so the
   count is asked for in the same card as the size and the total moves with it.
   A stepper rather than a select: the answer is almost always one or two, and a
   tap beats opening a ten-item list — but the number itself stays a real
   input, so it can be typed, and the buttons only move the same value the
   server is going to check.

   Drawn as one ganged control: three cells sharing hairlines, no gaps, so it
   reads as a single counter module rather than three separate buttons. */
.token-qty{
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line);
}
.qty-control{
  display:flex; align-items:stretch; gap:0;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-panel-2);
  overflow:hidden;
}
.qty-control:focus-within{ border-color:var(--ink-muted); }
.qty-step{
  flex:0 0 auto; width:50px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:0;
  color:var(--ink); font-family:var(--mono); font-size:16px; line-height:1;
  cursor:pointer;
  transition:background 0.18s ease, color 0.18s ease;
}
.qty-step:first-child{ border-right:1px solid var(--line); }
.qty-step:last-child{ border-left:1px solid var(--line); }
.qty-step:hover:not(:disabled){ background:var(--line); }
.qty-step:focus-visible{ outline:2px solid var(--green); outline-offset:-2px; }
/* At the floor and at the cap. Disabled rather than hidden, so the control
   never changes shape under the finger that is tapping it. */
.qty-step:disabled{ color:#5A6572; cursor:not-allowed; }
.qty-input{
  flex:1 1 auto; min-width:0;
  -webkit-appearance:none; appearance:textfield; -moz-appearance:textfield;
  padding:13px 14px;
  background:transparent;
  border:0; border-radius:0;
  color:var(--ink); font-family:var(--mono); font-size:15px; line-height:1.3;
  font-variant-numeric:tabular-nums;
  text-align:center;
  outline:none;
}
/* The native spinners are a second, tinier pair of the buttons either side. */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-input:focus-visible{ outline:2px solid var(--green); outline-offset:-2px; }

/* ---------- the size picker, inside the price card ---------- */
/* BAND is a physical band in three wrist sizes, so the size is part of the order
   rather than something to settle by email after the money has moved. It sits
   directly above the button — the last thing answered before paying — and the
   chart needed to answer it honestly folds away underneath, so a reservation card
   is not turned into a size table. */
.token-size{
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line);
}
.size-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-bottom:10px;
}
.size-head label{
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink-muted);
}
.size-head .req{
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--green);
}
/* Native select chrome is light-mode furniture in a dark card, so the control is
   drawn here and the chevron comes in as a background rather than as an element
   that could sit over the hit area. A chevron on a faceplate is a solid caret,
   so that is what the data URI draws. */
.size-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:100%;
  padding:13px 40px 13px 14px;
  background-color:var(--bg-panel-2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4.2h8L6 9z' fill='%23A7AEB6'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; background-size:12px 12px;
  border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink); font-family:var(--display); font-size:14px; line-height:1.3;
  cursor:pointer;
  transition:border-color 0.18s ease, background-color 0.18s ease;
}
.size-select:hover{ border-color:var(--ink-muted); }
.size-select:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
/* The list itself is drawn by the OS, which uses the page colours only if it is told to. */
.size-select option{ background:var(--bg-panel-2); color:var(--ink); }
.size-select:invalid, .size-select option[value=""]{ color:var(--ink-muted); }
/* The unanswered state after a press, not on arrival: nobody is scolded for a
   field they have not reached yet. */
.token-size.is-missing .size-select{ border-color:var(--amber); }
.size-hint{
  margin-top:10px;
  font-size:12px; line-height:1.65; color:var(--ink-muted);
}
.size-hint b{ color:var(--ink); font-weight:600; }
.size-error{
  display:none;
  margin-top:10px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.08em; line-height:1.55; color:var(--amber);
}
.token-size.is-missing .size-error{ display:block; }

/* The chart, folded. <details> rather than a scripted panel, so it opens with
   JS off and reads as one row of the card until it is asked for. */
.size-guide{ margin-top:13px; }
.size-guide summary{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--ink-muted);
  cursor:pointer; list-style:none;
}
.size-guide summary::-webkit-details-marker{ display:none; }
/* A solid caret, matching the select's, rather than a rotating chevron rule. */
.size-guide summary::after{
  content:''; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform 0.2s ease;
}
.size-guide[open] summary::after{ transform:rotate(180deg); }
.size-guide summary:hover{ color:var(--ink); }
.size-guide summary:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
.size-chart{
  width:100%; border-collapse:collapse;
  margin-top:13px;
  font-size:12.5px;
}
.size-chart th, .size-chart td{
  text-align:left; padding:9px 10px 9px 0;
  border-bottom:1px solid var(--line);
}
.size-chart thead th{
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:0.15em; font-weight:400; color:var(--ink-dim);
  text-transform:uppercase;
}
.size-chart tbody th{ font-weight:600; color:var(--ink); }
.size-chart td{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.size-chart tr:last-child th, .size-chart tr:last-child td{ border-bottom:none; }
.size-measure{
  margin-top:13px;
  font-size:12.5px; line-height:1.72; color:var(--ink-muted);
}

/* ---------- where it ships, and how we reach you ---------- */
/* Two more blocks of the same field, in the same card, for the same reason the
   size is here: a band is a physical object going to a physical address, and
   an order that has to be completed by email afterwards is an order that
   stalls. They reuse the size picker's head, hint and error rows so the card
   reads as one column of questions rather than as a form bolted underneath
   one. The grid is two columns wide inside a column that is itself about
   340px, which is exactly enough for City beside Postal code and not enough
   for anything else to share a row. */
.token-ship,
.token-contact{
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line);
}
.ship-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
}
.ship-wide{ grid-column:1 / -1; }
/* Same box as the select above it, minus the caret — one control drawn once,
   so a text field and a dropdown in the same grid are the same object. */
.ship-input{
  width:100%; min-width:0;
  -webkit-appearance:none; appearance:none;
  padding:13px 14px;
  background-color:var(--bg-panel-2);
  border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink); font-family:var(--display); font-size:14px; line-height:1.3;
  transition:border-color 0.18s ease;
}
.ship-input::placeholder{ color:var(--ink-dim); opacity:1; }
.ship-input:hover{ border-color:var(--ink-muted); }
.ship-input:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
/* Marked per field rather than per block: with six of them on screen, an amber
   border around all six says only that something is wrong somewhere. This is
   set by reserve.js on the fields it is actually waiting for, after a press —
   nobody is scolded for a field they have not reached yet. */
.ship-input[aria-invalid="true"],
.size-select[aria-invalid="true"]{ border-color:var(--amber); }
.token-ship.is-missing .size-error,
.token-contact.is-missing .size-error{ display:block; }

/* Sits tight above the button so it reads as part of the CTA, not as another row. */
.token-scarce{
  margin:22px 0 0;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase; line-height:1.55;
  color:var(--green);
  text-align:center;
}
.token .btn-reserve{ width:100%; justify-content:center; margin-top:20px; }
/* Same specificity as the rule above and written after it, so the button pulls up
   under the line and the two read as one block. */
.token-scarce + .btn-reserve{ margin-top:12px; }
.token-secure{
  text-align:center;
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-dim);
  margin-top:14px;
}

/* Three steps, as a line of microcopy rather than another card grid — the page
   already has one set of steps and doesn't need to repeat the shape. Each is
   ticked off a hairline so the line reads as a legend strip. */
.book-steps{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin-top:6px;
}
.book-steps li{
  list-style:none;
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-dim);
}
.book-steps li .n{
  color:var(--green);
  padding-right:9px;
  border-right:1px solid var(--line);
}
/* The centred column would otherwise shrink the fallback field to the width of its own label. */
#reserve .notify{ width:100%; max-width:440px; }

/* ---------- the waitlist: the answer for whoever isn't paying today ---------- */
/* The reservation is a payment, and the page had nothing to offer the visitor who
   wanted in but not yet — the old email field opened the card overlay the moment it
   was submitted. This section sits directly under the price and asks for one thing,
   with no price anywhere in it: the two offers read as a choice rather than as the
   same funnel twice. */
#waitlist{
  padding:96px clamp(20px,5vw,56px);
  border-top:1px solid var(--line);
  display:flex; justify-content:center;
}
.wl-wrap{ width:100%; max-width:800px; }
.wl-eyebrow{
  display:flex; align-items:center; gap:13px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--ink-muted);
}
#waitlist h2{
  margin-top:20px;
  font-family:var(--display);
  font-stretch:var(--wide);
  font-size:clamp(24px,3.2vw,40px);
  font-weight:700; line-height:1.08; letter-spacing:-0.022em;
  max-width:24ch;
}
.wl-lede{
  margin-top:16px;
  color:var(--ink-muted); font-size:14.5px; line-height:1.72;
  max-width:56ch;
  padding-left:18px; border-left:1px solid var(--line);
}
.wl-panel{
  margin-top:30px;
  background-color:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:0;
  padding:26px clamp(20px,3vw,28px);
}
.wl-form{ display:block; }
/* What the booking costs and what it leaves owing, side by side, because the two
   figures only make sense together: 1,500 alone reads as the price and 2,200 alone
   reads as a surprise. The sum underneath is the sentence they add up to. Every
   figure in here is written by assets/reserve.js from /api/reserve/config — the
   markup ships with them only so the panel reads right before that lands. */
.wl-price{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:0 clamp(14px,3vw,26px);
  margin:0 0 22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.wl-price-part{ min-width:0; }
.wl-price-label{
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--ink-dim);
}
.wl-price-figure{
  margin-top:8px;
  font-family:var(--display);
  font-stretch:var(--wide);
  font-size:clamp(23px,3.4vw,32px);
  font-weight:700; line-height:1; letter-spacing:-0.025em;
  font-variant-numeric:tabular-nums;
}
/* Only the amount actually being taken today is in the accent colour; the balance
   is the same size but plain, so the panel can't be misread as charging both. */
.wl-price-part:first-of-type .wl-price-figure{ color:var(--green); }
.wl-price-plus{ color:var(--ink-dim); font-family:var(--mono); font-size:15px; line-height:1; }
.wl-price-sum{
  grid-column:1 / -1;
  margin-top:18px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-dim);
}
/* The flash-hour caveat under it, in amber rather than grey: it is the one line in
   this panel that contradicts a figure the price card above is showing. */
.wl-price-note{
  grid-column:1 / -1;
  margin-top:9px;
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase;
  line-height:1.65;
  color:var(--amber);
}
/* Name beside address on a desktop row, stacked below it — the button is its own
   row either way, because a third column shrinks both fields to nothing. */
.wl-fields{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.wl-field{
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--ink);
  font-family:var(--display);
  font-size:14px;
  padding:13px 15px;
  min-width:0; width:100%;
  outline:none;
  transition:border-color 0.2s ease;
}
/* The phone number, on its own full-width row under the two required fields, so
   the layout says what the label says: this one is optional. */
.wl-field-wide{ margin-top:9px; }
.wl-field::placeholder{ color:var(--ink-dim); }
.wl-field:focus{ border-color:var(--ink-muted); }
.wl-submit{
  position:relative; overflow:hidden;
  margin-top:12px;
  width:100%;
  background:var(--ink); color:#272F38;
  border:0; border-radius:var(--r);
  padding:15px 22px;
  font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s ease;
}
.wl-submit:hover{ background:var(--green); }
.wl-submit:active{ background:var(--green); }
.wl-submit[disabled]{ opacity:0.45; cursor:default; }
/* What joining does and does not commit anyone to, in the page's own mono voice. */
.wl-terms{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:18px; }
.wl-terms li{
  list-style:none;
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-dim);
}
.wl-terms li .n{
  color:var(--green);
  padding-right:9px;
  border-right:1px solid var(--line);
}
.wl-msg{
  margin-top:14px;
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:0.05em; line-height:1.6;
  color:var(--green);
}
.wl-msg.is-error{ color:var(--red-text); }
.wl-msg:empty{ display:none; }
/* Shown in place of the form once the booking is paid for: what is left to say is
   that a balance is coming and that it can be cleared early, so the card is the
   only link here. */
.wl-done{ display:none; }
.wl-done.is-on{ display:block; }
.wl-done p{ font-size:14.5px; line-height:1.72; color:#D0D3D7; }
.wl-done a{
  color:var(--ink);
  border-bottom:1px solid rgba(53,196,106,0.5);
  padding-bottom:1px;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.wl-done a:hover{ color:var(--green); border-bottom-color:var(--green); }

/* ---------- footer ---------- */
footer{
  padding:30px clamp(20px,5vw,56px) 40px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:20px;
  justify-content:space-between; align-items:center;
}
footer .wordmark .brand-logo{ height:15px; }
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.foot-links a{
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--ink-muted);
  transition:color 0.2s ease;
}
.foot-links a:hover{ color:var(--ink); }
.foot-social{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.12em; color:var(--ink-muted);
}
.foot-social svg{ width:15px; height:15px; display:block; }
.foot-social:hover{ color:var(--ink); }
.foot-meta{
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.12em; color:var(--ink-dim);
}

@media (max-width:760px){
  .hero-film{ margin-top:36px; }
  .hero-film-sound{ right:10px; bottom:12px; padding:8px 11px; font-size:9.5px; }
  .hero-film-cap{ font-size:9.5px; letter-spacing:0.15em; }
  .signal-row{ grid-template-columns:1fr; gap:20px; padding:28px 0; }
  .swatch{ aspect-ratio:4/3; }
  .hero-eyebrow{ margin-top:96px; }
  .hero-reel{ margin-top:96px; }
  .hero-reel + .hero-eyebrow{ margin-top:32px; }
  .status-head{ margin-bottom:40px; }
  .status-head p{ padding-left:14px; }
  #status, #mission, #note, #note-film, #reserve, #waitlist{ padding-top:80px; padding-bottom:80px; }
  /* Same exception as above, at the width where the nav bar is tallest relative to it. */
  .page-reserve #reserve{ padding-top:108px; }
  #note{ padding-top:72px; padding-bottom:72px; }
  #mission p{ padding-left:16px; }
  .wl-lede{ padding-left:14px; }
  /* Two fields side by side leave room for neither placeholder at this width. */
  .wl-fields{ grid-template-columns:1fr; }
  /* The two amounts still fit abreast here and are worth keeping abreast — it is
     the pairing that explains them — but the labels wrap, so they are stepped down
     rather than allowed to collide. */
  .wl-price{ gap:0 12px; }
  .wl-price-label{ font-size:9px; letter-spacing:0.14em; }
  .wl-panel{ padding:22px 18px; }
  /* One column, so the engraved divider between the two halves has nothing left
     to divide, and the gutter it lived in becomes vertical space instead. */
  .token{ grid-template-columns:1fr; gap:26px; padding:24px 20px; }
  .token > div:first-child{ padding-right:0; }
  .token > div:last-child{ padding-left:0; background-image:none; }
  /* The card is 100px narrower here, and the longest option carries both units,
     so the closed control is set a step smaller rather than clipped. */
  .size-select{ font-size:13px; padding:12px 36px 12px 12px; }
  .size-chart th, .size-chart td{ padding-right:8px; }
  .btn-reserve{ font-size:11px; padding:15px 20px; }
  nav{ padding:16px clamp(20px,5vw,56px); }
  nav .brand-logo{ height:15px; }
  /* Section links don't fit beside the wordmark at this width; keep the CTA only. */
  .navlinks a:not(.nav-cta){ display:none; }
  /* Price plus action still fits; the "Founding 100" prefix does not. */
  .nav-cta{ padding:9px 13px; font-size:10.5px; }
  .nav-cta-tag{ display:none; }
  .nav-cta-reserve{ gap:7px; }
  .navlinks a.nav-cta-reserve{ font-size:10.5px; }
  .nav-cta-amt{ font-size:10.5px; padding-left:7px; }
  footer{ gap:16px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  html{ scroll-behavior:auto; }

  /* A full-bleed autoplaying film is exactly the motion this opts out of. */
  #intro{ display:none; }
  html.intro-on, html.intro-on body{ overflow:visible; }
}