/* woem marketing site — design tokens and layout.
   Desktop layout applies ≥ 900px; the mobile layout applies below that
   (the handoff's mobile reference is the ≤ 600px design). */

:root{
  --ink:#17142b;
  --ink-hover:#2a2740;
  --muted:#5b5878;
  --faint:#8a87a3;
  --page:#f3f4f8;
  --accent:oklch(0.5 0.2 262);
  --accent-2:oklch(0.55 0.2 262);
  --accent-light:oklch(0.75 0.14 262);
  --accent-deep:oklch(0.45 0.18 262);
  --green:oklch(0.6 0.18 150);
  --green-border:oklch(0.75 0.12 150);
  --green-text:oklch(0.5 0.17 150);
  --red:oklch(0.6 0.2 25);
  --highlight:oklch(0.93 0.17 95);
  --hairline:rgba(23,20,43,.08);
  --input-border:rgba(23,20,43,.12);
  --glass-bg:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.9);
  --glass-shadow:inset 0 1px 0 #fff;
  --glass-blur:blur(28px) saturate(170%);
  --card-shadow:0 30px 60px -40px rgba(50,40,120,.35);
  --card-shadow-lg:0 40px 80px -40px rgba(50,40,120,.4);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--page);overflow-x:clip} /* the rotated 3D cards can poke past the viewport edge */
body{
  font-family:Manrope,system-ui,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1000px 700px at 15% -20%,oklch(0.95 0.03 262 / .9),transparent 60%),
    radial-gradient(900px 800px at 100% 100%,oklch(0.95 0.025 300 / .8),transparent 60%);
  background-attachment:fixed;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
body.has-modal{overflow:hidden}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
input,button,select{font-family:inherit;font-size:inherit}
input:focus,select:focus{outline:none}
button{cursor:pointer}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;margin:0;height:20px;background:transparent;cursor:pointer;--pct:50%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border:0;border-radius:999px;background:linear-gradient(to right,var(--accent-2) var(--pct),rgba(23,20,43,.08) var(--pct))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;border:0;border-radius:50%;background:var(--accent-2);box-shadow:0 1px 3px rgba(23,20,43,.25)}
input[type=range]::-moz-range-track{height:6px;border:0;border-radius:999px;background:rgba(23,20,43,.08)}
input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent-2)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--accent-2);box-shadow:0 1px 3px rgba(23,20,43,.25)}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:999px}
h1,h2,h3,p,figure,blockquote,ul{margin:0}
img{display:block}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:rotateX(22deg) rotateY(-16deg) rotateZ(6deg) translateY(0)}50%{transform:rotateX(20deg) rotateY(-13deg) rotateZ(5deg) translateY(-12px)}}
@keyframes floatM{0%,100%{transform:rotateX(16deg) rotateY(-9deg) rotateZ(3deg) translateY(0)}50%{transform:rotateX(14deg) rotateY(-7deg) rotateZ(2deg) translateY(-8px)}}
@keyframes slimeWobble{0%,100%{transform:scale(1,.96)}30%{transform:scale(1.05,.94) skew(-2deg)}60%{transform:scale(.95,1.05) skew(2deg)}}
@keyframes burst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.4)}}

