/* ==========================================================================
   CherryClipz — redesign concept
   No web fonts: the system stack resolves to SF Pro on Apple hardware, which
   is both the best-fitting typeface here and zero network cost.
   ========================================================================== */

:root {
  --paper:      #FFFFFF;
  --paper-2:    #F5F5F7;
  --ink:        #1D1D1F;
  --ink-2:      #6E6E73;
  --ink-3:      #86868B;
  --hair:       #D2D2D7;

  --night:      #000000;
  --night-2:    #0B0B0C;
  --night-ink:  #F5F5F7;
  --night-ink2: #A1A1A6;
  --night-ink3: #6E6E73;
  --night-hair: #232325;

  --cherry:     #E61D50;
  --cherry-lift:#FF3D6B;

  --pos: #4BB783;
  --neu: #8A8A8F;
  --neg: #D98324;

  --sys: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
         'Segoe UI', Roboto, system-ui, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, .68, .18, 1);
  --slow: .85s var(--ease);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sys);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }

::selection { background: var(--cherry); color: #fff; }

:focus-visible { outline: 2px solid var(--cherry-lift); outline-offset: 4px; border-radius: 3px; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 880px; }
.morph-w { max-width: 1040px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 14px; top: -60px; z-index: 300;
  background: var(--cherry); color: #fff; padding: 9px 15px; border-radius: 7px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 10px; }

/* ------------------------------------------------------------ type ------ */

.t-hero {
  font-size: clamp(2.9rem, 8.4vw, 6.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.t-big {
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.t-mid {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.lede {
  font-size: clamp(1.16rem, 1.9vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.016em;
  color: var(--ink-2);
  font-weight: 400;
}
.cap {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- controls ---- */

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 980px;
  background: var(--cherry); color: #fff;
  font-size: 1rem; font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.cta:hover { background: var(--cherry-lift); }
.cta:active { transform: scale(.975); }
.cta-lg { padding: 15px 32px; font-size: 1.1rem; }

.link {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--cherry); text-decoration: none;
  font-size: 1.06rem; letter-spacing: -0.012em;
  transition: opacity .2s var(--ease);
}
.link:hover { opacity: .72; }
.link::after { content: '\203A'; font-size: 1.25em; line-height: 0; margin-top: -1px; transition: transform .22s var(--ease); }
.link:hover::after { transform: translateX(2px); }
.on-night .link { color: var(--cherry-lift); }
.link.bare::after { content: none; }

/* ---------------------------------------------------------- surfaces ---- */

.on-night {
  background: var(--night);
  color: var(--night-ink);
  --ink: var(--night-ink);
  --ink-2: var(--night-ink2);
  --ink-3: var(--night-ink3);
  --hair: var(--night-hair);
  --paper: var(--night);
  --paper-2: var(--night-2);
}

section { position: relative; }
.pad { padding-block: clamp(88px, 13vh, 170px); }

/* ------------------------------------------------------------- flag ----- */

.flag {
  background: #000; color: #A1A1A6;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .05em;
  padding: 7px 20px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.flag b { color: #F5F5F7; font-weight: 500; }
.flag a { color: var(--cherry-lift); text-decoration: none; }
.flag a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- nav ---- */

.nav {
  position: sticky; top: 0; z-index: 200;
  height: 48px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.nav.dark {
  background: rgba(0,0,0,.66);
  color: var(--night-ink);
  border-bottom-color: rgba(255,255,255,.09);
}
.nav.edge { border-bottom-color: rgba(0,0,0,.09); }
.nav.dark.edge { border-bottom-color: rgba(255,255,255,.09); }

.nav-in { display: flex; align-items: center; height: 100%; gap: 8px; }

.brand {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; font-size: .95rem; font-weight: 600; letter-spacing: -0.025em;
  margin-right: 26px;
}
.brand svg { width: 17px; height: 17px; color: var(--cherry); }
.nav.dark .brand svg { color: var(--cherry-lift); }

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  text-decoration: none; font-size: .8rem; font-weight: 400;
  padding: 5px 11px; border-radius: 6px; opacity: .82;
  transition: opacity .18s var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { opacity: 1; }

.nav-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-end .cta { padding: 5px 14px; font-size: .8rem; font-weight: 500; }

/* On narrow screens the links take the leftover space and scroll sideways,
   so every destination stays reachable without adding a menu. */
@media (max-width: 700px) {
  .brand { margin-right: 10px; flex: none; }
  .nav-links {
    flex: 1; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 5px 8px; font-size: .78rem; }
  .nav-end { margin-left: 8px; flex: none; }
  .nav-end .sec { display: none; }
  .nav-end .cta { padding: 5px 12px; font-size: .78rem; }
}

/* -------------------------------------------------------------- hero ---- */

.hero {
  min-height: calc(100svh - 48px);
  display: grid; align-content: center;
  padding-block: clamp(60px, 12vh, 130px) clamp(40px, 8vh, 90px);
  text-align: center;
}
.hero .kicker {
  display: block; margin-bottom: 18px;
  font-size: 1.06rem; font-weight: 500; letter-spacing: -0.014em; color: var(--ink-3);
}
.hero .t-hero { max-width: 15ch; margin-inline: auto; }
.hero .lede { max-width: 34ch; margin: 26px auto 0; }
.hero-act { margin-top: 34px; display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; }

.scroll-cue {
  margin-top: clamp(44px, 9vh, 96px);
  display: grid; justify-items: center; gap: 10px;
  color: var(--ink-3);
}
.scroll-cue span { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue i {
  width: 1px; height: 44px; display: block;
  background: linear-gradient(var(--hair), transparent);
}

/* ============================================================== morph ====
   The page performs the product's core move: a flat transcript grows
   structure until it is the sheet. Driven by scroll position, three stages.
   ======================================================================= */

.morph { height: 380vh; }
.morph-stage {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  overflow: hidden;
}

.morph-cap {
  position: relative; height: 20px; margin-bottom: clamp(26px, 5vh, 56px);
}
.morph-cap p {
  position: absolute; inset: 0;
  font-family: var(--mono); font-size: .69rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--night-ink3);
  opacity: 0; transition: opacity .5s var(--ease);
  text-align: center;
}
.morph-cap p b { color: var(--cherry-lift); font-weight: 400; }
[data-stage='0'] .morph-cap p:nth-child(1),
[data-stage='1'] .morph-cap p:nth-child(2),
[data-stage='2'] .morph-cap p:nth-child(3) { opacity: 1; }

.sheet { width: 100%; }

.ln {
  display: grid;
  grid-template-columns: 0px 0px 0px minmax(0, 1fr) 0px 0px 0px 0px;
  align-items: center;
  column-gap: 0px;
  padding-block: 1px;
  border-top: 1px solid transparent;
  transition:
    grid-template-columns var(--slow),
    column-gap var(--slow),
    padding var(--slow),
    border-color var(--slow),
    background-color .4s var(--ease);
}
.ln > * { min-width: 0; overflow: hidden; }

.ln .tc, .ln .spk, .ln .emo, .ln .sec, .ln .len, .ln .q, .ln .kw {
  opacity: 0;
  transition: opacity .55s var(--ease);
}

.ln .tx {
  font-size: clamp(.9rem, 1.55vw, 1.16rem);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--night-ink3);
  white-space: nowrap; text-overflow: ellipsis;
  transition: color var(--slow);
}

.ln .tc { font-family: var(--mono); font-size: .7rem; color: var(--night-ink3); letter-spacing: -0.01em; }
.ln .spk { font-family: var(--mono); font-size: .7rem; color: var(--night-ink2); white-space: nowrap; }
.ln .emo { font-family: var(--mono); font-size: .92rem; font-weight: 600; text-align: center; }
.ln .emo[data-s='pos'] { color: var(--pos); }
.ln .emo[data-s='neu'] { color: var(--neu); }
.ln .emo[data-s='neg'] { color: var(--neg); }
.ln .sec, .ln .len {
  font-family: var(--mono); font-size: .7rem; color: var(--night-ink3);
  text-align: right; font-variant-numeric: tabular-nums;
}
.ln .q { font-family: var(--mono); font-size: .78rem; color: #C77DFF; text-align: center; }
.ln .kw {
  font-size: .74rem; line-height: 1.3; color: var(--night-ink3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* stage 1 — structure arrives */
[data-stage='1'] .ln, [data-stage='2'] .ln {
  column-gap: clamp(8px, 1.4vw, 18px);
  border-top-color: var(--night-hair);
}
[data-stage='1'] .ln {
  grid-template-columns: 74px 76px 14px minmax(0, 1fr) 30px 0px 0px 0px;
  padding-block: clamp(7px, 1.1vh, 12px);
}
[data-stage='1'] .ln .tc,
[data-stage='1'] .ln .spk,
[data-stage='1'] .ln .emo,
[data-stage='1'] .ln .sec { opacity: 1; }
[data-stage='1'] .ln .tx { color: var(--night-ink2); }

/* stage 2 — it is the sheet */
[data-stage='2'] .ln {
  grid-template-columns: 74px 76px 14px minmax(0, 1fr) 30px 36px 18px 150px;
  padding-block: clamp(8px, 1.2vh, 13px);
}
[data-stage='2'] .ln > * { opacity: 1; }
[data-stage='2'] .ln .tx { color: var(--night-ink); }
[data-stage='2'] .ln.hot { background: rgba(230, 29, 80, .11); }
[data-stage='2'] .ln.hot .tx { color: #fff; }

/* ============================================================== pick ==== */

.pick-head { display: grid; gap: 20px; margin-bottom: clamp(34px, 6vh, 64px); }
.pick-head .t-big { max-width: 16ch; }
.pick-head .lede { max-width: 44ch; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; padding-bottom: 16px; align-items: center; }
.chips .cap { margin-right: 3px; }
.chip {
  padding: 5px 13px; border-radius: 980px;
  border: 1px solid var(--night-hair); background: transparent;
  font-size: .82rem; color: var(--night-ink2); cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover { color: var(--night-ink); border-color: #3A3A3D; }
.chip[aria-pressed='true'] { background: var(--night-ink); border-color: var(--night-ink); color: #000; }
.chip .g { font-family: var(--mono); font-weight: 600; margin-right: 4px; }
.chip.pos .g { color: var(--pos); }
.chip.neu .g { color: var(--neu); }
.chip.neg .g { color: var(--neg); }
.chip[aria-pressed='true'] .g { color: inherit; }

.rows { }

.rowhead, .row {
  display: grid;
  align-items: center;
  grid-template-columns: 26px 76px 36px minmax(0, 1fr) 34px 38px 20px 150px;
  align-items: center;
  column-gap: clamp(8px, 1.4vw, 18px);
  width: 100%; text-align: left;
  padding: clamp(9px, 1.5vh, 14px) 0;
  background: none; border: 0; border-bottom: 1px solid var(--night-hair);
  cursor: pointer; font: inherit; color: inherit;
  transition: background-color .22s var(--ease);
}
.row > * { min-width: 0; overflow: hidden; }
.row:hover { background: rgba(255,255,255,.035); }
.row[data-on='1'] { background: rgba(230,29,80,.1); }
.row[hidden] { display: none; }

.box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid #3A3A3D;
  display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.box svg { width: 10px; height: 10px; color: #fff; opacity: 0; transform: scale(.4); transition: all .2s var(--ease); }
.row[data-on='1'] .box { background: var(--cherry); border-color: var(--cherry); }
.row[data-on='1'] .box svg { opacity: 1; transform: none; }

.row .tc { font-family: var(--mono); font-size: .7rem; color: var(--night-ink3); }
.row[data-on='1'] .tc { color: var(--cherry-lift); }
.row .spk { font-family: var(--mono); font-size: .7rem; color: var(--night-ink2); white-space: nowrap; }
.row .emo { font-family: var(--mono); font-size: .92rem; font-weight: 600; text-align: center; }
.row .emo[data-s='pos'] { color: var(--pos); }
.row .emo[data-s='neu'] { color: var(--neu); }
.row .emo[data-s='neg'] { color: var(--neg); }
.row .tx {
  font-size: clamp(.9rem, 1.5vw, 1.06rem); letter-spacing: -0.014em; line-height: 1.34;
  color: var(--night-ink2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s var(--ease);
}
.row[data-on='1'] .tx { color: #fff; }
.row .tx mark { background: rgba(230,29,80,.3); color: inherit; border-radius: 2px; }
.row .sec, .row .len {
  font-family: var(--mono); font-size: .7rem; color: var(--night-ink3);
  text-align: right; font-variant-numeric: tabular-nums;
}
.row .q { font-family: var(--mono); font-size: .78rem; color: #C77DFF; text-align: center; }
.row .kw {
  font-size: .74rem; line-height: 1.3; color: var(--night-ink3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row[data-on='1'] .kw { color: var(--night-ink2); }

/* Header row, carrying the same label + sublabel pairs the editor uses. */
.rowhead {
  padding: 0 0 10px;
  align-items: start;
  border-bottom: 1px solid var(--night-hair);
}
.rowhead span { display: block; min-width: 0; }
.rowhead b {
  display: block; font-size: .82rem; font-weight: 600; letter-spacing: -0.016em;
  color: var(--night-ink);
}
.rowhead i {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: .58rem; letter-spacing: .04em; color: var(--night-ink3); margin-top: 1px;
}
.rowhead .r { text-align: right; }

.none { padding: 44px 0; color: var(--night-ink3); font-size: .95rem; }

/* the cut — a proportional bar, not a list of cards */
.cut {
  position: sticky; bottom: 0; z-index: 20;
  margin-top: 26px;
  padding: 22px 0 24px;
  background: linear-gradient(rgba(0,0,0,0), #000 26%);
}
.cut-bar {
  height: 34px; border-radius: 5px; overflow: hidden;
  display: flex; gap: 2px;
  background: #131315;
}
.cut-seg {
  background: var(--cherry); min-width: 3px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .6rem; color: #fff;
  animation: seg .32s var(--ease);
  overflow: hidden;
}
@keyframes seg { from { opacity: 0; transform: scaleX(.4); } to { opacity: 1; transform: none; } }
.cut-empty {
  width: 100%; display: grid; place-items: center;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: #46464A;
}

.cut-meta {
  margin-top: 14px;
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
}
.cut-meta .stat { font-size: 1.02rem; letter-spacing: -0.018em; font-variant-numeric: tabular-nums; color: var(--night-ink2); }
.cut-meta .stat b { font-weight: 600; color: var(--night-ink); }
.cut-meta .you {
  color: var(--cherry-lift); font-size: .96rem; letter-spacing: -0.014em;
  opacity: 0; transform: translateY(4px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.cut-meta .you.show { opacity: 1; transform: none; }
.cut-meta .acts { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.reset {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: .92rem; color: var(--night-ink3);
  transition: color .2s var(--ease);
}
.reset:hover { color: var(--night-ink); }

/* =============================================================== ask ==== */

.ask-grid { display: grid; gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .ask-grid { grid-template-columns: 1fr 1fr; } }

.persona { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }

.ask-box {
  border: 1px solid var(--night-hair); border-radius: 12px;
  padding: 16px 18px;
  font-family: var(--mono); font-size: .92rem;
  display: flex; align-items: center; gap: 4px;
  min-height: 54px;
}
.ask-box .caret { width: 1.5px; height: 17px; background: var(--cherry-lift); animation: blink 1.06s steps(2) infinite; flex: none; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

.ask-out { margin-top: 20px; }
.ask-out .o {
  display: grid; grid-template-columns: 28px minmax(0,1fr) 46px;
  align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--night-hair);
  font-size: .97rem; letter-spacing: -0.014em; color: var(--night-ink3);
  opacity: .4; transition: opacity .45s var(--ease), color .45s var(--ease);
}
.ask-out .o.on { opacity: 1; color: var(--night-ink); }
.ask-out .o .n { font-family: var(--mono); font-size: .68rem; color: var(--cherry-lift); opacity: 0; transition: opacity .3s var(--ease); }
.ask-out .o.on .n { opacity: 1; }
.ask-out .o .s { font-family: var(--mono); font-size: .68rem; color: var(--night-ink3); text-align: right; opacity: 0; transition: opacity .3s var(--ease); font-variant-numeric: tabular-nums; }
.ask-out .o.on .s { opacity: 1; }

/* ========================================================== premiere ==== */

.pr-grid { display: grid; gap: clamp(26px, 4vw, 48px); align-items: center; }
@media (min-width: 940px) { .pr-grid { grid-template-columns: 236px minmax(0, 1fr); } }

.phone {
  width: 100%; max-width: 236px; margin-inline: auto;
  border: 1px solid #2A2A2D; border-radius: 26px; padding: 7px;
  background: #131315;
}
.phone-in { background: #000; border-radius: 20px; overflow: hidden; }
.phone-top {
  padding: 11px 13px 9px; font-family: var(--mono); font-size: .62rem;
  color: var(--night-ink3); display: flex; gap: 7px; align-items: center;
  border-bottom: 1px solid var(--night-hair);
}
.pdot { width: 5px; height: 5px; border-radius: 99px; background: var(--cherry); flex: none; }
.phone-row {
  display: grid; grid-template-columns: 15px minmax(0,1fr); gap: 9px; align-items: start;
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--night-hair);
  padding: 10px 12px; cursor: pointer; font: inherit;
  color: var(--night-ink2); font-size: .7rem; line-height: 1.32;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.phone-row:hover { background: rgba(255,255,255,.04); }
.phone-row.on { background: rgba(230,29,80,.13); color: #fff; }
.phone-row .b { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #3A3A3D; display: grid; place-items: center; margin-top: 1px; transition: all .22s var(--ease); }
.phone-row.on .b { background: var(--cherry); border-color: var(--cherry); }
.phone-row .b svg { width: 8px; height: 8px; color: #fff; opacity: 0; transition: opacity .22s var(--ease); }
.phone-row.on .b svg { opacity: 1; }
.phone-row .t { display: block; font-family: var(--mono); font-size: .56rem; color: var(--night-ink3); margin-bottom: 2px; }

.nle { border: 1px solid #2A2A2D; border-radius: 10px; overflow: hidden; background: #050506; }
.nle-top {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  background: #121214; border-bottom: 1px solid #232325;
  font-family: var(--mono); font-size: .66rem; color: var(--night-ink3);
}
.nle-top .r { margin-left: auto; font-variant-numeric: tabular-nums; }
.nle-mon { aspect-ratio: 16/5.6; background: #000; border-bottom: 1px solid #232325; display: grid; place-items: center; font-family: var(--mono); font-size: .68rem; color: #38383B; }
.nle-rule { display: flex; padding: 4px 11px; background: #0D0D0F; border-bottom: 1px solid #232325; font-family: var(--mono); font-size: .55rem; color: #38383B; }
.nle-rule span { flex: 1; }
.trk { display: grid; grid-template-columns: 30px minmax(0,1fr); border-bottom: 1px solid #1B1B1D; }
.trk:last-child { border-bottom: 0; }
.trk .lb { background: #121214; display: grid; place-items: center; font-family: var(--mono); font-size: .58rem; color: #56565A; border-right: 1px solid #232325; }
.trk .lane { min-height: 40px; display: flex; gap: 2px; padding: 4px; align-items: stretch; }
.trk.aud .lane { min-height: 26px; }
.blk {
  border-radius: 3px; min-width: 24px; padding: 0 5px;
  background: #4A1022; border: 1px solid var(--cherry);
  font-family: var(--mono); font-size: .55rem; color: #FF8EAA;
  display: flex; align-items: center; animation: seg .3s var(--ease); overflow: hidden;
}
.blk.a { background: repeating-linear-gradient(90deg, rgba(230,29,80,.55) 0 2px, rgba(230,29,80,.16) 2px 4px); border-color: rgba(230,29,80,.5); }
.lane-none { width: 100%; display: grid; place-items: center; font-family: var(--mono); font-size: .56rem; color: #38383B; }

.foot-note { margin-top: 16px; font-family: var(--mono); font-size: .66rem; color: var(--night-ink3); text-align: center; }

/* ============================================================= price ==== */

.price { display: grid; gap: clamp(34px, 5vw, 64px); }
@media (min-width: 820px) { .price { grid-template-columns: 1fr 1fr; } }

.tier { display: grid; gap: 14px; align-content: start; }
.tier .nm { font-size: 1.04rem; font-weight: 600; letter-spacing: -0.016em; }
.tier .amt { font-size: clamp(3.2rem, 7vw, 5.2rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.tier .amt sup { font-size: .38em; font-weight: 500; vertical-align: baseline; position: relative; top: -1.12em; letter-spacing: 0; margin-right: 1px; }
.tier .amt small { font-size: .2em; font-weight: 400; color: var(--ink-3); letter-spacing: -0.01em; margin-left: 3px; }
.tier .who { color: var(--ink-2); font-size: 1.04rem; max-width: 30ch; }
.tier ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.tier li { font-size: .98rem; color: var(--ink-2); padding-left: 19px; position: relative; }
.tier li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 99px; background: var(--hair); }
.tier li.key { color: var(--ink); }
.tier li.key::before { background: var(--cherry); }
.tier .go { margin-top: 12px; }

.price-fine { margin-top: clamp(34px, 5vh, 60px); color: var(--ink-3); font-size: .9rem; }

/* ============================================================= start ==== */

.start { text-align: center; }
.start .t-big { max-width: 17ch; margin-inline: auto; }
.start .lede { max-width: 40ch; margin: 24px auto 0; }

.drop {
  margin: 40px auto 0; max-width: 560px;
  display: flex; gap: 8px; align-items: center;
  border: 1px solid var(--hair); border-radius: 980px;
  padding: 6px 6px 6px 22px;
  background: var(--paper);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.drop:focus-within { border-color: var(--cherry); box-shadow: 0 0 0 4px rgba(230,29,80,.11); }
.drop input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-size: 1rem; letter-spacing: -0.012em; padding: 10px 0;
}
.drop input::placeholder { color: var(--ink-3); }

.start-fine { margin-top: 18px; color: var(--ink-3); font-size: .84rem; }

/* ============================================================ footer ==== */

.ftr { border-top: 1px solid var(--hair); padding-block: 28px 34px; background: var(--paper-2); }
.ftr-in { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: .78rem; color: var(--ink-3); }
.ftr a { color: var(--ink-2); text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr .spread { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }

/* ============================================================== reveal == */

.js .rise { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rise.up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; } }

/* ============================================================== notes === */

.doc { max-width: 720px; margin-inline: auto; }
.doc .kicker { font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.06; }
.doc h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -0.025em;
  margin-top: 68px; padding-top: 30px; border-top: 1px solid var(--hair);
}
.doc h3 { font-size: 1.06rem; letter-spacing: -0.018em; margin-top: 34px; }
.doc p { margin-block: 14px; color: var(--ink-2); font-size: 1.06rem; line-height: 1.58; }
.doc p.big { font-size: 1.28rem; line-height: 1.45; letter-spacing: -0.016em; color: var(--ink); margin-block: 24px; }
.doc ul, .doc ol { color: var(--ink-2); padding-left: 20px; display: grid; gap: 10px; margin-block: 18px; font-size: 1.02rem; line-height: 1.55; }
.doc b { color: var(--ink); font-weight: 600; }
.doc code { font-family: var(--mono); font-size: .86em; color: var(--cherry); }
.doc blockquote { margin: 22px 0; padding-left: 20px; border-left: 2px solid var(--cherry); color: var(--ink); font-size: 1.14rem; letter-spacing: -0.014em; }

.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; margin-block: 24px; min-width: 520px; }
.tbl th, .tbl td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.tbl td:first-child { color: var(--ink); font-weight: 500; width: 24%; padding-right: 20px; }
.tbl td { color: var(--ink-2); }
.tbl .old { color: var(--ink-3); }
.scroll-x { overflow-x: auto; }

/* Small screens: collapse the ornament columns to zero width rather than
   display:none, which would shift every later cell into the wrong column. */
@media (max-width: 720px) {
  .ln, .row { column-gap: 10px; }
  [data-stage='1'] .ln,
  [data-stage='2'] .ln { grid-template-columns: 58px 0px 13px minmax(0,1fr) 26px 0px 0px 0px; }
  .rowhead, .row { grid-template-columns: 22px 0px 13px minmax(0,1fr) 26px 0px 0px 0px; }
  .rowhead { display: none; }
  /* Legibility beats the single-line spreadsheet look at this width: the
     whole point of the reveal is that you can read what you are cutting. */
  .ln .tx, .row .tx {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.34;
  }
  .ln, .row { align-items: start; }
  .ln .tc, .ln .emo, .ln .dur,
  .row .tc, .row .emo, .row .dur, .row .box { margin-top: 1px; }
  .cut-meta .acts { margin-left: 0; width: 100%; }
  .cut-meta { gap: 6px 14px; }
}

/* ============================================================== shots ====
   Screenshots of the live product, captured 2026-08-19. Each already carries
   its own device bezel, so nothing is framed again here — the radius simply
   clips a few pixels into the bezel so the capture's pale corners never show.
   ======================================================================= */

.shots { display: grid; gap: clamp(26px, 4vw, 52px); justify-items: center; }
@media (min-width: 760px) { .shots.two-up { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 900px) { .shots.formats { grid-template-columns: 0.8fr 1.2fr; align-items: center; } }

.shot { margin: 0; display: grid; justify-items: center; gap: 16px; width: 100%; }
.shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--sr, 18px);
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 30px 60px -30px rgba(0,0,0,.35);
}

/* Crops differ slightly in width, so size the paired phones by HEIGHT — that
   keeps the devices the same size and lands the captions on one baseline. */
.shots.two-up .shot { width: auto; }
.shots.two-up .shot img {
  height: clamp(400px, 54vh, 560px);
  width: auto; max-width: 100%;
}
/* Namespaced: a bare .phone / .tablet would collide with the Premiere mock's
   .phone rule and inherit its dark frame, border and width cap. */
.shot--phone  { max-width: 300px; --sr: 26px; }
.shot--tablet { max-width: 400px; --sr: 16px; }
.shot--wide   { max-width: 540px; --sr: 16px; }

.shot figcaption { text-align: center; max-width: 30ch; }
.shot figcaption b {
  display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.016em; color: var(--ink);
}
.shot figcaption span { display: block; font-size: .92rem; color: var(--ink-2); margin-top: 3px; }

.shot-note {
  margin-top: clamp(26px, 4vh, 44px); text-align: center;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--ink-3);
}

/* a caption strip that names what a screenshot is showing */
.callouts {
  display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center;
  margin-top: 20px;
}
.callout {
  font-size: .82rem; color: var(--ink-2);
  border: 1px solid var(--hair); border-radius: 980px; padding: 5px 13px;
}
.callout b { color: var(--ink); font-weight: 600; }

/* ============================================================== steps ==== */

.steps { display: grid; gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--paper); padding: 30px 26px 34px; display: grid; gap: 10px; align-content: start; }
.step .n {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--cherry);
}
.on-night .step .n { color: var(--cherry-lift); }
.step h3 { font-size: 1.14rem; letter-spacing: -0.02em; }
.step p { color: var(--ink-2); font-size: .96rem; line-height: 1.5; }

/* ============================================================== facts ==== */

.facts { display: grid; gap: clamp(26px, 4vw, 56px); }
@media (min-width: 800px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { display: grid; gap: 9px; align-content: start; padding-top: 22px; border-top: 1px solid var(--hair); }
.fact h3 { font-size: 1.2rem; letter-spacing: -0.022em; }
.fact p { color: var(--ink-2); font-size: 1rem; line-height: 1.52; max-width: 44ch; }