/* ═══════════════════════════════════════════════════════════════════════════
   product.css — the shared look of a product page.

   These rules used to live, duplicated, in the inline <style> of twitch.html
   and kick.html. The follower pages had a different design entirely (a flat
   gradient hero box, photo cards, chunky FAQ), so this file exists to give all
   four pages one source: the question-led .sec bands and the modules that fill
   them (.tl timeline, .nd yes/no, .rf cards, .hon note, .fq accordion).

   Load order is site.css → product.css → pricing.css → page inline <style>.
   pricing.css intentionally overrides several of these with `main.page …` /
   `body main.page …` prefixes (band rhythm, padding, panel backgrounds); those
   still win on both specificity and order, so moving these rules out of the
   inline blocks changed nothing — verified by diffing computed styles for 39
   selectors × 5 pages × 2 viewports before and after the extraction.

   Platform skin: each page sets --pl (and --pg) on :root/<body>. Tints are
   derived with color-mix rather than hard-coded rgba, which is what let one
   file serve both the purple and the green pages — the old inline copies
   hard-coded rgba(145,70,255) and rgba(83,252,24) separately.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── eyebrow: platform glyph + label, above the h1 ── */
.bk-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.bk-eyebrow .g{width:20px;height:20px;border-radius:6px;background:var(--pl);display:grid;place-items:center}
.bk-eyebrow .g svg{width:12px;height:12px;color:var(--pl-ink,#fff)}

/* ── the sections: one question each ── */
.sec{padding:80px 0;border-top:1px solid rgba(255,255,255,.055)}
.sec-q{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sec h2{font-family:'Space Grotesk',var(--head);font-size:29px;font-weight:700;letter-spacing:-.025em;
  line-height:1.12;max-width:22ch}
.sec .lede{margin-top:12px;color:var(--muted-2);font-size:15px;line-height:1.6;max-width:60ch}

/* ── .tl — the numbered timeline ──
   The connecting line is anchored to the dot centres, not to percentages of the
   container. `left:6%;right:6%` never met them: a dot centre sits 29px into its
   item (10px item padding + half of the 38px border-box dot), so at 1440 the
   line began right of the first dot and overshot the last one by ~130px, into
   empty space. One column is 100%/--tl-n, so the right edge is that minus the
   same 29px — exact at five steps (viewer pages) or three (follower pages). */
.tl{--tl-n:5;margin-top:34px;display:grid;grid-template-columns:repeat(var(--tl-n),1fr);position:relative}
.tl::before{content:"";position:absolute;left:29px;right:calc(100% / var(--tl-n) - 29px);top:18px;height:2px;
  background:linear-gradient(90deg,var(--pl),color-mix(in srgb,var(--pl) 28%,transparent))}
.tl-i{position:relative;padding:0 10px}
.tl-i .dot{width:38px;height:38px;border-radius:50%;background:#131316;border:2px solid var(--pl);
  display:grid;place-items:center;font-family:'Space Grotesk',var(--head);font-weight:700;font-size:13px;
  color:var(--text);position:relative;z-index:1;margin-bottom:14px}
.tl-i.soft .dot{border-color:color-mix(in srgb,var(--pl) 28%,transparent);color:var(--muted)}
.tl-i b{display:block;font-size:14.5px;font-weight:700;margin-bottom:5px}
.tl-i p{font-size:13px;line-height:1.5;color:var(--muted)}

/* The follower pages have three steps, not five. Only the count changes — the
   line maths above reads --tl-n, so it stays anchored to the dots either way. */
.tl.tl-3{--tl-n:3}

/* .tl-i b is a <b> on the viewer pages and an <h3> on the follower pages —
   the step titles carry real headings there, so they must not inherit the
   browser's h3 size. Same visual result either way. */
.tl-i h3{display:block;font-family:inherit;font-size:14.5px;font-weight:700;margin-bottom:5px;letter-spacing:0}

/* ══ follower-page modules ═══════════════════════════════════════════
   The viewer pages are about TIME — an order starts, ramps, holds, stops —
   which is why a horizontal timeline is their signature. Followers are not
   temporal. They arrive and they stay; the only thing that moves is the
   number. So these pages get their own two modules built on that idea, and
   deliberately do NOT reuse .tl.
   ═════════════════════════════════════════════════════════════════════ */

/* ── .sc — the size ladder ──
   Every package you can actually buy, ascending. It answers the first
   question a follower buyer has ("how many should I get?") and it draws the
   product: a number going up. The steps rise in equal increments, not in
   proportion to their values — this is a set of options, not a chart, and a
   proportional scale would make the first four bars invisible next to 10,000
   while implying a quantitative comparison that is not being made. */
.sc{margin-top:34px}
.sc-row{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
  align-items:end;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.09)}
.sc-i{display:flex;flex-direction:column;align-items:center;gap:12px}
.sc-bar{width:100%;border-radius:5px 5px 0 0;
  height:calc(28px + var(--i) * 15px);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--pl) calc(20% + var(--i) * 11%),transparent),
    color-mix(in srgb,var(--pl) 8%,transparent));
  border:1px solid color-mix(in srgb,var(--pl) 26%,transparent);border-bottom:0}
