/* ===========================================================================================
   ember landing page - stylesheet
   ===========================================================================================

   WHAT CARRIES OVER FROM THE APPLICATION (scope 4.1): the colour scheme, the panel treatment
   (hairline borders on flat white, not shadowed cards), the typography, and the wordmark with
   the gold b.

   WHAT DOES NOT CARRY OVER: the layout skeleton. Every value below was copied BY VALUE out of
   packages/web/src/theme/tokens.css. Nothing here imports, links to, or is built from anything
   in the application. That is the wall, and a shared file would be a shared dependency however
   small it is.

   DE-FINGERPRINTING (scope 4.2) - the tells this file deliberately avoids:
     - no all-caps letter-spaced micro label above any heading
     - no section that is a centred headline over three equal cards
     - corner radius is NOT uniform: the photo slot is 20px, demo panels 14px, buttons 10px,
       status pills 7px, the pain list has square edges and the fix band has none at all
     - exactly ONE surface on the page carries a drop shadow (the demo's modal, which is
       floating over content and has to). Everything else separates with a hairline, as the
       application does.
     - no purple-to-blue gradient. There is one gradient on the page and it is a 1px hairline.
     - vertical rhythm is deliberately uneven: 104 / 88 / 40 / 64 / 112 / 80 px. A page whose
       every section breathes identically reads as generated.

   TEXT: this file is 7-bit ASCII, like every other file on the page.
   =========================================================================================== */

/* --- THE WORDMARK FACE ---------------------------------------------------------------------
   Philosopher Regular, SIL Open Font License. The WOFF2 was COPIED into this page's own assets
   (byte-identical, 68,128 bytes) rather than referenced across the package boundary.
   ONE weight exists in the file, so font-weight is stated rather than inherited: a heading that
   passes down font-weight 600 would otherwise synthesise a fake bold off a face that has none. */
@font-face {
  font-family: 'Philosopher';
  src: url('../fonts/Philosopher-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  /* Ink and neutrals */
  --ink: #131316;
  --ink-2: #26262a;
  --muted: #5c5c64;
  --subtle: #91919a;
  --faint: #b6b6bd;
  --hairline: rgba(16, 16, 20, 0.09);
  --hairline-2: rgba(16, 16, 20, 0.05);

  /* Surfaces */
  --panel: #ffffff;
  --panel-2: #fbfbfb;
  --sunk: #f3f3f2;

  /* Dark ground. The application's rail colour, used here for the hero and the closing band. */
  --side: #191a1c;
  --side-2: #232427;
  --side-line: rgba(255, 255, 255, 0.07);
  --side-text: #eeeef0;
  --side-text-2: #c2c2c7;
  --side-muted: #7c7c84;

  /* STATUS. The only colour in the product, and the only colour in the demo. */
  --overdue: #b13232;
  --overdue-bg: rgba(177, 50, 50, 0.1);
  --soon: #9a6410;
  --soon-bg: rgba(154, 100, 16, 0.13);
  /* MEASURED, and a finding worth carrying back to the application. --soon on --soon-bg over
     white is 4.21:1, which is under AA for the 13px pill text, while the same amber on plain
     white is 4.99:1 and fine. So the pill, and only the pill, uses a variant derived from the
     same token: 4.98:1. The overdue red (5.35:1) and the ok green (5.66:1) already clear it and
     are left exactly as they are. Same fallback discipline as the gold below. */
  --soon-ink: var(--soon);
  --ok: #1d6a44;
  --ok-bg: rgba(29, 106, 68, 0.1);

  /* The failed panel carries a light red hue across the whole panel, not a small pill. A failure
     must never be visually outranked by something merely approaching. */
  --failed-panel: #fdf5f4;
  --failed-panel-2: #fbeceb;
  --failed-line: rgba(177, 50, 50, 0.16);

  /* BRAND. THE ONE DEFINITION OF THE GOLD ON THIS PAGE. Everything that needs it references
     var(--gold); nothing pastes the hex a second time. */
  --gold: #c39b4c;

  /* The light-ground variant, DERIVED from the one gold above rather than eyedropped into a
     second hex. The mark was measured dark-ground-only in the application build: on white the
     brand gold is 2.59:1, which fails AA for text. Mixed 65 / 35 with the ink it measures
     5.05:1 on #ffffff, 4.88:1 on #fbfbfb and 4.55:1 on #f3f3f2 - AA on every light surface this
     page uses, while staying visibly the same gold.
     The fallback declaration is plain ink, not a second gold: a browser too old for color-mix
     loses the colour and keeps the word perfectly legible. The b still anchors the mark, because
     what anchors it is the riser and not the colour. */
  --gold-on-light: var(--ink);
  --gold-on-dark: var(--gold);

  --body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wordmark: 'Philosopher', Georgia, 'Times New Roman', serif;

  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;

  --measure: 1180px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --gold-on-light: color-mix(in srgb, var(--gold) 65%, var(--ink));
    --soon-ink: color-mix(in srgb, var(--soon) 88%, var(--ink));
  }
}

