/* ═══════════════════════════════════════════════════════════════════════════
     TOKENS

     Sharp corners and a single blue are the brand, carried over deliberately.
     What changed in this redesign is the RHYTHM: a fluid type scale, a wider
     measure, and far more air between sections, because the previous page put
     every section at the same weight and nothing led.
     ═════════════════════════════════════════════════════════════════════════ */
  :root {
    --base: #ffffff;
    --panel: #f8fafc;
    --edge: #e2e8f0;
    --edge-soft: #eef2f7;
    --accent: #2563eb;
    --accent-deep: #1d4ed8;
    --ink: #0b1220;
    --dim: #475569;
    --faint: #94a3b8;
    /* --faint at 14px on white is ~2.5:1. Fine for a decorative rule, not for a
       price. This buyer is a shop owner reading a $479 figure on an office
       monitor, and a good share of them are past 45 and presbyopic. Small text
       that carries MEANING uses this instead: ~5.7:1 and still visibly quiet. */
    --quiet: #64748b;
    --ok: #15803d;
    --r: 2px;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    /* One easing for everything that moves, so the page feels like one object. */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --measure: 1240px;
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ink); background: var(--base);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-size: 17px; line-height: 1.6;
    /* The parallax layers translate; without this a sub-pixel row can show through. */
    overflow-x: hidden;
  }
  a { color: var(--accent); text-decoration: none; }
  img, svg { max-width: 100%; display: block; }
  ::selection { background: var(--accent); color: #fff; }

  .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 28px; }
  .narrow { max-width: 880px; }

  /* ── type scale ───────────────────────────────────────────────────────────
     Fluid, and tighter at the top end than the browser default: at 96px the
     default line-height leaves a gap you can park a car in. */
  h1 {
    font-size: clamp(40px, 7.2vw, 92px);
    line-height: 0.98; letter-spacing: -0.035em; font-weight: 800;
    text-wrap: balance;
  }
  h2 {
    font-size: clamp(30px, 4.4vw, 54px);
    line-height: 1.04; letter-spacing: -0.028em; font-weight: 800;
    text-wrap: balance;
  }
  h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
  .lede { color: var(--dim); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; max-width: 62ch; }

  /* The mono micro-label. Used for section numbers, eyebrows and data, which is
     the only place a monospace belongs on a marketing page: it reads as
     instrumentation rather than decoration. */
  .eyebrow {
    font-family: var(--mono); font-size: 12px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
    display: flex; align-items: center; gap: 10px;
  }
  .eyebrow::before {
    content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55;
  }
  .num {
    font-family: var(--mono); font-size: 12px; font-weight: 500;
    letter-spacing: .1em; color: var(--faint);
  }

  /* ── buttons ─────────────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 50px; padding: 0 24px; border-radius: var(--r);
    font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
    border: 1px solid var(--edge); background: #fff; color: var(--ink);
    transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
    white-space: nowrap; cursor: pointer;
  }
  .btn:hover { transform: translateY(-1px); border-color: var(--faint); box-shadow: 0 6px 20px -8px rgba(11,18,32,.18); }
  .btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
  .btn-primary:hover { background: #000; border-color: #000; }
  .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
  .btn-sm { height: 38px; padding: 0 15px; font-size: 14px; }

  /* ── nav ─────────────────────────────────────────────────────────────────── */
  #nav {
    position: fixed; inset: 0 0 auto 0; z-index: 60;
    background: rgba(255,255,255,0);
    border-bottom: 1px solid transparent;
    transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  }
  #nav.stuck {
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--edge);
  }
  .nav-in { display: flex; align-items: center; gap: 22px; height: 68px; }
  .mark {
    display: flex; align-items: center; gap: 9px; color: var(--ink);
    font-weight: 800; letter-spacing: .12em; font-size: 13px;
  }
  .nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
  .nav-links a:not(.btn) {
    color: var(--dim); font-size: 14px; font-weight: 500; position: relative; padding: 4px 0;
  }
  .nav-links a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
    background: var(--ink); transition: right .28s var(--ease);
  }
  .nav-links a:not(.btn):hover { color: var(--ink); }
  .nav-links a:not(.btn):hover::after { right: 0; }
  .nav-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; margin-left: auto; }

  /* ── reveal ──────────────────────────────────────────────────────────────
     One mechanism for everything that appears on scroll. Children can stagger
     with --d. Kept as opacity + transform only: both are compositor
     properties, so a long page of these does not thrash layout. */
  .js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
  .js .rv.in { opacity: 1; transform: none; }

  /* ── hero ────────────────────────────────────────────────────────────────── */
  /* Bottom padding leaves room for the artwork's own drift. At a rate of 0.07 over a
     viewport-and-a-bit of scroll the figure travels roughly 60px, and without the room it was
     clipped by the stats band the moment the page moved. */
  .hero { position: relative; padding: 168px 0 96px; overflow: hidden; }
  /* The grid is the deepest parallax layer. It reads as a drawing sheet without
     ever being loud enough to compete with the type. */
  .hero-grid-bg {
    position: absolute; inset: -20% -10% -10%; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, var(--edge-soft) 1px, transparent 1px),
      linear-gradient(to bottom, var(--edge-soft) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(ellipse 90% 62% at 50% 34%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 34%, #000 30%, transparent 78%);
  }
  .hero .wrap { position: relative; z-index: 1; }
  .hero h1 { margin: 20px 0 0; max-width: 17ch; }
  .hero .lede { margin-top: 26px; }
  .beam-word {
    position: relative; white-space: nowrap;
    background: linear-gradient(90deg, var(--accent), #60a5fa);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .hero-note { color: var(--faint); font-size: 13px; margin-top: 18px; }
  .formats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
  .chip {
    font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--dim);
    border: 1px solid var(--edge); border-radius: var(--r); padding: 5px 9px; background: #fff;
  }
  .scrollcue {
    display: flex; align-items: center; gap: 10px; margin-top: 56px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint);
  }
  .scrollcue i {
    width: 1px; height: 34px; background: linear-gradient(var(--faint), transparent);
    animation: cue 2.1s var(--ease) infinite;
  }
  @keyframes cue { 0%,100% { opacity: .25; transform: scaleY(.55); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } }

  /* The hero artwork. A real tube from the real renderer, drifting slower than
     the page so the section has depth without anything sliding around. */
  .hero-art { position: relative; z-index: 1; margin: 42px auto 0; max-width: 1080px; padding: 0 28px; }
  .hero-art img { width: 100%; filter: drop-shadow(0 32px 46px rgba(11,18,32,.09)); }
  .hero-art figcaption {
    font-family: var(--mono); font-size: 11.5px; color: var(--faint);
    letter-spacing: .05em; margin-top: 14px; text-align: center;
  }

  /* ── stats band ──────────────────────────────────────────────────────────── */
  .stats { border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); background: var(--panel); }
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 34px 26px 34px 0; }
  .stat + .stat { border-left: 1px solid var(--edge); padding-left: 26px; }
  .stat b { display: block; font-size: clamp(22px, 2.4vw, 31px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
  .stat .acc { color: var(--accent); }
  /* Direct child only: the cents inside the number are a span too, and must stay inline. */
  .stat > span { display: block; color: var(--dim); font-size: 13px; margin-top: 8px; line-height: 1.45; }

  /* ── sections ────────────────────────────────────────────────────────────── */
  section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
  .sec-head { display: grid; grid-template-columns: 96px 1fr; gap: 0 28px; align-items: start; }
  .sec-head .num { padding-top: 10px; }
  .sec-head .lede { margin-top: 20px; }
  @media (max-width: 720px) { .sec-head { grid-template-columns: 1fr; } .sec-head .num { padding: 0 0 10px; } }

  /* A figure whose image drifts against the page. The frame is clipped so the
     drift never reveals an edge. */
  /* Grid items default to min-width:auto, so an item holding a 1200px-wide screenshot widens its
     own track to 1200px and shoots out of the section. On a desktop the wrap is nearly that wide
     and it looks correct, which is why this only ever showed up on a phone. */
  .stats-grid > *, .sec-head > *, .split > *, .tube-rows > *, .kpi-row > *, .steps > *,
  .price-grid > *, .pts > li { min-width: 0; }

  .shot { position: relative; border: 1px solid var(--edge); border-radius: var(--r); background: #fff; overflow: hidden; }
  .shot.pad { padding: clamp(18px, 3vw, 44px); background: var(--panel); }
  .shot img { display: block; width: 100%; height: auto; border-radius: 1px; }
  .shot.frame img { border: 1px solid var(--edge-soft); }
  /* A table screenshot squeezed to a phone width is a picture OF a table, not one anybody can
     read. The wide ones keep a legible size and scroll sideways inside their own frame, which is
     the only place on this page allowed to scroll horizontally. */
  @media (max-width: 780px) {
    .shot.wide { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    /* A width, not a minimum: `width:auto` on a replaced element means its intrinsic size, so a
       2400px screenshot became a six-screen swipe instead of the legible one-and-a-half intended. */
    .shot.wide img { width: var(--minw, 720px); max-width: none; }
  }
  /* A FRAMED panel: a fixed window onto a tall screenshot, anchored at the top.
     The two UI crops are portrait (1300 x 1948), and at half the page width that made a
     section nearly three screens tall with the body copy floating in the middle of the empty
     half. A window is also the honest way to show a panel that scrolls in the app. */
  figure { margin: 0; }
  figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: .04em; margin-top: 13px; }

  .split { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 5vw, 72px); align-items: start; margin-top: clamp(40px, 6vw, 78px); }
  /* No order swap: a section that wants its figure on the left puts the figure first in the markup.
     There used to be a `.rev` class with an `order: 2` rule, which pushed the figure straight back
     to the right and cancelled the alternation it was meant to create. */
  /* Stacked, a column gap sized for side-by-side reads as a crowded seam between a caption and
     the heading that follows it, so the row gap is set on its own. */
  @media (max-width: 900px) { .split { grid-template-columns: 1fr; row-gap: clamp(40px, 8vw, 60px); } }

  .pts { list-style: none; margin-top: 26px; display: grid; gap: 17px; }
  /* Two columns only where there is genuinely room, and only when asked for: a four-item list
     under a full-width figure reads as a wall in one column. */
  @media (min-width: 900px) { .pts.two { grid-template-columns: 1fr 1fr; gap: 17px 44px; } }
  .pts li { display: grid; grid-template-columns: 22px 1fr; gap: 13px; font-size: 15px; color: var(--dim); line-height: 1.5; }
  .pts b { color: var(--ink); font-weight: 650; }
  .pts svg { margin-top: 4px; color: var(--accent); }

  /* ── the tube section, which is the new thing and gets the most room ─────── */
  #tube { background: var(--ink); color: #fff; overflow: hidden; }
  #tube .lede { color: #94a3b8; }
  #tube .num { color: #64748b; }
  #tube .eyebrow { color: #7dd3fc; }
  #tube .shot { border-color: #1e293b; background: #0f172a; }
  #tube .shot.pad { background: #0f172a; }
  /* The 3D nest is drawn for this section's own background, so it gets a dark frame rather than
     a white plate: on white the steel washed out and the light labels vanished. Scoped inside
     #tube because a bare .shot.dark loses to #tube .shot on specificity. */
  #tube .shot.dark, #tube .shot.dark.pad { background: #111c30; border-color: #26355a; }
  #tube figcaption { color: #64748b; }
  #tube .pts li { color: #94a3b8; }
  #tube .pts b { color: #fff; }
  #tube .pts svg { color: #7dd3fc; }
  .tube-rows { display: grid; gap: clamp(18px, 2.6vw, 30px); margin-top: clamp(38px, 5vw, 66px); }
  .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #1e293b; border: 1px solid #1e293b; border-radius: var(--r); margin-top: clamp(34px, 4.5vw, 56px); }
  .kpi { background: var(--ink); padding: 24px 22px; }
  .kpi b { display: block; font-family: var(--mono); font-size: clamp(19px, 2.1vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: #fff; }
  .kpi span { display: block; color: #64748b; font-size: 12px; margin-top: 7px; line-height: 1.45; }
  @media (max-width: 760px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
  /* Two mono columns leave ~150px per card on a phone, which breaks "Rotary G-code" at its
     hyphen. One column below that. */
  @media (max-width: 540px) { .kpi-row { grid-template-columns: 1fr; } }

  /* ── how ─────────────────────────────────────────────────────────────────── */
  #how { background: var(--panel); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r); margin-top: clamp(38px, 5vw, 64px); }
  .step { background: #fff; padding: clamp(24px, 3vw, 38px); }
  .step .num { display: block; margin-bottom: 16px; }
  .step p { color: var(--dim); font-size: 15px; margin-top: 10px; line-height: 1.55; }
  @media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

  /* ── pricing ─────────────────────────────────────────────────────────────── */
  .billing-toggle { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--edge); border-radius: var(--r); background: var(--panel); margin-top: 30px; }
  .bt-opt { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--dim); padding: 9px 17px; border-radius: 1px; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); }
  .bt-opt.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(11,18,32,.09); }
  .bt-save { font-family: var(--mono); font-size: 11px; color: var(--ok); margin-left: 7px; letter-spacing: .04em; }

  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
  @media (max-width: 940px) { .price-grid { grid-template-columns: 1fr; } }
  .plan { border: 1px solid var(--edge); border-radius: var(--r); padding: 30px 26px; background: #fff; display: flex; flex-direction: column; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
  .plan:hover { border-color: var(--faint); transform: translateY(-2px); box-shadow: 0 14px 40px -18px rgba(11,18,32,.22); }
  .plan.hot { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .plan h3 { font-size: 17px; letter-spacing: .01em; }
  .amount { margin-top: 16px; display: flex; align-items: baseline; gap: 4px; }
  .price-num { font-size: 44px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
  .price-suffix { color: var(--faint); font-size: 15px; font-weight: 500; }
  .per { color: var(--dim); font-size: 13px; margin-top: 10px; min-height: 40px; }
  .alt-price { color: var(--faint); }
  .plan ul { list-style: none; margin: 22px 0 26px; display: grid; gap: 11px; flex: 1; }
  .plan li { font-size: 14px; color: var(--dim); line-height: 1.5; padding-left: 20px; position: relative; }
  .plan li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 1px; background: var(--accent); }
  .pricing-note { color: var(--dim); font-size: 14px; margin-top: 28px; max-width: 76ch; line-height: 1.6; }
  .pricing-note b { color: var(--ink); }

  /* ── tables ───────────────────────────────────────────────────────────────
     Real tables, not a grid of divs. A <th> states that a value belongs to a
     label, which is the one thing prose cannot do unambiguously, and it is why
     an answer engine will quote a table over a paragraph making the same claim.
     Same rule as .shot.wide: a table that does not fit scrolls inside its own
     frame rather than squashing columns into unreadable slivers. */
  .tbl-wrap {
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--edge); border-radius: var(--r); background: #fff;
    margin-top: clamp(30px, 4vw, 52px);
  }
  table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; }
  caption {
    text-align: left; padding: 18px 20px 2px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint);
  }
  th, td { text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--edge-soft); vertical-align: top; line-height: 1.45; }
  thead th { font-size: 12px; font-weight: 650; color: var(--ink); border-bottom: 1px solid var(--edge); white-space: nowrap; }
  tbody th { font-weight: 650; color: var(--ink); }
  td { color: var(--dim); }
  tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
  .yes { color: var(--ok); font-weight: 650; }
  .no { color: var(--faint); }
  /* The tube section is dark, and a white plate dropped into it reads as a hole. */
  #tube .tbl-wrap { border-color: #1e293b; background: #0f172a; }
  #tube caption { color: #64748b; }
  #tube th, #tube td { border-bottom-color: #1e293b; }
  #tube thead th, #tube tbody th { color: #fff; border-bottom-color: #26355a; }
  #tube td { color: #94a3b8; }
  #tube .yes { color: #4ade80; }
  #tube .no { color: #64748b; }

  /* ── faq ─────────────────────────────────────────────────────────────────── */
  #faq { background: var(--panel); border-top: 1px solid var(--edge); }
  /* The question is an h3 inside the summary, so the FAQ has real heading
     structure. Reset the browser's heading styling: a summary is the click
     target and the h3 is only there to be machine-readable. */
  summary h3 { font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; display: inline; }
  .faq-list { margin-top: clamp(34px, 4.5vw, 54px); border-top: 1px solid var(--edge); }
  details { border-bottom: 1px solid var(--edge); }
  summary { cursor: pointer; list-style: none; padding: 24px 40px 24px 0; font-weight: 650; font-size: 17px; position: relative; transition: color .18s var(--ease); }
  summary::-webkit-details-marker { display: none; }
  summary:hover { color: var(--accent); }
  summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: translateY(-70%) rotate(45deg); transition: transform .24s var(--ease); }
  details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
  details .a { color: var(--dim); font-size: 15px; padding: 0 60px 26px 0; line-height: 1.65; max-width: 78ch; }

  /* ── download ────────────────────────────────────────────────────────────── */
  .dl { text-align: center; }
  .dl .eyebrow { justify-content: center; }
  .dl .lede { margin: 22px auto 0; }
  .dl-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
  .dl-note { color: var(--faint); font-size: 13px; margin-top: 20px; }

  footer { border-top: 1px solid var(--edge); padding: 56px 0 44px; color: var(--dim); font-size: 14px; }
  .foot-grid { display: flex; flex-wrap: wrap; gap: 26px 44px; align-items: center; }
  footer a { color: var(--dim); }
  footer a:hover { color: var(--ink); }
  .foot-sep { flex: 1; }

  /* ── mobile nav ──────────────────────────────────────────────────────────── */
  @media (max-width: 900px) {
    .nav-toggle { display: block; }
    .nav-links {
      position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
      gap: 0; background: #fff; border-bottom: 1px solid var(--edge);
      padding: 10px 28px 22px; margin: 0;
      transform: translateY(-8px); opacity: 0; pointer-events: none;
      transition: opacity .22s var(--ease), transform .22s var(--ease);
    }
    .nav-links.open { opacity: 1; transform: none; pointer-events: auto; }
    .nav-links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--edge-soft); font-size: 16px; }
    .nav-links .btn { margin-top: 12px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat, .stat + .stat { padding: 24px 18px; border-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--edge); }
    .stat:nth-child(even) { border-left: 1px solid var(--edge); }
    .hero { padding-top: 128px; }
  }

  /* ── motion, and the promise not to make anyone ill ───────────────────────
     Everything decorative is off here, not merely slowed: parallax is the
     single worst offender for vestibular disorders and a reduced-motion user
     asked for it to stop. The reveals become instant rather than absent so no
     content is ever missing. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    .scrollcue i { animation: none; }
    [data-px] { transform: none !important; }
    .btn:hover, .plan:hover { transform: none; }
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SUBPAGE CHROME

     Added when the single page became eight. Everything above this line is the
     homepage's original stylesheet, moved out of an inline <style> unchanged.

     Why a shared file rather than eight inline copies: the tokens block at the
     top is the whole design system, and eight copies of it means a colour change
     is a change to eight files that will drift the first time somebody edits
     seven. One request, cached from the second page onward, is the better trade
     the moment a visitor sees more than one page. Nav and footer MARKUP is still
     duplicated per file, because factoring that out needs a templating step and
     a build is not worth avoiding forty lines of repetition.
     ═════════════════════════════════════════════════════════════════════════ */

  /* A subpage opens tighter than the homepage: no full-viewport hero, because a
     reader who landed here from a search wants the answer, not an entrance. */
  .page-hero { padding: 132px 0 clamp(48px, 6vw, 76px); position: relative; }
  .page-hero h1 { font-size: clamp(34px, 5.4vw, 68px); max-width: 20ch; margin-top: 18px; }
  .page-hero .lede { margin-top: 24px; }
  .page-hero .hero-ctas { margin-top: 30px; }

  /* Breadcrumbs. They exist because the site now has a hierarchy to describe,
     which is also the only reason the BreadcrumbList schema earns its place. */
  .crumbs { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
  .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .crumbs a { color: var(--faint); }
  .crumbs a:hover { color: var(--ink); }
  .crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--edge); }
  .crumbs [aria-current] { color: var(--dim); }

  /* Body copy on the content pages. Narrower than the grid measure, because a
     62ch line is where prose stops being a wall. */
  .prose { max-width: 68ch; }
  .prose > * + * { margin-top: 20px; }
  .prose p { color: var(--dim); font-size: 16px; line-height: 1.65; }
  .prose h2 { margin-top: clamp(48px, 6vw, 82px); }
  .prose h3 { margin-top: clamp(30px, 4vw, 46px); }
  .prose b, .prose strong { color: var(--ink); font-weight: 650; }
  .prose ul { list-style: none; display: grid; gap: 14px; }
  .prose li { padding-left: 20px; position: relative; color: var(--dim); font-size: 16px; line-height: 1.6; }
  .prose li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 1px; background: var(--accent); }

  /* The lead answer. One self-contained paragraph directly under the h1 that
     answers the page's question on its own, because that is the passage an
     answer engine lifts. Styled as a pull quote so it reads as the summary it
     is rather than as a first paragraph somebody forgot to indent. */
  .answer {
    border-left: 2px solid var(--accent); padding: 2px 0 2px 22px;
    font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink);
    max-width: 64ch; margin-top: 26px;
  }
  #tube .answer, .dark-sec .answer { color: #fff; border-left-color: #7dd3fc; }

  /* The FAQ page shows its answers open. The homepage accordion is right for a
     section somebody is scrolling past; a page somebody navigated TO should not
     make them click ten times to read what they came for. */
  .faq-open { border-top: 1px solid var(--edge); margin-top: clamp(34px, 4.5vw, 54px); }
  .faq-open article { border-bottom: 1px solid var(--edge); padding: 30px 0; }
  .faq-open h2 { font-size: clamp(20px, 2.2vw, 25px); line-height: 1.25; letter-spacing: -0.015em; margin: 0; }
  .faq-open .a { color: var(--dim); font-size: 16px; line-height: 1.65; max-width: 74ch; margin-top: 14px; }
  .faq-open .a p + p { margin-top: 14px; }

  /* Cross-links at the foot of every content page. A split site whose pages do
     not link to each other is eight orphans, and internal links are how a
     crawler learns which pages matter. */
  .related { border-top: 1px solid var(--edge); margin-top: clamp(60px, 8vw, 100px); padding-top: clamp(30px, 4vw, 46px); }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r); margin-top: 26px; }
  .related-grid > * { min-width: 0; }
  .related-grid a { background: #fff; padding: 24px 22px; display: block; color: var(--ink); transition: background .18s var(--ease); }
  .related-grid a:hover { background: var(--panel); }
  .related-grid b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
  .related-grid span { display: block; color: var(--dim); font-size: 14px; margin-top: 8px; line-height: 1.5; }
  @media (max-width: 860px) { .related-grid { grid-template-columns: 1fr; } }

  /* A condensed homepage section ends in a link to the page that carries the
     full version. Without it the split just hides content one click deeper. */
  .more {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
    font-weight: 600; font-size: 15px; color: var(--accent);
  }
  .more::after { content: "→"; transition: transform .18s var(--ease); }
  .more:hover::after { transform: translateX(3px); }
  #tube .more { color: #7dd3fc; }

  /* A page whose hero is dark needs the nav drawn light, but only until the nav
     sticks: .stuck gives it a near-white background, at which point the normal
     dark treatment is the correct one again. Hence :not(.stuck).

     The mobile menu is excluded too. When .nav-links is open it is a white panel
     dropped below the bar, so light link text inside it would be invisible on
     its own background. */
  .nav-dark #nav:not(.stuck) .mark { color: #fff; }
  .nav-dark #nav:not(.stuck) .nav-toggle { color: #fff; }
  .nav-dark #nav:not(.stuck) .nav-links:not(.open) a:not(.btn) { color: #94a3b8; }
  .nav-dark #nav:not(.stuck) .nav-links:not(.open) a:not(.btn):hover { color: #fff; }
  .nav-dark #nav:not(.stuck) .nav-links:not(.open) a:not(.btn)::after { background: #fff; }
  .nav-dark #nav:not(.stuck) .nav-links:not(.open) .btn { background: transparent; border-color: #334155; color: #fff; }
  .nav-dark #nav:not(.stuck) .nav-links:not(.open) .btn:hover { border-color: #64748b; }
  .nav-dark #nav:not(.stuck) .nav-links:not(.open) .btn-primary { background: #fff; border-color: #fff; color: var(--ink); }
  .nav-dark #nav:not(.stuck) .nav-links:not(.open) .btn-primary:hover { background: #e2e8f0; border-color: #e2e8f0; }


  /* ── risk reversal ─────────────────────────────────────────────────────────
     The 14-day full refund is already contractually committed in /legal/terms
     and appeared on none of the eight marketing pages. It belongs at the exact
     moment somebody hesitates over a $479 button, in the site's own register
     rather than as a badge. */
  .reassure {
    margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--quiet);
    display: flex; gap: 8px; align-items: baseline;
  }
  .reassure::before { content: "\2713"; color: var(--ok); font-weight: 700; }

  /* Meaning-bearing small text moves off --faint onto --quiet. */
  .alt-price, .price-suffix, .no { color: var(--quiet); }
  #tube .no { color: #94a3b8; }

  /* The signature block. A solo founder with no customers to name has exactly
     one credibility asset nobody else in this category has: he is a person, and
     he answers his own email. */
  .signature {
    border-top: 1px solid var(--edge); margin-top: clamp(50px, 7vw, 84px);
    padding-top: clamp(28px, 4vw, 40px); max-width: 68ch;
  }
  .signature p { color: var(--dim); font-size: 16px; line-height: 1.65; }
  .signature b { color: var(--ink); font-weight: 650; }

  /* ── mobile nav ────────────────────────────────────────────────────────────
     Seven links plus two buttons in a fixed panel below a 68px bar. On a short
     phone in landscape the last item sat under the fold with nothing to scroll. */
  @media (max-width: 900px) {
    .nav-links { max-height: calc(100vh - 68px); overflow-y: auto; overscroll-behavior: contain; }
  }

  /* ── wide tables on a phone ────────────────────────────────────────────────
     The row label is what tells you which row you are reading. Scrolling it out
     of view leaves five columns of Yes and No attached to nothing. */
  @media (max-width: 780px) {
    .tbl-wrap tbody th, .tbl-wrap thead th:first-child {
      position: sticky; left: 0; z-index: 1;
      background: #fff; box-shadow: 1px 0 0 var(--edge-soft);
    }
    #tube .tbl-wrap tbody th, #tube .tbl-wrap thead th:first-child {
      background: #0f172a; box-shadow: 1px 0 0 #1e293b;
    }
  }

  /* ── section rhythm ────────────────────────────────────────────────────────
     THE tell. Every section carried the identical
     `padding: clamp(80px,11vw,150px)` and every h2 the identical weight 800, so
     nine sections shouted at exactly the same volume and the page read as
     generated. Real pages have a loudest thing. These overrides give the page a
     shape: the tube section is the flagship and gets the most air, the
     supporting sections get less, and the closer tightens up. */
  #how, #cloud { padding-block: clamp(56px, 7vw, 96px); }
  #tube { padding-block: clamp(96px, 13vw, 180px); }
  #download { padding-block: clamp(72px, 9vw, 120px); }
  /* Not every heading is a headline. The section that is genuinely the product's
     differentiator keeps the full 800; the utility sections step down so the
     eye has somewhere to land. */
  #how h2, #cloud h2, #faq h2 { font-weight: 700; letter-spacing: -0.022em; }
  #how h2 { font-size: clamp(26px, 3.4vw, 40px); }
  #cloud h2 { font-size: clamp(26px, 3.6vw, 44px); }

  /* ── closing CTA band ──────────────────────────────────────────────────────
     Six of eight pages had no way to buy in the body, and two had no call to
     action at all. A reader who finishes the tube page convinced had to go find
     the nav. This is the block that ends every content page. */
  .cta-band {
    border: 1px solid var(--edge); border-radius: var(--r); background: var(--panel);
    padding: clamp(30px, 4vw, 46px); margin-top: clamp(56px, 7vw, 90px);
    display: grid; gap: 22px; align-items: center;
    grid-template-columns: 1fr auto;
  }
  .cta-band h2 { font-size: clamp(21px, 2.3vw, 27px); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
  .cta-band p { color: var(--dim); font-size: 15px; line-height: 1.55; margin-top: 10px; max-width: 58ch; }
  .cta-band .btns { display: flex; flex-wrap: wrap; gap: 10px; }
  @media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } }
  /* No dark variant: every CTA band lands in a light section, including the
     one on the tube page, which sits in the white section after #tube ends. */

  /* ── skip link ─────────────────────────────────────────────────────────────
     Nine nav items before the content on every page. A keyboard or screen-reader
     user tabbed through all of them on all eight pages. */
  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r);
    font-size: 15px; font-weight: 600;
  }
  .skip:focus { left: 12px; top: 12px; }

  /* ── focus ────────────────────────────────────────────────────────────────
     The reset removed the UA outline and never replaced it, so keyboard focus
     was invisible sitewide. :focus-visible keeps it off for mouse users. */
  a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px;
  }
  #tube a:focus-visible, #tube button:focus-visible, .dark-sec a:focus-visible { outline-color: #7dd3fc; }

  /* A horizontally scrolling region is a control. Without tabindex a keyboard
     user cannot reach the right-hand columns of any table on the site. */
  .tbl-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ── reveal variety ───────────────────────────────────────────────────────
     Every one of the 95 reveals ran the identical 22px lift, which is its own
     kind of metronome. Figures rise further and slower than text; the tube
     section's artwork gets the longest travel because it is the flagship. */
  .js .rv.rv-far { transform: translateY(40px); transition-duration: .85s; }
  .js .rv.rv-near { transform: translateY(10px); transition-duration: .55s; }


  /* ── type scale ────────────────────────────────────────────────────────────
     The small sizes used to run 10.5, 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5,
     16, 16.5, 17 — twelve values across seven pixels, which is not a scale, it
     is twelve separate decisions nobody made. Half-pixel steps are invisible at
     reading size and are exactly the arbitrariness that reads as machine-made.
     The ladder is now 11 / 12 / 13 / 14 / 15 / 16 / 17. Pick from it. */

  /* ── prose column ──────────────────────────────────────────────────────────
     .prose caps at 68ch inside a 1240px wrap, which on a wide screen left ~480px
     of nothing to the right of every paragraph while the heading above it ran
     the full width. The measure is right for reading and stays; what changes is
     that the heading no longer overhangs its own body copy. */
  .prose > h2, .prose > h3 { max-width: 24ch; }
  @media (min-width: 1100px) {
    /* Pull the whole column in from the left edge of the wrap so it reads as a
       column rather than as text that ran out. */
    section > .wrap > .prose { margin-left: clamp(0px, 4vw, 76px); }
  }


  /* ── GPU promotion for the parallax layers ─────────────────────────────────
     site.js writes translate3d to every [data-px] element on scroll. translate3d
     already hints compositing, but declaring it means the layer is promoted
     before the first scroll rather than on it, which is where the one-frame
     hitch at the top of the page came from. Scoped to these elements only:
     will-change on everything is worse than nowhere, because each promoted layer
     costs memory. */
  [data-px] { will-change: transform; }
  @media (prefers-reduced-motion: reduce) { [data-px] { will-change: auto; } }