/* ---------- primitives ---------- */
.wrap{max-width:1120px;margin:0 auto;width:100%}
.glass{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 24px;border-radius:14px;border:0;
  font-size:15px;font-weight:600;letter-spacing:-0.01em;
  background:var(--ink);color:#fff;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px -12px rgba(23,20,43,.5);
  transition:background .15s ease;
}
.btn:hover{background:var(--ink-hover);color:#fff}
.btn--outline{background:rgba(255,255,255,.6);color:var(--ink);border:1px solid var(--input-border);box-shadow:none;padding:0 20px}
.btn--outline:hover{background:rgba(255,255,255,.9);color:var(--ink)}
.btn--sm{height:44px;padding:0 18px;border-radius:11px;font-size:14px;box-shadow:none}
.btn--text{height:44px;padding:0 6px;background:transparent;color:var(--muted);box-shadow:none;font-size:14px}
.btn--text:hover{background:transparent;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.field .optional{color:var(--faint);font-weight:500}
.field input,.field select{
  height:44px;border-radius:12px;border:1px solid var(--input-border);background:#fff;
  padding:0 12px;font-size:14px;color:var(--ink);font-weight:400;width:100%;
}
.field textarea{
  min-height:88px;border-radius:12px;border:1px solid var(--input-border);background:#fff;
  padding:10px 12px;font-size:14px;line-height:1.45;color:var(--ink);font-weight:400;width:100%;resize:vertical;font-family:inherit;
}
.field input.is-invalid{border-color:var(--red)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tick{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10px;font-weight:800;margin-top:1px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;padding:14px 20px}
.nav__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:56px;padding:0 10px 0 20px;border-radius:999px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 20px 40px -24px rgba(50,40,120,.35);
}
.wordmark{border:0;background:transparent;font-weight:800;font-size:22px;letter-spacing:-0.04em;color:var(--ink);padding:0}
.nav__links{display:flex;gap:4px}
.nav__link{height:36px;padding:0 14px;border-radius:999px;border:0;font-size:14px;font-weight:600;background:transparent;color:var(--muted)}
.nav__link:hover{background:rgba(255,255,255,.9)}
.nav__link.is-active{background:rgba(255,255,255,.95);color:var(--ink)}
.nav__right{display:flex;gap:6px;align-items:center}
.nav__cta{height:38px;padding:0 16px;border-radius:999px;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px -12px rgba(23,20,43,.5)}
.nav__burger{display:none;width:36px;height:36px;border-radius:999px;border:1px solid var(--hairline);background:rgba(255,255,255,.85);place-items:center}
.nav__burger span{display:flex;flex-direction:column;gap:4px}
.nav__burger i{display:block;width:14px;height:2px;border-radius:1px;background:var(--ink)}
.nav__menu{display:none;margin-top:8px;padding:8px;border-radius:22px;background:rgba(255,255,255,.8);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 24px 48px -24px rgba(50,40,120,.4);
  flex-direction:column;gap:2px;animation:rise .2s ease both}
.nav__menu.is-open{display:flex}
.nav__menu button{height:46px;padding:0 14px;border-radius:14px;border:0;font-size:16px;font-weight:600;text-align:left;background:transparent;color:var(--ink)}
.nav__menu button.is-active{background:rgba(255,255,255,.95)}

/* ---------- pages ---------- */
.page{display:none;flex-direction:column;padding:60px 20px 120px;width:100%;animation:rise .5s ease both}
.page.is-active{display:flex}
.page--home{gap:120px}
.page--pricing{gap:56px;max-width:1120px;margin:0 auto}
.page--about{gap:80px;max-width:1120px;margin:0 auto}
[id]{scroll-margin-top:100px}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;gap:48px;align-items:center;text-align:center}
.hero__copy{display:flex;flex-direction:column;gap:22px;align-items:center;max-width:780px}
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 8px;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);font-size:12px;font-weight:700;color:var(--muted);position:relative;overflow:hidden}
.pill .slime{display:inline-flex;width:16px;height:16px}
.pill .short{display:none}
.slime svg{overflow:visible;animation:slimeWobble 2.8s ease-in-out infinite;transform-origin:50% 50%;width:100%;height:100%}
.hero h1{font-size:64px;line-height:1.02;letter-spacing:-0.045em;font-weight:800;text-wrap:balance}
.hero__sub{font-size:19px;line-height:1.55;color:var(--muted);max-width:600px;text-wrap:pretty}
.hero__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}

/* 3D stack */
.stack{width:100%;height:560px;position:relative;perspective:1600px;perspective-origin:50% 40%;text-align:left;overflow:visible}
.stack__scene{position:absolute;inset:10px 0 30px;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;transform-origin:50% 50%;
  transform:rotateX(22deg) rotateY(-16deg) rotateZ(6deg) translateY(0);animation:float 9s ease-in-out infinite}