/* --- reset, kept to what is actually used ------------------------------------------------- */
* { box-sizing: border-box; }

/* The demo hides and shows views and sheets with the `hidden` attribute. The browser's own
   [hidden] { display: none } rule is a USER AGENT rule, so any author rule that sets display -
   `.view { display: grid }` immediately below is one - silently beats it and the hidden element
   renders anyway. This is the single most likely way a swap-driven demo breaks, and on a machine
   with no browser it would not have been visible. Stated once here, with the !important that
   makes the attribute mean what it says. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 500; }
p, ul, dl { margin: 0; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--gold); color: #1b1508; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- THE WORDMARK -------------------------------------------------------------------------
   Set as TEXT, never as an image: selectable, scales, survives a user stylesheet, needs no
   second asset pipeline. Lowercase always. The b is the only glyph in the word that rises above
   the x-height, so the colour is placed on the one vertical event the mark already has. */
.wordmark {
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.012em;
  color: var(--side-text);
  white-space: nowrap;
  text-transform: lowercase;
}
.wordmark-b { color: var(--gold-on-dark); }
.wordmark-on-light { color: var(--ink); }
.wordmark-on-light .wordmark-b { color: var(--gold-on-light); }
.wordmark-sm { font-size: 21px; }

/* --- buttons ------------------------------------------------------------------------------ */
.btn {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 12px 20px;
  cursor: pointer;
  background: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.btn-gold {
  background: var(--gold);
  color: #1b1508;
  border-color: #b08a3f;
}
.btn-gold:hover { background: #cfa757; }
.btn-gold:active { transform: translateY(1px); }
.btn-gold[disabled] { opacity: 0.4; cursor: default; }
.btn-lg { font-size: 17px; padding: 15px 30px; }
.btn-quiet {
  background: var(--panel);
  border-color: var(--hairline);
  color: var(--ink-2);
  font-size: 14.5px;
  padding: 9px 15px;
}
.btn-quiet:hover { background: var(--sunk); border-color: rgba(16, 16, 20, 0.18); }
.btn-link {
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  border: 0;
  border-bottom: 1px solid var(--faint);
  border-radius: 0;
}
.btn-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ===========================================================================================
   DARK BAND - hero and closing waitlist
   =========================================================================================== */
.band-dark {
  background: var(--side);
  color: var(--side-text);
}

/* Full-bleed hero: the photograph covers the whole dark band, a left-to-right scrim
   darkens the (white-space) left so the light text stays legible, and the subject on
   the right stays visible. Adjusts to display size via object-fit cover. */
.hero-band { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(25, 26, 28, 0.74);
}
@media (min-width: 760px) {
  .hero-scrim {
    background: linear-gradient(
      90deg,
      var(--side) 0%,
      rgba(25, 26, 28, 0.94) 30%,
      rgba(25, 26, 28, 0.6) 55%,
      rgba(25, 26, 28, 0.16) 82%,
      rgba(25, 26, 28, 0) 100%
    );
  }
}
.hero-band .masthead,
.hero-band .hero { position: relative; z-index: 2; }

.masthead {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 26px 32px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.masthead-note {
  font-size: 14px;
  color: var(--side-muted);
  letter-spacing: 0.005em;
}

/* The hero is asymmetric on purpose: the words take more than half and the photograph is the
   narrower column, which is the opposite of the centred-hero default. */
.hero {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 72px 32px 108px;
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.hero-words { max-width: 40em; }
.hero h1 {
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: 55px;
  line-height: 1.1;
  letter-spacing: -0.004em;
  color: #fff;
}
.hero-sub {
  margin-top: 26px;
  max-width: 33em;
  font-size: 19px;
  line-height: 1.6;
  color: var(--side-text-2);
}
.hero-cta { margin-top: 34px; }
.hero-fine {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--side-muted);
  max-width: 30em;
}

/* The pending photograph. It is meant to look unfinished. */
.photo-slot {
  border: 2px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--r-lg);
  background: var(--side-2);
  aspect-ratio: 4 / 5;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.photo-slot-tag {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold);
}
.photo-slot-body {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--side-text-2);
}
.photo-slot-foot {
  font-size: 13.5px;
  color: var(--side-muted);
}
.hero-photo {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
}

/* ===========================================================================================
   THE PAIN - a single narrow column, offset left, no cards
   =========================================================================================== */
.pain {
  background: var(--panel);
  padding: 88px 32px 72px;
}
.pain-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: 4%;
}
.pain h2 {
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  max-width: 16em;
}
.pain-list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  max-width: 40em;
}
.pain-list li {
  padding: 15px 0 15px 22px;
  border-left: 2px solid var(--hairline);
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
/* One line in the list is heavier than the others, because in real life one of them is. */
.pain-list li:nth-child(4) {
  border-left-color: var(--overdue);
  color: var(--ink);
}
.pain-close {
  margin-top: 34px;
  max-width: 34em;
  font-size: 17px;
  color: var(--muted);
}

/* ===========================================================================================
   THE FIX - deliberately the shortest, tightest section on the page. No radius, no card.
   =========================================================================================== */
.fix {
  background: var(--sunk);
  border-top: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline-2);
  padding: 40px 32px 44px;
}
.fix-line {
  max-width: var(--measure);
  margin: 0 auto;
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fix-line .wordmark { font-size: 34px; }
/* Padding rather than a narrower max-width, so the measure is short without the text drifting
   out of alignment with the heading above it. */
.fix-body {
  max-width: var(--measure);
  margin: 14px auto 0;
  padding-right: 30%;
  font-size: 18px;
  color: var(--ink-2);
}
.fix-hand {
  max-width: var(--measure);
  margin: 20px auto 0;
  font-size: 15px;
  color: var(--subtle);
}

/* ===========================================================================================
   THE DEMO - full bleed, no boxed frame, no phone mockup.
   Nothing in here scrolls: there is no overflow rule in this whole section, so both tables sit
   in normal document flow and are visible together without an inner scrollbar.
   =========================================================================================== */
.demo {
  background: var(--panel-2);
  border-bottom: 1px solid var(--hairline);
  padding: 34px 0 64px;
}
.demo-notice {
  max-width: 1400px;
  margin: 0 auto 26px;
  padding: 14px 20px;
  background: #fffaf0;
  border: 1px solid rgba(195, 155, 76, 0.35);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.demo-notice strong { font-weight: 600; }

.app {
  max-width: 1400px;
  margin: 0 auto;
}

.app-bar {
  background: var(--side);
  color: var(--side-text);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.app-bar-firm {
  font-size: 15px;
  font-weight: 500;
  color: var(--side-text-2);
  border-left: 1px solid var(--side-line);
  padding-left: 18px;
}
.app-bar-date {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--side-muted);
}

.view { display: grid; gap: 18px; padding-top: 18px; }

/* Panels: flat white, hairline border, no shadow. This is the application's treatment. */
.panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 20px 22px 22px;
}
.panel-failed {
  background: var(--failed-panel);
  border-color: var(--failed-line);
}
.panel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
}
.panel-head h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.panel-sub {
  font-size: 14.5px;
  color: var(--muted);
  flex: 1 1 20em;
}
.panel-head .btn-quiet { margin-left: auto; }
.panel-foot {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--muted);
}

