/* ============================================================
   Dispense Flow — tokens
   ============================================================ */
:root{
  --ink:#070B1F;
  --ink-2:#0E1433;
  --ink-3:#171E4A;
  --line:rgba(167,169,201,.16);
  --line-strong:rgba(167,169,201,.32);
  /* --line-strong is a decorative hairline and is exempt from contrast rules. The boundary of a
     control you are meant to find and operate is not (WCAG 1.4.11, 3:1), hence a second token. */
  --line-field:rgba(167,169,201,.53);
  --error:#E24C4C;
  --text:#F3F1FF;
  --muted:#A7A9C9;
  --soft:#7B7EA4;
  --flow-a:#FF7A18;
  --flow-b:#FF2D95;
  --flow-c:#4C6FFF;
  --mint:#6FF7C4;
  /* Brand pink at small-text size. --flow-b itself is only safe for headline-sized glyphs (that is
     why --grad-text exists); as 14px bold body copy it needs the 4.5:1 of WCAG 1.4.3, which it
     clears on the dark ground and misses on the light one. */
  --accent-strong:#FF2D95;
  --grad:linear-gradient(90deg,var(--flow-a) 0%,var(--flow-b) 50%,var(--flow-c) 100%);
  /* The vivid gradient above carries no text, so it stays as drawn. These two do carry text,
     and the brand hues are too light at full saturation to hold a label at 4.5:1 (WCAG 1.4.3):
     --grad-ink sits under white button labels, --grad-text is clipped to headline glyphs. */
  --grad-ink:linear-gradient(90deg,#C35300 0%,#E50071 50%,#4166FF 100%);
  --grad-text:var(--grad);
  --grad-soft:linear-gradient(135deg,rgba(255,122,24,.22),rgba(255,45,149,.18) 50%,rgba(76,111,255,.22));
  --panel:linear-gradient(180deg,rgba(14,20,51,.7),rgba(14,20,51,.35));
  --panel-solid:rgba(14,20,51,.85);
  --panel-faint:rgba(14,20,51,.45);
  --nav-bg:rgba(7,11,31,.72);
  --nav-bg-solid:rgba(7,11,31,.96);
  --input-bg:rgba(7,11,31,.7);
  --drop:#fff;
  --blob-blend:screen; --blob-opacity:.55;
  --cap-opacity:.2;
  --shadow-flow:0 30px 80px -40px rgba(76,111,255,.5);
  --display:"Unbounded","Manrope",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:10px; --r:18px; --r-lg:28px; --r-pill:999px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
/* light theme */
:root[data-theme="light"]{
  --ink:#F6F5FF; --ink-2:#FFFFFF; --ink-3:#E6E4F7;
  --line:rgba(30,30,80,.1); --line-strong:rgba(30,30,80,.22);
  --text:#0E1233; --muted:#4E5280; --soft:#676D9B;
  --mint:#098061;
  /* 4.78:1 on the light panel. #E50071, the gradient's dark midpoint, measures 4.25:1 there - it
     is sized for white text ON it, not for it on a near-white ground. */
  --accent-strong:#D6006A;
  --line-field:rgba(30,30,80,.5);
  --error:#D92323;
  /* Only the orange stop falls under 3:1 on a near-white ground; pink and blue clear it. */
  --grad-text:linear-gradient(90deg,#E96300 0%,var(--flow-b) 50%,var(--flow-c) 100%);
  --grad-soft:linear-gradient(135deg,rgba(255,122,24,.16),rgba(255,45,149,.12) 50%,rgba(76,111,255,.16));
  --panel:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7));
  --panel-solid:rgba(255,255,255,.9);
  --panel-faint:rgba(255,255,255,.6);
  --nav-bg:rgba(246,245,255,.78);
  --nav-bg-solid:rgba(246,245,255,.97);
  --input-bg:rgba(255,255,255,.9);
  --drop:#0E1233;
  --blob-blend:normal; --blob-opacity:.32;
  --cap-opacity:.35;
  --shadow-flow:0 30px 80px -40px rgba(76,111,255,.35);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.6;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}

/* Skip link. Every page opens with the logo plus ten-odd nav links, and the footer adds fifteen
   more, so a keyboard user walked all of them on every page (WCAG 2.4.1). Off-screen until
   focused, then it lands in the top-left corner above the fixed nav. */
.skip-link{
  position:absolute;top:0;left:0;z-index:999;
  transform:translateY(-120%);
  padding:.7rem 1.1rem;border-bottom-right-radius:var(--r-sm);
  background:var(--ink-2);color:var(--text);font-weight:700;font-size:.9rem;
  border:1px solid var(--line-field);
  transition:transform .18s var(--ease);
}
.skip-link:focus-visible{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mint{color:var(--mint)}
.wrap{width:min(var(--wrap),calc(100% - 2.5rem));margin-inline:auto}
.wrap-narrow{width:min(820px,calc(100% - 2.5rem))}

/* ---- type ---- */
.display{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.02;
  text-wrap:balance;margin:0;
}
h1.display{font-size:clamp(2rem,5.6vw,4.6rem)}
h2.display{font-size:clamp(1.85rem,3.9vw,3.1rem)}
h3,.lifted-h2{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;line-height:1.25;margin:0 0 .6rem;text-wrap:balance}
.flow-text{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:shimmer 6s linear infinite;
}
@keyframes shimmer{to{background-position:200% 0}}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(111,247,196,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(111,247,196,0)}100%{box-shadow:0 0 0 0 rgba(111,247,196,0)}}
.lede{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--muted);max-width:60ch;margin:1.2rem 0 0}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.25rem;border-radius:var(--r-pill);font-weight:700;font-size:.95rem;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s;
}
.btn-lg{padding:.95rem 1.6rem;font-size:1.02rem}
.btn-flow{
  color:#fff;background:var(--grad-ink);background-size:200% 100%;
  box-shadow:0 8px 30px -10px rgba(255,45,149,.6),inset 0 1px 0 rgba(255,255,255,.25);
  animation:shimmer 5s linear infinite;
}
.btn-flow:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 40px -10px rgba(255,45,149,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{border-color:var(--line-field);background:rgba(255,255,255,.03);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:var(--text);transform:translateY(-2px)}

/* ---- ambient ---- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--blob-opacity);mix-blend-mode:var(--blob-blend);will-change:transform}
.blob-a{width:52vw;height:52vw;left:-14vw;top:-18vw;background:radial-gradient(circle,var(--flow-c),transparent 62%);animation:drift 22s ease-in-out infinite alternate}
.blob-b{width:46vw;height:46vw;right:-16vw;top:6vw;background:radial-gradient(circle,var(--flow-b),transparent 62%);animation:drift 26s ease-in-out -8s infinite alternate-reverse}
.blob-c{width:40vw;height:40vw;left:30vw;top:34vw;background:radial-gradient(circle,var(--flow-a),transparent 62%);animation:drift 30s ease-in-out -15s infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(8vw,10vh,0) scale(1.15)}}
.capsules{position:absolute;inset:0;height:100vh;z-index:0;pointer-events:none;overflow:hidden}
.cap{
  position:absolute;left:var(--x);bottom:-80px;width:calc(22px*var(--s));height:calc(60px*var(--s));
  border-radius:999px;opacity:var(--cap-opacity);
  background:linear-gradient(180deg,var(--flow-a) 50%,#fff 50%);
  animation:rise 18s linear var(--d) infinite;
}
.cap:nth-child(2n){background:linear-gradient(180deg,var(--flow-c) 50%,#fff 50%)}
.cap:nth-child(3n){background:linear-gradient(180deg,var(--flow-b) 50%,#fff 50%)}
@keyframes rise{from{transform:translateY(0) rotate(-20deg)}to{transform:translateY(-120vh) rotate(40deg)}}
main,header,footer,.marquee{position:relative;z-index:1}

@media (max-width:700px){
  .blob{animation:none;filter:blur(60px)}
  .cap{display:none}
  .flow,.btn-ghost{backdrop-filter:none}
}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.is-stuck{background:var(--nav-bg);backdrop-filter:blur(16px);border-color:var(--line)}
.nav-inner{display:flex;align-items:center;gap:2rem;height:72px}
.logo{display:inline-flex;align-items:center;gap:.6rem}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(255,45,149,.7)}
.logo-mark i{width:16px;height:8px;border-radius:999px;background:linear-gradient(90deg,#fff 50%,rgba(255,255,255,.35) 50%);transform:rotate(-30deg)}
.logo-word{font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.logo-word b{font-weight:800}
.logo-word.small{font-size:.9rem}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;font-weight:600;font-size:.95rem;color:var(--muted)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;gap:.6rem;align-items:center}
/* Quiet text beside the two buttons: a merchant signing in is not a conversion to compete with
   "Start building", but before 2026-10-22 there was no way in from the marketing site at all. */
.nav-login{font-weight:600;font-size:.95rem;color:var(--muted);white-space:nowrap;transition:color .2s}
.nav-login:hover{color:var(--text)}
.nav-login-alone{margin-left:auto}
.theme-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-field);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--text);transition:border-color .2s,transform .3s var(--ease)}
.theme-btn:hover{border-color:var(--text);transform:rotate(15deg)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .sun{display:none}.theme-btn .moon{display:block}
:root[data-theme="light"] .theme-btn .sun{display:block}
:root[data-theme="light"] .theme-btn .moon{display:none}
.nav-burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line-field);border-radius:12px;background:transparent;flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer}
.nav-burger span{width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s}
.nav.is-open .nav-links{display:flex}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .theme-btn{margin-left:auto}
  .nav-burger{display:flex;margin-left:0}
  /* The open menu is in flow, not absolutely positioned.
     It used to position .nav-links alone at top:72px, and .nav-cta stayed display:none with
     nowhere to be put - so on a phone the burger revealed the section links and nothing else.
     "Talk to sales", "Start building" and the login link were all unreachable from the header on
     every page, which is the whole of the nav's job on the device most visitors arrive on. */
  .nav-inner{flex-wrap:wrap}
  .nav.is-open{background:var(--nav-bg-solid);backdrop-filter:blur(16px);border-color:var(--line)}
  .nav.is-open .nav-inner{height:auto;row-gap:0;padding-bottom:1rem}
  .nav.is-open .nav-links,.nav.is-open .nav-cta{display:flex;flex-direction:column;width:100%;gap:0;margin-left:0}
  .nav.is-open .nav-links a{padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--text)}
  .nav.is-open .nav-cta{gap:.6rem;padding-top:1rem;align-items:stretch}
  .nav.is-open .nav-cta .btn{width:100%;justify-content:center}
  .nav.is-open .nav-login{padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--text)}
  .nav.is-open .nav-burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav.is-open .nav-burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}

