/* ==========================================================================
   Vyplio — alternative landing (v2)
   Shared styles for index.html and faq.html
   ========================================================================== */

:root{
  --dash:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='3' stroke-linecap='round'><path d='M5 12h14'/></svg>");
  --tick:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  --ink:#0e1a24;
  --slate:#5c7078;
  --slate2:#8aa0a8;
  --orange:#ff7a00;
  --orange-d:#ff6a00;
  --teal:#0fb5a6;
  --sky:#39bef8;
  --red:#ef4444;
  --glass:rgba(255,255,255,0.55);
  --gborder:rgba(255,255,255,0.75);
  --card-shadow:0 12px 40px rgba(14,26,36,0.14);
  --dialog-shadow:0 24px 60px rgba(14,26,36,0.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:"Manrope",-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scrollbar-gutter:stable;
  background:
    radial-gradient(48% 42% at 14% 8%,  rgba(255,122,0,0.34), transparent 62%),
    radial-gradient(50% 46% at 88% 12%, rgba(57,190,248,0.40), transparent 62%),
    radial-gradient(56% 52% at 80% 90%, rgba(15,181,166,0.34), transparent 62%),
    radial-gradient(52% 50% at 8% 94%,  rgba(57,190,248,0.28), transparent 62%),
    linear-gradient(160deg,#eaf3f6,#f4f8f9);
  background-attachment:fixed;
}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-d)}
h1,h2,h3{font-family:"Sora","Manrope",sans-serif;letter-spacing:-0.03em;margin:0}
button{font-family:inherit}
img{display:block}
video{display:block}

.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--gborder);
  box-shadow:var(--card-shadow);
}

.wrap{max-width:1200px;margin:0 auto;padding-left:clamp(24px,4vw,56px);padding-right:clamp(24px,4vw,56px)}

/* ---- logo mark ---- */
.logo{display:flex;align-items:center;gap:9px;font-family:"Sora",sans-serif;font-weight:700;letter-spacing:-0.03em;color:var(--ink)}
.logo .mark{width:26px;height:26px;flex:none}

/* ---- range sliders ---- */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:rgba(14,26,36,0.12);outline:none;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:999px;background:var(--orange);border:3px solid #fff;box-shadow:0 4px 12px rgba(255,122,0,0.4);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:999px;background:var(--orange);border:3px solid #fff;box-shadow:0 4px 12px rgba(255,122,0,0.4);cursor:pointer}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,transform .15s,box-shadow .2s}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-d)}
/* held down while the browser fetches the app, so the click never looks ignored */
.btn.is-sending{opacity:.72;transform:scale(.985);cursor:progress}
.btn-secondary{background:rgba(255,255,255,0.6);color:var(--ink);border:1px solid rgba(14,26,36,0.1)}
.btn-secondary:hover{background:#fff}

/* ---- nav ----
   Edge to edge and see-through over the hero, then it gathers itself into a
   floating glass pill as soon as you scroll. Vertical padding stays put
   through the change so the bar never changes height and nothing jumps. */
header{position:sticky;top:0;z-index:50}
.nav-shell{max-width:100%;margin:0 auto;padding:14px clamp(16px,3vw,40px);
  transition:max-width .4s cubic-bezier(.16,1,.3,1)}
nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-radius:0;padding:8px;
  background:transparent;border:1px solid transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:border-radius .4s cubic-bezier(.16,1,.3,1),padding .4s cubic-bezier(.16,1,.3,1),
    background .3s ease,border-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
header.lifted .nav-shell{max-width:1440px}
header.lifted nav{border-radius:18px;padding:8px 12px 8px 18px;
  background:var(--glass);border-color:var(--gborder);box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
/* the columns are pinned so the button still hugs the right edge on narrow
   screens, where the links in the middle are taken out altogether */
nav .logo{grid-column:1;font-size:19px;justify-self:start}
.nav-links{grid-column:2;display:flex;align-items:center;justify-content:center;gap:2px;font-size:14px;font-weight:600}
.nav-links a{color:var(--slate);padding:7px 16px;border-radius:999px;transition:background .15s,color .15s}
.nav-links a:hover{background:rgba(255,255,255,0.6);color:var(--ink)}
.nav-links a.on{background:rgba(255,255,255,0.7);color:var(--ink)}
/* the sign-in link rides in the same right-hand column as the CTA, so the two
   move together and the button still hugs the edge */
.nav-end{grid-column:3;display:flex;align-items:center;gap:16px;justify-self:end}
/* deliberately text, not a second button: the orange pill beside it is the only
   thing on the bar that should read as a press. Returning customers hunt for
   this word, everyone else should slide past it. */
.nav-signin{color:var(--orange);font-size:14px;font-weight:600;white-space:nowrap}
.nav-signin:hover{color:var(--orange-d)}
.nav-cta{height:44px;padding:0 22px;border-radius:999px}

/* ==========================================================================
   HERO (v2): swipe deck centred, media rails scrolling on both sides
   ========================================================================== */
/* the rails run nearly edge to edge, so the hero sets its own narrow inset
   instead of the usual page gutter */
.hero2{position:relative;display:flex;padding:clamp(8px,1.6vh,20px) 8px clamp(16px,3vh,34px);
  min-height:calc(100svh - 96px)}
.hero2-grid{
  display:grid;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  grid-template-columns:1fr minmax(0,640px) 1fr;
  gap:clamp(12px,1.6vw,22px);
  align-items:stretch;
}

/* --- side rails: two columns per side --- */
.hero2-side{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.hero2-rail{position:relative;overflow:hidden;width:100%;min-width:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.rail-track{position:absolute;left:0;right:0;top:0;display:block;will-change:transform}
.rail-track.down{animation:rail-down 46s linear infinite}
.rail-track.up{animation:rail-up 46s linear infinite}
.rail-track.slow{animation-duration:58s}
.hero2-rail:hover .rail-track{animation-play-state:paused}
.rail-item{position:relative;width:100%;aspect-ratio:9/16;margin-bottom:12px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.8);box-shadow:0 10px 26px rgba(14,26,36,0.15);background:var(--ink)}
.rail-item img,.rail-item video{width:100%;height:100%;object-fit:cover}
.rail-item .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,26,36,0.55),transparent 55%)}
/* a still slide needs the middle readable, not just the foot of the frame */
.rail-item .scrim.even{background:linear-gradient(to top,rgba(14,26,36,0.6),rgba(14,26,36,0.22) 45%,rgba(14,26,36,0.05))}
.pmid{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);text-align:center;
  font-family:"Sora","Manrope",sans-serif;font-weight:700;font-size:13px;line-height:1.25;color:#fff;
  text-shadow:0 2px 8px rgba(8,15,21,0.85),0 0 22px rgba(8,15,21,0.5);letter-spacing:-0.01em}
.rail-item .cap{position:absolute;left:8px;right:8px;bottom:26px;font-size:10px;font-weight:700;color:#fff;line-height:1.25;
  text-shadow:0 1px 6px rgba(14,26,36,0.5)}
@keyframes rail-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes rail-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}

/* ==========================================================================
   Post chrome: the counters that make a still read as a post
   ========================================================================== */
.pstats{position:absolute;left:8px;right:8px;bottom:7px;display:flex;align-items:center;gap:10px;
  font-size:10px;font-weight:700;color:rgba(255,255,255,0.92);text-shadow:0 1px 6px rgba(14,26,36,0.6)}
.pstat{display:inline-flex;align-items:center;gap:3px}
.pstat svg{width:11px;height:11px;flex:none;opacity:0.95}

/* the vertical rail, for the cards with room for it */
.prail{position:absolute;right:10px;bottom:74px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px}
.prail-b{display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;
  filter:drop-shadow(0 2px 6px rgba(14,26,36,0.55))}
.prail-b svg{width:25px;height:25px}
.prail-b i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:-0.01em}
.prail-b:first-child{animation:heart-beat 3.4s ease-in-out infinite}
@keyframes heart-beat{0%,86%,100%{transform:scale(1)}91%{transform:scale(1.17)}95%{transform:scale(0.97)}}

