/* ==========================================================================
   EITRI — design system

   Dark cinema-grade UI. Metallic silver type. ONE orange, used for three
   things only: the playhead in the mark, the primary action, and work that is
   in progress. Everything else earns attention through spacing and weight.

   Mobile-first. Every rule below is the phone rule; the desktop layer is at
   the bottom, additive.
   ========================================================================== */

/* ------------------------------------------------------------- 1. tokens */
:root{
  /* surfaces — near-black, never pure #000 */
  --ink:#0A0A0C;
  --panel:#121215;
  --panel-2:#17171B;
  --panel-3:#1E1E23;

  /* hairlines — always rgba, so they sit ON the surface rather than beside it */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);

  /* text — three levels. a fourth would just be indecision */
  --text:#EDEEF0;      /* 17.04:1 on --ink */
  --text-2:#9BA0A8;    /* 7.52:1 */
  /* Was #63686F, which measured 3.52:1 — AA only at large-text sizes. Every
     label using this level is 7.5–10px mono, so none of them qualified. The
     colour audit raised it to #7A7F87 (4.91:1), which passes at label size. */
  --text-3:#7A7F87;

  /* metallic silver — wordmark gradients only */
  --silver:#C8CCD2;
  --silver-hi:#F3F5F7;
  --silver-lo:#8E949C;

  /* THE accent. Every state below is pre-calculated from the base — hue and
     saturation frozen, lightness the only variable. Nudging the hue to make a
     state "look right" changes the brand, so these are looked up, never
     invented at the call site. */
  --orange:#FF6A1F;         /* 6.91:1 on --ink */
  --orange-hover:#FF7E3E;   /* L +6  */
  --orange-press:#F55200;   /* L −8  */
  --orange-off:#9C5B3B;     /* L −14, S −55 — desaturated so it reads inert */
  --orange-focus:#FF935C;   /* L +12 · 9.02:1 on --ink */
  --orange-dim:rgba(255,106,31,.13);

  /* status colours — status pills and nothing else */
  --green:#3FBF7F;  --green-dim:rgba(63,191,127,.13);
  --amber:#E8B23A;  --amber-dim:rgba(232,178,58,.13);
  --blue:#5B9DF9;   --blue-dim:rgba(91,157,249,.13);
  --red:#F2564B;    --red-dim:rgba(242,86,75,.13);

  --mk-1:var(--silver);
  --mk-2:var(--orange);

  --sans:'Archivo',ui-sans-serif,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* two curves, no others */
  --enter:cubic-bezier(.16,1,.3,1);
  --hover:.2s linear;

  --r-btn:9px;
  --r-tile:12px;
  --r-card:14px;
  --r-pill:99px;

  --col:1000px;
  --gut:16px;
}

/* --------------------------------------------------------- 2. reset-ish */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--ink);
  /* Atmosphere, not flat colour. Fixed so it belongs to the screen, not the
     document — scrolling must not drag the glow along. */
  background-image:radial-gradient(800px 480px at 85% -8%,rgba(255,106,31,.06),transparent 60%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* Noise. 3.5% over everything, fixed, inert. Without it the dark reads as
   flat grey plastic on OLED phones. */
body::after{
  content:"";
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* [hidden] MUST WIN. The browser's own rule is `[hidden]{display:none}` at the
   lowest possible specificity, so any class here that sets `display` beats it
   — and every element this file styles is toggled by that attribute. Without
   this line the validation errors on the order form are visible from the first
   paint, and the pay button stays on screen after the order is paid. */
[hidden]{display:none !important}

img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ------------------------------------------------------ 3. typography */
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.03em;line-height:1.02}
h1{font-size:clamp(2rem,1.5rem+3.4vw,3.4rem)}
h2{font-size:clamp(1.5rem,1.2rem+1.9vw,2.2rem);font-weight:800;letter-spacing:-.02em}
h3{font-size:1.125rem;font-weight:800;letter-spacing:-.02em}
p{margin:0}

/* Any small text is mono. Labels, refs, prices, statuses, timecodes,
   filenames, counters. This is what makes the site read as editing software
   instead of a landing page. */
.mono,.eyebrow,.meta,.ref,.tc{
  font-family:var(--mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-3);
}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:9.5px}
.lede{color:var(--text-2);font-size:16px;line-height:1.55}
.t2{color:var(--text-2)}
.t3{color:var(--text-3)}