/* ---- hero ---- */
.hero{padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(2rem,5vw,4rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
h1 .line{display:block;transform:translateY(24px);animation:slide .9s var(--ease) forwards}
@keyframes slide{to{transform:none}}
h1 .line:nth-child(2){animation-delay:.12s}
.hero-copy .lede,.hero-actions,.price-chip{opacity:0;transform:translateY(18px);animation:up .9s var(--ease) forwards}
.hero-copy .lede{animation-delay:.24s}.hero-actions{animation-delay:.34s}.price-chip{animation-delay:.44s}
@keyframes up{to{opacity:1;transform:none}}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.price-chip{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .6rem;margin:1.6rem 0 0;
  padding:.65rem 1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-solid);
  font-size:1.05rem;font-weight:600;
}
.price-chip small{font-size:.72rem;color:var(--muted);margin-left:.15rem}
.price-chip em,.price-chip i{font-style:normal;color:var(--soft)}
.price-chip .soft{font-size:.74rem;font-weight:500;color:var(--muted);letter-spacing:.02em}

/* The Flow */
.flow{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel-solid);
  backdrop-filter:blur(14px);padding:1.1rem 1.2rem 1rem;
  box-shadow:var(--shadow-flow),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transform:translateY(24px) scale(.98);animation:up 1s var(--ease) .2s forwards;
}
.flow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;pointer-events:none}
.flow-head,.flow-foot{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted)}
.flow-foot{flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.4rem;padding-top:.8rem;border-top:1px solid var(--line)}
.flow-foot b{color:var(--text);font-weight:600;margin-left:.3rem}
.live{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.live b{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint);animation:pulse 1.6s infinite}
.flow-stage{position:relative;height:150px;margin:.4rem 0 0}
.flow-svg{position:absolute;inset:0;width:100%;height:120px;top:0;overflow:visible}
.flow-track{fill:none;stroke:var(--line-strong);stroke-width:3;stroke-linecap:round}
.flow-liquid{fill:none;stroke:url(#flowGrad);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 2000}
.flow-drop{fill:var(--drop)}
.flow-halo{fill:rgba(255,45,149,.28)}
.flow-nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.node{position:absolute;left:var(--x);top:40%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.35rem;width:110px;text-align:center}
.node-icon{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-2);border:2px solid var(--line-strong);transition:border-color .4s,box-shadow .4s,transform .4s var(--ease);
}
.node-icon svg{width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.node-name{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .3s}
.node.is-done .node-icon{border-color:var(--mint)}
.node.is-done .node-icon svg{stroke:var(--mint)}
.node.is-done .node-name{color:var(--mint)}
.node.is-done .node-name::before{content:"✓ "}
.node.is-on .node-name{color:var(--text)}
.node.is-on .node-icon{border-color:var(--mint);box-shadow:0 0 0 6px rgba(111,247,196,.12),0 0 24px rgba(111,247,196,.35);transform:scale(1.08)}
.node.is-on .node-icon svg{stroke:var(--text)}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .node{width:80px}}
@media (max-width:520px){.node-name{font-size:.6rem}.node-icon{width:38px;height:38px}}

.flow-status{display:flex;justify-content:center;align-items:center;min-height:2.2rem;margin:.2rem 0 .5rem}
.flow-status-chip{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;color:var(--mint);padding:.35rem .85rem;border-radius:999px;
  background:rgba(111,247,196,.1);border:1px solid rgba(111,247,196,.3);animation:pop .45s var(--ease);
}
.flow-status-chip b{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:none}}

/* ---- marquee ---- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:.9rem 0;background:var(--panel-faint);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:scroll 42s linear infinite;font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.marquee-track span{display:flex;align-items:center;gap:2.5rem;white-space:nowrap}
.marquee-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad)}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---- sections ---- */
.section{padding:clamp(4rem,9vw,7.5rem) 0}
.section-head{max-width:760px;margin-bottom:clamp(2rem,4vw,3.5rem)}

/* reveal */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-pending{opacity:0;transform:translateY(28px)}
.reveal.is-in{opacity:1;transform:none}

/* ---- bento ---- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.card{
  position:relative;padding:1.6rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--panel);overflow:hidden;
  transition:border-color .3s,transform .5s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card p{margin:0;color:var(--muted);font-size:.98rem}
.card-wide{grid-column:span 2}
.card-tag{display:inline-block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:.9rem;padding:.25rem .6rem;border-radius:999px;border:1px solid rgba(111,247,196,.3);background:rgba(111,247,196,.08)}
.glow-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,45,149,.16),rgba(76,111,255,.08) 40%,transparent 65%);
}
.glow-card:hover::before{opacity:1}
.check-list{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.check-list li{font-size:.82rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--panel-faint)}
.check-list li::before{content:"✓ ";color:var(--mint)}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.card-wide{grid-column:span 2}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.card-wide{grid-column:span 1}}

/* mini browser illustration */
.mini-browser{margin-top:1.4rem;border-radius:14px;border:1px solid var(--line);background:var(--ink);overflow:hidden}
.mb-bar{display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-bottom:1px solid var(--line);font-size:.68rem;color:var(--soft)}
.mb-bar i{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.mb-bar span{margin-left:.5rem;padding:.15rem .6rem;border-radius:999px;background:var(--ink-2)}
.mb-body{padding:.9rem;display:grid;gap:.8rem}
.mb-nav{display:flex;gap:.6rem;align-items:center}
.mb-nav b{width:46px;height:8px;border-radius:4px;background:var(--grad)}
.mb-nav span{width:26px;height:6px;border-radius:3px;background:var(--ink-3)}
.mb-hero{display:grid;gap:.45rem}
.mb-hero b{height:12px;width:70%;border-radius:4px;background:var(--text);opacity:.85;animation:build 2.6s var(--ease) infinite}
.mb-hero b.short{width:45%;animation-delay:.2s}
.mb-hero em{height:16px;width:80px;border-radius:999px;background:var(--grad);animation:build 2.6s var(--ease) .4s infinite}
.mb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mb-cards span{height:44px;border-radius:8px;background:var(--ink-2);border:1px solid var(--line);animation:build 2.6s var(--ease) infinite}
.mb-cards span:nth-child(2){animation-delay:.15s}.mb-cards span:nth-child(3){animation-delay:.3s}
@keyframes build{0%{transform:scaleX(0);transform-origin:left;opacity:0}25%,85%{transform:none;opacity:1}100%{opacity:1}}

/* ---- builder ---- */
.section-builder{background:linear-gradient(180deg,transparent,var(--panel-faint) 20%,var(--panel-faint) 80%,transparent)}
.builder{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.2rem;align-items:stretch}
.chat{display:flex;flex-direction:column;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--ink);overflow:hidden;min-height:520px}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.chat-log{flex:1;padding:1.1rem;display:flex;flex-direction:column;gap:.9rem;overflow:auto}
.msg{max-width:92%;padding:.85rem 1rem;border-radius:16px;font-size:.93rem;line-height:1.5}
.msg p{margin:0}
.msg.user{align-self:flex-end;background:var(--grad-ink);color:#fff;border-bottom-right-radius:4px;min-height:2.6rem}
.msg.user p::after{content:"▍";animation:blink 1s steps(1) infinite;opacity:.8}
.msg.user.is-done p::after{content:""}
@keyframes blink{50%{opacity:0}}
.msg.ai{align-self:flex-start;background:var(--ink-2);border:1px solid var(--line);border-bottom-left-radius:4px;display:grid;gap:.45rem;min-width:70%}
.msg.ai:empty{display:none}
.step-line{display:flex;align-items:center;gap:.55rem;color:var(--muted);font-family:var(--mono);font-size:.78rem;opacity:0;transform:translateX(-6px);animation:up .5s var(--ease) forwards}
.step-line i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;flex:none;transition:all .3s}
.step-line.is-done{color:var(--text)}
.step-line.is-done i{border-color:var(--mint);background:var(--mint)}
.step-line.is-doing i{border-color:var(--flow-b);border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.step-line.ready{color:var(--mint);font-weight:600}
.chat-chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:.4rem 1.1rem .8rem}
.chip{padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line-field);background:transparent;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .25s}
.chip:hover{border-color:var(--text)}
.chip.is-on{background:var(--text);color:var(--ink);border-color:var(--text)}
.chat-input{display:flex;gap:.5rem;padding:.8rem 1.1rem 1.1rem;border-top:1px solid var(--line)}
.chat-input input,.cta-form input{
  flex:1;min-width:0;padding:.75rem 1rem;border-radius:999px;border:1px solid var(--line-field);background:var(--ink-2);color:var(--text);
}
.chat-input input::placeholder,.cta-form input::placeholder{color:var(--soft)}
.chat-note{margin:0;padding:0 1.1rem .9rem;font-size:.72rem;color:var(--soft)}

