:root{color-scheme:light;
  --bg:#F6F0E6; --bg-2:#EFE7D8; --panel:#FFFBF4; --panel-2:#FFF8EE; --panel-3:#F3EAD9;
  --line:rgba(28,24,18,.08); --line-2:rgba(28,24,18,.14); --line-3:rgba(28,24,18,.22);
  --tx:#16141C; --tx-2:#4F4B58; --tx-3:#625E6A;
  --accent:#35318A; --accent-2:#4A44A8; --accent-ink:#F8F3EA; --accent-rgb:53,49,138;
  --glow-rgb:53,49,138; --glow-2-rgb:214,170,90;
  --due:#9B2C2C; --due-rgb:155,44,44; --info:#1E40AF; --info-rgb:30,64,175; --ok:#35318A; --ok-rgb:53,49,138;
  --nav-bg:rgba(246,240,230,.78); --selection:rgba(53,49,138,.2);
  --grid:rgba(28,24,18,.045); --hl:rgba(255,255,255,.92); --noise:.035;
  --shadow:0 0 0 1px rgba(28,24,18,.06),0 2px 4px rgba(28,24,18,.04),0 28px 60px -24px rgba(28,24,18,.2);
  --shadow-sm:0 1px 2px rgba(28,24,18,.06),0 8px 20px -12px rgba(28,24,18,.16);
}
html[data-v="b"]{color-scheme:dark;
  --bg:#060B14; --bg-2:#08101C; --panel:#0C1524; --panel-2:#101B2D; --panel-3:#152238;
  --line:rgba(148,172,214,.10); --line-2:rgba(148,172,214,.17); --line-3:rgba(148,172,214,.26);
  --tx:#EEF3F9; --tx-2:#9DAABE; --tx-3:#7C8AA0;
  --accent:#34D399; --accent-2:#6EE7B7; --accent-ink:#022C1B; --accent-rgb:52,211,153;
  --glow-rgb:52,211,153; --glow-2-rgb:59,130,246;
  --due:#F5A65B; --due-rgb:245,166,91; --info:#7CB2FF; --info-rgb:124,178,255; --ok:#34D399; --ok-rgb:52,211,153;
  --nav-bg:rgba(6,11,20,.7); --selection:rgba(52,211,153,.3);
  --grid:rgba(148,172,214,.045); --hl:rgba(180,200,240,.07); --noise:.05;
  --shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.25),0 30px 70px -20px rgba(0,0,0,.75);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6);
}
/* ==========================================================================
   Paid Cadence — design system
   Palette tokens live in :root above; everything below is shared.
   ========================================================================== */
:root{
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;
  --display:var(--sans); --body:var(--sans);
  --shell:1200px;
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--tx);
  font:400 16px/1.55 var(--sans);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--selection)}
.tnum{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 20px}
@media(min-width:760px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-9999px;top:8px;z-index:999;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:var(--r-sm)}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Background atmosphere: grid + noise + soft light, all fixed to hero */
.atmos{position:absolute;inset:0 0 auto 0;height:1100px;pointer-events:none;overflow:hidden;z-index:0}
.atmos::before{ /* grid */
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 75%);
}
.atmos::after{ /* light */
  content:"";position:absolute;inset:-10% -10% 0 -10%;
  background:
    radial-gradient(38% 34% at 72% 18%,rgba(var(--glow-rgb),.16),transparent 70%),
    radial-gradient(30% 30% at 22% 0%,rgba(var(--glow-2-rgb),.10),transparent 70%);
  filter:blur(8px);
}
.noise{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--noise);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:1}

/* ---------- Icons ---------- */
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:14px;height:14px}
.i-lg{width:22px;height:22px}