/* the watch-progress hairline every short-form player has */
.pbar{position:absolute;left:0;right:0;bottom:0;z-index:3;height:2.5px;background:rgba(255,255,255,0.26)}
.pbar i{display:block;height:100%;background:#fff;border-radius:0 2px 2px 0;animation:pbar 9s linear infinite}
@keyframes pbar{from{width:0}to{width:100%}}

/* ==========================================================================
   Ken Burns: a still that drifts reads as footage
   ========================================================================== */
@keyframes kenburns{
  from{transform:scale(1.06) translate3d(-1.1%,1.1%,0)}
  to{transform:scale(1.15) translate3d(1.1%,-1.1%,0)}
}
.rail-item img,.preset img,.idea img,.face img{
  animation:kenburns var(--kb,19s) ease-in-out var(--kbd,0s) infinite alternate;
  will-change:transform;
}
.rail-item:nth-child(3n) img{--kb:23s;--kbd:-4s}
.rail-item:nth-child(3n+1) img{--kb:17s;--kbd:-9s}
.idea:nth-child(2n) img{--kb:22s;--kbd:-6s}
.face:nth-child(2n) img{--kb:24s;--kbd:-8s}

/* --- centre column --- */
.hero2-core{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(8px,1.4vh,16px)}
/* the centre column sets how wide the headline runs, and the headline bleeds a
   little into the gutters either side so it can run wider than the column
   without taking width off the rails */
h1.hero2-title{font-size:clamp(28px,min(3.4vw,5vh),46px);line-height:1.14;font-weight:700;
  width:calc(100% + 28px);margin:0 -14px clamp(4px,1vh,12px);text-wrap:balance}

.url-form{width:100%;max-width:520px}
.input-shell{display:flex;align-items:center;gap:8px;padding:7px;border-radius:18px}
.input-shell input{flex:1;height:44px;border:none;background:transparent;outline:none;font-family:inherit;font-size:16px;color:var(--ink);min-width:0}
.input-shell .btn{height:44px;padding:0 20px;border-radius:12px;font-size:15px;white-space:nowrap}
.hero2-fine{margin:0;font-size:13px;font-weight:600;color:var(--slate2)}
.hero2-fine b{color:var(--orange);font-weight:700}
.url-confirm{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;border-radius:18px;text-align:left}
.url-confirm .ok{display:inline-flex;width:34px;height:34px;border-radius:999px;background:rgba(15,181,166,0.16);align-items:center;justify-content:center;flex:none}
.url-confirm .txt{font-size:15px;color:var(--ink);font-weight:500;line-height:1.45}

/* --- the swipe deck itself --- */
.deck-row{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,26px)}
.deck{position:relative;height:clamp(300px,50vh,470px);aspect-ratio:9/16;flex:none}
.deck .peek,.deck .tcard{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:var(--ink)}
.deck .peek{transform:scale(0.93) translateY(24px);box-shadow:0 12px 40px rgba(14,26,36,0.14);z-index:1}
.deck .peek img,.deck .peek video{width:100%;height:100%;object-fit:cover}
/* the card and peek swap their media wholesale, so the holder does the sizing */
.tcard-media{position:absolute;inset:0}
.tcard-media img,.tcard-media video{width:100%;height:100%;object-fit:cover}
.deck .peek .dim{position:absolute;inset:0;background:rgba(14,26,36,0.28);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.tcard{z-index:2;border:1px solid var(--gborder);box-shadow:var(--dialog-shadow);cursor:grab;touch-action:pan-y;user-select:none}
.tcard img,.tcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcard-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,26,36,0.8),transparent 52%)}
.tcard-hook{position:absolute;left:16px;right:62px;bottom:18px;font-family:"Sora",sans-serif;font-weight:700;font-size:clamp(15px,1.5vw,19px);color:#fff;line-height:1.16;text-align:left;text-wrap:balance}
.stamp{position:absolute;top:16px;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,0.85);font-size:13px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;opacity:0;pointer-events:none;z-index:3}
.stamp svg{width:15px;height:15px}
.stamp-approve{left:16px;border:2px solid var(--teal);color:var(--teal);transform:rotate(-8deg)}
.stamp-skip{right:16px;border:2px solid var(--red);color:var(--red);transform:rotate(8deg)}
.picked{margin:0;min-height:15px;font-size:11px;font-weight:500;letter-spacing:0.01em;color:rgba(92,112,120,0.5)}
.tact-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.tbtn{width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--gborder);box-shadow:var(--card-shadow);transition:transform .15s,background .15s}
.tbtn:hover{transform:scale(1.06)}
.tbtn-skip{color:var(--red)}
.tbtn-approve{color:var(--teal)}
kbd.hint{border-radius:8px;background:rgba(255,255,255,0.6);padding:2px 9px;font-size:12px;font-weight:600;color:var(--slate);font-family:inherit;line-height:1.4}

.built-for{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.built-for .label{font-size:13px;font-weight:700;color:var(--slate2)}
.chip-static{padding:6px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--gborder);font-size:12px;font-weight:600}

/* ==========================================================================
   section shells
   ========================================================================== */
section{scroll-margin-top:88px}
.sec{padding-top:72px;padding-bottom:24px}
/* the demo ends on its own caption, so it does not need a full section gap
   before the try card underneath it */
#how{padding-bottom:clamp(12px,2vh,28px)}
#try{padding-top:36px}
.sec-head{text-align:center;margin-bottom:40px}
.eyebrow{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(255,122,0,0.16);color:var(--orange);font-size:12px;font-weight:700;margin-bottom:14px}
.sec-head h1,.sec-head h2{font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.06;max-width:24ch;margin:0 auto}
.sec-head p{max-width:56ch;margin:16px auto 0;font-size:16px;color:var(--slate);text-wrap:pretty}

/* ==========================================================================
   HOW IT WORKS: one full screen, the app walking itself through three states
   ========================================================================== */
/* just under a full screen: the demo still reads as its own screen, without
   parking a band of empty space between its caption and the card below */
.sec-full{min-height:92svh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(12px,2vh,22px);padding-top:clamp(24px,4vh,56px);padding-bottom:clamp(24px,4vh,56px)}
.demo-head{text-align:center}
.demo-head .eyebrow{margin-bottom:10px}
/* wide enough to hold the headline on one line; it only wraps once the screen
   itself is too narrow for it */
.demo-head h2{font-size:clamp(25px,3.2vw,40px);font-weight:700;line-height:1.08;max-width:32ch;margin:0 auto}

/* --- step rail --- */
.demo-rail{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.demo-step{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px 12px;border-radius:999px;border:1px solid rgba(14,26,36,0.07);
  background:rgba(255,255,255,0.45);cursor:pointer;color:var(--slate);
  font-size:13px;font-weight:600;transition:color .2s,background .2s,box-shadow .2s}
.demo-step:hover{background:rgba(255,255,255,0.75);color:var(--ink)}
.demo-step .n{font-family:"Sora",sans-serif;font-size:13px;font-weight:700;color:var(--slate2)}
.demo-step.on{background:#fff;color:var(--ink);box-shadow:0 10px 26px rgba(14,26,36,0.12)}
.demo-step.on .n{color:var(--orange)}
.demo-step .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(14,26,36,0.07)}
.demo-step .bar s{display:block;height:100%;width:0;background:var(--orange)}

/* --- stage --- */
.demo-stage{border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
/* the card kept its outer size when the title bar came off: the body took back
   exactly the height the bar used to occupy */
.demo-body{position:relative;height:clamp(340px,55vh,500px)}
.demo-pane{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,2.2vw,26px);
  opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.demo-pane.on{opacity:1;transform:none;pointer-events:auto}
.demo-pane > *{width:100%}
/* held at two lines so the page does not shift as the caption changes length */
.demo-cap{margin:0 auto;text-align:center;font-size:15px;line-height:1.5;color:var(--slate);
  max-width:62ch;min-height:2.9em}

/* --- 01: read the brand --- */
.d1{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.2vh,22px)}
.d1 .input-shell{width:min(440px,100%)}
.d1-ico{display:inline-flex;align-items:center;padding-left:12px;color:var(--slate2);flex:none}
/* a typed-into field rather than a real input: the reader watches, they do not edit */
.d1-field{flex:1;min-width:0;display:flex;align-items:center;height:44px;font-size:16px;color:var(--ink)}
.d1-caret{width:2px;height:19px;margin-left:2px;background:var(--orange);opacity:0}
.d1-caret.on{animation:blink 1s step-end infinite}
.d1-card{width:min(520px,100%);border-radius:18px;background:rgba(255,255,255,0.85);
  border:1px solid var(--gborder);padding:18px 20px;box-shadow:0 6px 20px rgba(14,26,36,0.07)}
/* skeleton sits on top of the rows so the card never changes size mid-read */
.d1-body{position:relative}
.d1-skel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transition:opacity .25s ease;pointer-events:none}
.d1-skel.on{opacity:1}
.d1-status{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:11px;font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;color:var(--slate2)}
.d1-dot{width:7px;height:7px;border-radius:999px;background:rgba(14,26,36,0.18);flex:none}
.d1-status.reading .d1-dot{background:var(--orange);animation:pulse 1s ease-in-out infinite}
.d1-status.done{color:var(--teal)}
.d1-status.done .d1-dot{background:var(--teal)}
.d1-skel i{height:14px;border-radius:999px;background:linear-gradient(90deg,rgba(14,26,36,0.07),rgba(14,26,36,0.13),rgba(14,26,36,0.07));
  background-size:220% 100%;animation:shimmer 1.1s linear infinite}
