/* ==========================================================================
   Self-hosted type. These used to come from fonts.googleapis.com, which meant
   a third-party request on every visit and a page that falls back to system
   sans wherever Google is blocked (some venue networks, some corporate ones).
   The files live in assets/fonts and are SIL Open Font Licensed; the licences
   sit beside them.
   ========================================================================== */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/geist-mono-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/geist-mono-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   FlyCue - "House to half".
   Loads AFTER style.css. style.css still supplies the app-mockup and
   paperwork components (.fs, .app, .ptable, .paper, .crow). This file
   replaces the entire page language and re-tints those mockups so they sit
   inside the page as lit objects rather than cold grey rectangles.

   The read: a theatre at blackout is not a terminal. The room itself stays
   warm, the way a stage does under worklight, but the light thrown on it is
   the cool blue FlyCue already uses. Warm room, cool key light. That contrast
   is deliberate and it is what keeps this from reading as a code editor.
   ========================================================================== */

:root {
  /* Warm near-black. Never #000, never the cold slate of a code editor. */
  --void:      #0b0a09;
  --stage:     #12100e;
  --riser:     #181614;
  --deck:      #201d1a;

  /* Hairlines are warm too, or the whole thing goes grey again. */
  --edge:      #2b2520;
  --edge-lit:  #3d352c;

  /* The key light for the whole page: FlyCue's own blue.
     --key is for text, hairlines and washes, where it sits on a dark ground.
     --key-fill is a darker step used ONLY behind white label text, because
     white on #3a8bde is 3.54:1 and fails AA. */
  --key:      #3a8bde;
  --key-hi:   #6aabee;
  --key-lo:   #1d548f;
  --key-fill: #2172c4;
  --key-ink:  #ffffff;

  /* The two semantic colours FlyCue already owns. Used sparingly, and only
     where they mean what they mean on a real desk. */
  --go:      #46c776;
  --standby: #e8c341;
  --danger:  #e4645a;

  /* Warm off-whites. */
  --lit:   #f6f2eb;
  --half:  #b9b0a4;
  --quart: #8b8176;

  --display: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body:    Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --rail:   1440px;

  /* One radius family, concentric. Housings are big, cores are housing
     minus the bezel, controls are pills. */
  --r-house: 26px;
  --r-core:  18px;
  --r-ctl:   999px;
  --r-chip:  10px;

  /* Mass. Nothing on this page moves linearly. */
  --swing: cubic-bezier(.32,.72,0,1);
  --settle: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--void);
  color: var(--lit);
  font-family: var(--body);
  /* Inter ships an optical-size axis: let the browser use it so the big
     display sizes get the tighter, refined cut rather than the UI one. */
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain. Fixed, pointer-events-none, never on a scrolling container. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: var(--rail); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; }

.d0 { font-size: clamp(2.7rem, 6.1vw, 5.6rem); line-height: .96; letter-spacing: -.034em; }
.d1 { font-size: clamp(2.4rem, 5.6vw, 4.8rem); line-height: 1.0; letter-spacing: -.031em; }
.d2 { font-size: clamp(1.9rem, 3.4vw, 3rem);  line-height: 1.06; letter-spacing: -.027em; }
.d3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.22; letter-spacing: -.016em; font-weight: 800; }

.lead  { font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.55; color: var(--half); max-width: 46ch; margin: 0; }
.body  { font-size: 1rem; line-height: 1.68; color: var(--half); max-width: 58ch; margin: 0; }
.body strong, .lead strong { color: var(--lit); font-weight: 600; }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* Rationed. Three on the whole page, per the pre-flight count. */
.tag {
  display: inline-block; font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--key);
  padding: 5px 11px; border-radius: var(--r-ctl);
  border: 1px solid rgba(58,139,222,.30); background: rgba(58,139,222,.09);
}

a { color: inherit; }

/* ---------- Light ---------- */
/* A section can be lit from above. This is the page's one decorative device
   and it is doing a job: it tells you where the stage is. */
.lit-top { position: relative; isolation: isolate; overflow: hidden; }
.lit-top::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(54% 48% at 50% 0%, rgba(58,139,222,.30), transparent 66%),
    radial-gradient(92% 66% at 50% 0%, rgba(58,139,222,.12), transparent 74%);
}
.lit-side { position: relative; isolation: isolate; overflow: hidden; }
.lit-side::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 74% at 90% 32%, rgba(58,139,222,.26), transparent 66%);
}

