/* ============================================================
   Captee landing — v3 additions (2026-07-24)
   Positioning: content automation, priced against a HUMAN editor.
   Loaded AFTER styles.css; new class names + a few deliberate
   overrides. Keep styles.css as the base system (palette, nav,
   buttons, grain, FAQ, responsive).
   ============================================================ */

/* ---------- hero ----------
   Patrik's established headline pattern (same as his other brand): a LIGHT
   line with one word accented, then a heavy italic accent line underneath.
   Accent is lime here by his call — the CTA stays the only FILLED lime element,
   so the button still reads as the action. */
.hero h1{
  font-family:'Inter',system-ui,sans-serif;font-weight:700;
  font-size:clamp(36px,5.2vw,58px);max-width:900px;margin:16px auto 14px;
  letter-spacing:-.032em;line-height:1.08;
}
/* Accent phrase sits on its own line, same size and weight as line one —
   italic and lime is what separates it, not scale. */
.hero h1 .hero-caption{
  font-style:italic;font-family:'Inter',system-ui,sans-serif;
  font-weight:700;color:var(--accent);text-transform:none;
  font-size:1em;letter-spacing:-.032em;
  text-shadow:0 0 46px rgba(217,255,75,.25);
}
.hero .sub{font-size:18px;max-width:560px;margin:16px auto 10px;line-height:1.5;color:var(--tx);font-weight:600}
.hero .sub b{color:var(--accent);font-weight:800}
.hero .sub-2{max-width:620px;margin:0 auto 26px}
.hero .sub-2 b{color:var(--tx);font-weight:600}
/* STUDIO FILM. The rendered loop replaced the DOM mock — see the comment in index.html. No frame,
   no browser chrome, no border: the video already contains its own window, so wrapping it in
   another one would read as a screenshot of a screenshot. It just sits on the page and plays. */
.studio-film{margin:0 auto;max-width:1180px;border-radius:18px;overflow:hidden;line-height:0}
.studio-film video{width:100%;height:auto;display:block}

/* Kept for the earlier DOM mock; harmless if that markup ever returns. */
.studio .cap-live{position:absolute;left:0;right:0;bottom:16%;z-index:3;pointer-events:none}
.studio .cap-live .cr-root{transform-origin:center bottom}
@keyframes stTouch{
  0%   {box-shadow:0 0 0 0 rgba(217,255,75,.55); filter:brightness(1)}
  22%  {box-shadow:0 0 0 3px rgba(217,255,75,.28); filter:brightness(1.5)}
  100% {box-shadow:0 0 0 0 rgba(217,255,75,0);   filter:brightness(1)}
}
.studio .st-touch{animation:stTouch .62s ease-out; border-radius:8px}

/* CURSOR. It travels, lands, presses, and only then does the control answer — the 420ms gap in
   landing.js is what makes the preview read as a CONSEQUENCE of the click rather than a
   coincidence. The easing is a slight overshoot, because a linear glide reads as a machine. */
.studio{position:relative}
.studio .st-cursor{
  position:absolute; left:0; top:0; width:15px; height:15px; margin:-7px 0 0 -7px;
  z-index:20; pointer-events:none; opacity:0; border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.5);
  transition:transform .58s cubic-bezier(.34,1.24,.36,1), opacity .3s ease;
}
.studio .st-cursor.is-on{opacity:1}
@keyframes stPress{
  0%  {transform:scale(1)}
  45% {transform:scale(.6)}
  100%{transform:scale(1)}
}
/* The ring is a child pseudo so the press scale never fights the travel transform on the dot. */
.studio .st-cursor::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(217,255,75,.9); opacity:0; transform:scale(.4);
}
@keyframes stRing{ 0%{opacity:.95;transform:scale(.4)} 100%{opacity:0;transform:scale(2.1)} }
.studio .st-cursor.is-press::after{animation:stRing .58s ease-out}

/* CAMERA. 2% of scale over 700ms — the difference between "it changed" and "it happened". */
@keyframes stPush{
  0%  {transform:scale(1)}
  28% {transform:scale(1.022)}
  100%{transform:scale(1)}
}
.studio .canvas{transform-origin:center 62%}
.studio .canvas.st-push{animation:stPush .7s cubic-bezier(.22,.9,.24,1)}

@media (prefers-reduced-motion: reduce){
  .studio .st-cursor{display:none}
  .studio .canvas.st-push{animation:none}
}
.studio .style-item{transition:background .25s ease, color .25s ease}
.studio .swatches span{transition:transform .22s ease, box-shadow .22s ease}
.studio .swatches span.on{transform:scale(1.18)}
.studio .sldr i{transition:left .5s cubic-bezier(.22,.9,.24,1)}
@media (prefers-reduced-motion: reduce){
  .studio .st-touch{animation:none}
  .studio .sldr i{transition:none}
}

/* USAGE STRIP. Usage and features answer different questions, so they should not read as one
   list — but labelling two sub-sections ("Usage per month" / "Included in…") is how everyone
   else does it and it costs two rows of text nobody reads. The numbers get their own visual
   block instead: no heading, no checkmarks, and the digits carry the emphasis. */