.d1-skel i:nth-child(2){width:82%}
.d1-skel i:nth-child(3){width:64%}
.d1-row{opacity:0;transform:translateY(6px);transition:opacity .32s ease,transform .32s ease}
.d1-row.on{opacity:1;transform:none}
.read-rows{display:grid;gap:10px}
.read-row{display:flex;gap:10px;align-items:flex-start}
.read-row .k{font-size:11px;font-weight:700;color:var(--slate2);width:74px;flex:none;padding-top:5px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{padding:5px 10px;border-radius:999px;background:#fff;border:1px solid rgba(14,26,36,0.06);font-size:12px;font-weight:600}
.tag.hot{background:rgba(255,122,0,0.14);color:var(--orange);font-weight:700;border:none}

/* --- 02: swipe through today's feed ---
   The card spans both rows, so its top edge lines up with the counter and the
   hint. Reading across: skip line, X, card, check, keep line. */
.d2{height:100%;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr;
  column-gap:clamp(10px,1.6vw,20px);row-gap:10px}
.d2-badge{grid-column:1;grid-row:1;justify-self:start;align-self:start;
  font-size:13px;font-weight:600;color:var(--slate)}
.d2-badge b{font-family:"Sora",sans-serif;font-size:19px;color:var(--ink);letter-spacing:-0.03em}
.d2-hint{grid-column:3;grid-row:1;justify-self:end;align-self:start;
  font-size:12px;font-weight:600;color:var(--slate2)}
.d2-deck{grid-column:2;grid-row:1 / span 2;justify-self:center;height:100%;min-height:0;aspect-ratio:9/16}
.d2-side{grid-row:1 / span 2;display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);min-width:0}
.d2-side.left{grid-column:1;justify-content:flex-end}
.d2-side.right{grid-column:3;justify-content:flex-start}
.d2-side .tbtn{flex:none}
/* card-shaped, filled green on a keep and red on a skip. Width is held whether
   or not the line is showing, so nothing shifts around it. */
.d2-bubble{width:clamp(150px,15vw,196px);flex:none;padding:16px 18px;border-radius:20px;color:#fff;
  font-size:13px;font-weight:700;line-height:1.35;box-shadow:0 14px 32px rgba(14,26,36,0.2);
  opacity:0;transform:scale(0.92);
  transition:opacity .28s ease,transform .28s cubic-bezier(.32,.72,0,1)}
.d2-bubble.yes{background:linear-gradient(158deg,#12c6b5,#0b8478)}
.d2-bubble.no{background:linear-gradient(158deg,#f2564f,#cd2f2f)}
.d2-bubble.on{opacity:1;transform:none}
.d2-say{display:none;margin:0;text-align:center;font-size:13px;font-weight:700;min-height:18px}
.d2-say.yes{color:#0b8478}
.d2-say.no{color:var(--red)}

/* --- 03: the month, posting itself --- */
.d3{height:100%;display:flex;flex-direction:column;gap:8px}
.d3-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.d3-month{font-family:"Sora",sans-serif;font-size:17px;font-weight:700;letter-spacing:-0.03em}
.d3-stats{display:flex;gap:18px;font-size:12px;font-weight:600;color:var(--slate)}
.d3-stats b{font-family:"Sora",sans-serif;font-size:15px;color:var(--ink);letter-spacing:-0.03em}
.d3-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.d3-dow span{text-align:center;font-size:10px;font-weight:700;color:var(--slate2)}
.d3-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:6px}
.d3-cell{display:flex;flex-direction:column;justify-content:space-between;gap:3px;
  padding:5px 7px;border-radius:10px;min-width:0;min-height:48px;overflow:hidden;
  background:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.85)}
.d3-cell.blank{background:transparent;border-color:transparent}
.d3-cell.past{background:rgba(255,255,255,0.5)}
.d3-cell.today{background:rgba(255,122,0,0.1);border-color:rgba(255,122,0,0.55)}
.d3-num{font-size:10px;font-weight:700;color:var(--slate2);line-height:1}
.d3-cell.today .d3-num{color:var(--orange)}
.d3-post{display:flex;align-items:center;gap:5px;min-width:0;opacity:0;transform:scale(0.7);
  transition:opacity .28s ease,transform .28s cubic-bezier(.32,.72,0,1)}
.d3-post.pop{opacity:1;transform:none}
.d3-status{font-size:9px;font-weight:700;color:var(--slate2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d3-status.posted{color:var(--teal)}
.d3-mark{width:17px;height:17px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.d3-mark svg{width:11px;height:11px;color:#fff}
.d3-mark.tt{background:var(--ink)}
.d3-mark.ig{background:linear-gradient(135deg,#f9a03f,#dd2a7b 55%,#8134af)}
.d3-mark.yt{background:#ff0033}
.d3-mark.fb{background:#1877f2}

.idea{position:relative;flex:1;max-width:150px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,0.8);box-shadow:var(--card-shadow)}
.idea img,.idea video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.idea .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,26,36,0.6),transparent 60%)}
.idea .niche{position:absolute;top:8px;left:8px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,0.85);font-size:10px;font-weight:700;color:var(--ink)}
.idea-hook{position:absolute;left:8px;right:8px;bottom:26px;font-size:11px;font-weight:700;color:#fff;line-height:1.2;
  text-shadow:0 1px 6px rgba(14,26,36,0.5)}
.idea .heart{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;color:var(--orange)}
.idea .heart svg{width:15px;height:15px}

/* ---- try it before you pay ---- */
.try-card{border-radius:24px;padding:44px clamp(24px,4vw,56px);text-align:center}
.try-card h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;line-height:1.08;max-width:18ch;margin:0 auto}
.try-card p{max-width:60ch;margin:16px auto 0;font-size:16px;line-height:1.55;color:var(--slate)}
.try-card .url-form{margin:26px auto 0}

/* ---- every plan includes ---- */
.includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.include-card{border-radius:22px;padding:26px;display:flex;gap:16px;align-items:flex-start}
.include-card .ico{display:inline-flex;width:46px;height:46px;border-radius:14px;align-items:center;justify-content:center;flex:none}
.include-card h3{font-size:17px;font-weight:600;line-height:1.25;margin-bottom:8px}
.include-card p{font-size:14px;line-height:1.55;color:var(--slate);margin:0}
.includes-note{text-align:center;font-size:15px;color:var(--slate);margin:8px 0 0}

/* ---- pricing toggle ---- */
.toggle{display:inline-flex;align-items:center;gap:4px;margin-top:22px;padding:4px;border-radius:999px}
.toggle button{border:none;cursor:pointer;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:600;background:transparent;color:var(--slate);display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s}
.toggle button.active{background:var(--orange);color:#fff}
.save-tag{padding:2px 8px;border-radius:999px;background:rgba(15,181,166,0.2);color:#0b8478;font-size:11px;font-weight:700}
.toggle button.active .save-tag{background:rgba(255,255,255,0.25);color:#fff}

/* ---- plans ---- */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.plan{position:relative;border-radius:22px;padding:26px 22px;display:flex;flex-direction:column}
.plan.popular{background:rgba(255,255,255,0.62);box-shadow:0 20px 50px rgba(14,26,36,0.18);border:1px solid rgba(255,122,0,0.4)}
.plan.recommended{border:1px solid var(--orange);box-shadow:0 20px 50px rgba(255,122,0,0.22)}
.popular-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.plan-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:26px}
.plan-name{font-size:20px;font-weight:600}
.best-badge{display:none;padding:4px 10px;border-radius:999px;background:var(--orange);color:#fff;font-size:11px;font-weight:700}
.plan.recommended .best-badge{display:inline-block}
/* Locked height: Max carries a word plus a phrase where the others carry a figure,
   and when that wrapped it stood 8px taller and pushed its whole card out of step
   with the other three. */
.plan-price{display:flex;align-items:baseline;gap:4px;margin-top:10px;
  min-height:40px;flex-wrap:nowrap}
.plan-price .per{white-space:nowrap}
.plan-price .amt{font-family:"Sora",sans-serif;font-size:32px;font-weight:700;letter-spacing:-0.03em}
.plan-price .per{font-size:14px;color:var(--slate2);font-weight:600}
/* Max only. A word where the other three cards carry a figure: at the full 32px it
   overhangs the card, and the row it sits in has to keep the same height as theirs or
   the four cards stop lining up. */
.plan-price .amt-word{font-size:26px}
.plan-credits{display:inline-block;margin-top:12px;padding:6px 12px;border-radius:999px;background:rgba(255,122,0,0.14);color:var(--orange);font-size:13px;font-weight:700;align-self:flex-start}
/* No min-height: empty on monthly, it held a 16px slot plus its margin in every card,
   which read as dead space under the credit chip. All four cards gain the line together
   on the annual toggle, so they stay aligned; the section just grows a row. */
.annual-note{font-size:12px;font-weight:700;color:var(--teal)}
.annual-note:not(:empty){margin-top:8px}
/* flex:1 so the list, not the paragraph below it, takes up the leftover height.
   With margin-top:auto on .plan-best its top was measured from the bottom, so a card
   whose Best-for ran to two lines instead of three put its divider rule 5px off the
   other three. */
.plan-feats{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;
  gap:10px;flex:1}
.plan-feats li{display:flex;gap:9px;font-size:13px;line-height:1.45;color:var(--ink)}
/* Rewriting the cards dropped the inline tick SVGs, which left every line as flat text with
   nothing to scan by. These draw the marker from the class instead, so the copy stays clean. */
.plan-feats li::before{content:"";width:14px;height:14px;flex:none;margin-top:2px;
  background:var(--slate2);opacity:.45;
  -webkit-mask:var(--dash) center/contain no-repeat;mask:var(--dash) center/contain no-repeat}
.plan-feats li.tick::before{background:var(--teal);opacity:1;
  -webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.plan-feats li svg{flex:none;margin-top:3px;color:var(--teal);width:14px;height:14px}
.plan-feats li.limit{color:var(--slate)}
.plan-feats li.limit svg{color:var(--slate2)}
.plan-best{padding-top:16px;border-top:1px solid rgba(14,26,36,0.08);font-size:13px;line-height:1.5;color:var(--slate);min-height:6em}
.plan-best b{color:var(--ink);font-weight:700}
.plan .cta{margin-top:16px;height:44px;border-radius:14px;width:100%}

/* ---- plan calculator ---- */
.calc-card{position:relative;margin-top:24px;border-radius:22px;padding:28px clamp(24px,3vw,36px) 34px;display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,3vw,40px);align-items:stretch}
.calc-head{margin-bottom:18px}
.calc-head h3{font-size:19px;font-weight:600}
.calc-head p{font-size:13px;color:var(--slate2);margin:4px 0 0;font-weight:600}
.calc-chip-label{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate2);margin-bottom:10px}
.calc-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;padding:8px 14px;border-radius:999px;border:1px solid rgba(14,26,36,0.15);background:rgba(255,255,255,0.55);font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.chip:hover{border-color:var(--orange)}
/* what the chip does, on hover — or on the first tap where hover doesn't exist */
.chip-tip{position:absolute;bottom:calc(100% + 8px);left:50%;z-index:5;width:max-content;max-width:230px;transform:translate(-50%,4px);padding:9px 12px;border-radius:12px;background:var(--ink);color:#fff;font-size:12px;font-weight:500;line-height:1.4;text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 10px 24px rgba(14,26,36,0.25);transition:opacity .15s,transform .15s,visibility .15s}
.chip-tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--ink)}
.chip:hover .chip-tip,.chip:focus-visible .chip-tip,.chip.peek .chip-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (hover:none){.chip:hover .chip-tip{opacity:0;visibility:hidden}.chip.peek .chip-tip{opacity:1;visibility:visible}}
.chip.on{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(255,122,0,0.3)}
.calc-hint{min-height:16px;margin-top:8px;font-size:12px;font-weight:600;color:var(--orange);opacity:0;transition:opacity .2s}
.calc-hint.show{opacity:1}
.calc-right{display:flex;flex-direction:column;justify-content:center;gap:20px}
.calc-controls{display:flex;flex-direction:column;gap:18px}
.calc-controls:empty{display:none}
.slider-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:12px}
.sl-desc{margin:0 0 10px;font-size:12px;line-height:1.45;font-weight:500;color:var(--slate2)}
.slider-top .lab{font-size:14px;font-weight:600}
.slider-top .val{font-size:14px;font-weight:700;color:var(--orange);white-space:nowrap}
.calc-info .lab{font-size:14px;font-weight:600}
.calc-info p{margin:4px 0 0;font-size:13px;color:var(--slate);font-weight:500}
.calc-empty{display:flex;align-items:center;justify-content:center;min-height:190px;margin:0;text-align:center;font-size:14px;font-weight:600;color:var(--slate2)}
.calc-empty[hidden]{display:none}

/* ---- your AI creator ---- */
.creator-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
/* real posts are 9:16, so the tiles keep that shape instead of cropping the caption away */
.creator-grid .idea{max-width:none;aspect-ratio:9/16}
.creator-note{margin-top:22px;text-align:center;font-size:15px;line-height:1.6;color:var(--slate);max-width:60ch;margin-left:auto;margin-right:auto}
.creator-note b{color:var(--ink)}
.band{display:flex;flex-direction:column;gap:12px;margin-top:34px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.band-track{overflow:hidden}
.band-row{display:flex;gap:12px;width:max-content}
.band-row.a{animation:marquee-left 38s linear infinite}
.band-track:hover .band-row{animation-play-state:paused}
.face{position:relative;width:120px;aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.8);box-shadow:0 10px 30px rgba(14,26,36,0.16);transition:transform .25s}
.face:hover{transform:translateY(-5px)}
.face img,.face video{width:100%;height:100%;object-fit:cover}
.face .cap{position:absolute;left:8px;right:8px;bottom:8px;display:block;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,0.85);font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar-note{display:flex;justify-content:center;margin-top:24px}
.avatar-note .inner{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:999px}
.avatar-stack{display:inline-flex}
.avatar-stack img{width:30px;height:30px;border-radius:999px;object-fit:cover;border:2px solid #fff}
.avatar-stack img+img{margin-left:-10px}
.avatar-note .txt{font-size:14px;font-weight:600;color:var(--ink)}

/* ==========================================================================
   The media sections ride the same page background as everything above them
   ========================================================================== */
#studio{padding-bottom:64px}
#formats{padding-top:64px;padding-bottom:80px}
.sec-sub{max-width:56ch;margin:16px auto 0;font-size:16px;color:var(--slate);text-wrap:pretty}

/* ---- video studio: the clip on the left, all of the words to its right ---- */
.studio-grid{display:grid;grid-template-columns:minmax(240px,510px) 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.studio-grid .wipe{margin:0}
/* the flow below the copy lays itself out against this column, not the window:
   the column is narrow at 1000px wide and roomy at 700px, where the grid stacks */
.studio-copy{text-align:left;container-type:inline-size}
.studio-copy h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;line-height:1.08;max-width:22ch;margin:0 0 16px}
.studio-copy h3{font-size:clamp(19px,2.1vw,24px);font-weight:600;line-height:1.2;margin-bottom:10px}
.studio-copy p{font-size:15px;line-height:1.6;color:var(--slate);margin:0}
.studio-copy p b{color:var(--ink)}
.studio-copy .credits-line{margin-top:14px;font-size:14px;color:var(--ink);font-weight:600}

/* ---- the three moves, running themselves on one 9s clock ----
   every step holds its finished state as the base style, so the animation only
   ever hides and replays it: with motion turned off the whole flow still reads */
/* minmax(0,…) rather than 1fr: otherwise each card floors at its own content
   width and the three come out different sizes */
.paste-flow{display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(6px,0.8vw,12px);align-items:stretch;margin-top:28px}
.pf-step{position:relative;display:flex;flex-direction:column;gap:9px;padding:13px;
  border-radius:16px;background:rgba(255,255,255,0.55);border:1px solid var(--gborder);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 8px 26px rgba(14,26,36,0.08);
  animation:pf-lit 9s ease-in-out infinite}
.pf-step.s2{animation-delay:-6s}
.pf-step.s3{animation-delay:-3s}
@keyframes pf-lit{
  0%,28%{border-color:rgba(255,122,0,0.5);box-shadow:0 12px 32px rgba(255,122,0,0.16)}
  38%,100%{border-color:var(--gborder);box-shadow:0 8px 26px rgba(14,26,36,0.08)}
}
.pf-cap{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--slate)}
.pf-cap b{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:17px;height:17px;border-radius:999px;background:var(--orange);color:#fff;font-size:10px}

/* step 1: the link you copied, and the badge that says you did */
/* tighter than the field opposite it: the link glyph has to earn its room, so
   the same 23 characters fit here and in step 2 without one of them ellipsizing */
.pf-url{display:flex;align-items:center;gap:5px;min-width:0;height:32px;padding:0 7px;
  border-radius:10px;background:rgba(255,255,255,0.75);border:1px solid var(--gborder);
  color:var(--slate2)}
.pf-urltext{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-copied{position:absolute;top:11px;right:11px;padding:3px 8px;border-radius:999px;
  background:var(--teal);color:#fff;font-size:10px;font-weight:700;line-height:1.3;
  animation:pf-pop 9s ease-in-out infinite}
@keyframes pf-pop{
  0%,15%{opacity:0;transform:translateY(-4px) scale(.9)}
  22%,33%{opacity:1;transform:none}
  42%,100%{opacity:0;transform:translateY(-4px) scale(.9)}
}

/* step 2: the link typing itself into the field, then the button going down */
.pf-field{display:flex;align-items:center;height:32px;padding:0 9px;border-radius:10px;
  background:#fff;border:1px solid var(--gborder);overflow:hidden}
.pf-typed{display:block;width:23ch;max-width:100%;overflow:hidden;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:600;
  color:var(--ink);border-right:1.5px solid transparent;
  animation:pf-type 9s steps(23,end) infinite}
@keyframes pf-type{
  0%,33%{width:0;border-right-color:var(--orange)}
  56%{width:23ch;border-right-color:var(--orange)}
  60%,100%{width:23ch;border-right-color:transparent}
}
.pf-go{align-self:flex-start;padding:5px 12px;border-radius:999px;background:var(--orange);
  color:#fff;font-size:11px;font-weight:700;animation:pf-press 9s ease-in-out infinite}
@keyframes pf-press{
  0%,57%{transform:none}
  61%{transform:scale(.92)}
  66%,100%{transform:none}
}

/* step 3: the post, back with your creator in it */
.pf-out{display:flex;align-items:center;gap:9px;animation:pf-reveal 9s ease-out infinite}
@keyframes pf-reveal{
  0%,66%{opacity:0;transform:translateY(6px) scale(.97)}
  74%,96%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(6px) scale(.97)}
}
.pf-thumb{flex:none;width:44px;height:78px;object-fit:cover;border-radius:8px;
  border:1px solid var(--gborder);box-shadow:0 6px 16px rgba(14,26,36,0.16)}
.pf-done{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  line-height:1.35;color:var(--ink)}
.pf-done svg{flex:none;color:var(--teal)}

/* the hand-off between steps */
.pf-arrow{--pf-turn:0deg;display:flex;align-items:center;justify-content:center;color:var(--slate2)}
.pf-arrow svg{transform:rotate(var(--pf-turn));animation:pf-nudge 9s ease-in-out infinite}
.pf-arrow.a1 svg{animation-delay:-6s}
.pf-arrow.a2 svg{animation-delay:-3s}
@keyframes pf-nudge{
  0%{transform:rotate(var(--pf-turn)) translateX(-3px);opacity:.4}
  6%{transform:rotate(var(--pf-turn)) translateX(3px);opacity:1}
  14%,100%{transform:rotate(var(--pf-turn));opacity:.4}
}

/* not enough column for three across: the flow runs down, arrows turning with it.
   the turn rides a custom property because the keyframes above also write
   transform, and an animation outranks a plain declaration. this block has to
   sit after the rules it overrides: @container adds no specificity of its own */
@container (max-width:640px){
  .paste-flow{grid-template-columns:minmax(0,1fr);gap:8px}
  .pf-arrow{--pf-turn:90deg}
}

/* Original beside rebuild. They are different takes rather than the same frames,
   so they sit side by side: a slider would imply an alignment that is not there.
   The labels sit above the frames so the comparison reads before the video does. */
.pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:clamp(8px,1.2vw,16px);
  max-width:560px;width:100%;justify-self:center}
.pair-side{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.pair-lab{align-self:center;padding:7px 18px;border-radius:999px;
  font-family:"Sora",sans-serif;font-size:15px;font-weight:700;letter-spacing:-0.01em;white-space:nowrap}
.pair-lab.trend{background:rgba(255,255,255,0.9);color:var(--ink);border:1px solid var(--gborder)}
.pair-lab.yours{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(255,122,0,0.35)}
.pair-media{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.7);box-shadow:0 24px 60px rgba(14,26,36,0.28);background:#0c141b}
.pair-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the arrow is the whole argument, so it is sized like it */
.pair-arrow{flex:none;color:var(--orange);display:flex;align-items:center;justify-content:center;
  align-self:center;margin-bottom:6px}
.pair-arrow svg{width:clamp(34px,4vw,52px);height:clamp(34px,4vw,52px)}

/* the before / after wipe: one frame, two faces, sweeping on its own */
.wipe{position:relative;width:100%;max-width:320px;margin:0 auto;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  cursor:ew-resize;touch-action:pan-y;user-select:none;
  border:1px solid rgba(255,255,255,0.7);box-shadow:0 24px 60px rgba(14,26,36,0.22);
  --w:50%;animation:wipe-sweep 7s ease-in-out infinite alternate}
.wipe.manual{animation:none}
@keyframes wipe-sweep{0%{--w:26%}100%{--w:74%}}
@property --w{syntax:"<percentage>";inherits:true;initial-value:50%}
.wipe img,.wipe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wipe-over{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--w)) 0 0)}
.wipe-lab{position:absolute;top:12px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wipe-lab.left{left:12px;background:rgba(255,255,255,0.85);color:var(--ink)}
.wipe-lab.right{right:12px;background:var(--orange);color:#fff}
.wipe-handle{position:absolute;top:0;bottom:0;left:var(--w);width:2px;margin-left:-1px;background:rgba(255,255,255,0.9);
  box-shadow:0 0 18px rgba(0,0,0,0.5)}
.wipe-handle i{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:999px;
  background:rgba(255,255,255,0.95);box-shadow:0 6px 20px rgba(0,0,0,0.4)}
.wipe-handle i::before,.wipe-handle i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-4px;
  border-top:4px solid transparent;border-bottom:4px solid transparent}
.wipe-handle i::before{left:8px;border-right:5px solid var(--ink)}
.wipe-handle i::after{right:8px;border-left:5px solid var(--ink)}
.wipe-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:4px 11px;border-radius:999px;
  background:rgba(8,15,21,0.6);color:rgba(255,255,255,0.85);font-size:11px;font-weight:700;white-space:nowrap;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .3s}
.wipe.manual .wipe-hint{opacity:0}

/* ---- the format wall ---- */
.preset-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px)}
.preset{position:relative;margin:0;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#111c24;
  border:1px solid rgba(255,255,255,0.7);transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s}
.preset:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(14,26,36,0.26);border-color:rgba(255,122,0,0.6)}
.preset img,.preset video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.preset-scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,9,13,0.8),transparent 32%),
             linear-gradient(to bottom,rgba(4,9,13,0.5),transparent 24%)}