/* live preview */
.preview{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--ink);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 90px -50px rgba(255,45,149,.45)}
.pv-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);font-size:.72rem;color:var(--soft)}
.pv-bar i{width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.pv-bar span{margin-left:.6rem;padding:.2rem .7rem;border-radius:999px;background:var(--ink-2)}
.pv-site{
  --b-accent:#5FBF8A;--b-bg:#F7F8F4;--b-ink:#14201A;--b-card:#fff;--b-font:"Manrope",sans-serif;
  flex:1;background:var(--b-bg);color:var(--b-ink);font-family:var(--b-font);padding:1.3rem 1.5rem 1.5rem;display:grid;gap:1.1rem;align-content:start;
  transition:background .6s,color .6s;
}
.pv-nav{display:flex;align-items:center;gap:1.1rem;font-size:.74rem;font-weight:600;opacity:.75}
.pv-nav b{font-size:.98rem;font-weight:800;letter-spacing:-.02em;opacity:1;color:var(--b-ink)}
.pv-nav em{margin-left:auto;font-style:normal;padding:.35rem .8rem;border-radius:var(--b-r,999px);background:var(--b-accent);color:#fff;font-weight:700;opacity:1;transition:background .6s}
.pv-hero{display:grid;gap:.5rem;padding:.4rem 0 .2rem}
.pv-hero .pv-headline{margin:0;font-family:var(--b-font);font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.08;letter-spacing:-.03em;font-weight:800;max-width:14ch;text-wrap:balance}
.pv-hero p{margin:0;font-size:.85rem;opacity:.7;max-width:40ch}
.pv-hero em{justify-self:start;font-style:normal;margin-top:.4rem;padding:.55rem 1.1rem;border-radius:var(--b-r,999px);background:var(--b-accent);color:#fff;font-weight:700;font-size:.82rem;transition:background .6s}
.pv-products{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.pv-prod{background:var(--b-card);border-radius:var(--b-r,14px);padding:.9rem;border:1px solid rgba(0,0,0,.06);display:grid;gap:.25rem;box-shadow:0 8px 24px -16px rgba(0,0,0,.25);
  opacity:0;transform:translateY(12px);animation:up .6s var(--ease) forwards}
.pv-prod b{font-size:.9rem}
.pv-prod span{font-size:.74rem;opacity:.65}
.pv-prod i{font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--b-accent);font-weight:600;margin-top:.2rem}
.pv-prod em{width:100%;height:46px;border-radius:9px;background:linear-gradient(135deg,var(--b-accent),transparent 160%);opacity:.35;margin-bottom:.3rem}
.pv-strip{display:flex;gap:1rem;font-size:.7rem;font-weight:600;opacity:.6;flex-wrap:wrap}
.pv-strip span::before{content:"✓ ";color:var(--b-accent)}
.pv-site.is-building > *{opacity:0;transform:translateY(10px)}
.pv-site > *{transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media (max-width:900px){.builder{grid-template-columns:1fr}.chat{min-height:0}}

/* ---- themes ---- */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.theme-card{
  display:grid;gap:.8rem;padding:.7rem .7rem .9rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);
  text-align:left;cursor:pointer;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease);
}
.theme-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 30px 60px -40px rgba(255,45,149,.5)}
.tm{
  display:grid;gap:.5rem;align-content:start;aspect-ratio:16/10;padding:.9rem 1rem;border-radius:calc(var(--r-lg) - 8px);overflow:hidden;
  background:var(--t-bg);color:var(--t-ink);font-family:var(--t-font);
}
.tm-nav{display:flex;align-items:center;gap:.5rem;font-size:.62rem;font-weight:800;letter-spacing:-.01em}
.tm-nav i{width:16px;height:4px;border-radius:2px;background:currentColor;opacity:.25}
.tm-nav em{margin-left:auto;width:32px;height:10px;border-radius:var(--t-r);background:var(--t-accent)}
.tm-h{font-size:1.02rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;max-width:14ch;margin-top:.3rem;text-wrap:balance}
.tm-btn{justify-self:start;font-size:.55rem;font-weight:700;padding:.3rem .6rem;border-radius:var(--t-r);background:var(--t-accent);color:#fff;font-family:'Manrope',sans-serif}
.tm-cards{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.2rem}
.tm-cards span{height:26px;border-radius:var(--t-r);background:var(--t-accent);opacity:.18}
.theme-meta{display:flex;align-items:center;gap:.6rem;padding:0 .4rem;font-size:.82rem;color:var(--muted)}
.theme-meta b{color:var(--text);font-family:var(--display);font-weight:600;font-size:.92rem}
.theme-meta i{margin-left:auto;font-style:normal;font-weight:700;font-size:.78rem;color:var(--text);opacity:0;transform:translateX(-4px);transition:all .3s var(--ease)}
.theme-card:hover .theme-meta i,.theme-card:focus-visible .theme-meta i{opacity:1;transform:none}
.theme-card.is-on{border-color:var(--flow-b)}
@media (max-width:900px){.themes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.themes{grid-template-columns:1fr}}

/* ---- integrations ---- */
.apps{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem}
.app{
  display:grid;gap:.15rem;justify-items:start;padding:1.1rem 1.1rem 1.05rem;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);
  transition:transform .5s var(--ease),border-color .3s;
}
.app:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.app b{font-size:.95rem;margin-top:.7rem}
.app > span:last-child{font-size:.78rem;color:var(--muted)}
.app-mark{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:.85rem;color:#fff;
  background:var(--c);box-shadow:0 8px 20px -10px var(--c);letter-spacing:-.02em;
}
.apps-note{margin:1.4rem 0 0;color:var(--muted);font-size:.92rem;max-width:64ch}
@media (max-width:1000px){.apps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.apps{grid-template-columns:1fr 1fr}}

/* ---- pricing ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:1.2rem;align-items:stretch}
.tier{
  position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.7rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--panel);transition:transform .5s var(--ease),border-color .3s;
}
.tier:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.tier-featured{background:var(--grad-soft);border-color:rgba(255,45,149,.45);box-shadow:0 30px 80px -40px rgba(255,45,149,.6)}
.tier-featured::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;pointer-events:none}
.tier-badge{position:absolute;top:-.8rem;left:1.7rem;padding:.3rem .7rem;border-radius:999px;background:var(--grad-ink);color:#fff;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.tier-head h3{margin-bottom:.3rem;font-size:1.3rem}
.tier-head p{margin:0;color:var(--muted);font-size:.92rem}
.tier-price{display:flex;align-items:baseline;gap:.5rem}
.tier-price span{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.tier-price small{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--mono)}
.tier-fee{font-size:.82rem;color:var(--mint);padding:.3rem .7rem;border-radius:999px;border:1px solid rgba(111,247,196,.3);background:rgba(111,247,196,.08);align-self:flex-start}
.tier-list{list-style:none;margin:0;padding:1rem 0 0;border-top:1px solid var(--line);display:grid;gap:.55rem;font-size:.9rem;color:var(--muted);flex:1}
.tier-list li{padding-left:1.3rem;position:relative}
.tier-list li::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.tier .btn{align-self:stretch;margin-top:.4rem}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
.plan-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.3rem;border-radius:999px;border:1px solid var(--line-field);background:var(--ink);margin-bottom:1.2rem}
.plan-toggle button{padding:.55rem .8rem;border-radius:999px;border:0;background:transparent;font-weight:700;font-size:.86rem;color:var(--muted);cursor:pointer;display:flex;justify-content:center;gap:.5rem;transition:all .3s}
.plan-toggle button b{font-weight:600;opacity:.8}
.plan-toggle button.is-on{background:var(--text);color:var(--ink)}
.soft-from{font-size:.74rem;font-weight:500;color:var(--muted)}
.price-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.2rem}
.receipt,.calc{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);padding:1.5rem}
.receipt-head{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);padding-bottom:.7rem;border-bottom:1px dashed var(--line-strong)}
.receipt ul{list-style:none;margin:0;padding:0;font-size:.86rem}
.receipt li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px dashed var(--line)}
.receipt li span{color:var(--muted)}
.receipt li b{font-weight:600}
.receipt-note{font-size:.8rem;color:var(--soft);margin:1rem 0 0}
.calc h3,.calc .lifted-h2{margin-bottom:.2rem}
.calc-sub{margin:0 0 1.2rem;color:var(--muted);font-size:.9rem}
.range{display:grid;gap:.5rem;margin-bottom:1.1rem;font-size:.88rem;color:var(--muted)}
.range span{display:flex;justify-content:space-between}
.range b{color:var(--text)}
input[type=range]:not(:focus-visible){outline:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--ink-3);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--grad);border:3px solid var(--ink);box-shadow:0 0 0 2px rgba(255,255,255,.2),0 6px 16px -4px rgba(255,45,149,.7);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--grad);border:3px solid var(--ink);cursor:grab}
.calc-out{display:grid;gap:.4rem;padding:1rem 0;border-block:1px solid var(--line);margin-bottom:1rem}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--muted)}
.calc-row b{color:var(--text);font-weight:600}
.calc-row.big{font-size:1.05rem}
.calc-row.big b{font-size:1.9rem;font-weight:600;letter-spacing:-.03em}
.calc-row.save b{font-weight:700}
.calc-note{font-size:.8rem;color:var(--soft);margin:.8rem 0 0}
@media (max-width:900px){.price-grid{grid-template-columns:1fr}}

.compare{margin-top:1.2rem;border-radius:var(--r-lg);border:1px solid var(--line);overflow:auto;background:var(--panel-faint)}
.compare table{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
.compare th,.compare td{padding:.95rem 1.25rem;text-align:left;border-bottom:1px solid var(--line)}
.compare th{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.compare th:nth-child(2){color:var(--text)}
.compare tr:last-child td{border-bottom:0}
.compare td:first-child{color:var(--muted)}
.compare td.yes{color:var(--text);font-weight:600}
.compare td.yes::before{content:"● ";color:var(--mint)}
.compare td.no{color:var(--soft)}
.compare td.no::before{content:"○ ";color:var(--soft)}
.compare td:nth-child(2){background:rgba(111,247,196,.04)}

/* ---- steps ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:s}
.step{position:relative;padding:1.6rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.step p{margin:0;color:var(--muted);font-size:.96rem}
.step-n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--grad-ink);color:#fff;font-weight:600;margin-bottom:1rem;box-shadow:0 8px 20px -8px rgba(255,45,149,.7)}
.step:not(:last-child)::after{content:"";position:absolute;right:-1.1rem;top:2.75rem;width:1.1rem;height:2px;background:var(--line-strong)}
@media (max-width:800px){.steps{grid-template-columns:1fr}.step:not(:last-child)::after{display:none}}

/* ---- faq ---- */
.faq{display:grid;gap:.6rem}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--panel-faint);padding:0 1.25rem;transition:border-color .3s}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 0;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--muted);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--mint)}
.faq p{margin:0 0 1.1rem;color:var(--muted);font-size:.96rem}