/* ---------- Header ---------- */
/* Detached floating pill, not glued edge to edge. */
.site-header {
  position: sticky; top: 0; z-index: 30;
  padding: 16px var(--gutter) 0;
  background: none; border: 0;
}
.nav {
  max-width: var(--rail); margin: 0 auto;
  display: flex; align-items: center; gap: 22px;
  padding: 9px 9px 9px 20px;
  border-radius: var(--r-ctl);
  background: rgba(16,14,12,.72);
  border: 1px solid rgba(255,245,230,.09);
  box-shadow: inset 0 1px 0 rgba(255,245,230,.08), 0 18px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 25px; height: 25px; border-radius: 7px; }
.brand__text { font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.035em; color: var(--lit); }
.brand__text span { color: var(--key); }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  text-decoration: none; color: var(--half); font-size: .92rem; font-weight: 450;
  padding: 8px 13px; border-radius: var(--r-ctl);
  transition: color .4s var(--settle), background .4s var(--settle);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--lit); background: rgba(255,245,230,.06); }

.nav__toggle {
  display: none; width: 42px; height: 42px; border-radius: var(--r-ctl);
  background: rgba(255,245,230,.06); border: 1px solid rgba(255,245,230,.1);
  color: var(--lit); cursor: pointer; align-items: center; justify-content: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-size: .96rem; font-weight: 550;
  padding: 11px 13px 11px 22px; border-radius: var(--r-ctl);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .5s var(--swing), background .5s var(--settle), border-color .5s var(--settle);
}
.btn--sm { font-size: .9rem; padding: 9px 11px 9px 18px; }
.btn:active { transform: scale(.975); }
.btn { max-width: 100%; }
@media (max-width: 760px) { .btn { flex-wrap: wrap; } }

/* Tungsten fill with near-black text. White on amber is unreadable, and
   black on amber is what a real worklight switch looks like anyway. */
.btn--go, .nav__links a.btn--go { background: var(--key-fill); color: var(--key-ink); }
.btn--go:hover { background: #2a84db; }

.btn--ghost { border-color: rgba(255,245,230,.17); color: var(--lit); }
.btn--ghost:hover { border-color: rgba(255,245,230,.34); background: rgba(255,245,230,.05); }

/* Button-in-button: the arrow lives in its own circle, flush right. */
.btn__o {
  width: 30px; height: 30px; border-radius: var(--r-ctl);
  display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(0,0,0,.16); font-size: .95rem; line-height: 1;
  transition: transform .5s var(--swing), background .5s var(--settle);
}
.btn--ghost .btn__o { background: rgba(255,245,230,.09); }
.btn:hover .btn__o { transform: translate(2px,-1px) scale(1.06); }
.btn--go:hover .btn__o { background: rgba(0,0,0,.24); }

/* ---------- Double-bezel housing ---------- */
/* Nothing sits flat on the background. A mockup is a lit object in a tray. */
.house {
  padding: 9px; border-radius: var(--r-house);
  background: linear-gradient(165deg, rgba(255,245,230,.085), rgba(255,245,230,.012));
  border: 1px solid rgba(255,245,230,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,245,230,.14),
    0 2px 6px rgba(0,0,0,.4),
    0 30px 70px -20px rgba(0,0,0,.8),
    0 60px 120px -40px rgba(58,139,222,.14);
}
.house__core {
  border-radius: var(--r-core); overflow: hidden;
  background: var(--stage);
  box-shadow: inset 0 1px 1px rgba(255,245,230,.09), inset 0 0 0 1px rgba(0,0,0,.5);
}
/* A caption is a plain sentence. Forced lowercase, wide-tracked mono and a
   middle dot are decoration pretending to be information. */
.cap-note {
  font-size: .82rem; color: var(--quart); margin: 14px 0 0;
}
.house--tilt { transform: rotate(-1.1deg); }
.house--tilt-r { transform: rotate(1.4deg); }

/* ---------- Sections ---------- */
.sec { padding: clamp(84px, 11vw, 150px) 0; }
.sec--tight { padding: clamp(64px, 7vw, 96px) 0; }
.rule { border: 0; border-top: 1px solid var(--edge); margin: 0; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(56px, 7vw, 92px); padding-bottom: clamp(60px, 8vw, 110px); }
.hero__grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero__copy { max-width: 600px; }
.hero h1 { margin-bottom: 26px; }
.hero .lead { max-width: 40ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* The hero object runs off the right edge and sits in its own light. */
.hero__art { position: relative; }
.hero__art .house { max-width: none; }

/* ---------- Blackout band: the GO moment ---------- */
.blackout {
  background: var(--void);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  text-align: center;
  position: relative; isolation: isolate; overflow: hidden;
}
.blackout::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 72% at 50% 44%, rgba(58,139,222,.12), transparent 70%);
}
.blackout .d1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); max-width: 19ch; margin: 0 auto; }
.blackout .body { margin: 24px auto 0; text-align: left; max-width: 54ch; }
/* The one line on the page that is a safety statement, not a feature. It gets
   weight and the standby colour, and no animation whatsoever. */