/* carousels say so, the way they do in a feed */
.pslides{position:absolute;top:7px;right:7px;z-index:3;display:inline-flex;align-items:center;gap:3px;
  padding:3px 7px;border-radius:999px;background:rgba(8,15,21,0.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:10px;font-weight:700;color:#fff;line-height:1}
.pslides svg{width:11px;height:11px}
/* on the big cards the badge clears the format name and sits a little larger */
.pslides-slot .pslides{top:12px;right:12px;padding:4px 9px;font-size:11px}
.pslides-slot .pslides svg{width:13px;height:13px}
.preset .pslides{top:auto;bottom:24px;right:8px}
/* the clip carries its own caption, so the format name rides at the top */
.preset-name{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);padding:4px 9px;border-radius:999px;
  background:rgba(8,15,21,0.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:"Sora",sans-serif;font-size:11px;font-weight:700;color:#fff;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- go annual: rides above the plans, only while annual is the pick ---- */
.annual-card{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,3vw,36px);align-items:center;
  margin-bottom:28px;border-radius:24px;padding:28px clamp(22px,3vw,36px);
  background:linear-gradient(150deg,#0e1a24,#12313a);box-shadow:var(--dialog-shadow);color:#fff}
/* the display above would otherwise win over the hidden attribute */
.annual-card[hidden]{display:none}
.annual-card h2{font-size:clamp(21px,2.4vw,29px);font-weight:700;line-height:1.14;color:#fff;margin:0}
.annual-card p{font-size:15px;line-height:1.55;color:rgba(255,255,255,0.78);margin:12px 0 0}
.annual-card .growth-chart{height:132px;margin-top:0}
.growth-chart{display:flex;align-items:flex-end;gap:18px;height:150px;margin-top:22px}
.growth-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.growth-bar{width:100%;border-radius:10px 10px 0 0;background:linear-gradient(180deg,var(--orange),rgba(255,122,0,0.5))}
.growth-col:nth-child(2) .growth-bar{background:linear-gradient(180deg,var(--sky),rgba(57,190,248,0.5))}
.growth-col:nth-child(3) .growth-bar{background:linear-gradient(180deg,var(--teal),rgba(15,181,166,0.5))}
.growth-col .gm{font-size:11px;font-weight:700;color:rgba(255,255,255,0.7)}
.growth-col .gx{font-family:"Sora",sans-serif;font-size:15px;font-weight:700;color:#fff}

/* ---- FAQ accordion ---- */
/* the quieter line under the calculator ask */
/* the badge names the plan and nothing else */
/* Was a large orange pill pinned to the card corner, half outside it and overlapping
   the band below, while being the loudest thing on the page and not clickable. Now a
   quiet label sitting directly above the price it refers to. */
.calc-rec{display:block;font-size:12px;font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--slate2)}
.calc-rec[hidden]{display:none}
.calc-rec b,.calc-rec #calcRec{color:var(--orange)}
/* Directly above the button, in the column the sliders are in. In the corner badge it
   was a long way from the control being dragged, and the badge already names the plan. */
.calc-price{display:flex;align-items:baseline;gap:4px;font-family:"Sora",sans-serif;
  font-size:30px;font-weight:700;letter-spacing:-0.03em;color:var(--ink)}
.calc-price .cp-per{font-family:"Manrope",sans-serif;font-size:14px;font-weight:600;
  letter-spacing:0;color:var(--slate2)}
/* where the recommendation gets acted on. The price rides on the button, so Max
   can never be bought without it having been read first. */
.calc-buy{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.calc-buy[hidden]{display:none}
.calc-buy .btn{height:44px;padding:0 22px;font-size:15px}
.calc-buy p{margin:0;font-size:13px;line-height:1.5;color:var(--slate2)}
/* only Max earns a line here, so the slot collapses for everyone else */
.calc-buy p:empty{display:none}
.calc-note{margin-top:10px;font-size:13px;line-height:1.5;color:var(--slate2)}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
/* the questions come in groups, so each one announces itself before its block */
.faq-group{font-size:14px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--slate2);margin:28px 0 4px;padding-left:4px}
.faq-group:first-child{margin-top:0}
.faq{border-radius:18px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-family:"Sora",sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:none;transition:transform .2s;color:var(--slate2)}
.faq[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:0 24px 22px;font-size:15px;line-height:1.65;color:var(--slate)}
.faq .ans b{color:var(--ink);font-weight:700}
.faq .ans p{margin:0 0 12px}
.faq .ans p:last-child{margin-bottom:0}

/* ---- page head (subpages) ---- */
.page-head{padding-top:clamp(28px,6vh,64px);text-align:center}
.page-head h1{font-size:clamp(32px,5vw,52px);font-weight:700;line-height:1.05;max-width:20ch;margin:0 auto}
.page-head p{max-width:58ch;margin:16px auto 0;font-size:17px;line-height:1.55;color:var(--slate)}

/* ---- final CTA ---- */
.final{padding-top:72px;padding-bottom:40px}
.final-card{position:relative;overflow:hidden;text-align:center;border-radius:28px;padding:64px 32px;background:linear-gradient(150deg,#0e1a24,#12313a);box-shadow:var(--dialog-shadow)}
/* a post playing behind the last ask, dimmed right down so the copy still wins */
/* blurred on purpose: whatever caption the clip carries turns into texture
   instead of competing with the headline sitting on top of it */
.final-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);
  object-fit:cover;opacity:0.3;filter:blur(14px) saturate(120%);
  -webkit-mask-image:radial-gradient(75% 70% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(75% 70% at 50% 50%,#000,transparent)}
.final-blob{position:absolute;width:340px;height:340px;border-radius:999px}
.blob-o{background:radial-gradient(circle,rgba(255,122,0,0.55),transparent 70%);top:-120px;left:-60px;animation:floaty 7s ease-in-out infinite}
.blob-s{background:radial-gradient(circle,rgba(57,190,248,0.5),transparent 70%);bottom:-140px;right:-40px;animation:floaty 9s ease-in-out infinite}
.final-inner{position:relative}
.final-inner h2{font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.06;color:#fff;max-width:20ch;margin:0 auto}
.final-form{max-width:500px;margin:28px auto 0;display:flex;align-items:center;gap:8px;padding:7px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);border-radius:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.final-form input{flex:1;height:44px;border:none;background:transparent;outline:none;font-family:inherit;font-size:16px;color:#fff;padding-left:14px;min-width:0}
.final-form input::placeholder{color:rgba(255,255,255,0.6)}
.final-form .btn{height:44px;padding:0 20px;border-radius:12px;font-size:15px;white-space:nowrap}
.final-fine{margin:16px 0 0;font-size:13px;color:rgba(255,255,255,0.6)}
.final-confirm{max-width:520px;margin:28px auto 0;color:#fff;font-size:15px;font-weight:500;line-height:1.5}
.final-confirm b{color:#fff}

/* ---- footer ---- */
footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:20px;padding-bottom:48px}
footer .logo{font-size:17px}
footer .copy{font-size:13px;color:var(--slate2)}
footer .flinks{display:flex;gap:18px;font-size:13px;font-weight:600}
footer .flinks a{color:var(--slate)}
footer .flinks a:hover{color:var(--ink)}

/* ---- animations ---- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.45;transform:scale(0.82)}}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* ---- responsive ---- */
@media (max-width:1339px){
  /* not enough room for four rails: keep one per side */
  .hero2-side{grid-template-columns:1fr;justify-items:center}
  .hero2-rail{max-width:225px}
  .hero2-rail.secondary{display:none}
}
@media (max-width:900px){
  .hero2-grid{grid-template-columns:1fr}
  .hero2-side{display:none}
  /* no gutters left to bleed into */
  h1.hero2-title{width:auto;margin-left:0;margin-right:0}
}
@media (max-width:960px){
  .nav-links{display:none}
  /* the demo stops trying to be one screen once its panels have to stack */
  .sec-full{min-height:0;padding-top:72px;padding-bottom:24px}
  .demo-body{height:auto;min-height:420px}
  .demo-pane{position:relative;display:none}
  .demo-pane.on{display:flex}
  /* counter on top, card between the two buttons, the line underneath */
  .d2{grid-template-rows:auto 1fr auto;row-gap:12px}
  .d2-badge{grid-column:1 / -1;grid-row:1;justify-self:center;align-self:center}
  .d2-hint{display:none}
  .d2-deck{grid-row:2;height:min(52vh,320px)}
  .d2-side{grid-row:2}
  /* no room for the bubbles beside the card: the line under it carries them */
  .d2-bubble{display:none}
  .d2-say{display:block;grid-column:1 / -1;grid-row:3;justify-self:center}
  .d3-grid{min-height:330px}
  .d3-status{display:none}
  .includes-grid{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .calc-card{grid-template-columns:1fr;gap:24px}
  /* stacked, the right pane no longer needs to match the left one's height */
  .calc-right{justify-content:flex-start}
  .calc-empty{min-height:0;padding:6px 0 2px}
  .creator-grid{grid-template-columns:repeat(3,1fr)}
  .studio-grid,.annual-card{grid-template-columns:1fr;gap:24px}
  .studio-copy{order:2}
  .studio-grid .wipe{margin:0 auto}
  .preset-wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .preset-wall{grid-template-columns:repeat(2,1fr)}
  .preset-name{font-size:12px}
  .prail{right:8px;bottom:66px;gap:11px}
  .prail-b svg{width:21px;height:21px}
  .plan-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .plan-best{min-height:0}
  .deck-row{gap:10px}
  .tbtn{width:48px;height:48px}
}
@media (max-width:520px){
  header.lifted nav{padding:8px 10px 8px 12px}
  .nav-cta{padding:0 14px}
  .nav-end{gap:12px}
  .input-shell{flex-wrap:wrap}
  .input-shell .btn{width:100%}
  .final-form{flex-wrap:wrap}
  .final-form input{width:100%}
  .final-form .btn{width:100%}
  .creator-grid{grid-template-columns:repeat(2,1fr)}
  .demo-step{padding:8px 14px 10px;font-size:12px}
  .d2-side{gap:8px}
  .d3-grid{gap:4px}
  .d3-cell{padding:4px}
  .d3-stats{gap:12px;font-size:11px}
  /* deck on top, the two buttons side by side underneath */
  .deck-row{display:grid;grid-template-columns:1fr 1fr;
    grid-template-areas:"deck deck" "skip approve";gap:16px;justify-items:center}
  /* scoped to the hero: the demo card also carries .deck and must keep its own
     placement inside the step 02 grid */
  .deck-row > .deck{grid-area:deck}
  .tact-col:first-child{grid-area:skip;justify-self:end}
  .tact-col:last-child{grid-area:approve;justify-self:start}
  .tact-col kbd.hint{display:none}
}

/* ==========================================================================
   Trial line and section CTAs
   ========================================================================== */
/* the trial promise is the most persuasive line in the hero, so it is sized
   like it matters rather than tucked under the button as fine print */
.hero2-fine,.final-fine{font-size:15px}
.hero2-fine .free,.final-fine .free{color:var(--orange);font-weight:700}
.final-fine .free{color:#ffb066}

/* every section closes on the result it just showed */
.sec-cta{display:flex;justify-content:center;margin-top:30px; margin-bottom:30px;}
.sec-cta.left{justify-content:flex-start;margin-top:22px}
.btn-cta{height:52px;padding:0 28px;font-size:16px;border-radius:16px}
/* hero and final are the ones that carry the page, so they get the weight */
.hero2 .btn-primary,.final .btn-primary{height:52px;font-size:16px}



/* ---- narrow screens: the new blocks, and the CTAs the page now leans on ---- */



/* ==========================================================================
   Real accounts: the result, then the reasons
   ========================================================================== */
.live-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:99px;background:#22c55e;
  vertical-align:middle;animation:live-pulse 2s ease-in-out infinite}
@keyframes live-pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.5)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}

/* One dashboard, many accounts. The branches are the argument, so they are
   drawn rather than implied, and a pulse runs out along each one. */
.branch{display:grid;grid-template-columns:auto 90px 1fr;align-items:center;
  gap:0;max-width:960px;margin:0 auto}

.br-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.br-screen{position:relative;width:132px;height:92px;border-radius:12px;padding:9px;
  background:linear-gradient(160deg,#12313a,#0b1620);border:2px solid rgba(255,255,255,0.14);
  box-shadow:0 18px 40px rgba(14,26,36,0.28)}
.br-dots{display:flex;gap:4px;margin-bottom:9px}
.br-dots i{width:5px;height:5px;border-radius:99px;background:rgba(255,255,255,0.28)}
.br-logo{display:block;font-family:"Sora",sans-serif;font-size:12px;font-weight:700;color:#fff;margin-bottom:8px}
.br-bars{display:flex;flex-direction:column;gap:4px}
.br-bars i{height:4px;border-radius:99px;background:rgba(255,122,0,0.55)}
.br-bars i:nth-child(1){width:70%}
.br-bars i:nth-child(2){width:48%;background:rgba(255,255,255,0.18)}
.br-bars i:nth-child(3){width:60%;background:rgba(255,255,255,0.18)}
.br-bars i:nth-child(4){width:34%;background:rgba(255,255,255,0.18)}
.br-stand{width:52px;height:5px;border-radius:0 0 6px 6px;background:rgba(14,26,36,0.22)}
.br-cap{font-size:12px;font-weight:700;color:var(--slate)}

.br-lines{width:90px;height:100%;min-height:330px;display:block}
.br-pulse path{animation:br-run 2.6s linear infinite}
.br-pulse path:nth-child(2){animation-delay:.35s}
.br-pulse path:nth-child(3){animation-delay:.7s}
.br-pulse path:nth-child(4){animation-delay:1.05s}
.br-pulse path:nth-child(5){animation-delay:1.4s}
.br-pulse path:nth-child(6){animation-delay:1.75s}
@keyframes br-run{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

.br-accounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px}
.br-acct{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:14px;background:#fff;
  border:1px solid rgba(14,26,36,0.07);box-shadow:0 6px 18px rgba(14,26,36,0.07);
  animation:fan-in .5s ease-out both;animation-delay:var(--d,0ms)}
@keyframes fan-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.br-acct img{width:30px;height:30px;border-radius:99px;object-fit:cover;flex:none}
.ba-mid{display:flex;flex-direction:column;min-width:0;flex:1}
.ba-mid b{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-mid em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--slate2)}
/* the platform each account lives on, in its own colour */
.ba-plat{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px}
.ba-plat svg{width:13px;height:13px}
.ba-plat.tt{background:rgba(14,26,36,0.06);color:var(--ink)}
.ba-plat.ig{background:linear-gradient(135deg,rgba(255,122,0,0.16),rgba(214,41,118,0.16));color:#d62976}

/* The offer band. Urgency comes from framing and motion, not from a counter we
   cannot back with real numbers. The "first 100" line has to stay true. */
.free-band{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  max-width:900px;margin:0 auto;padding:20px 24px;border-radius:20px;text-align:left;
  background:linear-gradient(120deg,rgba(255,122,0,0.16),rgba(255,255,255,0.66) 62%);
  border:1px solid rgba(255,122,0,0.42);
  box-shadow:0 14px 40px rgba(255,122,0,0.14)}
.fb-left{flex:1;min-width:280px}
.fb-tag{display:inline-flex;align-items:center;margin-bottom:9px;padding:5px 12px;border-radius:999px;
  background:var(--orange);color:#fff;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase}
.fb-pulse{width:7px;height:7px;margin-right:7px;border-radius:99px;background:#fff;
  animation:fb-blink 1.4s ease-in-out infinite}
@keyframes fb-blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,0.7)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(255,255,255,0)}}
.free-band h3{font-size:clamp(20px,2.3vw,26px);font-weight:700;line-height:1.15;color:var(--ink);margin:0 0 6px}
.free-band p{margin:0;font-size:14.5px;line-height:1.5;color:var(--slate)}
.free-band p b{color:var(--ink)}
.fb-right{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none}
.fb-right .btn-cta{height:50px;padding:0 26px;font-size:15px;white-space:nowrap}
.fb-note{font-size:11.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--orange)}

/* Credits are the product, so the page says so once, plainly, before the cards. */
.credit-note b{color:var(--ink)}

/* The free plan, loud. Teal rather than orange: orange is spoken for by the
   paid promo, and teal is already the site's second accent, so this reads as
   a different offer without introducing a colour the brand does not use. */
.free-line{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  max-width:880px;margin:34px auto 0;padding:20px 24px;border-radius:20px;
  background:linear-gradient(120deg,rgba(15,181,166,0.16),rgba(57,190,248,0.12) 70%);
  border:2px solid var(--teal);box-shadow:0 14px 40px rgba(15,181,166,0.2)}
.fl-tag{flex:none;padding:6px 14px;border-radius:999px;background:var(--teal);color:#fff;
  font-family:"Sora",sans-serif;font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase}
.fl-text{flex:1;min-width:240px;font-family:"Manrope",sans-serif;font-size:17px;line-height:1.45;color:var(--slate)}
.fl-text b{font-family:"Sora",sans-serif;font-weight:700;color:var(--ink)}
.btn-free{flex:none;height:48px;padding:0 26px;font-size:16px;border-radius:14px;
  background:var(--teal);color:#fff}
.btn-free:hover{background:#0da294}
@media (max-width:700px){
  .free-line{flex-direction:column;align-items:stretch;text-align:left;gap:12px}
  /* stretch is right for the button and the text, wrong for the pill */
  .fl-tag{align-self:flex-start}
  .btn-free{width:100%}
}

/* the strip that carries the promo on the home page, above everything */
.promo-bar{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;padding:11px 20px;background:linear-gradient(90deg,#ff7a00,#ff9d3d);color:#fff;text-align:center}
.promo-bar b{font-weight:700}
.promo-bar .pb-dot{width:7px;height:7px;border-radius:99px;background:#fff;
  animation:fb-blink 1.4s ease-in-out infinite}
.promo-bar span{font-size:14.5px;line-height:1.4}
.promo-bar a{display:inline-flex;align-items:center;gap:6px;padding:6px 15px;border-radius:999px;
  background:#fff;color:var(--orange);font-size:13.5px;font-weight:700;white-space:nowrap}
.promo-bar a:hover{background:#fff5eb;color:var(--orange-d)}
@media (max-width:600px){
  /* the bar must not eat the fold, so the second clause goes and the pill shrinks */
  .promo-bar{padding:9px 14px;gap:9px}
  .promo-bar span{font-size:13px}
  .promo-bar .pb-more{display:none}
  .promo-bar a{padding:5px 13px;font-size:12.5px}
}

/* the spend line is the one that answers "what do the credits actually get me" */
.plan-feats .spend{color:var(--ink)}
.plan-feats .spend b{font-weight:700}

@media (max-width:700px){
  .free-band{flex-direction:column;align-items:stretch;gap:16px}
  .fb-right{align-items:stretch}
  .free-band .btn-cta{width:100%}
}

/* one text colour for the whole document: emphasis comes from weight, not shade */
.legal{max-width:760px;margin:0 auto;color:#41545e;font-size:16px;line-height:1.7}
.legal h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.15;color:var(--ink);
  margin:44px 0 14px;scroll-margin-top:96px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:18px;font-weight:700;color:var(--ink);margin:28px 0 10px}
.legal h4{font-size:16px;font-weight:700;color:var(--ink);margin:22px 0 8px}
.legal p{margin:0 0 14px}
.legal b{color:var(--ink);font-weight:700}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.legal hr{border:none;border-top:1px solid rgba(14,26,36,0.1);margin:34px 0}
/* the call-outs both documents open sections with */
.legal blockquote{margin:0 0 18px;padding:16px 18px;border-radius:16px;
  background:rgba(255,255,255,0.6);border:1px solid var(--gborder);
  border-left:3px solid var(--orange);color:#41545e;font-size:15px}
.legal blockquote b{font-weight:700}
@media (max-width:600px){
  .legal{font-size:15px}
  .legal h2{margin-top:34px}
}

/* ---- narrow screens: kept last so these win over the rules above ---- */
@media (max-width:900px){
  /* stacked: the curved fan has nowhere to go, so a single drop line carries
     the same idea without overlapping the node */
  .branch{grid-template-columns:1fr;justify-items:center;gap:0}
  .br-lines{display:none}
  .br-node::after{content:"";width:2px;height:36px;margin-top:12px;border-radius:2px;
    background:linear-gradient(180deg,var(--orange),rgba(255,122,0,0));
    animation:br-drop 2.2s ease-in-out infinite}
  @keyframes br-drop{0%,100%{opacity:.45}50%{opacity:1}}
  .br-accounts{width:100%;margin-top:12px}
}
@media (max-width:560px){
  /* two columns truncates every handle, and the handle is the proof */
  .br-accounts{grid-template-columns:1fr}
  .ba-mid b{font-size:13px}
  .ba-mid em{font-size:11px}
}
@media (max-width:600px){
  /* the ask should never be a small target on a phone */
  .sec-cta,.sec-cta.left{justify-content:stretch}
  .sec-cta .btn-cta{width:100%;height:54px}
  .hero2 .btn-primary,.final .btn-primary{height:54px}
  .hero2-fine,.final-fine{font-size:14px}
  .ba-mid b{font-size:12.5px}
  .pair{max-width:100%;gap:8px}
  .pair-arrow svg{width:28px;height:28px}
  .pair-lab{font-size:13px;padding:6px 14px}
}


/* ---- pricing: shared rail + credit possibilities ---- */
/* Structural, not another colour band: there is a promo bar above and a teal band below, and a
   third stripe flattens the hierarchy. It reads as a header row merged onto the grid, so the
   cards butt underneath with no gap and only its top corners are round. */

.plan-credits{position:relative}
.credit-info{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:0;
  border:none;background:none;font-family:"Sora",sans-serif;font-size:12.5px;
  font-weight:600;color:var(--orange);cursor:pointer}
.credit-info i{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex:none;border-radius:999px;font-style:normal;
  background:rgba(255,122,0,0.18);font-size:10px;font-weight:800;line-height:1}
.credit-info:hover,.credit-info:focus-visible{color:var(--ink);outline:none}
.credit-info:hover i,.credit-info:focus-visible i{background:var(--orange);color:#fff}
/* Floats over the card rather than sitting in the flow: expanding in place shoved everything
   below it down and knocked the four columns out of alignment, so opening one card made the
   others look wrong. Anchored under the credits row it came from. */
/* Hangs off the credits block, not the card: anchored to the card it took its static position
   from the wrong sibling and covered the plan name and price. */
.credit-block{position:relative;display:flex;flex-direction:column;align-items:flex-start}
/* Shown on hover, no click. Absolutely positioned so it floats over the card instead of
   pushing it taller, which knocked the four columns out of alignment. */
.poss{display:none;position:absolute;top:100%;z-index:6;left:0;min-width:250px;margin-top:8px;
  padding:13px 15px;border-radius:14px;background:#fff;border:1px solid rgba(255,122,0,0.3);
  box-shadow:0 16px 40px rgba(14,26,36,0.16)}
.credit-info:hover + .poss,.credit-info:focus-visible + .poss,.poss:hover{display:block}
/* Bridges the 8px gap between trigger and panel: without it the pointer leaves both on
   the way down and the panel closes before it can be reached. */
.poss::after{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.poss.open{display:block}
/* .glass sets backdrop-filter, making every plan its own stacking context, so the panel
   cannot rise past a sibling card on its own z-index. The whole plan has to lift. */
.plan:hover,.plan:focus-within,.plan.poss-open{z-index:5}
.poss h4{margin:0 0 9px;font-family:"Sora",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--slate2)}
.poss ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
/* Numbers in their own right-aligned column. Run inline with the label they wrapped
   mid-sentence and there was no column to compare down. */
.poss li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;gap:9px;
  font-size:12.5px;line-height:1.45;color:var(--slate)}
.poss li b{font-family:"Sora",sans-serif;font-size:13.5px;font-weight:700;
  text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.poss-note{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--gborder);
  font-size:11px;line-height:1.4;color:var(--slate2)}

@media (max-width:960px){
  /* The trigger says what it opens now, so it no longer has to be forced open here. Left
     permanently open it added its full height to all four stacked cards and pushed every
     CTA further down the page. Tapping opens it in the flow, which on stacked cards costs
     nothing in alignment and avoids overlaying the card below. */
  .credit-info:hover + .poss,.poss:hover{display:none}
  .poss{position:static;min-width:0;margin-top:10px;
    box-shadow:none;background:rgba(255,122,0,0.08);border-color:rgba(255,122,0,0.22)}
  .poss.open{display:block}
}

/* The rail above the grid is gone: each card now states its own inclusions. This is the
   one line from it that was never per-plan. */
.grid-note{margin:18px auto 0;max-width:52ch;text-align:center;font-size:13px;
  line-height:1.5;color:var(--slate2)}
.grid-note b{color:var(--ink);font-weight:700}