/* ---- cta ---- */
.cta{padding-top:2rem}
.cta-card{text-align:center;padding:clamp(2rem,6vw,4rem) clamp(1.2rem,4vw,3rem);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--grad-soft);position:relative;overflow:hidden}
.cta-card::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,45,149,.18),transparent 30%,rgba(76,111,255,.18),transparent 60%,rgba(255,122,24,.18),transparent);animation:spin 18s linear infinite;pointer-events:none}
.cta-card > *{position:relative}
.cta-card .lede{margin-inline:auto}
.cta-form{display:flex;gap:.6rem;margin:1.8rem auto 0;max-width:640px}
.cta-form input{padding:.95rem 1.2rem;font-size:1rem;background:var(--input-bg)}
.cta-fine{margin:1.2rem 0 0;font-size:.74rem;color:var(--muted);letter-spacing:.04em}
@media (max-width:600px){.cta-form{flex-direction:column}.cta-form .btn{width:100%}}

/* ---- footer ----
   Was one flex row of fifteen links: a wall to scan past, and a screen reader reading all fifteen
   with nothing to say what any of them were for. Now a brand column and four headed groups, with
   the headings as real h2s inside the nav so the grouping is in the document and not only in the
   layout. Collapses to two columns on a tablet and one on a phone, in that order, because four
   narrow columns of four links is worse than one readable list. */