.never { display: block; margin-top: 10px; color: var(--standby); font-weight: 600; }

/* ---------- Editorial split ---------- */
.split { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(34px, 5vw, 86px); align-items: start; }
.split--flip { grid-template-columns: minmax(0,1.14fr) minmax(0,.86fr); }
.split__say { position: sticky; top: 120px; }
.split--hold .split__say { position: static; }
.split--hold > *:first-child { position: sticky; top: 104px; }
.split__say h2 { margin-bottom: 20px; }

/* ---------- Z-axis cascade (the two printed documents) ---------- */
.cascade { position: relative; min-height: 620px; }
.cascade > * { position: absolute; }
.cascade__a { top: 0; left: 0; width: 72%; z-index: 2; transform: rotate(-1.6deg); }
.cascade__b { top: 132px; right: 0; width: 66%; z-index: 1; transform: rotate(2.2deg); }
.cascade .house { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 40px 90px -24px rgba(0,0,0,.9); }
/* Two overlapping sheets label each other by sitting together. Captions here
   would land on top of the other document. */
.cascade .cap-note { display: none; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; }
.tile {
  padding: 1px; border-radius: var(--r-house);
  background: linear-gradient(160deg, rgba(255,245,230,.1), rgba(255,245,230,.015));
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.9);
}
.tile__in {
  height: 100%; border-radius: calc(var(--r-house) - 1px);
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--riser);
  box-shadow: inset 0 1px 0 rgba(255,245,230,.07);
  display: flex; flex-direction: column; gap: 11px;
  position: relative; overflow: hidden; isolation: isolate;
}
.tile--wide { grid-column: span 4; }
.tile--half { grid-column: span 2; }
.tile--third { grid-column: span 3; }
.tile h3 { font-size: 1.16rem; letter-spacing: -.025em; line-height: 1.2; }
.tile p { font-size: .94rem; line-height: 1.6; color: var(--half); margin: 0; }

/* Visual variation in the cells, so this is not six text boxes. */
.tile--wash .tile__in::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(74% 100% at 8% 0%, rgba(58,139,222,.22), transparent 62%);
}
.tile--go .tile__in::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 100% at 100% 100%, rgba(70,199,118,.14), transparent 62%);
}
/* A bar-and-line-set pattern, which is the thing the product is about. */
.tile--rig .tile__in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(255,245,230,.07) 0 1px, transparent 1px 15px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%);
          mask-image: linear-gradient(to bottom, transparent, #000 85%);
}

/* ---------- Objects inside the bento ----------
   Not fake screenshots. Each one is the simplest honest picture of the thing:
   Button Mode really is two buttons, the Kiosk really is a standby strip, and
   a hanging plot really is a row of bars with weights on them. */