.sc-i:last-child .sc-bar{background:linear-gradient(180deg,var(--pl),
  color-mix(in srgb,var(--pl) 22%,transparent));border-color:transparent}
.sc-n{font-family:'Space Grotesk',var(--head);font-size:13px;font-weight:700;
  color:var(--muted-2);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sc-i:last-child .sc-n{color:var(--text)}
.sc-note{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* ── .st — the three steps ──
   A stacked list under big ghosted numerals rather than dots on a line. Same
   information as the viewer timeline, different device, because nothing here
   happens in sequence over time — you do these once and then wait. */
.st{list-style:none;margin-top:30px;border-top:1px solid rgba(255,255,255,.07)}
.st-i{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.st-n{font-family:'Space Grotesk',var(--head);font-size:40px;font-weight:700;
  line-height:.9;letter-spacing:-.04em;
  color:color-mix(in srgb,var(--pl) 42%,transparent);font-variant-numeric:tabular-nums}
.st-i h3{font-size:16px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.st-i p{font-size:14px;line-height:1.6;color:var(--muted);max-width:52ch}

/* ── .sec.rail — the follower pages' band composition ──
   The viewer pages stack every band full width. Here the question and the
   heading hold a narrow left rail with the module beside them, which is the
   same shape the FAQ band already uses. Applied to the two text-light bands
   only: the .nd and .rf card modules need the full width to stay readable. */
@media (min-width: 980px) {
  main.page .sec.rail{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);
    grid-template-rows:auto auto 1fr;column-gap:64px;align-items:start}
  main.page .sec.rail > .sec-q{grid-column:1;grid-row:1}
  /* a 34px heading in a 320px rail wraps to four lines and stops reading as a
     sentence — the rail takes the same step down the mobile breakpoint does */
  main.page .sec.rail > h2{grid-column:1;grid-row:2;margin:0;font-size:29px;max-width:none}
  main.page .sec.rail > .lede{grid-column:1;grid-row:3;margin-top:14px;max-width:none}
  main.page .sec.rail > .sc,
  main.page .sec.rail > .st{grid-column:2;grid-row:1 / -1;margin-top:6px}
}

@media (max-width: 640px) {
  /* Seven bars in 390px is 40px each with the labels colliding. Below the
     fold-out the ladder becomes rows: the bar runs horizontally and the
     number sits beside it, which keeps the same ascending read. */
  .sc-row{grid-template-columns:1fr;gap:9px;align-items:stretch}
  .sc-i{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:14px}
  .sc-bar{height:12px;width:calc(26% + var(--i) * 10.5%);border-radius:0 6px 6px 0;
    border:1px solid color-mix(in srgb,var(--pl) 26%,transparent);border-left:0;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--pl) calc(20% + var(--i) * 11%),transparent),
      color-mix(in srgb,var(--pl) 8%,transparent))}
  .sc-i:last-child .sc-bar{background:linear-gradient(90deg,var(--pl),
    color-mix(in srgb,var(--pl) 22%,transparent))}
  .sc-n{min-width:52px;text-align:right}
  .st-i{grid-template-columns:44px 1fr;gap:14px}
  .st-n{font-size:30px}
}