.footer{border-top:1px solid var(--line);padding:3rem 0 2rem;background:var(--panel-faint)}
.footer-inner{display:grid;grid-template-columns:minmax(16rem,22rem) 1fr;gap:2.5rem 3rem;align-items:start}
.footer-brand{display:grid;gap:1rem;justify-items:start}
.footer-pitch{margin:0;font-size:.88rem;line-height:1.65;color:var(--muted);max-width:34ch}
.footer-socials{display:flex;gap:.6rem;flex-wrap:wrap}
.footer-social{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:.82rem;color:var(--muted);transition:color .2s var(--ease),border-color .2s var(--ease)}
.footer-social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-social:hover{color:var(--text);border-color:var(--line-field)}
.footer-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem 1.4rem}
.footer-col h2{margin:0 0 .7rem;font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.footer-col ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.footer-col li{font-size:.88rem;color:var(--muted);line-height:1.4}
.footer-col a:hover{color:var(--text)}
/* The current page is text, not a link to itself. Marked rather than hidden, so the group still
   reads complete. */
.footer-col [aria-current="page"]{color:var(--text);font-weight:600}
.footer-base{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;justify-content:space-between;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.footer-fine{margin:0;font-size:.78rem;color:var(--soft);max-width:78ch}
.footer-copy{margin:0;font-size:.78rem;color:var(--soft);white-space:nowrap}
@media (max-width:980px){
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  .footer-pitch{max-width:60ch}
}
@media (max-width:680px){
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .footer-nav{grid-template-columns:1fr;gap:1.4rem}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .marquee-track{animation:none}
  .reveal.is-pending{opacity:1;transform:none}
  .flow-liquid{stroke-dasharray:none}
}

/* ---- thank-you page ---- */
.page-thanks .section{padding-top:clamp(2rem,6vw,4rem)}
.thanks-card{padding:clamp(1.6rem,4vw,3rem);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.thanks-card h1.display{font-size:clamp(2.4rem,6vw,4rem)}
.thanks-sign{margin:1.6rem 0 1.8rem;color:var(--muted);line-height:1.5}
.thanks-sign b{color:var(--text);font-family:var(--display);font-weight:600;font-size:1.05rem}

/* ---- demo page ---- */
.page-demo .section{padding-top:clamp(1.5rem,5vw,3.5rem)}
.demo-head{max-width:760px;margin-bottom:1.6rem}
.demo-head h1.display{font-size:clamp(2rem,5vw,3.4rem)}
.demo-head .lede{margin-top:.8rem}
.demo-embed{position:relative;width:100%;min-height:640px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);overflow:hidden}
.demo-embed iframe{border:0;width:100%}
.demo-fallback{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:1.5rem;text-align:center;color:var(--muted);font-size:.95rem}
/* meetings.js hides this with `hidden` once the iframe appears. The rule above sets `display`, and
   an author `display` beats the browser's own [hidden]{display:none} - so without this line the
   overlay sat on top of the loaded calendar for good. */
.demo-fallback[hidden]{display:none}
.demo-fallback a{color:var(--text);text-decoration:underline}
@media (max-width:600px){.demo-embed{min-height:560px;border-radius:var(--r)}}

/* ---- at a glance ---- */
.section-glance{padding-top:clamp(3rem,6vw,5rem);padding-bottom:0}
.glance{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.glance-copy h2.display{font-size:clamp(1.6rem,3vw,2.4rem)}
.glance-facts{margin:0;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden}
.glance-facts div{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--line);font-size:.9rem}
.glance-facts div:last-child{border-bottom:0}
.glance-facts dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.glance-facts dd{margin:0;color:var(--text)}
@media (max-width:900px){.glance{grid-template-columns:1fr}.glance-facts div{grid-template-columns:7.5rem 1fr}}

/* ---- comparison marks ---- */
.compare td.mid{color:var(--muted)}
.compare td.mid::before{content:"◐ ";color:var(--muted)}

/* ---- vs competitors ---- */
.compare.vs table{min-width:860px}
.compare.vs th:nth-child(2){color:var(--text)}
.compare td.mid{color:var(--muted)}
.compare td.mid::before{content:"◐ ";color:var(--muted)}
.vs-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.2rem}
.vs-notes article{padding:1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.vs-notes p{margin:0;color:var(--muted);font-size:.95rem}
@media (max-width:900px){.vs-notes{grid-template-columns:1fr}}

/* ---- lead forms ---- */
.lead-form{display:grid;gap:.7rem}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.lead-grid input,.lead-grid select{min-width:0;padding:.7rem .95rem;border-radius:12px;border:1px solid var(--line-field);background:var(--input-bg);color:var(--text);font-size:.92rem}
.lead-grid select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.lead-grid .span-2{grid-column:span 2}
.lead-form .btn{justify-self:start}
.form-error{display:none;margin:0;font-size:.82rem;color:var(--error)}
.lead-form.is-invalid .form-error{display:block}
.lead-form.is-invalid input[name="email"]{border-color:var(--error)}
.consent{margin:0;font-size:.74rem;color:var(--soft);line-height:1.45;max-width:52ch}
@media (max-width:520px){.lead-grid{grid-template-columns:1fr}.lead-grid .span-2{grid-column:span 1}}

/* calculator gate */
.calc-compare{position:relative}
.calc-compare.is-locked .range,.calc-compare.is-locked .calc-row{filter:blur(6px);pointer-events:none;user-select:none}
.calc-compare[inert]{cursor:default}
.calc-compare .gate{margin-top:1rem;padding:1.1rem;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--panel-solid)}
.calc-compare:not(.is-locked) .gate{display:none}
.gate-title{margin:0;font-weight:700;font-size:.95rem}

/* checklist section */
.section-checklist{background:linear-gradient(180deg,transparent,var(--panel-faint) 20%,var(--panel-faint) 80%,transparent)}
.checklist{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.checklist-form,.checklist-done{padding:1.6rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.checklist-done h3,.checklist-done .lifted-h2{margin:.4rem 0 .5rem}
.checklist-done p:last-child{margin:0;color:var(--muted)}
@media (max-width:900px){.checklist{grid-template-columns:1fr}}

/* ---- alternative pages ---- */
.page-alt .alt-hero{padding-bottom:0}
.page-alt .alt-hero .eyebrow a{color:var(--muted)}
.page-alt .alt-hero .eyebrow a:hover{color:var(--text)}
.page-alt h1.display{font-size:clamp(2.2rem,5.5vw,4rem)}
.alt-date{margin:1rem 0 0;font-size:.74rem;color:var(--soft);letter-spacing:.02em}
.alt-section{padding:clamp(2.5rem,5vw,4rem) 0}
.h2-sm{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.4rem}
.alt-section .lede{margin:.6rem 0 0;max-width:70ch}
.alt-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.6rem}
.alt-col{padding:1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.alt-col h3{margin-bottom:1rem;font-size:1.05rem}
.alt-col-df{border-color:rgba(255,45,149,.4);background:var(--grad-soft)}
.tier-list.plain li::before{content:"–";color:var(--muted)}
.price-lines{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.88rem;color:var(--text)}
.price-lines li{padding:.6rem .8rem;border-radius:12px;background:var(--panel-solid);border:1px solid var(--line)}
.alt-note{margin:1.2rem 0 0;color:var(--muted);max-width:70ch}
.compare.vs2{margin-top:1.2rem}
.compare.vs2 table{min-width:720px}
.compare.vs2 th:nth-child(2){color:var(--text)}
.compare td.mid{color:var(--muted)}
.alt-choose{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.alt-choose .eyebrow{margin-bottom:.8rem}
.alt-related{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.alt-related a{padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line-strong);font-weight:600;font-size:.9rem;transition:border-color .2s,transform .3s var(--ease)}
.alt-related a:hover{border-color:var(--text);transform:translateY(-2px)}
@media (max-width:800px){.alt-cols,.alt-choose{grid-template-columns:1fr}}

/* ---- legal pages ---- */
.page-legal{padding:clamp(1.5rem,4vw,3rem) 0 clamp(3rem,6vw,5rem)}
.legal-grid{display:grid;grid-template-columns:240px 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.legal-toc{position:sticky;top:88px;font-size:.86rem}
.legal-toc .eyebrow{margin:0 0 .6rem}
.legal-docs{display:grid;gap:.25rem;margin-bottom:1.6rem}
.legal-docs a{padding:.45rem .7rem;border-radius:10px;color:var(--muted)}
.legal-docs a:hover{color:var(--text);background:var(--panel-faint)}
.legal-docs a[aria-current="page"]{color:var(--text);background:var(--panel-solid);border:1px solid var(--line);font-weight:700}
.toc{margin:0;padding-left:1.2rem;display:grid;gap:.3rem;color:var(--muted)}
.toc a:hover{color:var(--text)}
.legal-body{max-width:72ch}
.legal-body h1.display{font-size:clamp(1.9rem,4vw,2.8rem)}
.legal-meta{margin:.8rem 0 1.4rem;font-size:.74rem;color:var(--soft);letter-spacing:.04em}
.legal-intro{font-size:1.05rem;color:var(--text)}
.legal-body section{margin-top:2.2rem}
.legal-body h2{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;margin:0 0 .7rem;scroll-margin-top:90px}
.legal-body p{margin:0 0 .9rem;color:var(--muted)}
.legal-body p strong{color:var(--text)}
.legal-body ul{margin:0 0 .9rem;padding-left:1.3rem;color:var(--muted);display:grid;gap:.45rem}
.legal-body a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.legal-body a:hover{text-decoration-color:var(--flow-b)}
.optout-box{margin:.4rem 0 1.2rem;padding:1.2rem;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.optout-status{margin:.8rem 0 0 !important;font-weight:600;color:var(--mint) !important}
@media (max-width:860px){.legal-grid{grid-template-columns:1fr}.legal-toc{position:static}.toc{display:none}}

/* The pitch's own link to the hosted version. Deliberately plain and secondary: the form is still
   the ask, and a lead magnet that hides the thing it is offering reads as a trick. */
.checklist-alt{margin:1rem 0 0;font-size:.88rem;color:var(--soft)}
.checklist-alt a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.checklist-alt a:hover{color:var(--text)}
.checklist-done .btn{margin-top:.4rem}

/* ---- launch checklist ----
   The hosted version of the lead magnet. Numbered, because these genuinely are a sequence: each
   step unblocks the next, which is the one thing a checklist can say that a list of tips cannot.
   Prints as a document - the nav, the footer and the CTA drop out, and the steps do not break
   across pages. */
.page-checklist{padding:clamp(1.5rem,4vw,3rem) 0 clamp(3rem,6vw,5rem)}
.page-checklist .lede{max-width:62ch}
.lc-list{list-style:none;counter-reset:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.1rem}
.lc-step{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;padding:1.4rem 1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.lc-num{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:var(--r-pill);background:var(--grad-ink);color:#fff;font-family:var(--mono);font-size:.9rem;font-weight:600}
.lc-body h2{margin:.15rem 0 .5rem;font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em;line-height:1.35}
.lc-flag{display:inline-block;margin-left:.1rem;padding:.2rem .5rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);font-family:var(--body);font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);white-space:nowrap;vertical-align:middle}
.lc-why{margin:0 0 .7rem;font-size:.94rem;color:var(--muted)}
.lc-does{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.9rem;color:var(--muted)}
.lc-does li::marker{color:var(--soft)}
/* What Dispense Flow does about this step. Separated by a rule rather than a tinted panel: three
   coloured boxes down a twelve-item list turns the checklist into an advertisement, which is the
   one thing a checklist cannot be and still be read. */
.lc-df{margin:.85rem 0 0;padding-top:.7rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted);line-height:1.5}
.lc-df-tag{font-weight:700;color:var(--text)}
/* The brand hue marks what we do, and only that. "Yours to do" stays in the muted text colour, so
   the colour means "we cover this" rather than decorating every line equally. */
.lc-df-covered .lc-df-tag{color:var(--accent-strong)}
.lc-df-partly .lc-df-tag{color:var(--text)}
.lc-df-you .lc-df-tag{color:var(--soft)}
.lc-df-note{color:var(--muted)}
.lc-cta{margin-top:2.4rem;padding:1.6rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.lc-cta h2{margin:0 0 .5rem;font-family:var(--display);font-weight:600;font-size:1.15rem}
.lc-cta p{margin:0;color:var(--muted);font-size:.94rem}
.lc-fine{margin:1.6rem 0 0;font-size:.78rem;color:var(--soft);max-width:72ch}
@media (max-width:560px){
  .lc-step{grid-template-columns:1fr;gap:.6rem}
  .lc-flag{margin-left:0}
}
@media print{
  .nav,.footer,.aurora,.lc-cta,.skip-link,.art-crumbs{display:none !important}
  .page-checklist{padding:0}
  .lc-step{break-inside:avoid;border-color:#ccc;background:none}
  .lc-num{background:#000 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lc-df{border-top-color:#ccc}
  .lc-df-tag{color:#000 !important}
}

/* ---- articles ----
   Reuses the legal pages' prose measure and link treatment, because that typography is already
   tested for contrast and reads well at length. What is added is the shape an answer engine wants:
   the direct answer in a panel at the top, question headings, and a Q&A block at the end that is
   rendered from the same data as the FAQ markup. */
.page-article{padding:clamp(1.5rem,4vw,3rem) 0 clamp(3rem,6vw,5rem)}
.art-grid{display:grid;grid-template-columns:1fr 240px;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
/* The contents sit after the article in the source and to its right on screen: a list of links is
   not what a screen reader should meet before the article it describes. */
.art-toc{order:2;position:sticky;top:88px;font-size:.86rem}
.art-toc ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.art-toc a{color:var(--muted);padding:.2rem 0;display:block}
.art-toc a:hover{color:var(--text)}
.art-body{order:1;max-width:72ch}
.art-crumbs{font-size:.8rem;color:var(--soft);margin-bottom:1rem}
.art-crumbs a{color:var(--muted)}
.art-crumbs a:hover{color:var(--text)}
.art-body h1.display{font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 .6rem}
.art-meta{margin:0 0 1.6rem;font-size:.78rem;color:var(--soft);letter-spacing:.03em}
.art-answer{margin:0 0 2.2rem;padding:1.3rem 1.4rem;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--panel)}
.art-answer .eyebrow{margin:0 0 .5rem}
.art-answer p:last-child{margin:0;font-size:1.04rem;line-height:1.7;color:var(--text)}
.art-body section{margin-top:2.2rem}
.art-body h2{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;margin:0 0 .8rem;scroll-margin-top:90px}
.art-body h3{font-family:var(--body);font-weight:700;font-size:1rem;margin:0 0 .4rem}
.art-body p{margin:0 0 .9rem;color:var(--muted)}
.art-body p strong{color:var(--text)}
.art-body a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.art-body a:hover{text-decoration-color:var(--flow-b)}
.art-qa{margin:0 0 1.3rem}
.art-qa p{margin:0}
.art-cta{margin-top:2.6rem;padding:1.6rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.art-cta h2{margin:0 0 .5rem}
.art-cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.1rem 0 0 !important}
.art-related{margin-top:2.6rem}
.art-related ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.art-related a{display:grid;gap:.15rem;padding:.9rem 1.1rem;border-radius:var(--r);border:1px solid var(--line);text-decoration:none}
.art-related a:hover{border-color:var(--line-field)}
.art-card-title{color:var(--text);font-weight:600;font-size:.95rem}
.art-card-date{color:var(--soft);font-size:.76rem}

/* index */
.page-article-index .lede{max-width:62ch}
.art-list{margin:2.2rem 0 0;padding:0;list-style:none;display:grid;gap:1rem}
.art-item a{display:grid;gap:.4rem;padding:1.4rem 1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);text-decoration:none;transition:border-color .2s var(--ease)}
.art-item a:hover{border-color:var(--line-field)}
.art-item-date{margin:0;font-size:.76rem;color:var(--soft);letter-spacing:.03em}
.art-item h2{margin:0;font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;color:var(--text)}
.art-item-sum{margin:0;font-size:.92rem;color:var(--muted);max-width:72ch}
.art-item-more{font-size:.84rem;font-weight:600;color:var(--text)}
@media (max-width:860px){
  .art-grid{grid-template-columns:1fr}
  /* The contents stop being useful once they are no longer beside the text they index. */
  .art-toc{display:none}
}

/* ---- paid-search landing pages ---- */
.hero-landing{padding-top:clamp(2rem,5vw,4rem)}
.landing-h1{font-size:clamp(1.9rem,4.6vw,3.6rem)}
.hero-landing .lede{font-size:clamp(1rem,1.3vw,1.15rem)}
.hero-grid-form{grid-template-columns:1.05fr .95fr}
.hero-form .checklist-form,.hero-form .checklist-done{opacity:0;transform:translateY(24px);animation:up 1s var(--ease) .2s forwards}
.section-flow{padding-top:0}
.section-flow .flow{opacity:1;transform:none;animation:none;max-width:760px}
@media (max-width:1000px){.hero-grid-form{grid-template-columns:1fr}}
@media (max-width:520px){.hero-landing{padding-top:1.4rem}.landing-h1{font-size:1.7rem}.hero-landing .lede{font-size:.98rem}.hero-landing .hero-actions{margin-top:1.2rem}}
.hero-calc{padding-bottom:1.5rem}
.hero-calc .hero-copy{max-width:760px}

/* ---- monthly / annual toggle ---- */
.billing-toggle{display:inline-flex;gap:.3rem;padding:.3rem;margin:0 0 1.2rem;border-radius:999px;border:1px solid var(--line-field);background:var(--panel-solid)}
.billing-toggle button{display:inline-flex;align-items:baseline;gap:.45rem;padding:.55rem 1.1rem;border-radius:999px;border:0;background:transparent;font:inherit;font-weight:700;font-size:.9rem;color:var(--muted);cursor:pointer;transition:background .25s,color .25s}
.billing-toggle button em{font-style:normal;font-weight:600;font-size:.74rem;color:var(--mint)}
.billing-toggle button.is-on{background:var(--text);color:var(--ink)}
.billing-toggle button.is-on em{color:var(--ink);opacity:.7}
.tier-save{margin:-.4rem 0 0;font-size:.78rem;color:var(--mint)}

/* pricing add-on strip */
.addon{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:1.2rem 0 1.6rem;padding:1.3rem 1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden}
.addon::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--grad)}
.addon-head{flex:1 1 auto;min-width:0}
.addon-tag{display:inline-block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:.35rem}
.addon h3{margin:0 0 .3rem;font-size:1.1rem}
.addon p{margin:0;color:var(--muted);font-size:.9rem;max-width:62ch}
.addon-price{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.addon-price span{font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.addon-price small{color:var(--soft);font-size:.8rem}
.addon-price em{font-style:normal;font-size:.7rem;color:var(--soft);letter-spacing:.06em}
@media (max-width:760px){.addon{flex-direction:column;align-items:flex-start}.addon-price{align-items:flex-start;text-align:left}}

/* ---- mobile composition (≤700px). Desktop is untouched: these hooks are inert above the breakpoint. ---- */
.m-stats{display:none}
.card-ico{display:none}
details.m-fold>summary{display:none}
details.m-fold>summary::-webkit-details-marker{display:none}
@media (max-width:700px){
  .section{padding:2.8rem 0}
  .section-head{margin-bottom:1.3rem}
  .hero{padding-top:1.6rem}
  .hero-copy .lede{font-size:1rem}
  /* stat strip under the hero: four numbers instead of a wall of text */
  .m-stats{display:block;margin:1.4rem 0 0}
  .m-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
  .m-stats-row div{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.8rem .3rem;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);text-align:center}
  .m-stats-row b{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;line-height:1}
  .m-stats-row span{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-family:var(--mono)}
  /* card rails: swipe sideways instead of scrolling through a stack */
  .bento,.themes,.tiers,.glance-facts{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;margin-inline:-1.25rem;padding:.9rem 1.25rem 1rem;scroll-padding-inline:1.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bento::-webkit-scrollbar,.themes::-webkit-scrollbar,.tiers::-webkit-scrollbar,.glance-facts::-webkit-scrollbar,.apps::-webkit-scrollbar{display:none}
  .bento>*,.themes>*,.tiers>*{flex:0 0 82%;scroll-snap-align:start;min-width:0}
  .card-wide{grid-column:auto}
  .card:hover,.theme-card:hover,.tier:hover,.app:hover{transform:none}
  .tiers{margin-bottom:.6rem}
  .tier{flex-basis:84%;scroll-snap-align:center}
  .card-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--grad-soft);margin-bottom:.8rem}
  .card-ico{color:var(--flow-b)}
  .card-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .card .mini-browser{margin-top:1rem}
  .mb-cards span:nth-child(3){display:none}
  /* the fact table becomes a strip of fact cards */
  .glance-facts{border:0;background:transparent;border-radius:0}
  .glance-facts div,.glance-facts div:last-child{flex:0 0 70%;scroll-snap-align:start;display:flex;flex-direction:column;gap:.35rem;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:.9rem 1rem}
  .glance-facts dd{font-size:.92rem}
  /* app tiles: two rows that swipe */
  .apps{display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-template-columns:none;grid-auto-columns:44%;overflow-x:auto;scroll-snap-type:x mandatory;gap:.7rem;margin-inline:-1.25rem;padding:.4rem 1.25rem .8rem;scroll-padding-inline:1.25rem;scrollbar-width:none}
  .app{scroll-snap-align:start}
  /* folds: the itemised fees, calculator and comparison open on tap */
  details.m-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;cursor:pointer;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);font-weight:700;font-size:1rem}
  details.m-fold>summary i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;flex:none}
  details.m-fold>summary i::before{content:"";width:7px;height:7px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
  details.m-fold[open]>summary i::before{transform:translateY(2px) rotate(-135deg)}
  details.m-fold[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
  details.m-fold .receipt,details.m-fold .calc,details.m-fold .compare{border-top-left-radius:0;border-top-right-radius:0;margin-top:0}
  .price-grid{display:flex;flex-direction:column;gap:.7rem}
  .compare{margin-top:0;overflow-x:auto}
  details.m-fold+details.m-fold,.price-grid+details.m-fold{margin-top:.7rem}
  /* steps: number beside the title, not above it */
  .step{display:grid;grid-template-columns:38px 1fr;column-gap:.9rem;padding:1.1rem}
  .step-n{margin:0;grid-row:span 2}
  .step h3{margin:0 0 .3rem;font-size:1.05rem;align-self:center}
  .step p{font-size:.92rem}
  /* the builder's storefront mock: brand and CTA only, the mock nav links wrapped on a phone */
  .pv-nav span{display:none}
  .pv-nav b{white-space:nowrap}
}

/* ---- referral program (/partners) ---- */
.ref-hero h1.display{font-size:clamp(2.1rem,4.4vw,3.5rem)}
.ref-hero .lede{max-width:56ch}
.ref-card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel-solid);padding:1.1rem 1.2rem 1rem;box-shadow:var(--shadow-flow),inset 0 1px 0 rgba(255,255,255,.06);opacity:0;transform:translateY(24px) scale(.98);animation:up 1s var(--ease) .2s forwards}
.ref-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;pointer-events:none}
.ref-card-tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ref-code{display:block;font-size:clamp(2rem,4.2vw,3rem);font-weight:600;letter-spacing:.06em;margin:.9rem 0 .2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.ref-link{display:block;font-size:.84rem;color:var(--muted);word-break:break-all}
.ref-ledger{list-style:none;margin:1rem 0 0;padding:0;font-size:.82rem;border-top:1px solid var(--line)}
.ref-ledger li{display:grid;grid-template-columns:1.3fr 1fr auto;gap:.8rem;align-items:baseline;padding:.6rem 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.ref-ledger li span:first-child{color:var(--text);font-weight:600;font-family:var(--body)}
.ref-ledger b{color:var(--text);font-weight:600}
.ref-ledger small{color:var(--muted);font-size:.7rem;margin-left:.1rem}
.ref-card .flow-foot{margin-top:.2rem;border-top:0;padding-top:.7rem}
.ref-tracks{margin-top:0}
.ref-tracks .tier-price span{font-size:clamp(2.2rem,3.6vw,3rem)}
.section-earn{padding-top:0}
.ref-earn{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:clamp(1.4rem,3vw,2.4rem);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.ref-earn-head h2.display{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.ref-earn-head .lede{font-size:1rem}
.ref-earn-rows{display:grid;gap:.7rem}
.ref-earn-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1rem;align-items:center;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-solid)}
.ref-earn-plan{font-weight:600;display:flex;flex-direction:column;gap:.15rem}
.ref-earn-plan em{font-style:normal;font-size:.74rem;color:var(--muted)}
.ref-earn-month b,.ref-earn-total b{display:block;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.ref-earn-month small,.ref-earn-total small{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.ref-earn-note{grid-column:1/-1;margin:0;font-size:.8rem;color:var(--soft);max-width:none}
.ref-customer-note{margin:1.2rem 0 0;padding:.9rem 1rem;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-faint);font-size:.92rem;color:var(--muted)}
.ref-customer-note b{color:var(--text)}
.ref-customer-note a{text-decoration:underline;color:var(--text)}
.ref-form textarea{min-width:0;padding:.7rem .95rem;border-radius:12px;border:1px solid var(--line-field);background:var(--input-bg);color:var(--text);font-size:.92rem;font-family:inherit;resize:vertical}
.ref-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ref-form .is-bad{border-color:var(--error)}
.ref-agree{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--muted);padding:.2rem 0}
.ref-agree input{margin-top:.2rem;accent-color:var(--flow-b);width:16px;height:16px;flex:none}
.ref-agree.is-bad{color:#E24C4C}
.ref-agree a{text-decoration:underline;color:var(--text)}
.ref-done h3{font-size:1.35rem}
.ref-done p{color:var(--muted)}
.ref-share{display:grid;gap:.6rem;margin:1rem 0 .8rem}
.ref-share-row{display:grid;grid-template-columns:4.2rem 1fr auto;gap:.7rem;align-items:center;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-solid)}
.ref-share-row .ref-code{font-size:1.5rem;margin:0;letter-spacing:.08em}
.ref-share-row .ref-link{font-size:.82rem;color:var(--text)}
.ref-share-label{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ref-share-msg{grid-template-columns:4.2rem 1fr auto;align-items:start}
.ref-share-msg output{font-size:.84rem;color:var(--muted);line-height:1.45}
.ref-copy{padding:.45rem .8rem;font-size:.8rem}
.ref-emailed{margin:0 0 1rem;font-size:.9rem}
.ref-nocode{padding:.9rem 1rem;border-radius:var(--r);border:1px dashed var(--line-strong);font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.ref-nocode b{color:var(--text)}
.ref-nocode a{text-decoration:underline;color:var(--text)}
.ref-book{border:1px solid var(--line);border-radius:var(--r);background:var(--panel-faint)}
.ref-book>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1rem;font-weight:700;font-size:.92rem}
.ref-book>summary::-webkit-details-marker{display:none}
.ref-book>summary i{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;flex:none}
.ref-book>summary i::before{content:"";width:6px;height:6px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.ref-book[open]>summary i::before{transform:translateY(2px) rotate(-135deg)}
.ref-embed{min-height:560px;border:0;border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r)}
.ref-booked{margin:0;padding:.8rem 1rem;font-size:.9rem;color:var(--mint);font-weight:600}
.ref-skip{margin:.9rem 0 0;font-size:.82rem;color:var(--soft)}
.ref-skip a{text-decoration:underline}
.ref-essentials{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:1.4rem 1.5rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.ref-essentials ul{margin:.6rem 0 0;padding-left:1.2rem;display:grid;gap:.45rem;font-size:.9rem;color:var(--muted)}
.ref-essentials p{margin:.9rem 0 0;font-size:.9rem}
.ref-essentials a{text-decoration:underline;color:var(--text)}
.cta-fine a{text-decoration:underline}
/* referral code banner on the landing page (?ref=CODE) */
.ref-banner{position:relative;z-index:1;background:var(--grad-soft);border-bottom:1px solid var(--line)}
.ref-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;font-size:.86rem}
.ref-banner b{font-family:var(--mono);letter-spacing:.06em}
.ref-banner button{border:0;background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:.2rem .4rem;line-height:1}
@media (max-width:900px){.ref-earn{grid-template-columns:1fr}}
@media (max-width:700px){
  .ref-card{margin-top:.5rem}
  .ref-earn-row{grid-template-columns:1fr 1fr;row-gap:.6rem}
  .ref-earn-plan{grid-column:1/-1}
  .ref-share-row,.ref-share-msg{grid-template-columns:1fr auto}
  .ref-share-label{grid-column:1/-1}
  .ref-tracks .tier-featured{order:0}
}

/* /partners: bonus table, offer cards, terms fold */
.ref-table-wrap{display:grid;gap:.8rem}

/* ---- pricing: the fee tables ----
   Two plain tables rather than cards. A fee table is read by comparing rows, and it is also the
   shape an answer engine can quote without interpreting a layout. `table-wrap` scrolls on its own
   so a long row never makes the page scroll sideways. */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.fee-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:28rem}
.fee-table th,.fee-table td{padding:.85rem 1.1rem;text-align:left;vertical-align:top}
.fee-table thead th{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);border-bottom:1px solid var(--line)}
.fee-table tbody tr+tr th,.fee-table tbody tr+tr td{border-top:1px solid var(--line)}
.fee-table tbody th{font-weight:600;color:var(--text)}
.fee-table tbody td{color:var(--muted)}
.muted-note{margin:.9rem 0 0;font-size:.9rem;color:var(--muted)}

/* ---- category roundups: the shortlist ----
   Reuses .alt-col from the comparison pages so the two page types read as one family. The grid
   holds its columns to a readable measure rather than stretching one card across the page when a
   shortlist happens to be short. */
.round-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));align-items:start}
.round-item h3{margin:0 0 .6rem;font-family:var(--display);font-weight:600;font-size:1.05rem}
.round-best{margin:0 0 .6rem;font-size:.94rem;color:var(--muted);line-height:1.55}
.round-best b{color:var(--text);font-weight:700}
.round-price{margin:0 0 .8rem;font-size:.88rem;color:var(--soft);line-height:1.5}
.round-item p:last-child{margin:0;font-size:.92rem}
/* Table captions name the table for a screen reader. Visible, they would repeat the heading above. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ref-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel-solid);font-size:.95rem}
.ref-table th,.ref-table td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line)}
.ref-table th{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--panel-faint)}
.ref-table tr:last-child td{border-bottom:0}
.ref-table td:last-child,.ref-table th:last-child{text-align:right;white-space:nowrap}
.ref-table td b{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ref-table .soft{color:var(--muted);font-size:.78rem;margin-left:.35rem}
.section-offers{padding-top:0}
.ref-offers{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.ref-offers .card h3{font-size:1.35rem}
.ref-owner .btn{margin-top:1.1rem}
.ref-terms{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);margin-top:clamp(1.5rem,4vw,2.5rem)}
.ref-terms>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.3rem;font-weight:700;font-size:.95rem}
.ref-terms>summary::-webkit-details-marker{display:none}
.ref-terms>summary i{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;flex:none}
.ref-terms>summary i::before{content:"";width:6px;height:6px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.ref-terms[open]>summary i::before{transform:translateY(2px) rotate(-135deg)}
.ref-terms ul{margin:0;padding:0 1.3rem 1rem 2.4rem;display:grid;gap:.5rem;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem}
.ref-terms li b{color:var(--text)}
.ref-terms-fine{margin:0;padding:0 1.3rem 1.1rem;font-size:.76rem;color:var(--soft)}
@media (max-width:700px){.ref-offers{grid-template-columns:1fr}.ref-table th,.ref-table td{padding:.75rem .8rem}.ref-table td b{font-size:1.1rem}}

/* ===== /apply — the platform access application =============================================
   Reuses .lead-form, .lead-grid, .span-2, .ref-agree, .form-error and .consent so the controls
   match every other form on the site. What is added here is the structure a twenty-field
   application needs and a two-field lead form does not: grouped sections, a category picker, and
   the disclosure question with its follow-up. */