/* ---------- Brand ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;font:600 16px/1 var(--sans);letter-spacing:-.02em;color:var(--tx)}
.mark{width:24px;height:24px;flex:none}
.mark .m-bg{fill:var(--tx)}
.mark .m-fg{fill:var(--bg)}
.mark .m-ac{fill:var(--accent)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s}
.nav.stuck{background:var(--nav-bg);border-bottom-color:var(--line);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.nav nav{display:flex;align-items:center;gap:4px}
.nav nav a{font:450 14px/1 var(--sans);color:var(--tx-2);padding:9px 12px;border-radius:var(--r-sm);transition:color .2s,background .2s}
.nav nav a:hover,.nav nav a.is-active{color:var(--tx)}
.nav nav a:hover{background:rgba(var(--accent-rgb),.0)}
.nav nav .navcta{margin-left:10px;color:var(--accent-ink);background:var(--tx);padding:9px 14px;font-weight:500}
.nav nav .navcta:hover{color:var(--accent-ink);background:var(--tx);opacity:.9}
.nav-toggle{display:none;appearance:none;background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;color:var(--tx)}
@media(max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav nav{position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 18px;
    background:var(--bg);border-bottom:1px solid var(--line);display:none}
  .nav.open nav{display:flex}
  .nav.open{background:var(--bg);border-bottom-color:var(--line)}
  .nav nav a{padding:14px 8px;font-size:16px;border-bottom:1px solid var(--line);border-radius:0}
  .nav nav .navcta{margin:12px 0 0;text-align:center;border-radius:var(--r-sm);border:0;padding:14px}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-sm);
  font:500 15px/1 var(--sans);letter-spacing:-.005em;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s,color .2s}
.btn-primary{background:var(--accent);color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(var(--accent-rgb),.6),0 8px 24px -8px rgba(var(--accent-rgb),.55)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(var(--accent-rgb),.8),0 12px 30px -8px rgba(var(--accent-rgb),.6)}
.btn-ghost{background:transparent;color:var(--tx);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--line-3);background:var(--panel)}
.btn .i{transition:transform .2s var(--ease)}
.btn:hover .i-arrow{transform:translateX(2px)}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- Type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
h1,h2,h3{font-family:var(--sans);color:var(--tx);font-weight:600}
.h1{font-size:clamp(42px,6.6vw,80px);line-height:.98;letter-spacing:-.047em}
.h2{font-size:clamp(32px,4.2vw,52px);line-height:1.02;letter-spacing:-.04em}
.h1 em,.h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--tx-2)}
.lede{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--tx-2);letter-spacing:-.011em}
.demo-tag{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);border:1px solid var(--line-2);border-radius:999px;padding:5px 8px}

/* ---------- Hero ---------- */
.hero{padding:72px 0 0;position:relative}
.hero-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:1040px){.hero-grid{grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:32px}.hero{padding-top:88px}}
@media(min-width:1040px){.hero .h1{font-size:clamp(52px,4.7vw,70px)}}
.hero-copy .eyebrow{margin-bottom:28px}
.hero-copy .h1{margin-bottom:24px}
.h1 .ln{display:block;white-space:nowrap}
@media(max-width:380px){.h1 .ln{white-space:normal}}
.hero-copy .lede{max-width:30em;margin-bottom:34px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.fine{margin-top:22px;font:400 13px/1.5 var(--mono);color:var(--tx-3);letter-spacing:-.01em}
.fine b{color:var(--tx-2);font-weight:500}

/* Product composition */
.stage{--sy:28px;position:relative;padding:28px 0 72px;perspective:1600px}
@media(min-width:1040px){.stage{--sy:24px;padding:24px 0 84px 24px}.hero-grid{min-height:560px}}
.app{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 var(--hl),var(--shadow);overflow:hidden}
.app::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.25),transparent 30%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;opacity:.6}
.app-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:46px;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(var(--accent-rgb),.0)}
.crumb{display:flex;align-items:center;gap:8px;font:450 13px/1 var(--sans);color:var(--tx-3)}
.crumb b{color:var(--tx);font-weight:500;font-family:var(--mono);font-size:12.5px}
.crumb .demo-tag{margin-left:6px}
.crumb .i{color:var(--tx-3)}
.app-body{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:640px){.app-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.inv{padding:22px 22px 20px;border-bottom:1px solid var(--line)}
@media(min-width:640px){.inv{border-bottom:0;border-right:1px solid var(--line)}}
.inv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}
.client{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;font:600 12px/1 var(--sans);letter-spacing:-.02em;
  color:var(--tx);background:var(--panel-3);border:1px solid var(--line-2)}