/* The anti-spam honeypot lives in here. iOS zooms any focused control under
   16px, and a bot-trap must not be the thing that makes the page jump. */
.sr-only input,.sr-only select,.sr-only textarea{font-size:16px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------- 4. the lockup */
.wordmark{
  font-family:var(--sans);
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  background:linear-gradient(160deg,var(--silver-hi) 8%,var(--silver-lo) 48%,var(--silver-hi) 92%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.lockup{display:inline-flex;align-items:center;gap:11px;min-height:44px}
.lockup .mk{width:26px;height:26px;flex:none}
.lockup .bar{width:1px;align-self:stretch;background:var(--line-2);margin-block:6px}
.lockup .names{display:grid;gap:2px;line-height:1}
.lockup .wordmark{font-size:17px}
.lockup .role{
  font-family:var(--mono);font-size:7.5px;font-weight:500;
  letter-spacing:.36em;text-transform:uppercase;color:var(--text-3);
}

/* ------------------------------------------------------------- 5. shell */
.wrap{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--gut)}

.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(10,10,12,.93);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.nav-links{display:none}
.nav-links a{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  transition:color var(--hover);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}

/* Off-screen until focused. The offset is height-INDEPENDENT: a percentage
   offset is a percentage of this element's own box, and before the webfont
   settles that box is short enough to leave a sliver over the header. */
.skip{
  position:fixed;top:8px;left:8px;z-index:200;
  transform:translateY(calc(-100% - 24px));
  padding:12px 18px;border-radius:var(--r-btn);
  background:var(--orange);color:#140A03;font-weight:700;font-size:14px;
}
/* Transition on :focus only — declared on the base rule it also runs at first
   style resolution, and the link visibly slides up on every page load. */
.skip:focus{transform:translateY(0);transition:transform .2s var(--enter)}

.nav-end{display:flex;align-items:center;gap:8px}
/* Specificity, not order: .btn is declared later in this file and would win
   a bare .nav-quiet rule, putting a desktop-only button on every phone. */
.nav .nav-quiet{display:none}

/* Mobile drawer. Opaque and full height: as a short strip the page shows
   through beside it and the menu reads as page content. */
.menu-btn{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:var(--r-btn);background:var(--panel-3);
}
.menu-btn span:first-child{position:relative;display:block;width:16px;height:1.5px;background:var(--text)}
.menu-btn span:first-child::before,.menu-btn span:first-child::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--text);
  transition:transform .25s var(--enter);
}
.menu-btn span:first-child::before{top:-5px}
.menu-btn span:first-child::after{top:5px}
.menu-btn[aria-expanded="true"] span:first-child{background:transparent}
.menu-btn[aria-expanded="true"] span:first-child::before{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:first-child::after{transform:translateY(-5px) rotate(-45deg)}

.menu{display:none}
.menu.open{
  display:block;
  position:absolute;left:0;right:0;top:100%;
  height:calc(100vh - var(--hdr-h,60px));
  height:calc(100dvh - var(--hdr-h,60px));
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--ink);border-top:1px solid var(--line);
  padding:6px var(--gut) calc(28px + env(safe-area-inset-bottom));
}
.menu a{
  display:flex;align-items:center;min-height:52px;
  font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--text-2);
  border-bottom:1px solid var(--line);
}
.menu a:last-child{border-bottom:0}
body.menu-open{overflow:hidden}

main{display:block}
/* The nav is sticky, so anything scrolled to must clear it — otherwise the
   field a validation error jumps to lands under the bar. */