/* Three equal columns, number stacked over its label. The previous version was one inline run of
   flex items, which wrapped mid-unit — "10" ended a line and "min upload" started the next, so
   the card read as broken text rather than as figures. A grid cannot do that: each cell owns its
   own number AND its own words, so the row breaks nowhere. */
.tier-list li.tier-usage{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin:0 0 10px; padding:14px 10px; border-radius:12px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07);
  font-variant-numeric:tabular-nums; text-align:center;
}
.tier-list li.tier-usage > span{display:flex; flex-direction:column; gap:3px; align-items:center}
.tier-list li.tier-usage > span + span{border-left:1px solid rgba(255,255,255,.07)}
.tier-list li.tier-usage b{font-size:19px; font-weight:800; color:var(--tx); letter-spacing:-.02em; line-height:1}
.tier-list li.tier-usage i{
  font-style:normal; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); opacity:.8; white-space:nowrap;
}
/* The carry-over line is the hinge of the Pro card: it says everything below is ON TOP of a
   complete product, so it gets weight the feature rows do not. */
.tier-list li.tier-carry{padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid rgba(255,255,255,.08)}
.tier-list li.tier-carry b{color:var(--tx)}

/* LINE FEEDING. Centred type in a fixed box breaks wherever the box ends, which is how the old
   subline stranded "watermark." alone on its own line. `balance` distributes the words evenly
   across the lines instead of filling greedily — the same problem the caption engine solves with
   words-per-line, and the same fix: decide the break, don't inherit it. Applied to every centred
   hero string so a future copy edit can't reintroduce an orphan. */
.hero h1, .hero .sub, .hero .sub-2{text-wrap:balance}

/* Seat counter under the hero CTA. Every property is restated here rather than
   inherited — something upstream was flattening the radius into a rectangle. */
.cta-lockup .founder-pill{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:22px;padding:9px 18px 9px 15px;
  border-radius:999px;overflow:hidden;position:relative;isolation:isolate;
  font-size:13px;font-weight:700;letter-spacing:.012em;
  color:#e8ffb4;
  background:linear-gradient(180deg,rgba(217,255,75,.12),rgba(217,255,75,.04));
  border:1px solid rgba(217,255,75,.34);
  box-shadow:0 8px 26px rgba(217,255,75,.10),inset 0 1px 0 rgba(255,255,255,.06);
}
/* a slow sheen crossing the chip — enough to catch the eye, not enough to nag */
.cta-lockup .founder-pill::after{
  content:'';position:absolute;top:-60%;bottom:-60%;left:-40%;width:24%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:btnShimmer 5.6s ease-in-out infinite;
}
/* live dot with a radar ring pulsing off it */
.cta-lockup .founder-pill .dot{
  position:relative;width:8px;height:8px;
  box-shadow:0 0 10px rgba(217,255,75,.85);
}
.cta-lockup .founder-pill .dot::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(217,255,75,.55);
  animation:seatRing 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes seatRing{
  0%{transform:scale(.55);opacity:.9}
  100%{transform:scale(1.75);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .cta-lockup .founder-pill::after,.cta-lockup .founder-pill .dot::after{animation:none;opacity:0}
}

/* BEFORE / AFTER pills sit ON the panels rather than under them */
.ba-media{position:relative}
.ba-tag{
  position:absolute;top:10px;left:10px;z-index:3;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#cfced6;background:rgba(10,9,13,.72);border:1px solid rgba(255,255,255,.14);
  padding:5px 11px;border-radius:99px;backdrop-filter:blur(6px);
}
.ba-tag.after{color:#0a0a0a;background:var(--accent);border-color:var(--accent)}

/* ---------- shimmer sweep on the primary CTA ---------- */
.btn-shimmer{position:relative;overflow:hidden;isolation:isolate}
.btn-shimmer::after{
  content:'';position:absolute;top:-60%;bottom:-60%;left:-40%;width:26%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:btnShimmer 4.4s ease-in-out infinite;
}
@keyframes btnShimmer{
  0%{left:-40%}
  55%{left:120%}
  100%{left:120%}
}
@media(prefers-reduced-motion:reduce){.btn-shimmer::after{animation:none;opacity:0}}

/* NOTE: the founding pill (.founder-pill) and seat meter (.founder-meter) are
   owned by styles.css — 8772 shipped them with the live Stripe counter. Nothing
   here overrides them on purpose. */

/* ---------- THE MATH: what a month of content costs ---------- */
.math-sec{background:rgba(255,255,255,.015);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Captee sits in the middle and is deliberately the biggest card on the row. */
.math-grid{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:16px;margin-top:32px;align-items:center}
.mcard{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--srf)}
.mcard.win{
  position:relative;
  border-color:rgba(217,255,75,.42);
  background:linear-gradient(160deg,rgba(217,255,75,.07),var(--srf));
  padding:34px 28px 28px;box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px rgba(217,255,75,.06);
}
/* "you can try this one for nothing" — said at the exact moment they're
   comparing prices, which is when the risk objection actually fires. */
.free-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#E8FF7A,#D9FF4B 46%,#C2EE28);color:#0a0a0a;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 15px;border-radius:99px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(217,255,75,.22);
}
.mcta{width:100%;justify-content:center;margin-top:18px;font-size:14.5px;padding:13px 20px}
.mcard .who{font-size:13px;color:var(--muted);font-weight:600}
.mcard.win .who{font-size:14px;color:var(--tx)}
.mcard .amt{font-family:var(--font-disp);font-size:32px;font-weight:700;letter-spacing:-.03em;margin:6px 0 2px;color:var(--tx)}
.mcard .amt span{font-size:15px;color:var(--muted);font-weight:500}
.mcard.win .amt{color:var(--accent);font-size:46px;margin:8px 0 4px}
.mcard .amt .pre{
  display:block;font-family:'Inter',system-ui,sans-serif;font-size:12.5px;
  font-weight:600;color:var(--muted);letter-spacing:.01em;margin-bottom:1px;
}
.mcard.win .out{font-size:15px;color:var(--tx)}
.mcard .out{font-size:14px;color:#cfced6}
.mcard .fine{font-size:12px;color:var(--dim);margin:10px 0 0;border-top:1px solid var(--line);padding-top:10px}

/* ---------- HOW IT WORKS: two roadmaps ----------
   Same width, wildly different shape. Seven zig-zag stops and a week of waiting
   versus three stops on a straight line. */
/* This section's headline is long — give it room so line one stays on one line
   at desktop widths (it still wraps naturally on phones, which is fine). */
#product .head,#audience .head{max-width:900px}

/* Studio headline accent in lime rather than the violet gradient. */
#studio .head h2 .grad{
  background:none;-webkit-text-fill-color:var(--accent);color:var(--accent);
}

.roadmap{margin-top:36px}
.lane{margin-bottom:30px}
.lane:last-of-type{margin-bottom:0}
.lane-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:2px;padding:0 4px}
.lane-title{font-size:15px;font-weight:700;color:var(--muted)}
.lane-fast .lane-title{color:var(--tx)}
.lane-cost{font-size:12.5px;color:var(--dim);white-space:nowrap}
.lane-cost.win{color:var(--accent);font-weight:600}