.client p{font:500 14px/1.2 var(--sans);letter-spacing:-.01em}
.client small{display:block;font:400 12px/1.3 var(--mono);color:var(--tx-3);margin-top:3px}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font:500 12px/1 var(--sans);
  color:var(--due);background:rgba(var(--due-rgb),.1);border:1px solid rgba(var(--due-rgb),.25);transition:color .4s,background .4s,border-color .4s}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(var(--due-rgb),.18);transition:box-shadow .4s}
.app[data-phase="sent"] .pill,.app[data-phase="opened"] .pill{color:var(--info);background:rgba(var(--info-rgb),.1);border-color:rgba(var(--info-rgb),.25)}
.app[data-phase="sent"] .pill i,.app[data-phase="opened"] .pill i{box-shadow:0 0 0 3px rgba(var(--info-rgb),.18)}
.app[data-phase="paid"] .pill{color:var(--ok);background:rgba(var(--ok-rgb),.12);border-color:rgba(var(--ok-rgb),.3)}
.app[data-phase="paid"] .pill i{box-shadow:0 0 0 3px rgba(var(--ok-rgb),.2)}
.amt-lbl{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-bottom:8px}
.amt{font:600 40px/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-bottom:6px}
.amt span{color:var(--tx-3)}
.meta-row{display:flex;gap:16px;font:400 12.5px/1.4 var(--mono);color:var(--tx-3);margin-bottom:26px}
/* cadence track */
.track{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:4px}
.track::before,.track::after{content:"";position:absolute;left:6px;right:calc(25% - 6px);top:5px;height:2px;border-radius:2px;background:var(--line-2)}
.track::after{background:linear-gradient(90deg,rgba(var(--accent-rgb),.35),var(--accent));transform-origin:left;transform:scaleX(var(--p,0));transition:transform .9s var(--ease-out)}
.track li{position:relative;font:500 11px/1 var(--mono);color:var(--tx-3);padding-top:22px;letter-spacing:-.01em}
.track li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--panel);border:1.5px solid var(--line-3);transition:all .4s var(--ease)}
.track li.on{color:var(--tx-2)}
.track li.on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15)}
/* app footer */
.app-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:48px;padding:0 20px;border-top:1px solid var(--line);font:450 12.5px/1 var(--sans);color:var(--tx-3)}
.app-foot .sw{width:30px;height:18px;border-radius:99px;background:var(--line-3);position:relative}
.app-foot .sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--tx-2)}
.app-foot b{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.app-foot .sep{width:1px;height:16px;background:var(--line-2)}
@media(max-width:640px){.app-foot{padding:0 16px;justify-content:space-between}.app-foot b{margin-left:0}}
/* activity */
.log{padding:20px 20px 18px}
.log-h{display:flex;align-items:center;justify-content:space-between;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-bottom:14px}
.live{display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;color:var(--accent)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}70%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
.events{list-style:none;position:relative}
.events::before{content:"";position:absolute;left:13px;top:12px;bottom:12px;width:1px;background:var(--line-2)}
.events li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:7px 0;
  opacity:.28;filter:saturate(0);transition:opacity .6s var(--ease),filter .6s,transform .6s var(--ease-out);transform:translateY(0)}
.events li.on{opacity:1;filter:none}
.events .ev-i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line-2);color:var(--tx-2)}
.events li.on .ev-i{color:var(--accent);border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08)}
.events p{font:450 13px/1.35 var(--sans);color:var(--tx);letter-spacing:-.01em;padding-top:1px}
.events small{display:block;font:400 11.5px/1.3 var(--mono);color:var(--tx-3);margin-top:3px}
/* back layer: queue card peeking behind */
.app-back{position:absolute;left:4%;right:4%;top:calc(var(--sy,28px) - 11px);height:120px;border-radius:var(--r-xl);border:1px solid var(--line-2);
  background:var(--panel);opacity:.55}