:where(section,.card,.field,h1,h2,h3,[id]){scroll-margin-top:80px}
.section{padding-block:clamp(2rem,1.4rem+3vw,4rem)}
.stack{display:grid;gap:14px}
.mt-s{margin-top:10px}.mt-m{margin-top:18px}.mt-l{margin-top:28px}

/* Entrance: fade up 8px, staggered. One curve, no parallax. */
.rise{opacity:0;transform:translateY(8px);animation:rise .5s var(--enter) forwards}
.rise-1{animation-delay:.05s}.rise-2{animation-delay:.1s}.rise-3{animation-delay:.15s}
@keyframes rise{to{opacity:1;transform:none}}

/* ------------------------------------------------------------ 6. cards */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:18px;
  transition:border-color .3s var(--enter),transform .3s var(--enter);
}
.card-hover:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tile{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-tile);padding:14px}
.grid{display:grid;gap:16px}

/* ------------------------------------------------------- 7. status pill */
/* The one component that carries every state on the site. */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;
  background:var(--line);color:var(--text-2);
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill-green{background:var(--green-dim);color:var(--green)}
.pill-amber{background:var(--amber-dim);color:var(--amber)}
.pill-blue{background:var(--blue-dim);color:var(--blue)}
.pill-red{background:var(--red-dim);color:var(--red)}
.pill-orange{background:var(--orange-dim);color:var(--orange)}

/* Bordered mono chip — trust statements, facts. No colour. */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------------------------------------------------------- 8. buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 18px;
  border-radius:var(--r-btn);
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.01em;
  border:1px solid var(--line-2);
  background:var(--panel-3);color:var(--text);
  transition:background var(--hover),border-color var(--hover),opacity var(--hover);
}
.btn:hover{border-color:rgba(255,255,255,.24)}
/* Dark text on orange is deliberate. White on this orange fails contrast and
   reads as a warning banner rather than an action. */