.rm-svg{width:100%;height:auto;display:block;overflow:visible}
/* --- the road itself: asphalt ribbon + marching centre markings --- */
.road-base{fill:none;stroke:#191622;stroke-width:34;stroke-linecap:round;stroke-linejoin:round}
.lane-fast .road-base{stroke:#1d1a28}

/* Centre line, dashed on BOTH roads. The dashes march, and their speed is the
   story: the hired-out road crawls, the Captee road races. The offset step is a
   whole multiple of the dash period so the loop never jumps. */
.road-line{fill:none;stroke-width:3;stroke-dasharray:9 13;stroke-linecap:round}
.road-line.slow{stroke:rgba(255,255,255,.28);animation:dashMarch 5s linear infinite}
.road-line.fast{stroke:url(#rmg);stroke-width:3.5;filter:drop-shadow(0 0 12px rgba(217,255,75,.28));animation:dashMarch 1.1s linear infinite}
@keyframes dashMarch{from{stroke-dashoffset:0}to{stroke-dashoffset:-44}}
@media(prefers-reduced-motion:reduce){.road-line{animation:none}}

/* --- the payoff that fires as each traveller finishes a lap ---
   Same duration as its animateMotion, so it lands with the arrival. */
.lane{position:relative}
.payoff{
  position:absolute;right:8px;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 12px;border-radius:99px;opacity:0;pointer-events:none;
}
/* the money draining on the hired-out road — always visible, always moving.
   Lives inside the lane header so it can never sit on top of the label. */
.lane-right{display:flex;align-items:center;gap:12px;flex:none}
.cost-meter{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  color:#ff8a8a;background:rgba(255,90,90,.09);border:1px solid rgba(255,90,90,.3);
  padding:5px 12px;border-radius:9px;
  font-variant-numeric:tabular-nums;min-width:78px;text-align:right;
}
/* Both badges ride up on the lane-header line — the road itself is crowded with
   pins, labels and a flag, and anything sitting over it collides with one. */
.payoff.fast{
  top:-5px;color:#0a0a0a;background:var(--accent);border:1px solid var(--accent);
  box-shadow:0 6px 22px rgba(217,255,75,.3);
  animation:payoffPop 4.6s linear infinite;
}
/* fires mid-journey, as the traveller passes stop 2 (~half the path length) */
.payoff.mid{
  top:-5px;left:50%;right:auto;
  color:var(--brand-2);background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.45);
  animation:payoffMid 4.6s linear infinite;
}
@keyframes payoffPop{
  0%,86%{opacity:0;transform:translateY(5px) scale(.94)}
  92%{opacity:1;transform:none}
  99%{opacity:1;transform:none}
  100%{opacity:0;transform:none}
}
@keyframes payoffMid{
  0%,42%{opacity:0;transform:translateX(-50%) translateY(5px)}
  49%{opacity:1;transform:translateX(-50%)}
  64%{opacity:1;transform:translateX(-50%)}
  71%,100%{opacity:0;transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .payoff{animation:none;opacity:1}
  .payoff.mid{display:none}   /* three badges at once is noise when nothing moves */
}

/* --- chequered finish flag at the last stop --- */
.flag-pole{stroke:rgba(255,255,255,.55);stroke-width:2.5;stroke-linecap:round}
.flag-cloth rect{fill:#f4f3f7}
.flag-cloth rect.sq{fill:#17141f}
.flag-foot{fill:var(--accent)}

/* --- the traveller on each road --- */
.trav-ring{fill:var(--srf);stroke:rgba(255,255,255,.22);stroke-width:1.5}
.trav-head,.trav-shoulders{fill:var(--muted)}
.lane-fast .trav-ring{fill:#12101a;stroke:var(--accent);stroke-width:2;filter:drop-shadow(0 0 10px rgba(217,255,75,.45))}
.lane-fast .trav-head,.lane-fast .trav-shoulders{fill:var(--accent)}

/* --- map pins --- */
.pin-head{fill:var(--srf2);stroke:rgba(255,255,255,.18);stroke-width:1.5}
.pin-tip{fill:var(--srf2);stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-linejoin:round}
.pin-n{fill:var(--muted);font:700 13px/1 'Inter',sans-serif;text-anchor:middle}
.rm-l{fill:var(--dim);font:600 12.5px/1 'Inter',sans-serif;text-anchor:middle}

.lane-fast .pin-head{fill:rgba(139,92,246,.22);stroke:rgba(139,92,246,.6)}
.lane-fast .pin-tip{fill:rgba(139,92,246,.22);stroke:rgba(139,92,246,.6)}
.lane-fast .pin-n{fill:#fff}
.lane-fast .rm-l{fill:#cfced6;font-size:13.5px}
.lane-fast .pin.finish .pin-head{fill:var(--accent);stroke:var(--accent)}
.lane-fast .pin.finish .pin-tip{fill:var(--accent);stroke:var(--accent)}
.lane-fast .pin.finish .pin-n{fill:#0a0a0a}
.lane-fast .pin.finish .rm-l{fill:var(--accent);font-weight:700}

/* ---------- the three stops, shown as mini screens ---------- */
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.hcard{background:var(--srf);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 22px;text-align:center}
.hc-art{
  height:150px;border-radius:13px;background:#0c0b12;border:1px solid var(--line);
  display:grid;place-items:center;padding:14px;margin-bottom:16px;overflow:hidden;
}
.hc-step{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-2);background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.35);
  padding:4px 12px;border-radius:99px;margin-bottom:10px;
}
.hcard h3{font-size:18px;margin:0 0 6px}
.hcard p{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.hc-chip{
  display:inline-block;font-size:12.5px;font-weight:600;color:#cfced6;
  background:rgba(255,255,255,.04);border:1px solid var(--line);padding:7px 14px;border-radius:99px;
}
.hcta{text-align:center;margin-top:26px}

/* art 1 — a dropzone mid-upload */
.drop{width:100%;border:1.5px dashed rgba(255,255,255,.16);border-radius:11px;padding:14px;display:grid;gap:9px;justify-items:center}
.drop-thumb{width:34px;height:48px;border-radius:6px;background:linear-gradient(165deg,#2a2635,#171420);border:1px solid rgba(255,255,255,.12)}
.drop-name{width:74%;height:7px;border-radius:4px;background:rgba(255,255,255,.13)}
.drop-bar{width:74%;height:5px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.drop-bar i{display:block;height:100%;width:62%;border-radius:4px;background:var(--accent)}

/* art 2 — the style picker, one selected */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%}
.st{
  position:relative;aspect-ratio:4/5;border-radius:7px;background:#161320;border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;
}
.st i{display:block;height:4px;border-radius:2px;width:56%;background:rgba(255,255,255,.4)}
.st i.w{width:38%}
.st i.lime{background:var(--accent)}
.st.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(217,255,75,.25)}
.st .cur{
  position:absolute;right:-4px;bottom:-4px;width:0;height:0;
  border-left:7px solid #fff;border-bottom:9px solid transparent;border-top:2px solid transparent;
  transform:rotate(-18deg);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* art 3 — the finished reel, ready to go out */
.fin{display:flex;align-items:center;gap:14px}
.fin-phone{
  width:62px;aspect-ratio:9/16;border-radius:9px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#221f2c,#121016);border:1px solid rgba(217,255,75,.35);
}
.fin-face{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#3b3746}
.fin-body{position:absolute;top:calc(20% + 17px);left:50%;transform:translateX(-50%);width:38px;height:22px;border-radius:20px 20px 0 0;background:#343040}
.fin-cap{position:absolute;left:7px;right:7px;bottom:20%;display:grid;gap:3px;justify-items:center}
.fin-cap i{display:block;height:4px;border-radius:2px;background:#fff;width:78%}
.fin-cap i.hl{background:var(--accent);width:50%}
.fin-side{display:grid;gap:7px;justify-items:start}
.fin-badge{font-size:10.5px;font-weight:700;color:#cfced6;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:4px 9px;border-radius:6px}
.fin-plat{display:flex;gap:5px}
.fin-plat i{width:15px;height:15px;border-radius:5px;background:rgba(255,255,255,.1);border:1px solid var(--line)}

/* phone version of both journeys */
.rm-lists{display:none;gap:12px}
.rm-list{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--srf)}
.rm-list.fast{border-color:rgba(217,255,75,.35);background:linear-gradient(160deg,rgba(217,255,75,.06),var(--srf))}
.rm-list b{display:block;font-size:14px;margin-bottom:6px}
.rm-list span{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}
.rm-list em{display:block;font-style:normal;font-size:12.5px;color:var(--dim);margin-top:8px}
.rm-list.fast em{color:var(--accent);font-weight:600}

.auto-line{text-align:center;margin:26px 0 0;font-size:13.5px;color:var(--dim)}

/* ---------- WHO IT'S FOR ---------- */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.wcard{background:var(--srf);border:1px solid var(--line);border-radius:var(--r);padding:24px;text-align:center}
.wcard .em{font-size:26px;line-height:1}
.wcard h3{font-size:16px;margin:10px 0 6px}
.wcard p{font-size:13.5px;color:var(--muted);margin:0}

/* ---------- STUDIO UI MOCK ---------- */
.studio{background:#0b0a10;border:1px solid rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55);margin-top:34px}
.studio-bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--srf2)}
.studio-bar .tdot{width:11px;height:11px;border-radius:50%}
.studio-bar .ttl{margin-left:10px;font-size:12.5px;color:var(--muted);font-weight:600}
.studio-bar .pill-save{margin-left:auto;background:linear-gradient(180deg,#E8FF7A,#D9FF4B 46%,#C2EE28);color:#0a0a0a;font-size:11.5px;font-weight:800;padding:5px 14px;border-radius:8px}
.studio-body{display:grid;grid-template-columns:190px 1fr 240px;min-height:460px}
.s-left{border-right:1px solid var(--line);padding:14px;background:var(--srf)}
.s-right{border-left:1px solid var(--line);padding:14px;background:var(--srf)}
.s-left .lbl,.s-right .lbl{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:8px 0 10px}
.style-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;font-size:13px;color:var(--muted)}
.style-item .sw{width:22px;height:22px;border-radius:6px;flex:none}
.style-item.on{background:rgba(139,92,246,.13);color:var(--tx);font-weight:600;outline:1px solid rgba(139,92,246,.4)}
.s-center{display:grid;place-items:center;padding:26px;background:radial-gradient(circle at 50% 40%,#161320 0%,#0b0a10 70%)}
.canvas{width:210px;aspect-ratio:9/16;border-radius:16px;background:
    radial-gradient(120% 80% at 50% 18%, rgba(169,139,255,.16), transparent 62%),
    radial-gradient(90% 60% at 78% 82%, rgba(217,255,75,.07), transparent 60%),
    linear-gradient(168deg,#241f30,#15121b 52%,#0e0c12);border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.canvas .cap2{position:absolute;left:0;right:0;bottom:22%;text-align:center;font-family:var(--font-disp);font-weight:700;font-size:15px;text-transform:uppercase;line-height:1.3}
.cap2 .l2{display:block;font-size:12.5px}
.cap2 .w{display:inline-block;opacity:0;animation:capPop .45s cubic-bezier(.2,1.4,.4,1) forwards}
.cap2 .w:nth-child(1){animation-delay:.2s}
.cap2 .w:nth-child(2){animation-delay:.5s}
.cap2 .w:nth-child(3){animation-delay:.8s}
.cap2 .l2 .w:nth-child(1){animation-delay:1.15s}
.cap2 .l2 .w:nth-child(2){animation-delay:1.45s}
.cap2 .hl{color:#FFD34B}
@keyframes capPop{0%{opacity:0;transform:translateY(14px) scale(.7)}100%{opacity:1;transform:none}}
.canvas .playhead{position:absolute;bottom:10px;left:12px;right:12px;height:3px;border-radius:3px;background:rgba(255,255,255,.12)}
.canvas .playhead i{display:block;height:100%;border-radius:3px;background:var(--brand-2);animation:playhead 3.4s linear infinite}
@keyframes playhead{0%{width:5%}100%{width:96%}}
.ctl{display:flex;align-items:center;justify-content:space-between;padding:8px 4px;font-size:12.5px;color:var(--muted)}
.ctl .v{color:var(--tx);font-weight:600;font-size:12px;background:var(--srf2);border:1px solid var(--line);padding:4px 10px;border-radius:7px}
.ctl .v.on{color:var(--brand-2);border-color:rgba(139,92,246,.45)}
.ctl .sldr{width:96px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);position:relative}
.ctl .sldr i{position:absolute;left:60%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--brand-2)}
.swatches{display:flex;gap:7px;padding:6px 4px 10px}
.swatches span{width:20px;height:20px;border-radius:6px}
.swatches span.on{outline:2px solid #fff;outline-offset:2px}
.sdiv{height:1px;background:var(--line);margin:10px 0}

/* ---------- pricing tweaks ---------- */
.tier-client{font-size:12.5px;color:var(--dim);margin-bottom:16px;font-style:italic}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .math-grid{grid-template-columns:1fr}
  /* order is set with the stacked-rows rules further down, not here */
  .who-grid{grid-template-columns:1fr}
  /* SVG lanes get illegible at phone width — swap to the stacked lists */
  .lane{display:none}
  .rm-lists{display:grid}
  .hgrid{grid-template-columns:1fr}
  .studio-body{grid-template-columns:1fr}
  .s-left,.s-right{display:none}
}

/* ---------- FOUNDER NOTE ----------
   The honest stand-in for testimonials at launch: no claimed users, no numbers,
   no invented quotes. Replace with real customer proof once the first hundred
   have work to show. */
.fnote{
  position:relative;max-width:760px;margin:0 auto;padding:38px 42px 32px;
  background:linear-gradient(160deg,rgba(139,92,246,.10),var(--srf) 62%);
  border:1px solid rgba(139,92,246,.26);border-radius:22px;
}
.fnote-mark{
  position:absolute;top:6px;left:26px;font-family:var(--font-disp);
  font-size:76px;line-height:1;color:rgba(217,255,75,.28);pointer-events:none;
}
.fnote-body{position:relative;font-size:16.5px;line-height:1.65;color:#d6d5de;margin:0 0 14px}
.fnote-body:last-of-type{margin-bottom:22px}
/* ⚑ NOW A HEADER, NOT A FOOTER. The border and padding flipped sides with it: a rule
   ABOVE the signature separated it from a quote that no longer precedes it. */
.fnote-sig{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);
  padding-bottom:18px;margin-bottom:22px}
.fnote-name{font-family:var(--font-disp);font-weight:700;font-size:16px;color:var(--tx)}
.fnote-role{font-size:13px;color:var(--muted)}
@media(max-width:900px){.fnote{padding:30px 24px 26px}.fnote-mark{left:14px;font-size:60px}}

/* ---------- GUARANTEE ----------
   Sits under the tiers, not in the fine print — a refund promise buried in 10px
   grey does the opposite of reassuring. */
.guarantee{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  max-width:580px;margin:34px auto 0;padding:40px 28px 32px;
  background:linear-gradient(160deg,rgba(217,255,75,.07),var(--srf) 70%);
  border:1px solid rgba(217,255,75,.28);border-radius:16px;
}
.g-mark{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#0a0a0a;font-size:13px;font-weight:900;
  box-shadow:0 6px 18px rgba(217,255,75,.28);margin-bottom:-2px;
}
.g-title{font-family:var(--font-disp);font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.2;color:var(--tx);letter-spacing:-.025em}
.g-title em{font-style:normal;color:var(--accent)}
/* one scannable line — "3 videos free" read like a supermarket offer */
.g-facts{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;
  font-size:15px;color:#e8ffb4;font-weight:600;letter-spacing:.01em;
}
.g-facts em{font-style:normal;color:var(--dim);margin:0 8px}
/* Three actual reels, not play buttons in boxes: 9:16 frames with a caption
   line inside — the same visual language as the phone minis on the roadmap. */
/* Three big reel frames, fanned and faded, sitting BEHIND the copy — texture
   rather than an icon row. Content is lifted above them with z-index. */
.reels{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:18px;
  opacity:.2;
}
.rl{
  position:relative;
  width:78px;height:122px;border-radius:16px;flex:none;
  border:2px solid var(--accent);
  background:linear-gradient(165deg,rgba(217,255,75,.16),rgba(217,255,75,.02));
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:7px;padding-bottom:16px;
}
.rl i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.75);width:64%}
.rl i.hl{background:var(--accent);width:42%}
/* play button so the frames read as video, not as empty phones */
.rl .pb{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--accent);background:rgba(217,255,75,.14);
}
.rl .pb::after{
  content:'';position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);
  border-left:8px solid var(--accent);
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.rl:nth-child(1){transform:rotate(-9deg) translateY(-4px)}
.rl:nth-child(2){transform:translateY(-20px)}
.rl:nth-child(3){transform:rotate(9deg) translateY(-4px)}

/* copy sits on top of both */
.guarantee .g-mark,.guarantee .g-title,.guarantee .g-facts,.guarantee .g-cta{position:relative;z-index:2}
@media(max-width:900px){.guarantee{padding:18px 18px;gap:12px}}

/* closing CTA under the founder note — the page used to end on an FAQ answer,
   which left the most motivated reader with nowhere to act */
.fnote-cta{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.fnote-cta .microcopy{margin-top:12px}

/* Founding price IS the offer, so it's the big number; the standing price sits
   struck through beside it. */
.tier-founder{font-size:13.5px;color:var(--muted)}
.tier-founder b{color:var(--accent);font-weight:800}
.mcard .amt .post{
  display:block;font-family:'Inter',system-ui,sans-serif;font-size:12.5px;
  font-weight:700;color:var(--accent);letter-spacing:.01em;margin-top:4px;
}


/* Pricing seat counter, restyled to match the hero chip exactly. The markup is
   8772's (#founderMeter / #founderLeft / #founderLeftLabel / #founderFill) and
   their JS writes into it, so nothing here changes structure — the progress
   track just stops being drawn. */
.founder-meter{
  display:inline-flex;align-items:center;
  max-width:none;width:auto;margin:22px auto 0;
  padding:9px 18px 9px 15px;border-radius:999px;
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(217,255,75,.12),rgba(217,255,75,.04));
  border:1px solid rgba(217,255,75,.34);
  box-shadow:0 8px 26px rgba(217,255,75,.10),inset 0 1px 0 rgba(255,255,255,.06);
}
.founder-meter::after{
  content:'';position:absolute;top:-60%;bottom:-60%;left:-40%;width:24%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:btnShimmer 5.6s ease-in-out infinite;
}
.founder-meter .founder-nums{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  font-size:13px;font-weight:700;letter-spacing:.012em;color:#e8ffb4;
}
/* the live dot + radar ring, drawn rather than added to their markup */
.founder-meter .founder-nums::before{
  content:'';position:relative;flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(217,255,75,.85);
}
.founder-meter .founder-nums b{
  font-size:13px;font-weight:800;color:var(--accent);letter-spacing:0;
}
.founder-meter .founder-track{display:none}
@media(prefers-reduced-motion:reduce){.founder-meter::after{animation:none;opacity:0}}



/* ---------- FOUNDING STRIP ----------
   A label and the live seat count, centred above the tiers. The cards state the
   code and the promise; the only thing left to say here is how many are left. */
.founder-strip{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:0 auto 30px;text-align:center;
}
.fs-label{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);
}
.founder-strip .founder-meter{margin:0}

/* Plain price, full size — it stays the value anchor. A thin lime rule through
   it does the work a second number would: the eye reads "this is what it costs,
   and it's been struck", then the badge underneath says by how much. */
.tier-price .amt{position:relative;text-decoration:none}
/* Drawn rather than text-decoration so the angle is tunable — change the rotate
   value alone to make the slash steeper or flatter. */
.tier-price .amt::after{
  content:'';position:absolute;left:-8%;right:-8%;top:50%;height:3px;border-radius:2px;
  background:var(--accent);
  transform:translateY(-50%) rotate(-23deg);   /* rises left-bottom -> right-top */
  transform-origin:center;
  box-shadow:0 0 12px rgba(217,255,75,.45);
  pointer-events:none;
}
.tier-price .per{color:var(--dim)}
/* Pro positioner — one line that makes the +$30 over Creator read as an operating tool, not a feature bump. */
.tier-tag{font-size:13px;color:var(--muted);line-height:1.45;margin:-2px 0 14px;max-width:34ch}
.tier-founding{
  display:block;margin:12px 0 2px;padding:11px 13px;border-radius:11px;
  background:rgba(217,255,75,.07);border:1px solid rgba(217,255,75,.32);
  line-height:1.35;
}
.tier-founding em{
  font-style:normal;font-family:var(--font-disp);font-weight:700;
  /* 17px wrapped "Founding rate — locked for 12 months" onto a second line and the
     orphaned "months" read as a layout bug. Sized to hold one line in both cards. */
  font-size:14.5px;letter-spacing:-.012em;color:var(--accent);white-space:nowrap;
}
@media (max-width:900px){ .tier-founding em{font-size:13.5px;white-space:normal} }
.tier-founding span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:4px}
.tier-founding span i{
  font-style:normal;display:grid;place-items:center;flex:none;
  width:14px;height:14px;border-radius:50%;
  background:rgba(217,255,75,.16);color:var(--accent);font-size:9px;font-weight:900;
}

/* The middle card is ours — it should be branded, not labelled. Logo mark plus
   the name in display type, sitting at the top-left corner of the card. */
.mcard.win .who.brand,
.mcard.win .who.brand [data-brand-name]{
  font-family:var(--font-disp);font-weight:700;font-size:21px;
  letter-spacing:-.025em;color:var(--tx);
}
.mcard.win .who.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.who-mark{
  width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(180deg,#E8FF7A,#D9FF4B 46%,#C2EE28);
  display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(217,255,75,.28);
}
.who-mark svg{width:17px;display:block}

/* Ghost, deliberately. Both tier buttons above lead to paid checkout, so without
   this the section dead-ends anyone not ready to pay — but a third filled lime
   button would flatten the hierarchy against Start Pro. */
/* Frosted, not transparent — the reel behind it was reading straight through
   the ghost button and muddying the label. */
.g-cta{
  margin-top:8px;padding:14px 34px;font-size:15px;
  background:rgba(18,16,24,.72);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);
}
.g-cta:hover{
  background:rgba(24,22,32,.82);
  border-color:rgba(217,255,75,.45);
}
.g-fine{position:relative;z-index:2;font-size:12.5px;color:var(--muted);margin-top:-4px}
.g-cta:hover{border-color:rgba(217,255,75,.45)}

/* legal page links in the landing footer */
footer .foot-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
footer .foot-links a{color:var(--dim);text-decoration:none}
footer .foot-links a:hover{color:var(--muted)}

/* [hidden] must win. Our own .founder-meter / .founder-pill display rules were
   overriding the browser's [hidden]{display:none}, so the counter rendered its
   "—" placeholder before the API answered — and would have sat there forever if
   the call ever failed. That defeats the whole "never show an unverified
   number" rule these elements were built around. */
.founder-meter[hidden],
.founder-pill[hidden],
.founder-strip [hidden]{display:none !important}

/* ── BILLING INTERVAL TOGGLE ───────────────────────────────────────────────────
   Annual is the DEFAULT selection, not a hidden alternative: the founding offer is
   a cash offer, and a visitor who never sees the annual price defaults to $19.50
   where the same seat could have been $195. The control sits directly above the
   cards so the number under it is always the number the toggle just chose. */
.billing-toggle{
  display:flex; justify-content:center; gap:4px;
  margin:0 auto 22px; padding:4px;
  width:max-content; max-width:100%;
  border:1px solid var(--line,#2a2a33); border-radius:999px;
  background:rgba(255,255,255,.02);
}
.bt-opt{
  appearance:none; border:0; cursor:pointer;
  padding:9px 18px; border-radius:999px;
  font:inherit; font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--muted,#9a9aa6); background:transparent;
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.bt-opt:hover{ color:var(--fg,#fff); }
.bt-opt.is-on{ background:var(--accent,#D9FF4B); color:#0a0a0a; }
.bt-opt i{ font-style:normal; opacity:.62; font-weight:600; margin-left:6px; font-size:12.5px; }
.bt-opt.is-on i{ opacity:.7; }
@media (max-width:520px){
  .bt-opt{ padding:9px 13px; font-size:13px; }
  .bt-opt i{ display:block; margin:1px 0 0; font-size:11.5px; }
}

/* FOUNDER FACE. 88px displayed from a 320px source, so it stays sharp at 2x and 3x. The photo's
   purple reads as a deliberate accent against #0a0a0a at this size; it is Patrik's actual profile
   picture everywhere else, and swapping it for something on-palette would throw away the
   recognition that is the entire reason it is here. */
.fnote-face{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line);background:#0a0a0a}
.fnote-who{display:flex;flex-direction:column;gap:3px;min-width:0}
@media(max-width:900px){.fnote-face{width:72px;height:72px}.fnote-sig{gap:12px}}
/* =====================================================================================
   MOBILE COMPOSITION
   ⚑ THE PAGE WAS 11.2 PHONE SCREENS AND ALMOST NONE OF THAT WAS CONTENT. Measured per
   section at 390px: pricing 1986px, hero 1826, audience 1235, math 1179 — plus 1024px of
   section padding on its own (64 top and bottom, eight times).

   The length came from LAYOUT, not from words: every row that sits side by side on desktop
   became a vertical stack. Two pricing cards became two screens. Three comparison cards
   became three. So the fix is to keep the desktop COMPOSITION and change the axis, rather
   than to cut sections a visitor came for.

   ⚠ THIS LIVES IN v3.css, NOT styles.css, AND THAT IS LOAD-BEARING. v3.css is the LAST
   stylesheet the page loads, and MEDIA QUERIES ADD NO SPECIFICITY — so `.math-grid{display:grid}`
   in v3.css beat the identical-specificity `display:flex` I first wrote in styles.css, and the
   pricing carousel worked while the comparison one silently did not. Same selector, same weight,
   later file wins. Rules that must beat v3.css belong in v3.css.
   ===================================================================================== */
@media (max-width:699px){

  /* 1. Air. 64px between sections is a desktop rhythm; on a 390px screen it is a scroll tax. */
  section{ padding:44px 0; }
  #founder{ padding-top:0; }

  /* 2. THE CARD ROWS SWIPE INSTEAD OF STACKING. This is the whole saving. A phone reads two
     pricing cards as "one, then scroll past it, then the other" — no comparison happens,
     which is the only reason a pricing table exists. Side by side with snap points restores
     the desktop reading and costs one screen instead of three.
     ⚠ scroll-padding + a peeking next card is what tells a thumb there IS a second card;
     without the peek it looks like a single card and nobody swipes. */
  .tiers, .math-grid{
    display:flex; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 16px 14px; margin-left:-16px; margin-right:-16px;
    scrollbar-width:none;
  }
  .tiers::-webkit-scrollbar, .math-grid::-webkit-scrollbar{ display:none; }
  .tiers > *, .math-grid > *{
    scroll-snap-align:center; flex:0 0 86%; min-width:0;
  }
  /* the winning card leads, so the first thing in view is the one we want compared */
  .math-grid .mcard:not(.win){ order:1; }
  .math-grid .mcard.win{ order:2; }
  /* both tiers no longer need to match height when only one is on screen at a time */
  .tiers{ align-items:flex-start; }

  /* 3. Tier internals: the same content in less vertical space. */
  .tier{ padding:22px 18px; }
  .tier-list li{ margin-bottom:9px; }
  .mcard{ padding:20px 18px; }

  /* 4. Headings stop eating a third of a screen each. */
  .head h2{ margin-bottom:10px; }

  /* ⚠ THE CARDS MUST SHARE A BOX ON PHONES, OR THE CROSS-FADE READS AS A COLLISION.
     Measured at 390px: auto-cut 145, batch 288, styles 442. Centre-aligned in one grid cell,
     those three heights mean a mid-fade frame shows two entirely different layouts at two
     different vertical offsets, overlapping — Patrik's "look at this, it's horrible". On desktop
     the same three are 207/288/251, close enough that a fade reads as a fade.
     align-self:center earns its place on desktop (it stops the short auto-cut card drawing a
     313px panel around 150px of waveform) and costs more than it earns here. Stretch, and the
     swap happens inside one box. */
  .hero-diagrams > *{ align-self:stretch; }
  /* and cap the tallest so the shared box is not driven by the caption grid alone */
  .sw-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .sw-cell:nth-child(n+7){ display:none; }   /* six previews is plenty at this width */
}