.app-back.b2{left:8%;right:8%;top:calc(var(--sy,28px) - 22px);opacity:.25}
@media(max-width:640px){.app-back{display:none}}
/* floating layers */
.float{position:absolute;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 var(--hl),var(--shadow);opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.float.on{opacity:1;transform:none}
.f-mail{width:300px;left:-36px;bottom:0;padding:14px 16px 16px;z-index:3}
.f-mail .mh{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.f-mail .mh .avatar{width:28px;height:28px;border-radius:50%;font-size:11px;background:rgba(var(--accent-rgb),.12);color:var(--accent);border-color:rgba(var(--accent-rgb),.3)}
.f-mail .mh p{font:500 13px/1.2 var(--sans)}
.f-mail .mh small{display:block;font:400 11.5px/1.3 var(--mono);color:var(--tx-3);margin-top:2px}
.f-mail .sub{font:500 13px/1.3 var(--sans);margin-bottom:10px;letter-spacing:-.01em}
.sk{height:7px;border-radius:4px;background:var(--line-2);margin-top:7px}
.f-paid{right:-14px;top:-8px;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px}
.f-paid .ok{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);
  box-shadow:0 0 0 6px rgba(var(--accent-rgb),.14)}
.f-paid .ok .i{stroke-width:2}
.f-paid p{font:500 13px/1.2 var(--sans);color:var(--tx-2)}
.f-paid b{display:block;font:600 18px/1.1 var(--sans);letter-spacing:-.03em;color:var(--tx);font-variant-numeric:tabular-nums;margin-top:2px}
@media(max-width:1180px){.f-mail{left:-12px}}
@media(max-width:1039px){.f-mail{left:auto;right:16px;bottom:0}.f-paid{right:16px}}
@media(max-width:640px){
  .stage{padding:46px 0 0}
  .f-mail{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:-28px 14px 0;z-index:2}
  .f-paid{right:10px;top:0;padding:9px 12px 9px 9px}
  .f-paid .ok{width:28px;height:28px}
  .amt{font-size:34px}
}

/* Trust strip */
.trust{margin-top:72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{display:flex;align-items:center;gap:12px;padding:22px 20px;font:450 14px/1.35 var(--sans);color:var(--tx-2);letter-spacing:-.01em}
.trust li+li{border-left:1px solid var(--line)}
@media(max-width:899px){.trust li:nth-child(3){border-left:0}.trust li:nth-child(n+3){border-top:1px solid var(--line)}.trust li{padding:18px 14px;font-size:13.5px}}
.trust .i{color:var(--accent)}

/* ---------- Sections ---------- */
.sec{padding:128px 0 0}
@media(max-width:760px){.sec{padding-top:96px}}
.sec-head{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:56px;align-items:end}
@media(min-width:900px){.sec-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px}}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head .lede{max-width:28em}

/* How it works */
.steps{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--bg-2)}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:32px 28px 34px;transition:background .3s}
.step+.step{border-top:1px solid var(--line)}
@media(min-width:860px){.step+.step{border-top:0;border-left:1px solid var(--line)}}
.step:hover{background:var(--panel)}
.step-n{display:flex;align-items:center;justify-content:space-between;margin-bottom:56px;font:500 12px/1 var(--mono);color:var(--tx-3)}
.glyph{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;color:var(--accent);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);box-shadow:inset 0 1px 0 var(--hl),var(--shadow-sm)}
.step h3{font-size:20px;letter-spacing:-.025em;margin-bottom:8px}
.step p{color:var(--tx-2);font-size:15px;line-height:1.55;max-width:26em}