.tile--obj .tile__in { flex-direction: row; align-items: center; gap: clamp(20px,2.6vw,40px); }
.tile--obj .tile__say { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.obj { flex: 0 0 auto; }

/* A phone, showing Button Mode. */
.phone {
  width: 148px; padding: 9px; border-radius: 28px;
  background: linear-gradient(165deg, #2c2721, #15120f);
  border: 1px solid var(--edge-lit);
  box-shadow: inset 0 1px 0 rgba(255,245,230,.16), 0 24px 48px -14px rgba(0,0,0,.9);
}
.phone__scr {
  border-radius: 21px; background: #0a0908; padding: 11px 10px 13px;
  display: grid; gap: 9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.7);
}
.phone__cue { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; color: var(--quart); text-align: center; }
.phone__go, .phone__back {
  border-radius: 14px; text-align: center; font-family: var(--mono); font-weight: 600;
  letter-spacing: .1em;
}
.phone__go { background: var(--go); color: #06230f; font-size: 1.5rem; padding: 26px 0; }
.phone__back { border: 1px solid var(--standby); color: var(--standby); font-size: .66rem; padding: 10px 0; }

/* A monitor on a stand, showing the kiosk strip. */
.mon { width: 190px; }
.mon__scr {
  border-radius: 10px; padding: 7px; background: linear-gradient(165deg, #2c2721, #15120f);
  border: 1px solid var(--edge-lit);
  box-shadow: inset 0 1px 0 rgba(255,245,230,.16), 0 20px 40px -14px rgba(0,0,0,.9);
}
.mon__in { border-radius: 5px; background: #0a0908; padding: 12px 11px; display: grid; gap: 7px; }
.mon__row { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .54rem; }
.mon__row b { color: var(--quart); font-weight: 600; min-width: 17px; }
.mon__row span { color: var(--half); }
.mon__row i { margin-left: auto; font-style: normal; color: var(--go); }
.mon__sb { font-family: var(--mono); font-size: .54rem; letter-spacing: .18em; color: var(--standby); text-align: center; padding-top: 3px; }
.mon__stand { width: 46px; height: 13px; margin: 0 auto;
  background: linear-gradient(180deg, #2c2721, #15120f); border-radius: 0 0 4px 4px; }
.mon__foot { width: 86px; height: 4px; margin: 0 auto; border-radius: 3px; background: #241f1a; }

/* A hanging plot: bars at their deads, one of them overloaded. */
.bars { width: 184px; display: grid; gap: 9px; }
.barline { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .56rem; }
.barline b { color: var(--key); min-width: 16px; font-weight: 600; }
.barline .t { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,245,230,.16); position: relative; }
.barline .t::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 50%);
  border-radius: 3px; background: var(--key); opacity: .85; }
.barline.over .t::after { background: var(--danger); width: 100%; }
.barline em { font-style: normal; color: var(--quart); min-width: 42px; text-align: right; }
.barline.over em { color: var(--danger); }

@media (max-width: 1020px) {
  .tile--obj .tile__in { flex-direction: column; align-items: flex-start; }
}

/* ---------- Keycaps ---------- */
.keys { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 26px; min-width: 0; }
.keyrow { display: flex; align-items: center; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--edge); }
.keyrow span:last-child { font-size: .93rem; color: var(--half); }
.cap {
  font-family: var(--mono); font-size: .76rem; font-weight: 550; color: var(--lit);
  min-width: 34px; padding: 7px 10px; text-align: center; border-radius: 9px;
  background: linear-gradient(180deg, var(--deck), var(--riser));
  border: 1px solid var(--edge-lit); border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 rgba(255,245,230,.13), 0 2px 5px rgba(0,0,0,.5);
}
.cap--go { color: var(--key-ink); background: linear-gradient(180deg, #2f85d4, var(--key-fill)); border-color: var(--key-lo); }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.plan { padding: 1px; border-radius: var(--r-house); background: linear-gradient(160deg, rgba(255,245,230,.1), rgba(255,245,230,.015)); }
.plan__in { height: 100%; border-radius: calc(var(--r-house) - 1px); padding: 26px 24px 28px; background: var(--riser);
  box-shadow: inset 0 1px 0 rgba(255,245,230,.07); display: flex; flex-direction: column; gap: 9px; }
.plan--pick { background: linear-gradient(160deg, rgba(58,139,222,.5), rgba(58,139,222,.08)); }
.plan__name { font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; }
.plan__amt { font-family: var(--mono); font-size: 1.72rem; font-weight: 600; letter-spacing: -.03em; color: var(--lit); }
.plan__amt small { font-family: var(--body); font-size: .76rem; font-weight: 450; color: var(--quart); letter-spacing: 0; }
.plan p { font-size: .88rem; line-height: 1.55; color: var(--half); margin: 0; }

/* ---------- Closing ---------- */
.close { text-align: center; }
.close .d1 { max-width: 17ch; margin: 0 auto 22px; }
.close .lead { margin: 0 auto; }
.close .hero__cta { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--edge); padding: 62px 0 42px; background: var(--void); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; }
.footer__grid h4 { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--quart); margin-bottom: 14px; font-weight: 500; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__links a { color: var(--half); text-decoration: none; font-size: .92rem; transition: color .4s var(--settle); }
.footer__links a:hover { color: var(--lit); }
.footer__bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--edge);
  font-size: .84rem; color: var(--quart); }

/* ---------- Skip link + focus ---------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--key-fill); color: var(--key-ink); padding: 11px 18px; border-radius: 0 0 14px 0; font-weight: 600; text-decoration: none; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--key); outline-offset: 3px; border-radius: 4px; }

/* ---------- Scroll choreography ---------- */
/* Heavy fade-up with a touch of defocus, as if the lantern is finding it. */
.rise { opacity: 0; transform: translateY(26px); filter: blur(7px); }
.rise.is-in { opacity: 1; transform: none; filter: none;
  transition: opacity .9s var(--settle), transform .9s var(--settle), filter .9s var(--settle); }
.rise--2.is-in { transition-delay: .09s; }
.rise--3.is-in { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; filter: none; }
  .blackout::before { opacity: 1; }
  .blackout .blackout__word { color: var(--go); }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Re-tint the style.css mockups into the warm room.
   They were built on a cold neutral grey; left alone they read as a
   different website pasted into this one.
   ========================================================================== */
.app, .fs { background: #0d0b0a !important; border-color: var(--edge) !important; }
.app__bar { background: #141110 !important; border-color: var(--edge) !important; }
.app__tab { color: var(--half) !important; }
.app__tab--on { background: rgba(58,139,222,.2) !important; color: var(--key-hi) !important;
  box-shadow: inset 0 0 0 1px rgba(58,139,222,.34) !important; }
.app__toolbar, .app__foot { background: #121010 !important; border-color: var(--edge) !important; }
.tb { background: var(--key-fill) !important; color: var(--key-ink) !important; }
.tb--ghost { background: #221d19 !important; color: var(--half) !important; border-color: var(--edge-lit) !important; }
.app__hint { color: #9b9086 !important; }
.app__brand span { color: var(--key-hi) !important; }
.ptable th { background: #171413 !important; color: var(--quart) !important; border-color: var(--edge) !important; }
.ptable td { border-color: var(--edge) !important; color: var(--half) !important; }
.ptable .bar { color: var(--key-hi) !important; }
.ptable .num { color: #ddd5c8 !important; }
.ptable tr.over td { background: rgba(228,100,90,.13) !important; color: #f0b3ac !important; }
.ptable tr.over .bar, .ptable tr.over .num { color: #ff9a8e !important; }
.cdiv { background: #171413 !important; color: var(--quart) !important; border-color: var(--edge) !important; }
.crow { border-color: var(--edge) !important; }
.cnote { color: var(--quart) !important; }
.fs__top, .fs__bottom { color: var(--half) !important; }
.fs__standby { color: var(--standby) !important; }
.fs__go { background: var(--go) !important; color: #06230f !important; }
.fs__logo span { color: var(--key-hi) !important; }
.sbar { background: #171413 !important; border-color: var(--edge) !important; }
.sbar__label { color: var(--standby) !important; }
.app__seg .on, .segsm .on { background: var(--key-fill) !important; color: var(--key-ink) !important; }

/* The printed paperwork stays white. It is paper. That contrast against the
   warm black is the point, not an accident. */

/* ---------- Mobile ---------- */
/* Mockup tables are wider than a phone. They scroll inside their own housing;
   they must never be allowed to set the width of the grid column holding them. */
.hero__grid > *, .split > *, .bento > *, .plans > *, .cascade > * { min-width: 0; }
.house, .house__core { max-width: 100%; }

@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: minmax(0,1fr); gap: 42px; }
  .hero__copy { max-width: 100%; }
  .split, .split--flip { grid-template-columns: minmax(0,1fr); gap: 34px; }
  .split__say { position: static; }
  .cascade { min-height: 0; display: grid; gap: 20px; }
  .cascade > * { position: static; width: 100%; transform: none; }
  .plans { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav__toggle { display: inline-flex; }
  .nav { padding: 8px 8px 8px 16px; }
  .nav__links {
    display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: 74px;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
    border-radius: var(--r-core); background: rgba(16,14,12,.96);
    border: 1px solid rgba(255,245,230,.1);
    box-shadow: 0 30px 70px rgba(0,0,0,.7);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 14px; }
  .nav__links .btn { justify-content: space-between; margin-top: 6px; }
  .bento { grid-template-columns: minmax(0,1fr); }
  .tile--wide, .tile--half, .tile--third { grid-column: span 1; }
  .keys { grid-template-columns: minmax(0,1fr); gap: 0; }
  .plans { grid-template-columns: minmax(0,1fr); }
  .footer__grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .house--tilt, .house--tilt-r { transform: none; }
}

/* A short stack of swung bars on paper, for the paperwork tile. */
.sheetlet { width: 178px; position: relative; }
.sheetlet__p {
  background: #f7f4ee; color: #241f19; border-radius: 4px; padding: 11px 12px;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.9);
  font-family: var(--mono); font-size: .54rem; line-height: 1.75;
}
.sheetlet__p b { display: block; font-size: .5rem; letter-spacing: .16em; color: #7a6a52; margin-bottom: 6px; }
.sheetlet__r { display: flex; gap: 8px; border-top: 1px solid #ddd6c8; padding-top: 4px; margin-top: 4px; }
.sheetlet__r:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.sheetlet__r i { font-style: normal; color: #8d7c62; margin-left: auto; }
.sheetlet::before, .sheetlet::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px; background: #cfc8ba; z-index: -1;
}
.sheetlet::before { transform: rotate(-2.4deg) translateY(4px); }
.sheetlet::after  { transform: rotate(2deg) translateY(7px); background: #b7b0a2; }

/* On a phone the full cue stack and plot tables run to a thousand pixels of
   dark table. They are illustrations here, not something to read, so cap them
   and fade the cut rather than making someone scroll past a wall. */
@media (max-width: 860px) {
  .house__core { max-height: 400px; position: relative; }
  .house__core > * { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
                             mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); }
  .cascade .house__core { max-height: 330px; }
}

/* Line-set badge inside a cue chip. The bar number and the item name are
   separate fields on real paperwork and must not run together as one word.
   (This lived in redesign.css, which this page does not load.) */
.ls { font-weight: 700; color: #a9a097; margin-right: 6px; letter-spacing: .02em; }
.fsbox .ls { color: inherit; opacity: .68; }


/* ---------- Spec list (the cue stack) ----------
   Six items is past the point where a bulleted list is the right component, so
   each one is a term and a line of plain English, divided by a hairline. */
.spec { margin: 30px 0 0; display: grid; gap: 0; }
.spec__i { padding: 18px 0; border-top: 1px solid var(--edge); }
.spec__i:first-child { border-top: 0; padding-top: 0; }
.spec dt { font-family: var(--display); font-weight: 800; font-size: 1.02rem;
  letter-spacing: -.02em; color: var(--lit); margin-bottom: 5px; }
.spec dd { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--half); max-width: 46ch; }
/* They arrive one after another as you come down the section. */
.spec__i:nth-child(2).is-in { transition-delay: .06s; }
.spec__i:nth-child(3).is-in { transition-delay: .12s; }
.spec__i:nth-child(4).is-in { transition-delay: .18s; }
.spec__i:nth-child(5).is-in { transition-delay: .24s; }
.spec__i:nth-child(6).is-in { transition-delay: .30s; }

@media (max-width: 1020px) {
  .split--hold > *:first-child { position: static; }
}

/* The cue stack is a long object next to a long list. For the object to hold
   still while the specs scroll past it, it has to fit the viewport first. */
@media (min-width: 1021px) {
  .split--hold > *:first-child .house__core { max-height: 72vh; }
  .split--hold > *:first-child .house__core > * {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  }
}

/* ==========================================================================
   Components for the inner pages. Same language as the home page: one accent,
   two radii, hairlines instead of boxes wherever a box is not doing work.
   ========================================================================== */

/* ---------- Page header ---------- */
.phead { padding: clamp(60px, 7vw, 104px) 0 clamp(34px, 4vw, 56px); }
.phead h1 { max-width: 16ch; margin-bottom: 20px; }
.phead .lead { max-width: 52ch; }

/* ---------- Numbered steps (how it works) ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step { counter-increment: step; display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: clamp(18px, 2.4vw, 34px); padding: clamp(24px,2.8vw,38px) 0; border-top: 1px solid var(--edge); }
.step:first-child { border-top: 0; padding-top: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: .86rem; font-weight: 500; color: var(--key);
  padding-top: 4px; letter-spacing: .04em;
}
.step h3 { font-family: var(--display); font-size: clamp(1.15rem,1.7vw,1.5rem); font-weight: 800;
  letter-spacing: -.025em; margin-bottom: 9px; }
.step p { font-size: .98rem; line-height: 1.66; color: var(--half); max-width: 62ch; }
.step code, .kbdish {
  font-family: var(--mono); font-size: .86em; color: var(--lit);
  background: rgba(255,245,230,.07); border: 1px solid var(--edge-lit);
  padding: 1px 6px; border-radius: 6px;
}

/* ---------- Roles ---------- */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.role { padding: 1px; border-radius: var(--r-house);
  background: linear-gradient(160deg, rgba(255,245,230,.1), rgba(255,245,230,.015)); }
.role__in { height: 100%; border-radius: calc(var(--r-house) - 1px); padding: 24px;
  background: var(--riser); box-shadow: inset 0 1px 0 rgba(255,245,230,.07); }
.role--paid { background: linear-gradient(160deg, rgba(58,139,222,.5), rgba(58,139,222,.08)); }
.role__top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.role__top h3 { font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.role__tag { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; padding: 3px 8px;
  border-radius: var(--r-ctl); border: 1px solid var(--edge-lit); color: var(--quart); }
.role__tag--paid { color: var(--key-hi); border-color: rgba(58,139,222,.45); background: rgba(58,139,222,.1); }
.role p { font-size: .92rem; line-height: 1.6; color: var(--half); margin: 0; }

/* ---------- Plan cards (full pricing) ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; align-items: start; }
.tier { padding: 1px; border-radius: var(--r-house);
  background: linear-gradient(160deg, rgba(255,245,230,.1), rgba(255,245,230,.015)); }
.tier--pick { background: linear-gradient(160deg, rgba(58,139,222,.55), rgba(58,139,222,.08)); }
.tier__in { height: 100%; border-radius: calc(var(--r-house) - 1px); padding: 26px 24px 28px;
  background: var(--riser); box-shadow: inset 0 1px 0 rgba(255,245,230,.07);
  display: flex; flex-direction: column; gap: 14px; }
.tier__kind { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--quart); }
.tier__name { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.025em; }
.tier__amt { font-family: var(--mono); font-size: 1.85rem; font-weight: 600; letter-spacing: -.03em; }
.tier__amt small { font-family: var(--body); font-size: .74rem; font-weight: 450; color: var(--quart); letter-spacing: 0; }
.tier__note { font-size: .8rem; color: var(--quart); margin: -8px 0 0; }
.tier__blurb { font-size: .9rem; line-height: 1.55; color: var(--half); margin: 0; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tier li { font-size: .88rem; line-height: 1.45; color: var(--half); padding-left: 19px; position: relative; }
.tier li::before { content: ""; position: absolute; left: 2px; top: .52em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--key); opacity: .85; }
.tier li.no { color: var(--quart); }
.tier li.no::before { background: none; box-shadow: inset 0 0 0 1px var(--edge-lit); }
.tier .btn { margin-top: auto; justify-content: space-between; }

/* ---------- Comparison table ---------- */
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .9rem; }
.cmp th, .cmp td { padding: 13px 14px; text-align: left; border-top: 1px solid var(--edge); }
.cmp thead th { border-top: 0; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--quart); font-weight: 500; }
.cmp tbody th { font-weight: 500; color: var(--lit); }
.cmp td { color: var(--half); font-family: var(--mono); font-size: .82rem; }
.cmp .y { color: var(--key-hi); }
.cmp .n { color: var(--quart); }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: rgba(255,245,230,.025); }

/* ---------- Q&A ---------- */
.qa { border-top: 1px solid var(--edge); }
.qa summary {
  list-style: none; cursor: pointer; padding: 19px 38px 19px 0; position: relative;
  font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em;
  color: var(--lit);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.1rem; color: var(--key); transition: transform .4s var(--settle);
}
.qa[open] summary::after { content: "-"; }
.qa summary:hover { color: var(--key-hi); }
.qa__a { padding: 0 0 22px; }
.qa__a p { font-size: .95rem; line-height: 1.68; color: var(--half); max-width: 68ch; }

/* ---------- Form ---------- */
.form { display: grid; gap: 18px; max-width: 640px; }
.form__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.ffield { display: grid; gap: 7px; }
.ffield label { font-size: .85rem; font-weight: 500; color: var(--lit); }
.ffield__hint { color: var(--quart); font-weight: 400; }
.form input[type=text], .form input[type=email], .form select, .form textarea {
  width: 100%; font-family: var(--body); font-size: .95rem; color: var(--lit);
  background: var(--stage); border: 1px solid var(--edge-lit); border-radius: var(--r-chip);
  padding: 12px 14px; transition: border-color .35s var(--settle), background .35s var(--settle);
}
.form textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
.form ::placeholder { color: #8b8176; opacity: 1; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--key); background: var(--riser);
  box-shadow: 0 0 0 3px rgba(58,139,222,.16);
}
.form__note { font-size: .85rem; line-height: 1.6; color: var(--quart); max-width: 60ch; margin: 0; }

/* Urgency picker */
.urg { border: 0; margin: 0; padding: 0; }
.urg legend { font-size: .85rem; font-weight: 500; color: var(--lit); padding: 0 0 8px; }
.urg__seg { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px;
  padding: 5px; border-radius: 14px; background: var(--stage); border: 1px solid var(--edge); }
.urg__seg input { position: absolute; opacity: 0; pointer-events: none; }
.urg__seg label {
  text-align: center; font-size: .86rem; font-weight: 500; color: var(--half);
  padding: 10px 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; transition: all .35s var(--settle);
}
.urg__seg label:hover { color: var(--lit); }
.urg__seg input:checked + label { background: var(--riser); color: var(--lit); border-color: var(--edge-lit); }
.urg__seg input#u-hi:checked + label { background: rgba(228,100,90,.16); color: #ffb0a8; border-color: rgba(228,100,90,.45); }
.urg__seg input:focus-visible + label { outline: 2px solid var(--key); outline-offset: 2px; }
.urg__panel { display: none; border-radius: var(--r-core); padding: 22px 24px;
  background: rgba(228,100,90,.07); border: 1px solid rgba(228,100,90,.3); }
.urg__panel.is-open { display: block; }
.urg__panel h3 { font-family: var(--display); font-size: 1rem; font-weight: 700; margin-bottom: 11px; color: var(--lit); }
.urg__panel ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.urg__panel li, .urg__panel p { font-size: .91rem; line-height: 1.6; color: var(--half); }
.urg__panel strong { color: var(--lit); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Legal pages ---------- */
.legal h2 { font-family: var(--display); font-size: 1.12rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--lit); margin: 34px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: .96rem; line-height: 1.68; color: var(--half); max-width: 66ch; }
.legal p strong { color: var(--lit); font-weight: 600; }
.legal a { color: var(--key-hi); }
.legal__stamp { margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--edge);
  font-family: var(--mono); font-size: .78rem; color: var(--quart); }

/* ---------- Small shared bits ---------- */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(22px,3vw,48px); }
.note-band { border-radius: var(--r-house); padding: clamp(24px,3vw,40px);
  background: var(--riser); border: 1px solid var(--edge); }
.note-band h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.025em; margin-bottom: 12px; }

@media (max-width: 1020px) {
  .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .tiers, .roles, .cols2, .form__row, .urg__seg { grid-template-columns: minmax(0,1fr); }
  .step { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .step::before { padding-top: 0; }
}

/* ---------- Fullscreen, split ----------
   Redrawn from a screenshot of the real thing: show name and running time
   together top left, cue count top right, STANDBY above the move, the cue
   number under it, and an UP NEXT rail down the side. The bottom bar carries
   Exit Split View, because this is a display option and not a mode. */
.fs--split { container-type: inline-size; display: grid;
  grid-template-columns: minmax(0,1fr) 29%; padding: 0; background: #000; }
.fsx { padding: 18px 22px 16px; min-width: 0; display: flex; flex-direction: column; }
.fsx__top { display: flex; align-items: baseline; gap: 14px;
  font-family: var(--mono); font-weight: 700; font-size: clamp(9px,1.5cqw,15px);
  letter-spacing: .1em; color: #9aa0a6; }
.fsx__top .t { color: #c8cdd2; }
.fsx__top .c { margin-left: auto; color: #c8cdd2; }
.fsx__standby { text-align: center; font-family: var(--mono); font-weight: 700;
  font-size: clamp(10px,1.6cqw,16px); letter-spacing: .3em; color: var(--standby); margin: 7% 0 2%; }
.fsx__box { border-radius: 12px; padding: clamp(10px,1.4vw,18px) clamp(12px,1.6vw,22px);
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: var(--mono); font-weight: 700; font-size: clamp(13px,3.1cqw,34px); }
.fsx__box--in  { background: #14401f; color: #5fd97f; }
.fsx__box--out { background: #40150f; color: #f08573; }
.fsx__box .meta { margin-left: auto; font-size: clamp(8px,1.15cqw,13px); letter-spacing: .14em;
  display: flex; gap: clamp(6px,1vw,16px); white-space: nowrap; }
.fsx__cue { text-align: center; font-family: var(--mono); font-weight: 700;
  font-size: clamp(26px,6.2cqw,62px); color: #c8cdd2; line-height: 1.1; margin-top: 1%; }
.fsx__bottom { margin-top: auto; display: flex; align-items: center; gap: clamp(5px,1.1cqw,14px);
  padding-top: 6%; font-family: var(--mono); font-weight: 700;
  font-size: clamp(7.5px,1.1cqw,13px); letter-spacing: .08em; }
.fsx__pill { color: #7c828a; border: 1px solid #2a2d31; border-radius: 999px;
  padding: 6px clamp(8px,1.4cqw,15px); white-space: nowrap; }
.fsx__pill span { color: #5b9bea; }
.fsx__exit { margin-left: auto; }
.fsx__back { color: var(--standby); border: 1px solid var(--standby); border-radius: 9px;
  padding: 6px clamp(8px,1.4cqw,15px); white-space: nowrap; }
.fsx__go { background: #4cc273; color: #06230f; border-radius: 9px;
  padding: 6px clamp(11px,2cqw,22px); }

.fsup { border-left: 1px solid #232629; background: #0b0b0b;
  padding: 15px 11px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fsup h4 { font-family: var(--mono); font-weight: 700; font-size: clamp(7.5px,1.1cqw,12px);
  letter-spacing: .14em; color: #5b9bea; margin: 0 0 3px; }
.fsup__i { background: #1a1b1d; border-radius: 8px; padding: 7px 9px; min-width: 0; }
.fsup__n { font-family: var(--mono); font-weight: 700; font-size: clamp(7.5px,1.05cqw,12px);
  letter-spacing: .1em; color: #e8eaec; }
.fsup__m { font-family: var(--mono); font-weight: 700; font-size: clamp(5.8px,.88cqw,11px);
  margin-top: 3px; line-height: 1.55; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fsup__m.in  { color: #5fd97f; }
.fsup__m.out { color: #f08573; }
.fsup__m.dead{ color: var(--standby); }

@media (max-width: 760px) {
  .fs--split { grid-template-columns: minmax(0,1fr); }
  .fsup { border-left: 0; border-top: 1px solid #232629; }
}