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

:root{
  --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)}
.nav-cta{grid-column:3;height:44px;padding:0 22px;border-radius:999px;justify-self:end}

/* ==========================================================================
   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}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-top:10px}
.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}
.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}
.annual-note{margin-top:8px;font-size:12px;font-weight:700;color:var(--teal);min-height:16px}
.plan-feats{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.plan-feats li{display:flex;gap:9px;font-size:13px;line-height:1.45;color:var(--ink)}
.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{margin-top:auto;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:5.4em}
.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-badge{position:absolute;bottom:0;right:clamp(24px,3vw,36px);transform:translateY(50%);padding:12px 24px;border-radius:14px;background:var(--orange);color:#fff;font-size:18px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 24px rgba(255,122,0,0.35)}
.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(220px,320px) 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}
}

/* 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 ---- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.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}
  .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}
  .calc-badge{right:auto;left:50%;transform:translate(-50%,50%);font-size:15px;padding:10px 18px;border-radius:12px}
  .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}
  .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}
}