/* Dashboard preview */
.dash{display:block;position:relative;border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:inset 0 1px 0 var(--hl),var(--shadow);transition:transform .4s var(--ease),border-color .3s}
.dash:hover{border-color:var(--line-3);transform:translateY(-2px)}
.dash-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:50px;padding:0 20px;border-bottom:1px solid var(--line)}
.dash-bar .crumb b{font-family:var(--sans);font-size:13px}
.dash-grid{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line)}
@media(min-width:900px){.dash-grid{grid-template-columns:repeat(4,1fr)}}
.dk{padding:22px 22px 20px}
.dk+.dk{border-left:1px solid var(--line)}
@media(max-width:899px){.dk:nth-child(3){border-left:0}.dk:nth-child(n+3){border-top:1px solid var(--line)}}
.dk .lbl{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-bottom:12px}
.dk .val{font:600 clamp(24px,2.6vw,32px)/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.dk .spark{margin-top:14px;height:28px;width:100%}
.spark path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark .area{fill:url(#sparkfill);stroke:none}
.bars{display:flex;align-items:flex-end;gap:3px;height:28px;margin-top:14px}
.bars.seg i{height:6px !important;border-radius:3px}
.bars i{flex:1;border-radius:2px;background:var(--line-2)}
.bars i.on{background:var(--accent)}
.rows{list-style:none}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:16px;align-items:center;padding:14px 20px;border-top:1px solid var(--line);font-size:14px}
.rows li:first-child{border-top:0}
.rows .who{display:flex;align-items:center;gap:12px;min-width:0}
.rows .who .avatar{width:28px;height:28px;font-size:11px}
.rows .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.rows .who small{font:400 12px/1 var(--mono);color:var(--tx-3);margin-left:6px}
.cad{display:flex;align-items:center;gap:4px;margin-right:24px}
.cad i{width:18px;height:3px;border-radius:2px;background:var(--line-2)}
.cad i.on{background:var(--accent)}
.cad small{font:400 12px/1 var(--mono);color:var(--tx-3);margin-left:10px;min-width:5.6em}
@media(max-width:899px){.cad{display:none}.rows li{grid-template-columns:minmax(0,1fr) auto auto}}
.rows .money{font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums;text-align:right;min-width:5.5em}
.st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font:500 11.5px/1 var(--sans);
  border:1px solid var(--line-2);color:var(--tx-2);background:transparent;white-space:nowrap}
.st::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.st-sent,.st-opened,.st-replied,.st-scheduled{color:var(--info);border-color:rgba(var(--info-rgb),.25);background:rgba(var(--info-rgb),.07)}
.st-scheduled{color:var(--tx-2);border-color:var(--line-2);background:transparent}
.st-paid{color:var(--ok);border-color:rgba(var(--ok-rgb),.3);background:rgba(var(--ok-rgb),.09)}
.st-handed,.st-review{color:var(--due);border-color:rgba(var(--due-rgb),.28);background:rgba(var(--due-rgb),.08)}
.dash-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--line);font:500 14px/1 var(--sans);color:var(--tx-2)}
.dash-foot .go{display:inline-flex;align-items:center;gap:6px;color:var(--tx)}
.dash:hover .go .i{transform:translateX(2px)}
.go .i{transition:transform .2s var(--ease)}
@media(max-width:640px){.rows li{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}.rows .st{grid-column:1;justify-self:start;margin-left:40px}.cad{display:flex;align-items:center;gap:4px;margin-right:24px}
.cad i{width:18px;height:3px;border-radius:2px;background:var(--line-2)}
.cad i.on{background:var(--accent)}
.cad small{font:400 12px/1 var(--mono);color:var(--tx-3);margin-left:10px;min-width:5.6em}
@media(max-width:899px){.cad{display:none}.rows li{grid-template-columns:minmax(0,1fr) auto auto}}
.rows .money{grid-row:1;grid-column:2}}

/* Pricing */
.price-wrap{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:960px){.price-wrap{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px}}
.price-wrap .h2{margin:20px 0 20px}
.price-wrap .lede{max-width:26em}
.plan{position:relative;border-radius:var(--r-xl);padding:1px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.55),var(--line) 40%,var(--line))}
.plan-in{border-radius:calc(var(--r-xl) - 1px);background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:32px 32px 30px;box-shadow:inset 0 1px 0 var(--hl)}
.plan::after{content:"";position:absolute;inset:-40px -20px auto;height:160px;z-index:-1;background:radial-gradient(50% 60% at 50% 50%,rgba(var(--accent-rgb),.18),transparent 70%);filter:blur(20px)}
.plan-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.plan-top b{font:500 14px/1 var(--sans);color:var(--tx)}
.plan .tag{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.08);border-radius:999px;padding:6px 9px}
.price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.price strong{font:600 64px/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.price span{color:var(--tx-2);font-size:15px}
.then{font:400 13.5px/1.4 var(--mono);color:var(--tx-3);padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:22px}
.then b{color:var(--tx);font-weight:500}
.incl{list-style:none;display:grid;gap:12px;margin-bottom:28px}
.incl li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--tx-2);letter-spacing:-.01em}
.incl .i{color:var(--accent)}
.plan .btn{width:100%;height:48px}