/* ── .nd — what we ask for / what we never ask for ── */
.nd{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nd-card{border-radius:var(--r);padding:24px;border:1px solid var(--line)}
.nd-yes{background:linear-gradient(158deg,#fcfcfd,#eceef4);color:var(--ink);border:0}
.nd-no{background:var(--panel)}
.nd-card h3{font-family:'Space Grotesk',var(--head);font-size:17px;font-weight:700;margin-bottom:14px;letter-spacing:-.02em}
.nd-card ul{list-style:none;display:flex;flex-direction:column}
.nd-card li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14.5px;font-weight:600}
.nd-card li + li{border-top:1px solid rgba(255,255,255,.06)}
.nd-yes li + li{border-top-color:rgba(8,8,10,.08)}
.nd-ic{flex:none;width:20px;height:20px;border-radius:7px;display:grid;place-items:center}
.nd-ic svg{width:10px;height:10px}
.nd-yes .nd-ic{background:rgba(74,214,255,.2);color:#0b7fa0}
.nd-no .nd-ic{background:rgba(255,255,255,.06);color:var(--muted)}
.nd-no li{color:var(--muted-2)}
.nd-no li span.t{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}

/* ── .hon — a plain-spoken note, green rule down the left ── */
.hon{margin-top:26px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:var(--r);padding:24px 26px}
.hon p{font-size:14.5px;line-height:1.65;color:var(--muted-2)}
.hon p + p{margin-top:12px}
.hon b{color:var(--text)}

/* ── .rf — the guarantee cards ── */
.rf{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rf-c{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.rf-c b{display:block;font-family:'Space Grotesk',var(--head);font-size:15.5px;margin-bottom:7px}
.rf-c p{font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ── .fq — the FAQ accordion ── */
.fq{margin-top:26px;max-width:760px}
.fq details{border-bottom:1px solid rgba(255,255,255,.07)}
.fq summary{list-style:none;cursor:pointer;padding:17px 0;font-size:15.5px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";flex:none;font-size:19px;color:var(--muted);transition:transform .2s ease}
.fq details[open] summary::after{transform:rotate(45deg)}
.fq .a{padding:0 0 18px;font-size:14.5px;line-height:1.65;color:var(--muted-2);max-width:66ch}
.fq-help{margin-top:20px;font-size:14px;color:var(--muted)}

/* Body links have to be visible without hovering. Left unstyled they inherit
   their paragraph's colour with no underline and no weight, which hides them
   completely — including the one link that sends a follower buyer to the live
   viewers product. Colour alone would still fail WCAG 1.4.1, so they carry
   weight and an underline too. */
.fq-help a,.hon a{color:var(--text);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--pl) 60%,transparent);
  transition:text-decoration-color .18s ease,color .18s ease}
.fq-help a:hover,.hon a:hover{text-decoration-color:var(--pl)}

/* ── .cl — the closing band. The panel itself is styled in pricing.css. ── */
.cl{padding:78px 0 96px;text-align:center;border-top:1px solid rgba(255,255,255,.055)}
.cl h2{font-family:'Space Grotesk',var(--head);font-size:32px;font-weight:700;letter-spacing:-.03em;margin-bottom:22px}
.cl .pill{font-size:16px;padding:15px 30px}

@media(max-width:960px){
  .tl,.tl.tl-3{grid-template-columns:1fr;gap:20px}
  .tl::before{display:none}
  .tl-i{padding:0;display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
  .tl-i .dot{margin-bottom:0}
  .nd,.rf{grid-template-columns:1fr}
  .sec{padding:56px 0}
  .sec h2{font-size:24px}
  .cl h2{font-size:26px}
}