/* --- the grids ---------------------------------------------------------------------------- */
.grid th {
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--subtle);
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.grid td {
  padding: 14px 14px 14px 0;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 16px;
  vertical-align: top;
  color: var(--ink-2);
}
.grid tbody tr:last-child td { border-bottom: 0; }
.grid td:last-child, .grid th:last-child { padding-right: 0; }

.ref {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sub {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--muted);
}
.sub-inline { font-size: 14px; color: var(--subtle); }
.cyc { display: block; font-weight: 500; color: var(--ink); }
.flag {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--subtle);
}
.date {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}
.money {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}
/* Blank is not zero. An unpriced cycle says so and stays out of the total. */
.money-blank {
  font-family: var(--body);
  font-size: 14px;
  color: var(--subtle);
  font-style: normal;
}

.pill {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.pill-overdue { background: var(--overdue-bg); color: var(--overdue); }
.pill-soon { background: var(--soon-bg); color: var(--soon-ink); }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-failed { background: var(--overdue-bg); color: var(--overdue); }
.pill-off { background: rgba(16, 16, 20, 0.055); color: #4a4a52; }

.row-overdue .date { color: var(--overdue); font-weight: 500; }
.row-soon .date { color: var(--soon); }
.act { text-align: right; white-space: nowrap; }

/* --- the one live row --------------------------------------------------------------------
   A quiet pulse on the row's own background plus a steady gold rule down its left edge, so the
   eye lands on it without a caption telling anyone to click. */
.row-live td { background: rgba(195, 155, 76, 0.07); }
.row-live td:first-child {
  box-shadow: inset 3px 0 0 0 var(--gold);
  padding-left: 13px;
}
.btn-act {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-size: 14.5px;
  padding: 10px 16px;
  animation: nudge 2.6s ease-in-out infinite;
}
.btn-act:hover { background: #000; }
@keyframes nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(195, 155, 76, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(195, 155, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-act { animation: none; box-shadow: 0 0 0 3px rgba(195, 155, 76, 0.45); }
}

/* --- register and cycle views ------------------------------------------------------------- */
/* The row the visitor's move just landed on, in either flow. Applied by the script, never in
   the markup, so the opening state cannot show a unit as settled before anyone settled it. */
.row-focus td { background: var(--ok-bg); }
.unit-flash {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--ok-bg);
  border-left: 3px solid var(--ok);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: 15.5px;
  color: #145033;
}
.unit-back { margin-top: 18px; }

/* --- the two sheets ------------------------------------------------------------------------
   The ONLY shadowed surface on the page. It floats over content, so it earns one. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(16, 16, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sheet[hidden] { display: none; }
.sheet-card {
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  padding: 26px 28px 24px;
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.sheet-card h3 { font-size: 22px; font-weight: 600; }
.sheet-sub { margin-top: 6px; font-size: 15px; color: var(--muted); }

.fields { margin-top: 20px; border-top: 1px solid var(--hairline); }
.fields > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline-2);
}
.fields dt { font-size: 14px; color: var(--subtle); padding-top: 2px; }
.fields dd { margin: 0; font-size: 16px; color: var(--ink-2); }
.sheet-act { margin-top: 22px; }

.types { border: 0; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.type {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.type:hover { background: var(--panel-2); }
.type:has(input:checked) { border-color: var(--gold); background: rgba(195, 155, 76, 0.08); }
.type input { margin: 0; accent-color: var(--gold); grid-row: span 2; }
.type-name { font-size: 16px; font-weight: 500; }
.type-sub { font-size: 14px; color: var(--muted); grid-column: 2; }

.auto {
  margin-top: 20px;
  padding: 16px 18px 4px;
  background: var(--sunk);
  border-radius: var(--r-sm);
}
.auto-head { font-size: 14px; font-weight: 600; color: var(--muted); }
.auto .fields { margin-top: 10px; border-top: 0; }
.auto .fields > div:last-child { border-bottom: 0; }

/* ===========================================================================================
   THE DETAIL - two UNEQUAL halves. Not two matching columns, not three cards.
   =========================================================================================== */
.detail {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 112px 32px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: 72px;
}
.detail h2 {
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: 30px;
}
.half-lede { margin-top: 4px; font-size: 16px; color: var(--subtle); }
.point { margin-top: 30px; }
.point h3 { font-size: 18px; font-weight: 600; line-height: 1.35; }
.point p { margin-top: 7px; font-size: 16.5px; color: var(--muted); max-width: 38em; }
/* The right half sits lower and lighter than the left. The page is not a grid of equals. */
.half-back {
  padding-top: 34px;
  border-left: 1px solid var(--hairline);
  padding-left: 40px;
}

/* ===========================================================================================
   WAITLIST + FOOT
   =========================================================================================== */
.waitlist { padding: 80px 32px 84px; }
.waitlist-inner { max-width: 760px; margin: 0 auto; }
.waitlist h2 {
  font-family: var(--wordmark);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  color: #fff;
}
.waitlist p { margin-top: 18px; font-size: 18px; color: var(--side-text-2); }
.waitlist-cta { margin-top: 28px; }
.waitlist-fine { margin-top: 16px; font-size: 14.5px; color: var(--side-muted); }
.waitlist-fine.is-warn { color: #e6b96a; }

.foot {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 26px 32px 34px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.foot-note { font-size: 14px; color: var(--subtle); }

/* ===========================================================================================
   RESPONSIVE. The grids become stacked records rather than acquiring a horizontal scrollbar,
   so no part of the demo ever hides content behind an inner scroll.
   =========================================================================================== */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 76px; }
  .photo-slot { aspect-ratio: 16 / 10; max-width: 520px; }
  .hero h1 { font-size: 44px; }
  .detail { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 84px; }
  .half-back { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 34px; }
  .demo-notice, .app { margin-left: 24px; margin-right: 24px; }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .hero h1 { font-size: 36px; }
  .waitlist h2 { font-size: 30px; }
  .pain-inner { padding-left: 0; }
  .fix-body { padding-right: 0; }

  .grid thead { display: none; }
  .grid tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .grid td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 4px 0;
    border: 0;
  }
  .grid td::before {
    content: attr(data-label);
    font-size: 13.5px;
    color: var(--subtle);
  }
  .grid td[data-label='']::before { content: ''; }
  .act { text-align: left; }
  .row-live td:first-child { box-shadow: none; padding-left: 0; }
  .row-live { box-shadow: inset 3px 0 0 0 var(--gold); padding-left: 13px; }
  .fields > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (max-width: 560px) {
  .masthead { padding: 20px 20px 0; flex-direction: column; gap: 6px; }
  .hero { padding: 34px 20px 56px; }
  .hero h1 { font-size: 31px; }
  .hero-sub { font-size: 17.5px; }
  .pain { padding: 56px 20px 48px; }
  .fix { padding: 32px 20px 36px; }
  .detail { padding: 64px 20px 56px; }
  .waitlist { padding: 56px 20px 60px; }
  .foot { padding: 22px 20px 28px; flex-direction: column; gap: 8px; }
  .demo-notice, .app { margin-left: 14px; margin-right: 14px; }
  .panel { padding: 16px 14px 18px; }
  .sheet-card { padding: 20px 18px 18px; }
}