.card3d{position:absolute;box-sizing:content-box;/* design widths are content-box: 420/400/520 + padding */will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 60px 100px -40px rgba(50,40,120,.45);border-radius:26px;padding:26px;display:flex;flex-direction:column;gap:18px}
.card3d--interview{left:8%;top:6%;width:420px;transform:translateZ(-160px) translateX(-40px)}
.card3d--live{right:12%;top:6%;width:400px;transform:translateZ(-60px) translateX(30px) translateY(-10px);padding:24px;gap:14px}
.card3d--findings{left:22%;bottom:0;width:520px;transform:translateZ(80px);background:#fff;border-color:#fff;
  box-shadow:inset 0 1px 0 #fff,0 70px 120px -40px rgba(50,40,120,.55);padding:24px;display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:16px}
.qdots{display:flex;gap:4px}
.qdots span{flex:1;height:4px;border-radius:2px}
.card3d__q{display:flex;flex-direction:column;gap:6px}
.card3d__q b{font-size:20px;font-weight:600;letter-spacing:-0.02em;line-height:1.3;text-wrap:balance}
.card3d__q .short{display:none}
.card3d__answer{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.75)}
.orb{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,.25) 40%,transparent 62%),linear-gradient(135deg,oklch(0.75 0.14 262),oklch(0.62 0.2 300))}
.orb span{display:flex;gap:2px;align-items:center;height:14px}
.orb i{display:block;width:2px;border-radius:1px;background:#fff}
.card3d__answer p{font-size:13px;line-height:1.5;color:var(--ink-hover)}
.card3d__head{display:flex;justify-content:space-between;align-items:center}
.card3d__head b{font-size:14px;font-weight:700}
.card3d__head small{font-size:11px;color:var(--muted)}
.running{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green-text)}
.running i{width:6px;height:6px;border-radius:50%;background:oklch(0.7 0.18 150)}
.auto{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.75)}
.auto__name{display:flex;flex-direction:column;gap:2px;min-width:0}
.auto__name b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auto__name small{font-size:11px;color:var(--muted)}
.auto__bars{display:flex;align-items:flex-end;gap:2px;height:20px}
.auto__bars i{width:4px;border-radius:2px;display:block}
.hours{font-size:13px;font-weight:800;letter-spacing:-0.02em;white-space:nowrap}
.hours small{font-size:10px;color:var(--muted);font-weight:600}
.sinks{display:flex;flex-direction:column;gap:10px}
.sink{display:grid;grid-template-columns:22px minmax(0,1fr) 54px;gap:10px;align-items:center;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.75)}
.sink__rank{font-size:12px;font-weight:700;color:var(--faint)}
.sink__task{display:flex;flex-direction:column;gap:5px;min-width:0}
.sink__task b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:6px;border-radius:999px;background:var(--hairline);overflow:hidden;display:block}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,oklch(0.7 0.15 262),oklch(0.55 0.2 262))}
.sink .hours{text-align:right}
.cost{background:var(--ink);border-radius:20px;padding:20px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.cost__label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.cost__value{display:flex;flex-direction:column;gap:4px}
.cost__value b{font-size:40px;font-weight:800;line-height:1;letter-spacing:-0.05em}
.cost__value small{font-size:12px;opacity:.8;line-height:1.4}

/* mini demo */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;text-align:left}
.demo__ask{border-radius:26px;padding:26px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--glass-shadow),var(--card-shadow-lg)}
.demo__head{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.demo__head b{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.demo__head b i{position:relative;width:8px;height:8px;border-radius:50%;background:oklch(0.6 0.2 262);box-shadow:0 0 0 4px oklch(0.6 0.2 262 / .2)}
.demo__head b i::after{content:"";position:absolute;inset:0;border-radius:50%;background:oklch(0.6 0.2 262 / .55);animation:pulseOut 1.8s cubic-bezier(.2,.6,.4,1) infinite}
@keyframes pulseOut{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.4);opacity:0}}
.demo__head small{font-size:12px;color:var(--muted)}
.demo__q{font-size:22px;font-weight:700;letter-spacing:-0.025em;line-height:1.25;text-wrap:balance}
.inputbar{display:flex;gap:8px;padding:6px;border-radius:16px;background:rgba(255,255,255,.85);border:1px solid rgba(23,20,43,.1)}
.inputbar input{flex:1;min-width:0;height:44px;border:0;background:transparent;padding:0 12px;font-size:15px;color:var(--ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(23,20,43,.1);background:rgba(255,255,255,.6);color:var(--ink-hover);font-size:12px;font-weight:600}
.chip:hover{background:rgba(255,255,255,.95)}
.transcript{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.line{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;animation:rise .3s ease both}
.line b{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.line span{font-size:14px;line-height:1.5;color:var(--ink-hover)}
.demo__side{display:flex;flex-direction:column;gap:16px}
.demo__result{flex:1;background:var(--ink);border-radius:26px;padding:26px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:16px;box-shadow:0 40px 80px -40px rgba(23,20,43,.6);position:relative;overflow:hidden}
.demo__result .cost__label{font-size:12px}
.demo__money{font-size:56px;font-weight:800;line-height:1;letter-spacing:-0.05em;transition:opacity .3s}
.demo__sub{font-size:14px;opacity:.8}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.demo__plan{border-radius:26px;padding:22px 24px;display:flex;flex-direction:column;gap:12px;min-height:150px}
.demo__plan .card3d__head b{font-size:13px}
.state{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700}
.state i{width:6px;height:6px;border-radius:50%;background:currentColor}
.plan{display:flex;flex-direction:column;gap:8px;animation:rise .3s ease both}
.plan b{font-size:17px;font-weight:700;letter-spacing:-0.02em}
.plan p{font-size:13px;line-height:1.5;color:var(--muted)}
.plan .tags{margin-top:2px}
.plan .tag{padding:4px 9px;border-radius:8px;background:rgba(23,20,43,.06);border:0;color:var(--ink-hover)}
.demo__hint{font-size:13px;line-height:1.5;color:var(--faint)}

/* integrations */
.tools{display:flex;flex-direction:column;gap:20px;align-items:center}
.tools p{font-size:13px;font-weight:600;color:var(--muted)}
.tools__row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tool{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 8px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);font-size:13px;font-weight:600;color:var(--ink-hover)}
.tool__icon{width:24px;height:24px;border-radius:7px;background:#fff;border:1px solid rgba(23,20,43,.06);display:grid;place-items:center;overflow:hidden;flex:none}
.tool__icon img{width:15px;height:15px;object-fit:contain}
.tool__icon span{display:none;font-size:9px;font-weight:800;color:var(--muted)}
.tool__icon.is-broken img{display:none}
.tool__icon.is-broken span{display:block}

/* section heads */
.section-head{display:flex;flex-direction:column;gap:12px;max-width:640px}
.section-head h2,.h2{font-size:42px;line-height:1.08;letter-spacing:-0.035em;font-weight:800;text-wrap:balance}
.h2--sm{font-size:34px;line-height:1.1}
.h2--xs{font-size:32px}

/* how it works */
.how{display:flex;flex-direction:column;gap:40px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step{border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:18px;min-height:300px;box-shadow:var(--glass-shadow),var(--card-shadow)}
.step__n{width:34px;height:34px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.step__body{display:flex;flex-direction:column;gap:8px}
.step h3{font-size:22px;letter-spacing:-0.025em;font-weight:700}
.step p{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.step__foot{margin-top:auto;font-size:13px;font-weight:600;color:var(--accent-deep)}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;border-radius:30px;padding:16px;box-shadow:var(--glass-shadow),var(--card-shadow-lg)}
.calc__inputs{padding:28px;display:flex;flex-direction:column;gap:28px}
.calc__inputs .section-head{gap:10px}
.calc__inputs h2{font-size:34px;line-height:1.1}
.slider{display:flex;flex-direction:column;gap:10px}
.slider__row{display:flex;justify-content:space-between;font-size:14px}
.slider__row span:first-child{font-weight:600;color:var(--ink-hover)}
.slider__row output{font-weight:800;letter-spacing:-0.02em}
.calc__result{background:var(--ink);border-radius:22px;padding:34px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.calc__result .cost__label{font-size:12px}
.calc__money{font-size:72px;font-weight:800;line-height:1;letter-spacing:-0.05em}
.calc__hours{font-size:15px;opacity:.8}
.calc__recover{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.calc__recover p{font-size:14px;line-height:1.5;opacity:.85}
.calc__recover b{font-size:22px;font-weight:800;letter-spacing:-0.03em}

/* quotes */
.quotes{display:flex;flex-direction:column;gap:32px}
.quotes h2{max-width:560px}
.quotes__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.quote{border-radius:24px;padding:24px 26px;display:flex;flex-direction:column;gap:14px}
.quote__stat{font-size:22px;font-weight:800;letter-spacing:-0.035em;color:var(--accent)}
.quote blockquote{font-size:15px;line-height:1.5;color:var(--ink-hover);text-wrap:pretty}
.quote figcaption{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px}
.quote__logo{width:36px;height:36px;border-radius:9px;background:#fff;border:1px solid rgba(23,20,43,.1);display:grid;place-items:center;overflow:hidden;padding:4px;flex:none}
.quote__logo img{width:100%;height:100%;object-fit:contain}
.quote__who{display:flex;flex-direction:column;line-height:1.25}
.quote__who b{font-size:13px;font-weight:700}
.quote__who span{font-size:12px;color:var(--muted)}

/* waitlist */
.waitlist{position:relative;background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.95);border-radius:30px;padding:56px 40px;
  display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;box-shadow:var(--glass-shadow),var(--card-shadow-lg)}
.waitlist h2{letter-spacing:-0.04em;max-width:600px}
.waitlist p{font-size:16px;line-height:1.55;color:var(--muted);max-width:480px;text-wrap:pretty}
.waitlist__form{display:contents}
.waitlist .inputbar{width:100%;max-width:480px}
.waitlist__hint{font-size:12px;color:var(--muted)}
.waitlist__done{display:none;align-items:center;gap:12px;padding:14px 20px;border-radius:16px;background:rgba(255,255,255,.85);border:1px solid var(--green-border);animation:rise .3s ease both}
.waitlist.is-done .waitlist__form{display:none}
.waitlist.is-done .waitlist__done{display:flex}
.waitlist__done i{width:28px;height:28px;border-radius:50%;flex:none;background:var(--green);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;font-style:normal}
.waitlist__done span{font-size:15px;font-weight:600}
.confetti{position:absolute;pointer-events:none;z-index:2;animation:burst var(--dur) cubic-bezier(.2,.7,.3,1) var(--delay) both}

/* ---------- pricing ---------- */
.pricing__head{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.pricing__head h1,.about__head h1{font-size:56px;line-height:1.04;letter-spacing:-0.045em;font-weight:800;text-wrap:balance}
.pricing__lead{font-size:18px;line-height:1.55;color:var(--muted);max-width:560px;text-wrap:pretty}
.pricing__guarantee{font-size:15px;line-height:1.55;color:var(--muted);max-width:520px;text-wrap:pretty}
.hl{color:var(--ink);font-weight:700;padding:0 3px;border-radius:3px;
  background:linear-gradient(transparent 45%,var(--highlight) 45%,var(--highlight) 92%,transparent 92%)}
.toggle{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95)}
.toggle button{height:34px;padding:0 16px;border-radius:999px;border:0;font-size:13px;font-weight:600;background:transparent;color:var(--muted)}
.toggle button.is-active{background:var(--ink);color:#fff}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan-card{border-radius:28px;padding:30px;display:flex;flex-direction:column;gap:22px;box-shadow:var(--glass-shadow),var(--card-shadow-lg)}
.plan-card--dark{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),var(--card-shadow-lg);backdrop-filter:none;-webkit-backdrop-filter:none}
.plan-card__head{display:flex;justify-content:space-between;align-items:center}
.plan-card__head b{font-size:18px;font-weight:700;letter-spacing:-0.02em}
.badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--accent-2);color:#fff}
.plan-card__price{display:flex;flex-direction:column;gap:4px}
.plan-card__price b{font-size:48px;font-weight:800;line-height:1;letter-spacing:-0.05em}
.plan-card__price b small{font-size:15px;font-weight:600;opacity:.65;letter-spacing:0}
.plan-card__price span{font-size:13px;opacity:.7}
.plan-card .btn{height:46px;border-radius:13px;font-size:14px;box-shadow:none;border:1px solid var(--ink)}
.plan-card--dark .btn{background:#fff;color:var(--ink);border-color:#fff}
.plan-card--dark .btn:hover{background:#f3f4f8}
.plan-card__features{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.feature{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.feature .tick{background:oklch(0.94 0.04 262);color:var(--accent-deep)}
.plan-card--dark .feature .tick{background:rgba(255,255,255,.16);color:#fff}
.faqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.faq{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:22px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.9)}
.faq b{font-size:15px;font-weight:700}
.faq p{font-size:14px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* ---------- about ---------- */
.about__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end}
.about__head p{font-size:17px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.principle{border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:12px}
.principle h3{font-size:22px;letter-spacing:-0.025em;font-weight:700}
.principle p{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.team{display:flex;flex-direction:column;gap:24px}
.team__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.member{border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:6px}
.member .eyebrow{font-size:11px}
.member h3{font-size:17px;letter-spacing:-0.025em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member p{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.member p:empty{display:none}
.member--dark{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
.member--dark .eyebrow{color:oklch(0.8 0.12 262)}
.member--dark p{color:rgba(255,255,255,.75)}
.hiring{background:var(--ink);border-radius:30px;padding:48px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.hiring__copy{display:flex;flex-direction:column;gap:6px}
.hiring__copy b{font-size:30px;font-weight:800;letter-spacing:-0.035em}
.hiring__copy span{font-size:15px;opacity:.75}
.hiring .btn{height:48px;padding:0 22px;background:#fff;color:var(--ink);font-weight:700;font-size:14px;box-shadow:none}
.hiring .btn:hover{background:#f3f4f8}
.roles{display:flex;flex-direction:column;gap:24px}
.roles__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.roles__mail{font-size:14px;font-weight:600;color:var(--accent)}
.roles__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.role{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:24px;background:var(--glass-bg);border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);cursor:pointer;text-align:left;color:var(--ink);width:100%;transition:background .15s ease}
.role:hover{background:rgba(255,255,255,.85)}
.role.is-open{background:rgba(255,255,255,.9);grid-column:1 / -1}
.role__head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.role__head b{font-size:19px;font-weight:700;letter-spacing:-0.02em}
.role__chev{font-size:18px;color:var(--muted);display:inline-block;transition:transform .25s ease}
.role.is-open .role__chev{transform:rotate(180deg)}
.role__body{font-size:14.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.role__meta{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.role__detail{display:none;flex-direction:column;gap:18px;padding-top:14px;border-top:1px solid var(--hairline);animation:rise .3s ease both;cursor:default}
.role.is-open .role__detail{display:flex}
.role__detail .eyebrow{color:var(--faint);letter-spacing:.06em}
.role__list{display:flex;flex-direction:column;gap:8px}
.role__list ul{padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5;color:var(--ink)}
.role__apply{align-self:flex-start;height:42px;padding:0 18px;border-radius:12px;font-size:14px;box-shadow:none}

/* ---------- footer ---------- */
.footer{margin-top:auto;padding:0 20px 40px}
.footer__bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--hairline);font-size:13px;color:var(--muted)}
.footer__bar .wordmark{font-size:18px}

/* ---------- modals ---------- */
.modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(23,20,43,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  place-items:center;padding:20px;animation:rise .25s ease both}
.modal.is-open{display:grid}
.modal__dialog{width:100%;max-width:520px;max-height:calc(100vh - 40px);overflow:auto;background:rgba(255,255,255,.96);border:1px solid #fff;
  box-shadow:0 40px 80px -30px rgba(50,40,120,.5);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:22px}
.modal__head{display:flex;flex-direction:column;gap:8px}
.modal__head .eyebrow{color:var(--faint);font-weight:600;letter-spacing:.06em}
.modal__head h3{font-size:28px;line-height:1.1;letter-spacing:-0.035em;font-weight:800}
.modal__head p{font-size:14px;line-height:1.5;color:var(--muted)}
.modal__actions{display:flex;gap:10px;align-items:center;justify-content:space-between;padding-top:4px}
.modal__actions .btn:not(.btn--text){height:46px;padding:0 22px;border-radius:13px;font-size:14px;box-shadow:none}
.sizes{display:flex;flex-direction:column;gap:8px}
.sizes > span{font-size:13px;font-weight:600}
.sizes__row{display:flex;gap:6px;flex-wrap:wrap}
.size{height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--input-border);background:#fff;color:var(--ink)}
.size.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.dropzone{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 14px;border-radius:12px;border:1px dashed rgba(23,20,43,.25);background:#fff;cursor:pointer;font-weight:400}
.dropzone:hover{border-color:var(--ink)}
.dropzone__label{font-size:14px;color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropzone__label.has-file{color:var(--ink)}
.dropzone__cta{font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap}
.dropzone input{display:none}
.modal__done{display:none;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:12px 0}
.modal__done i{width:44px;height:44px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;font-size:18px;font-weight:800;font-style:normal}
.modal__done h3{font-size:24px;letter-spacing:-0.03em;font-weight:800}
.modal__done p{font-size:14px;line-height:1.5;color:var(--muted);max-width:340px}
.modal__done .btn{height:44px;padding:0 20px;border-radius:12px;font-size:14px;box-shadow:none}
.modal.is-done .modal__form{display:none}
.modal.is-done .modal__done{display:flex}
.modal__form{display:contents}

/* ================= MOBILE (< 900px) ================= */
@media (max-width:899px){
  body{background-image:radial-gradient(500px 400px at 0% 0%,oklch(0.95 0.03 262 / .9),transparent 60%),radial-gradient(500px 500px at 100% 100%,oklch(0.95 0.025 300 / .8),transparent 60%)}
  .nav{padding:10px 14px;background:linear-gradient(180deg,var(--page) 60%,rgba(243,244,248,0))}
  .nav__bar{height:48px;padding:0 6px 0 16px;background:rgba(255,255,255,.65);box-shadow:inset 0 1px 0 #fff,0 16px 32px -20px rgba(50,40,120,.35)}
  .wordmark{font-size:20px}
  .nav__links{display:none}
  .nav__cta{height:36px;padding:0 14px;font-size:13px;box-shadow:none}
  .nav__burger{display:grid}

  .page{padding:22px 16px 60px}
  .page--home{gap:56px}
  .page--pricing{gap:24px}
  .page--about{gap:36px}
  [id]{scroll-margin-top:80px}

  .hero{gap:56px;align-items:stretch;text-align:left}
  .hero__copy{gap:18px;align-items:flex-start;max-width:none}
  .pill{height:28px;font-size:11px}
  .pill .slime{width:14px;height:14px}
  .hero h1{font-size:38px;line-height:1.04}
  .hero__sub{font-size:16px;line-height:1.5}
  .hero__actions{flex-direction:column;align-items:stretch;width:100%;gap:8px}
  .hero__actions .btn{width:100%}

  .stack{height:380px;margin-bottom:24px;perspective:1000px;perspective-origin:50% 20%}
  .stack__scene{inset:0;transform-origin:50% 60%;transform:rotateX(16deg) rotateY(-9deg) rotateZ(3deg) translateY(0);animation-name:floatM}
  .card3d{box-sizing:border-box;border-radius:18px;padding:14px;gap:8px;background:rgba(255,255,255,.97);border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 30px 60px -28px rgba(50,40,120,.5)}
  .card3d--interview{left:5%;top:0;width:78%;transform:translateZ(-130px)}
  .card3d--live{left:17%;right:auto;top:64px;width:78%;transform:translateZ(-65px)}
  .card3d--findings{left:11%;bottom:auto;top:128px;width:78%;transform:translateZ(0);display:flex;flex-direction:column}
  .qdots{gap:3px}.qdots span{height:3px}
  .card3d__q .eyebrow{font-size:10px}
  .card3d__q b{font-size:13px}
  .card3d__q .long{display:none}.card3d__q .short{display:inline}
  .card3d__answer{gap:10px;padding:10px;border-radius:12px;background:rgba(23,20,43,.04)}
  .orb{width:28px;height:28px}.orb span{display:none}
  .card3d__answer p{font-size:11px;line-height:1.45}
  .card3d__answer p .long{display:none}
  .card3d__head b{font-size:13px}.card3d__head small{font-size:10px}
  .running{font-size:10px}
  .auto{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(23,20,43,.04)}
  .auto__name b{font-size:12px}.auto__name small{font-size:10px}
  .auto__bars{display:none}
  .auto:nth-child(n+5),.sink:nth-child(n+4){display:none}
  .sinks{gap:8px}
  .sink{grid-template-columns:minmax(0,1fr) 44px;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(23,20,43,.04)}
  .sink__rank{display:none}
  .sink__task b{font-size:11.5px}
  .bar{height:5px}
  .cost{flex-direction:row;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px}
  .cost__value{align-items:flex-end;gap:2px}
  .cost__value b{font-size:24px}.cost__value small{font-size:10px}

  .demo{grid-template-columns:minmax(0,1fr);gap:12px}
  .demo__ask,.demo__side{min-width:0}
  .pill .long{display:none}.pill .short{display:inline}
  .demo__ask,.demo__result,.demo__plan{border-radius:22px;padding:20px}
  .demo__q{font-size:19px}
  .demo__money{font-size:44px}

  .tools{gap:14px}
  .tools p{font-size:12px;text-align:center}
  .tools__row{gap:6px}
  .tool{width:34px;height:34px;padding:0;border-radius:10px;background:rgba(255,255,255,.75);justify-content:center;font-size:0;gap:0}
  .tool__icon{width:auto;height:auto;border:0;background:transparent;border-radius:0}
  .tool__icon img{width:16px;height:16px}
  .tool__icon span{font-size:10px}

  .section-head{gap:8px}
  .section-head h2,.h2{font-size:28px;line-height:1.1}
  .h2--xs{font-size:26px}
  .eyebrow{font-size:11px}
  .how{gap:18px}
  .steps{grid-template-columns:1fr;gap:10px}
  .step{border-radius:22px;padding:20px;min-height:0;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;background:rgba(255,255,255,.6);box-shadow:var(--glass-shadow)}
  .step__n{width:32px;height:32px;border-radius:10px;font-size:12px}
  .step__body{gap:6px}
  .step h3{font-size:18px;letter-spacing:-0.02em}
  .step p{font-size:14px;line-height:1.5}
  .step__foot{grid-column:2;margin-top:-8px;font-size:12px}

  .calc{grid-template-columns:1fr;gap:12px;border-radius:22px;padding:20px;background:rgba(255,255,255,.6);box-shadow:var(--glass-shadow)}
  .calc__inputs{padding:0;gap:20px}
  .calc__inputs h2{font-size:24px;line-height:1.15;letter-spacing:-0.03em}
  .calc__result{border-radius:18px;padding:22px;gap:16px}
  .calc__money{font-size:50px}
  .calc__hours{font-size:13px}
  .calc__recover{padding-top:14px;gap:6px}
  .calc__recover p{font-size:13px}.calc__recover b{font-size:20px}

  .quotes{gap:14px}
  .quotes__grid{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:4px 16px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .quote{flex:0 0 280px;scroll-snap-align:start;border-radius:22px;padding:20px;background:rgba(255,255,255,.6)}
  .quote__stat{font-size:24px;letter-spacing:-0.04em}
  .quote blockquote{font-size:14px}
  .quote__logo{width:32px;height:32px;border-radius:8px;padding:3px}
  .quote__who b{font-size:12px}.quote__who span{font-size:11px}

  .waitlist{border-radius:24px;padding:26px 20px;gap:14px;align-items:stretch;text-align:left;background:rgba(255,255,255,.65);box-shadow:var(--glass-shadow),0 30px 60px -40px rgba(50,40,120,.4)}
  .waitlist h2{font-size:28px}
  .waitlist p{font-size:14px;line-height:1.5}
  .waitlist .inputbar{flex-direction:column;padding:0;background:transparent;border:0;gap:14px;max-width:none}
  .waitlist .inputbar input{flex:none;height:48px;border-radius:14px;border:1px solid rgba(23,20,43,.1);background:rgba(255,255,255,.9);padding:0 14px}
  .waitlist .inputbar .btn{height:48px;border-radius:14px;font-size:15px;width:100%}
  .waitlist__hint{font-size:11px;text-align:center}
  .waitlist__done{padding:12px 14px;border-radius:14px;gap:10px;background:rgba(255,255,255,.9)}
  .waitlist__done i{width:26px;height:26px;font-size:12px}
  .waitlist__done span{font-size:14px;line-height:1.35}

  .pricing__head{align-items:flex-start;text-align:left;gap:12px}
  .pricing__head h1,.about__head h1{font-size:36px;line-height:1.05}
  .pricing__lead{font-size:15px;line-height:1.5}
  .pricing__guarantee{font-size:14px;line-height:1.5}
  .toggle{padding:4px;background:rgba(255,255,255,.65)}
  .toggle button{height:32px;padding:0 14px;font-size:12px}
  .plans{grid-template-columns:1fr;gap:12px}
  .plan-card{border-radius:24px;padding:22px;gap:16px;box-shadow:var(--glass-shadow)}
  .plan-card--dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .plan-card__head b{font-size:17px}
  .plan-card__price b{font-size:40px}
  .plan-card__price b small{font-size:14px}
  .plan-card__price span{font-size:12px}
  .plan-card__features{gap:8px;padding-top:0}
  .feature{font-size:13px}
  .feature .tick{width:16px;height:16px;font-size:9px}
  .faqs{grid-template-columns:1fr;gap:8px;margin-top:8px}
  .faq{padding:18px;border-radius:18px;background:rgba(255,255,255,.55);gap:6px}
  .faq b{font-size:14px}.faq p{font-size:13px;line-height:1.5}

  .about__head{grid-template-columns:1fr;gap:14px;align-items:start}
  .about__head h1{font-size:34px;line-height:1.06}
  .about__head p{font-size:15px;line-height:1.55}
  .principles{grid-template-columns:1fr;gap:10px}
  .principle{border-radius:22px;padding:20px;gap:8px;background:rgba(255,255,255,.6);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .principle h3{font-size:18px;letter-spacing:-0.02em}
  .principle p{font-size:14px;line-height:1.5}
  .team{gap:14px}
  .team__grid{display:flex;flex-direction:column;gap:0;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);border-radius:20px;overflow:hidden}
  .member{background:transparent;border:0;border-top:1px solid rgba(23,20,43,.06);border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:14px 18px;gap:3px}
  .member:first-child{border-top:0}
  .member .eyebrow{font-size:10px}
  .member h3{font-size:16px;letter-spacing:-0.02em;line-height:1.3;white-space:normal}
  .member p{font-size:13px;line-height:1.45}
  .member--dark{background:transparent;color:var(--ink)}
  .member--dark .eyebrow{color:var(--accent)}
  .member--dark p{color:var(--muted)}
  .hiring{border-radius:24px;padding:26px 22px;flex-direction:column;align-items:stretch;gap:14px}
  .hiring__copy b{font-size:24px;line-height:1.1}
  .hiring__copy span{font-size:14px;line-height:1.5}
  .hiring .btn{height:46px;width:100%}
  .roles{gap:14px}
  .roles__head{flex-direction:column;gap:14px}
  .roles__mail{order:2;font-size:13px}
  .roles__grid{grid-template-columns:1fr;gap:10px}
  .role{padding:18px;border-radius:20px;gap:8px}
  .role.is-open{grid-column:auto}
  .role__head b{font-size:16px}
  .role__chev{font-size:16px}
  .role__body{font-size:13.5px;line-height:1.5}
  .role__meta{font-size:11px}
  .role__detail{gap:16px;padding-top:12px}
  .role__list{gap:6px}
  .role__list ul{padding-left:16px;gap:5px;font-size:13.5px;line-height:1.45}
  .role__apply{align-self:stretch;height:46px}

  .footer{padding:0 16px 40px}
  .footer__bar{padding-top:18px;font-size:12px}
  .footer__bar .wordmark{font-size:16px}

  .modal{padding:0;place-items:end stretch;display:none}
  .modal.is-open{display:flex;align-items:flex-end}
  .modal__dialog{max-width:none;max-height:92%;border-radius:26px 26px 0 0;border:0;padding:24px 20px calc(32px + env(safe-area-inset-bottom));gap:18px;background:rgba(255,255,255,.97)}
  .modal__head{gap:6px}
  .modal__head h3{font-size:24px}
  .modal__head p{font-size:13.5px}
  /* 16px minimum stops iOS Safari zooming the page when a field is focused */
  .field input,.field select,.field textarea,.inputbar input{font-size:16px}
  .field input,.field select{height:46px}
  .field-row{grid-template-columns:1fr}
  .size{height:38px}
  .modal__actions{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .modal__actions .btn:not(.btn--text){height:48px;font-size:15px;width:100%}
  .modal__actions .btn--text{width:100%}
  .modal__done h3{font-size:22px}
  .modal__done .btn{height:46px;padding:0 24px}
}

@media (prefers-reduced-motion:reduce){
  .stack__scene,.slime svg,.demo__head b i::after{animation:none}
  .page,.role__detail,.plan,.line,.nav__menu,.modal,.waitlist__done{animation:none}
}