.apply-hero{padding:clamp(2.2rem,6vw,4.5rem) 0 clamp(1.2rem,3vw,2rem)}
.apply-lede{margin:.9rem 0 0;font-size:1.02rem;line-height:1.7;color:var(--muted);max-width:60ch}
.apply-facts{list-style:none;margin:1.3rem 0 1.6rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .6rem}
.apply-facts li{font-size:.84rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem}
.apply-facts strong{color:var(--text);font-weight:600}

.apply-check{padding:clamp(1.5rem,4vw,2.5rem) 0}
.apply-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.1rem}
.apply-check-grid>div{padding:1.1rem 1.25rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.apply-check-grid h3{margin:0 0 .4rem;font-size:.96rem}
.apply-check-grid p{margin:0;font-size:.88rem;line-height:1.62;color:var(--muted)}

.apply-wrap{padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(3rem,6vw,5rem);max-width:760px}
.apply-form{gap:1.4rem}
/* A fieldset is the right element for a named group of controls, and it arrives with a border and
   padding no design wants. */
.apply-set{border:0;margin:0;padding:0;display:grid;gap:.7rem}
.apply-set legend{padding:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.apply-help{margin:0;font-size:.84rem;color:var(--muted)}
.apply-form textarea{min-width:0;padding:.7rem .95rem;border-radius:12px;border:1px solid var(--line-field);background:var(--input-bg);color:var(--text);font-size:.92rem;font-family:inherit;resize:vertical}
.apply-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.apply-cats{display:flex;flex-wrap:wrap;gap:.5rem}
.cat{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;color:var(--muted);
  border:1px solid var(--line-field);border-radius:999px;padding:.4rem .85rem;cursor:pointer;
  transition:border-color .2s,color .2s}
.cat:hover{color:var(--text)}
.cat:has(input:checked){border-color:var(--flow-b);color:var(--text)}
/* :has() is recent enough that the checkbox stays visible rather than being hidden behind it, so
   the state is legible either way. */
.cat input{margin:0}

.apply-disclose{margin-top:.4rem;padding:1.05rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.apply-q{margin:0 0 .7rem;font-size:.9rem;line-height:1.6;color:var(--text)}
.apply-radios{display:flex;gap:1.2rem}
.apply-radios label{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--muted);cursor:pointer}
.apply-detail{margin-top:.8rem}
.apply-detail textarea{width:100%}

.apply-done{padding:1.6rem 1.75rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.apply-done h2{margin:0 0 .6rem}
.apply-done p{margin:0 0 .8rem;color:var(--muted);line-height:1.65;max-width:56ch}
.apply-done p:last-child{margin-bottom:0}
.apply-done:focus{outline:none}

@media (max-width:720px){
  .apply-check-grid{grid-template-columns:1fr}
  .apply-form .lead-grid{grid-template-columns:1fr}
  .apply-form .lead-grid .span-2{grid-column:span 1}
}


/* ===== Nav: one grouped menu, and a theme button that cannot be squashed ====================
   Seven top-level items overflowed .nav-inner below about 1100px. Flex then shrank the theme
   button, which carries a fixed 40px width but no flex-shrink, from a circle into a thin ellipse
   with its icon crushed to zero width. That is what "the dark mode button looks weird" was: not a
   colour bug, a layout one. The shrink guard below is the real fix, grouping the links is what
   stops it being reached. */
.theme-btn,.nav-cta,.nav-burger{flex-shrink:0}
.nav-links{flex-wrap:wrap}

.nav-group{position:relative}
.nav-group-btn{display:inline-flex;align-items:center;gap:.3rem;padding:0;border:0;background:transparent;
  font:inherit;color:inherit;cursor:pointer;transition:color .2s}
.nav-group-btn:hover{color:var(--text)}
.nav-chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .2s}
.nav-group-btn[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}

.nav-drop{position:absolute;top:calc(100% + .75rem);left:50%;transform:translateX(-50%);min-width:190px;
  display:flex;flex-direction:column;gap:.1rem;padding:.45rem;z-index:60;
  border:1px solid var(--line);border-radius:14px;background:var(--nav-bg-solid);
  backdrop-filter:blur(16px);box-shadow:0 24px 60px -28px rgba(8,10,40,.5)}
/* The hidden attribute would otherwise lose to display:flex above. */
.nav-drop[hidden]{display:none}
.nav-drop a{padding:.5rem .7rem;border-radius:9px;white-space:nowrap}
.nav-drop a:hover{background:var(--panel-faint);color:var(--text)}

@media (max-width:900px){
  /* In the burger menu the panel is already a column, so the group opens inline rather than
     floating over content it cannot be positioned against. */
  .nav.is-open .nav-group{width:100%}
  .nav.is-open .nav-group-btn{width:100%;justify-content:space-between;padding:.55rem 0}
  .nav.is-open .nav-drop{position:static;transform:none;min-width:0;padding:0 0 .3rem .9rem;
    border:0;background:transparent;backdrop-filter:none;box-shadow:none}
}

/* Inline links in small print were invisible. The global rule is a{color:inherit;text-decoration:none},
   which suits nav and buttons and leaves a link inside a sentence looking like the sentence. On the
   application that made "what the certification involves" read as a dangling fragment, and it does
   the same to the privacy link under every lead form and the terms link on the referral form. Those
   are exactly the links that have to be findable. */
.apply-help a,.consent a,.ref-agree a{
  color:var(--text);text-decoration:underline;
  text-decoration-color:var(--line-strong);text-underline-offset:3px}
.apply-help a:hover,.consent a:hover,.ref-agree a:hover{text-decoration-color:currentColor}