.btn-primary{background:var(--orange);border-color:var(--orange);color:#140A03;font-weight:700}
.btn-primary:hover{background:var(--orange-hover);border-color:var(--orange-hover)}
.btn-primary:active{background:var(--orange-press);border-color:var(--orange-press)}
.btn-primary:disabled,.btn-primary[aria-disabled=true]{
  background:var(--orange-off);border-color:var(--orange-off);color:rgba(20,10,3,.75);
}
.btn-danger{background:transparent;border-color:rgba(242,86,75,.35);color:var(--red)}
.btn-danger:hover{border-color:rgba(242,86,75,.6)}
.btn-block{width:100%}
/* Small in weight and padding, never in target size: 44px is the floor for
   anything a thumb has to hit. */
.btn-sm{min-height:44px;padding:0 13px;font-size:13px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.btn.is-loading{position:relative;color:transparent;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(0,0,0,.28);border-top-color:#140A03;
  animation:spin .6s linear infinite;
}
.btn:not(.btn-primary).is-loading::after{border-color:var(--line-2);border-top-color:var(--text)}
@keyframes spin{to{transform:rotate(360deg)}}

/* The ring is a lighter step than the accent (9.02:1 rather than 6.91:1), so
   it stays visible where it lands on the accent itself. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--orange-focus);outline-offset:2px;border-radius:4px;
}

/* ------------------------------------------------------- 9. data rows */
.rows{border-top:1px solid var(--line)}
.row{
  display:flex;gap:14px;justify-content:space-between;align-items:flex-start;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.row-main{min-width:0}
.row-id{font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin-top:3px}
.row-side{text-align:right;flex:none;display:grid;gap:6px;justify-items:end}
.row-price{font-size:19px;font-weight:900;letter-spacing:-.02em}

/* ---------------------------------------------------- 10. progress bars */
/* Bars, not circles, not numbered dots. It is a timeline. */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.step-bar{height:3px;border-radius:2px;background:var(--line-2)}
.step.done .step-bar{background:var(--green)}
.step.now .step-bar{background:var(--orange)}
.step-lbl{
  display:block;margin-top:7px;
  font-family:var(--mono);font-size:8.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.step.now .step-lbl{color:var(--text-2)}

/* ----------------------------------------------------------- 11. forms */
.field{display:block;margin-top:16px}
.field > label{
  display:block;margin-bottom:7px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.input,select.input,textarea.input{
  width:100%;min-height:48px;padding:12px 13px;
  font-size:16px;                                   /* 16px or iOS zooms */
  background:var(--panel-2);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--hover);
}
textarea.input{min-height:96px;line-height:1.5;resize:vertical}
select.input{
  padding-right:38px;text-overflow:ellipsis;white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239BA0A8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.input:focus{border-color:var(--line-2);outline:2px solid var(--orange);outline-offset:1px}
.input::placeholder{color:var(--text-3)}
.field.bad .input{border-color:rgba(242,86,75,.55)}
.err{display:block;margin-top:7px;font-size:12.5px;color:var(--red)}
.hint{display:block;margin-top:7px;font-size:12px;line-height:1.55;color:var(--text-3)}

/* Choice groups — format, level, duration. Radios styled as tiles, because a
   native radio on a dark UI is a grey smudge. */
.opts{display:grid;gap:8px;margin-top:10px}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;font-size:16px}
.opt-face{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-tile);
  transition:border-color var(--hover),background var(--hover);
}
.opt input:hover + .opt-face{border-color:var(--line-2)}
.opt input:checked + .opt-face{border-color:var(--line-2);background:var(--panel-3)}
.opt input:focus-visible + .opt-face{outline:2px solid var(--orange);outline-offset:2px}
.opt-name{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.opt-say{display:block;margin-top:3px;font-size:12.5px;color:var(--text-3);font-weight:400;letter-spacing:0}
.opt-fig{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text-2)}
.opt input:checked + .opt-face .opt-fig{color:var(--text)}
.tabs{display:flex;gap:4px;padding:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-pill)}
.tabs button{
  flex:1;min-height:38px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  /* --text-3 is the label level, and it was picked against --ink. On the tab
     strip the ground is --panel-2, where the same value measures 4.44:1 —
     under AA for text this size. --text-2 is 6.80:1 on that ground and the
     selected state still separates cleanly at 14.3:1. */
  color:var(--text-2);transition:background var(--hover),color var(--hover);
}
.tabs button[aria-selected="true"]{background:var(--panel-3);color:var(--text)}

/* -------------------------------------------------------- 12. quote box */
.quote{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;display:grid;gap:9px}
.quote-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.quote-line dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.quote-line dd{margin:0;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-2)}
.quote-total{border-top:1px solid var(--line);padding-top:13px;align-items:center}
.quote-total dd{font-family:var(--sans);font-size:30px;font-weight:900;letter-spacing:-.03em;color:var(--text)}

/* ----------------------------------------------------------- 13. player */
.player{position:relative;background:#000;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.player video{width:100%;aspect-ratio:16/9;background:#000}
/* Tiled diagonal watermark carrying the viewer's own address. Burned into the
   file server-side as well — this layer is what the viewer sees, the burn is
   what survives a screen recording. */
.wm{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.16}
.wm-in{
  position:absolute;inset:-60%;
  display:grid;gap:26px;
  transform:rotate(-24deg);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  /* NOT uppercased: the address has to read as the address it was sent to.
     A mangled-case email is easy to deny in a takedown. */
  color:#fff;white-space:nowrap;
}
.wm-row{display:flex;gap:34px}
.player-bar{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  padding:11px 13px;background:var(--panel-2);border-top:1px solid var(--line);
}
.licence{margin-top:11px;font-family:var(--mono);font-size:9.5px;line-height:1.7;letter-spacing:.08em;color:var(--text-3)}

/* ----------------------------------------------------------- 14. toasts */
.toast{
  position:fixed;left:50%;bottom:22px;z-index:200;
  transform:translate(-50%,90px);
  display:flex;align-items:center;gap:9px;
  max-width:min(92vw,420px);
  padding:11px 17px;border-radius:var(--r-pill);
  background:var(--panel-3);border:1px solid var(--line-2);
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  font-size:13.5px;
  opacity:0;transition:transform .45s var(--enter),opacity .45s var(--enter);
}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ------------------------------------------------------- 15. empty/error */
.empty{
  padding:26px 18px;text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-card);color:var(--text-3);
}
.alert{
  padding:13px 15px;border-radius:var(--r-tile);
  border:1px solid rgba(242,86,75,.35);background:var(--red-dim);
  color:#F7A19A;font-size:13.5px;line-height:1.55;
}
.note{
  padding:13px 15px;border-radius:var(--r-tile);
  border:1px solid var(--line);border-left:2px solid var(--orange);
  background:var(--panel-2);color:var(--text-2);font-size:13.5px;line-height:1.6;
}

/* Skeletons for anything that waits on the network. */
.skel{background:var(--panel-2);border-radius:6px;position:relative;overflow:hidden}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  animation:sweep 1.3s linear infinite;
}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ------------------------------------------------------------ 15. legal */
/* Long-form terms. Measure capped so a clause is readable; headings mono-
   numbered by the document itself, not by CSS counters that fight the source. */