/* Start */
.start-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:960px){.start-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px}}
.start-copy .h2{margin:20px 0 18px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font:500 16px/1.35 var(--sans);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{color:var(--tx-3);transition:transform .3s var(--ease)}
.faq details[open] summary .i{transform:rotate(45deg);color:var(--accent)}
.faq details p{color:var(--tx-2);font-size:15px;padding:0 32px 20px 0;line-height:1.6}
.card-form{align-self:start;border:1px solid var(--line-2);border-radius:var(--r-xl);background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:inset 0 1px 0 var(--hl),var(--shadow);padding:30px}
@media(max-width:640px){.card-form{padding:22px}}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
@media(max-width:560px){.form{grid-template-columns:1fr}}
.field label{font:500 13px/1 var(--sans);color:var(--tx-2);letter-spacing:-.005em}
.field input,.field select{width:100%;height:46px;padding:0 14px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line-2);color:var(--tx);
  font:400 15px/1 var(--sans);outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;cursor:pointer}
.field select:invalid{color:var(--tx-3)}
.field input::placeholder{color:var(--tx-3)}
.field input:hover,.field select:hover{border-color:var(--line-3)}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14)}
.field [aria-invalid="true"]{border-color:var(--due);box-shadow:0 0 0 4px rgba(var(--due-rgb),.12)}
.field-error{font:400 12.5px/1.3 var(--sans);color:var(--due)}
.form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px}
.form-foot .btn{height:48px;padding:0 22px}
.note{display:flex;align-items:center;gap:8px;font:400 13px/1.4 var(--sans);color:var(--tx-3)}
.note a{color:var(--tx-2);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
@media(max-width:560px){.form-foot .btn{width:100%}}
.form-success{text-align:left;padding:8px 0}
.form-success .ok{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--accent-rgb),.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3);margin-bottom:18px}
.form-success h3{font-size:22px;letter-spacing:-.03em;margin-bottom:8px;outline:none}
.form-success p{color:var(--tx-2);margin-bottom:20px}
.form-success a{color:var(--tx);text-decoration:underline;text-underline-offset:3px}

/* ---------- Footer ---------- */
.foot{margin-top:140px;border-top:1px solid var(--line);padding:48px 0 40px;background:var(--bg-2)}
.foot-row{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.foot p{color:var(--tx-3);font-size:14px;margin-top:14px;max-width:28em}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{font-size:14px;color:var(--tx-2);transition:color .2s}
.foot-links a:hover{color:var(--tx)}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font:400 12.5px/1.4 var(--mono);color:var(--tx-3)}
.foot-base a:hover{color:var(--tx)}

/* ---------- Legal pages ---------- */
.legal{padding:88px 0 40px}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(36px,5vw,56px);line-height:1;letter-spacing:-.045em;margin:18px 0 14px}
.legal .meta{font:400 13px/1.5 var(--mono);color:var(--tx-3);margin-bottom:48px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.legal h2{font-size:19px;letter-spacing:-.02em;margin:36px 0 10px}
.legal p,.legal li{font-size:16px;color:var(--tx-2);line-height:1.7}
.legal ul{margin:8px 0 0 18px}
.legal li{margin:6px 0}
.legal a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.js .hero .reveal{transition-duration:1.1s}
.js .d1{transition-delay:.08s}.js .d2{transition-delay:.16s}.js .d3{transition-delay:.24s}.js .d4{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- Mobile refinements ---------- */
.start-grid{grid-template-areas:"copy" "form" "faq"}
.start-copy{grid-area:copy}.card-form{grid-area:form}.faq{grid-area:faq}
@media(min-width:960px){.start-grid{grid-template-areas:"copy form" "faq form";grid-template-rows:auto 1fr;row-gap:0}.faq{margin-top:44px}}
@media(max-width:959px){.faq{margin-top:8px}}
.dash-foot span{white-space:nowrap}
.demo-tag{white-space:nowrap}
@media(max-width:640px){
  .f-mail{display:none}
  .step{padding:24px 22px 26px}
  .step-n{margin-bottom:22px}
  .dash-bar{padding:0 16px}
  .dash-bar .crumb .org{display:none}
  .dash-foot{padding:14px 16px}
  .dash-foot .dl{display:none}
  .hero{padding-top:48px}
  .trust{margin-top:56px}
}