.legal{max-width:70ch}
.legal h2{
  margin-top:32px;margin-bottom:9px;
  font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--text);
}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:14.5px;line-height:1.7;color:var(--text-2)}
.legal p + p{margin-top:10px}
.legal ul{margin:10px 0 0;padding-left:18px;display:grid;gap:8px}
.legal strong{color:var(--text);font-weight:600}
.legal a{color:var(--text);border-bottom:1px solid var(--line-2)}
.legal a:hover{border-color:var(--orange)}

/* ------------------------------------------------------------ 15a. table */
/* Figures are mono, so columns line up digit for digit. Wide tables scroll
   inside their own box; the page itself never scrolls sideways. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-card)}
.tbl-scroll:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.tbl{width:100%;border-collapse:collapse;min-width:640px}
.tbl th,.tbl td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line)}
.tbl thead th{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  background:var(--panel-2);white-space:nowrap;
}
.tbl tbody th{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.tbl .num{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap}
.tbl .price-cell{color:var(--text);font-weight:600}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:var(--panel-2)}

/* Phones get cards, 900px and up gets the table. Not a duplicate source —
   both are rendered from the same price engine. */
.only-desk{display:none}
@media (min-width:900px){
  .only-mob{display:none}
  .only-desk{display:block}
}
.pcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pcard-head h3{font-size:1rem}
.pcard-rows{margin:14px 0 0;display:grid;gap:9px}
.pcard-rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pcard-rows dt{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.pcard-rows dd{margin:0;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text)}

/* Ticked feature list. The tick is drawn, not an icon font. */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:7px;height:7px;border-radius:1px;border:1px solid var(--line-2);
}

/* --------------------------------------------------- 15b. page furniture */
/* Numbered process list. The count is mono and part of the card, not a
   decorative circle. */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.price{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--text)}

.ftr{border-top:1px solid var(--line);margin-top:clamp(2rem,1.4rem+3vw,4rem);padding-block:28px}
.ftr-in{display:grid;gap:16px}
.ftr-links{display:flex;flex-wrap:wrap;gap:14px 20px}
.ftr-links a{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  transition:color var(--hover);
}
.ftr-links a:hover{color:var(--text)}

/* ---------------------------------------------------------- 16. desktop */
@media (min-width:1024px){
  :root{--gut:20px}
  body{font-size:15px}
  .nav-in{min-height:68px}
  /* Mark left, links centre, account right — the full bar. */
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav .nav-quiet{display:inline-flex}
  .menu-btn{display:none}
  .menu.open{display:none}
  .flow{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
  .ftr-in{grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
  .ftr-links{justify-content:center}
  .grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
  /* Preview page splits: player left, money right, right column sticky. */
  .split{display:grid;grid-template-columns:62% 1fr;gap:22px;align-items:start}
  .split-side{position:sticky;top:88px}
  .card{padding:22px}
}

/* ------------------------------------------------------ 17. reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rise{opacity:1;transform:none}
  .toast{transform:translate(-50%,0)}
}