/* before: website. Same system as the app: ink and bone, one yellow that means "you, first in line".
   Type: Schibsted Grotesk only, weight does the work. */
:root{
  --ink:#0E1A2B; --ink-2:#15243B; --ink-3:#1B2D48; --ink-line:#26395A;
  --bone:#F3F1EA; --bone-2:#FBFAF6; --bone-line:#DCD7CB;
  --on-ink:#F3F1EA; --on-ink-muted:#AAB5C4; --on-ink-faint:#75849A;
  --on-bone:#0E1A2B; --on-bone-muted:#4E5968;
  --yellow:#FFC53D; --yellow-text:#7A5A00;
  --font:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1120px; --r:14px; --r-lg:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
[hidden]{display:none!important}
body{margin:0;background:var(--bone);color:var(--on-bone);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.025em;font-weight:700}
h1{font-weight:800}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:6px}

/* ---------- dark (ink) surfaces ---------- */
.ink{background:var(--ink);color:var(--on-ink)}
.ink .muted{color:var(--on-ink-muted)}
.muted{color:var(--on-bone-muted)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(14,26,43,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);color:var(--on-ink);border-bottom:1px solid rgba(38,57,90,.7)}
.top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:24px;letter-spacing:-.045em;line-height:1}
.brand i{width:13px;height:13px;border-radius:50%;background:var(--yellow);display:inline-block;flex:none;transform:translateY(1px)}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{text-decoration:none;color:var(--on-ink-muted);font-weight:500;font-size:15px;padding:8px 10px;border-radius:8px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-ink)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.beta-link{font-size:14px;font-weight:600;text-decoration:none;color:var(--on-ink);border:1px solid var(--ink-line);padding:8px 12px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.beta-link:hover{border-color:var(--on-ink-faint)}
.beta-link b{width:7px;height:7px;border-radius:50%;background:var(--yellow)}
.menu-btn{display:none;background:none;border:1px solid var(--ink-line);color:var(--on-ink);border-radius:10px;width:40px;height:40px;cursor:pointer;font:inherit}
.menu-btn span{display:block;width:16px;height:2px;background:currentColor;margin:3px auto;border-radius:2px}
@media (max-width:860px){
  .nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--ink);flex-direction:column;padding:8px 16px 16px;border-bottom:1px solid var(--ink-line);margin:0}
  .nav.open{display:flex}
  .nav a{font-size:18px;padding:12px 0}
  .menu-btn{display:block}
  .beta-link{display:none}
  .nav .nav-beta{display:block;color:var(--yellow)}
}
.nav-beta{display:none}
@media (max-width:520px){.top-r .btn .long{display:none}}


/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--font);letter-spacing:-.01em;padding:15px 20px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.yellow:hover{filter:brightness(1.05)}
.btn.line{background:transparent;color:inherit;border:1px solid currentColor}
.btn.small{padding:10px 14px;font-size:14px;border-radius:10px}
.arrow::after{content:"→";font-weight:500}

/* ---------- hero ---------- */
.hero{padding:56px 0 0;position:relative;z-index:2}
.hero .wrap{display:grid;gap:40px;align-items:end}
@media (min-width:900px){.hero{padding-top:88px}.hero .wrap{grid-template-columns:1.08fr .92fr;gap:56px}}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--on-ink-muted);letter-spacing:.01em}
.kicker .pill{background:rgba(255,197,61,.12);color:var(--yellow);padding:5px 10px;border-radius:999px;font-weight:700}
.hero h1{font-size:clamp(42px,7.4vw,78px);letter-spacing:-.04em;line-height:1.02;margin:20px 0 22px;max-width:12ch}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .lede{font-size:clamp(18px,2.1vw,21px);color:var(--on-ink-muted);max-width:34ch;line-height:1.5}
.hero-copy{padding-bottom:56px}
@media (min-width:900px){.hero-copy{padding-bottom:96px}}
.hero-phone{justify-self:center;width:min(330px,82vw);margin-bottom:-120px;position:relative}
@media (min-width:900px){.hero-phone{width:360px;margin-bottom:-150px}}
.hero-after{height:150px;background:var(--bone)}
@media (min-width:900px){.hero-after{height:170px}}

/* ---------- waitlist form ---------- */
.wl{margin-top:30px;max-width:480px}
.wl-row{display:flex;gap:8px;flex-wrap:wrap}
.wl input[type=email]{flex:1 1 220px;min-width:0;font:400 17px var(--font);padding:14px 16px;border-radius:12px;border:1px solid var(--ink-line);background:var(--ink-2);color:var(--on-ink)}
.wl input[type=email]::placeholder{color:var(--on-ink-faint)}
.wl input[type=email]:focus{outline:none;border-color:var(--yellow)}
.bone .wl input[type=email],.wl.on-bone input[type=email]{background:#fff;color:var(--on-bone);border-color:var(--bone-line)}
.bone .wl input[type=email]::placeholder{color:#8A93A0}
.wl .btn{flex:0 0 auto}
.wl-note{font-size:14px;margin-top:12px;color:var(--on-ink-muted)}
.bone .wl-note{color:var(--on-bone-muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.now{margin-top:22px;display:flex;flex-direction:column;gap:4px;font-size:15px;padding-left:14px;border-left:2px solid var(--yellow);max-width:440px}
.now b{font-weight:700}
.now a{font-weight:700;text-decoration-color:rgba(255,197,61,.6);text-underline-offset:3px}

/* ---------- phone frame ---------- */
.phone{border-radius:46px;padding:9px;background:#05080D;box-shadow:0 0 0 1px #2B3546 inset,0 40px 80px -30px rgba(14,26,43,.55),0 18px 36px -18px rgba(14,26,43,.4)}
.phone img{border-radius:38px;width:100%;height:auto;aspect-ratio:390/844;background:var(--ink)}

/* ---------- sections ---------- */
section{padding:80px 0}
@media (min-width:900px){section{padding:112px 0}}
.eyebrow{font-size:14px;font-weight:700;color:var(--yellow-text);letter-spacing:.02em;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow)}
.ink .eyebrow{color:var(--yellow)}
.h2{font-size:clamp(32px,4.6vw,50px);max-width:18ch;letter-spacing:-.035em;font-weight:750}
.intro{font-size:19px;max-width:56ch;margin-top:18px}
.bone{background:var(--bone);color:var(--on-bone)}
.paper{background:var(--bone-2)}

/* the window: the project lifecycle from the app */
.life{margin-top:48px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.life div{display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:600;color:var(--on-bone-muted)}
.life div::before{content:"";height:10px;border-radius:5px;background:var(--bone-line)}
.life .past::before{background:#9AA3AF}
.life .win{color:var(--on-bone)}
.life .win::before{background:var(--yellow)}
.life-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:14px;color:var(--on-bone-muted)}
.life-key span{display:inline-flex;align-items:center;gap:8px}
.life-key i{width:18px;height:8px;border-radius:4px;display:inline-block}
@media (max-width:640px){.life{grid-template-columns:repeat(3,1fr);row-gap:18px}}

.cols3{display:grid;gap:16px;margin-top:48px}
@media (min-width:820px){.cols3{grid-template-columns:repeat(3,1fr);gap:20px}}
.card{background:var(--bone-2);border:1px solid var(--bone-line);border-radius:var(--r-lg);padding:28px}
.ink .card{background:var(--ink-2);border-color:var(--ink-line)}
.card h3{font-size:23px;margin:14px 0 10px}
.card p{color:var(--on-bone-muted)}
.ink .card p{color:var(--on-ink-muted)}
.num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;background:var(--ink);color:var(--on-ink)}
.ink .num{background:var(--yellow);color:var(--ink)}

/* three notes */
.notes{display:grid;gap:16px;margin-top:48px}
@media (min-width:820px){.notes{grid-template-columns:repeat(3,1fr)}}
.note-card{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:14px}
.note-card .day{font-size:14px;font-weight:700;color:var(--yellow)}
.note-card h3{font-size:22px}
.note-card blockquote{margin:0;padding:16px;border-radius:12px;background:var(--ink-3);color:var(--on-ink);font-size:15px;line-height:1.55}
.note-card p{color:var(--on-ink-muted);font-size:15px}

/* screens strip */
.screens{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:space-between;gap:24px;margin-top:56px;align-items:start}
.screens figure{margin:0}
.screens figcaption{margin-top:18px;font-size:15px;color:var(--on-bone-muted)}
.screens figcaption b{display:block;color:var(--on-bone);font-size:18px;letter-spacing:-.02em;margin-bottom:4px}
.screens figure:nth-child(2){margin-top:48px}
@media (max-width:820px){.screens{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 8px;margin-left:-16px;margin-right:-16px;scrollbar-width:none}.screens::-webkit-scrollbar{display:none}.screens figure{scroll-snap-align:center}.screens figure:nth-child(2){margin-top:0}}

/* promise strip */
.promise{display:grid;gap:24px;align-items:center}
@media (min-width:900px){.promise{grid-template-columns:1fr 1fr;gap:64px}}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-size:18px}
.ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230E1A2B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* availability / final CTA */
.avail{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.avail{grid-template-columns:1.1fr .9fr;gap:72px}}
.status{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ink-line)}
.status li{display:flex;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--ink-line);font-size:17px}
.status .tag{flex:none;font-size:13px;font-weight:700;padding:4px 9px;border-radius:999px;min-width:96px;text-align:center}
.tag.live{background:var(--yellow);color:var(--ink)}
.tag.soon{background:var(--ink-3);color:var(--on-ink-muted);border:1px solid var(--ink-line)}
.status a{font-weight:700;text-underline-offset:3px;text-decoration-color:rgba(255,197,61,.6)}
.cta-box{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r-lg);padding:28px}
.cta-box h3{font-size:26px}
.cta-box .wl{margin-top:20px}

/* ---------- features page ---------- */
.page-h{padding:64px 0 56px}
@media (min-width:900px){.page-h{padding:96px 0 80px}}
.page-h h1{font-size:clamp(40px,6.4vw,68px);letter-spacing:-.04em;line-height:1.04;max-width:16ch;margin-top:8px}
.page-h p{font-size:20px;max-width:52ch;margin-top:20px}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.jump a{font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--ink-line);border-radius:999px;padding:8px 14px;color:var(--on-ink)}
.jump a:hover{border-color:var(--on-ink-faint)}
.feat{display:grid;gap:40px;align-items:center;padding:72px 0;border-top:1px solid var(--bone-line)}
.feat:first-of-type{border-top:0}
@media (min-width:900px){.feat{grid-template-columns:1fr 1fr;gap:80px;padding:96px 0}.feat.flip .feat-img{order:2}}
.feat-img{justify-self:center;width:min(320px,80vw)}
.feat h2{font-size:clamp(30px,4vw,44px);max-width:16ch}
.feat .intro{font-size:18px}
.feat ul{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.feat li{padding-left:22px;position:relative;color:var(--on-bone-muted)}
.feat li b{color:var(--on-bone);font-weight:700}
.feat li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.feat li.y::before{background:var(--yellow)}
.feat .tabname{display:inline-block;font-size:13px;font-weight:700;background:var(--ink);color:var(--on-ink);border-radius:8px;padding:4px 10px;margin-bottom:16px}
.demo-note{font-size:14px;color:var(--on-bone-muted);margin-top:28px}

/* ---------- pricing ---------- */
.price-grid{display:grid;gap:20px;margin-top:8px}
@media (min-width:900px){.price-grid{grid-template-columns:1.15fr .85fr;align-items:stretch}}
.plan{background:var(--bone-2);border:1px solid var(--bone-line);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:18px}
.plan.dark{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.plan .badge{align-self:flex-start;font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--on-ink)}
.plan.dark .badge{background:var(--yellow);color:var(--ink)}
.plan .amt{font-size:64px;font-weight:800;letter-spacing:-.05em;line-height:1}
.plan .amt small{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--on-bone-muted);margin-left:6px}
.plan h2{font-size:30px}
.plan .ticks li{font-size:17px}
.plan.dark p{color:var(--on-ink-muted)}
.guarantee{display:grid;gap:12px;margin-top:20px;padding:28px;border-radius:var(--r-lg);background:var(--bone-2);border:1px dashed #C7C0B0}
.guarantee h3{font-size:22px}

/* FAQ */
.faq{max-width:780px;margin-top:40px;border-top:1px solid var(--bone-line)}
.faq details{border-bottom:1px solid var(--bone-line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-weight:700;font-size:19px;letter-spacing:-.015em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details>div{padding:0 0 24px;color:var(--on-bone-muted);max-width:64ch;display:flex;flex-direction:column;gap:12px}

/* ---------- legal + support ---------- */
.legal{max-width:760px;padding:64px 0 96px}
.legal h1{font-size:clamp(36px,5vw,52px);letter-spacing:-.04em}
.legal .updated{color:var(--on-bone-muted);margin-top:12px;font-size:15px}
.legal h2{font-size:24px;margin:40px 0 12px;letter-spacing:-.02em}
.legal p,.legal li{color:#2E3A4A;margin-bottom:12px}
.legal ul{padding-left:20px}
.form{display:flex;flex-direction:column;gap:16px;margin-top:28px;max-width:560px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.form input,.form textarea,.form select{font:400 17px var(--font);padding:13px 14px;border-radius:12px;border:1px solid var(--bone-line);background:#fff;color:var(--on-bone)}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--ink)}
.form .btn{align-self:flex-start}

/* ---------- footer ---------- */
footer{padding:56px 0 40px;font-size:15px}
footer .wrap{display:grid;gap:32px}
@media (min-width:820px){footer .wrap{grid-template-columns:1.3fr 1fr 1fr}}
footer h4{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--on-ink-muted);margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer a{text-decoration:none;color:var(--on-ink-muted)}
footer a:hover{color:var(--on-ink)}
footer .fine{grid-column:1/-1;border-top:1px solid var(--ink-line);padding-top:24px;color:var(--on-ink-faint);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer .brand{font-size:26px;margin-bottom:12px}

/* beta band (above header on every page) */
.beta-band{background:var(--yellow);color:var(--ink);font-size:14px;font-weight:600}
.beta-band .wrap{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;text-align:center;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.beta-band a{font-weight:800;text-underline-offset:3px}
footer .brand{color:var(--on-ink)}
footer{border-top:1px solid var(--ink-line)}

/* ================= motion ================= */
/* reveal on scroll (only when JS is running and motion is welcome) */
.js:not(.still) [data-reveal]:not([data-stagger]){opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js:not(.still) [data-reveal][data-stagger]>*{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js [data-reveal].in:not([data-stagger]),.js [data-reveal][data-stagger].in>*{opacity:1;transform:none}

/* hero entrance */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes phoneIn{from{opacity:0;transform:translateY(60px) rotate(2deg)}to{opacity:1;transform:none}}
.js:not(.still) .hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.js:not(.still) .hero-copy>*:nth-child(2){animation-delay:.08s}
.js:not(.still) .hero-copy>*:nth-child(3){animation-delay:.16s}
.js:not(.still) .hero-copy>*:nth-child(4){animation-delay:.24s}
.js:not(.still) .hero-copy>*:nth-child(5){animation-delay:.32s}
.js:not(.still) .hero-phone{animation:phoneIn 1.1s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.js:not(.still) .hero-phone .phone{animation:float 7s ease-in-out 1.4s infinite}
.hero-phone .glow{position:absolute;inset:10% 0 auto;height:60%;background:radial-gradient(closest-side,rgba(255,197,61,.18),transparent);filter:blur(10px);z-index:-1;pointer-events:none}

/* phones that play through the app */
.phone.cycle{position:relative}
.phone.cycle .slides{position:relative;border-radius:38px;overflow:hidden;aspect-ratio:390/844;background:var(--ink)}
.phone.cycle .slide{position:absolute;inset:0;width:100%;height:100%;border-radius:0;opacity:0;transform:scale(1.02);transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.phone.cycle .slide.on{opacity:1;transform:none}
.still .phone.cycle .slide{transition:none}
.phone-dots{display:flex;gap:6px;justify-content:center;margin-top:18px}
.phone-dots i{width:6px;height:6px;border-radius:3px;background:rgba(170,181,196,.4);transition:width .4s,background .4s}

/* interactive tour */
.tour{margin-top:48px;display:grid;gap:32px;align-items:center}
@media (min-width:900px){.tour{grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);gap:56px}}
.tour-tabs{display:flex;flex-direction:column;gap:4px}
.tour-tabs button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;font-weight:700;font-size:18px;letter-spacing:-.015em;color:var(--on-bone-muted);transition:background .25s,color .25s}
.tour-tabs button:hover{color:var(--on-bone)}
.tour-tabs button:focus-visible{outline:2px solid var(--ink)}
.tour-tabs button i{width:10px;height:10px;border-radius:50%;background:var(--bone-line);flex:none;transition:background .25s,transform .25s}
.tour-tabs button[aria-selected="true"]{background:var(--bone-2);color:var(--on-bone);box-shadow:0 0 0 1px var(--bone-line)}
.tour-tabs button[aria-selected="true"] i{background:var(--yellow);transform:scale(1.25)}
.tour-phone{justify-self:center;width:min(320px,78vw)}
.tour-side{display:flex;flex-direction:column;gap:20px}
.tour-cap h3{font-size:30px;margin-bottom:12px}
.tour-cap p{color:var(--on-bone-muted);font-size:18px}
.tour-cap.on{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.still .tour-cap.on{animation:none}
.tour-bar{height:3px;border-radius:2px;background:var(--bone-line);overflow:hidden}
.tour-bar i{display:block;height:100%;width:0;background:var(--ink)}
.tour-ctl{display:flex;gap:10px;align-items:center}
.tour-ctl .btn{padding:12px 16px}
.tour-ctl .prev{width:46px;padding:12px 0}
@media (max-width:899px){
  .tour-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;gap:6px}
  .tour-tabs::-webkit-scrollbar{display:none}
  .tour-tabs button{font-size:15px;padding:9px 13px;white-space:nowrap}
  .tour-side{text-align:left}
}

/* lifecycle fills stage by stage */
.js:not(.still) .life div::before{transform-origin:left;transform:scaleX(0);transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
.js:not(.still) .life div{opacity:.35;transition:opacity .5s}
.js .life.in div{opacity:1}
.js .life.in div::before{transform:none}
.life div:nth-child(1),.life div:nth-child(1)::before{transition-delay:.05s!important}
.life div:nth-child(2),.life div:nth-child(2)::before{transition-delay:.35s!important}
.life div:nth-child(3),.life div:nth-child(3)::before{transition-delay:.6s!important}
.life div:nth-child(4),.life div:nth-child(4)::before{transition-delay:.75s!important}
.life div:nth-child(5),.life div:nth-child(5)::before{transition-delay:.9s!important}
.life div:nth-child(6),.life div:nth-child(6)::before{transition-delay:1.05s!important}
@keyframes win{0%,100%{box-shadow:0 0 0 0 rgba(255,197,61,.0)}50%{box-shadow:0 0 0 6px rgba(255,197,61,.28)}}
.js:not(.still) .life.in .win::before{animation:win 2.4s ease-in-out 1.4s 3}
.life .win{position:relative}
.life-flag{font-size:13px;font-weight:700;color:var(--yellow-text)}
.js:not(.still) .life-flag{opacity:0;transform:translateY(6px);transition:opacity .5s 1.3s,transform .5s 1.3s}
.js .life.in .life-flag{opacity:1;transform:none}

/* notes that type themselves */
.note-card{transition:border-color .4s,transform .4s}
.note-card.writing{border-color:var(--yellow);transform:translateY(-4px)}

.js:not(.still) .note-card:not(.done):not(.writing) blockquote{color:transparent}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--yellow);vertical-align:-.15em;margin-left:1px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.note-card .sent{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--on-ink-faint)}
.note-card .sent::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-line);transition:background .3s}
.note-card.done .sent{color:var(--good,#7FD1A8)}
.note-card.done .sent::before{background:#7FD1A8}

/* timeline line under the three notes */
.days-line{position:relative;height:2px;background:var(--ink-line);margin-top:40px;border-radius:2px}
.days-line i{position:absolute;inset:0 auto 0 0;width:0;background:var(--yellow);border-radius:2px;transition:width 3.5s linear}
.notes.in-progress+.days-line i,.days-line.in i{width:100%}

/* feature rows: phone slides in from its side */
.js:not(.still) .feat .feat-img{opacity:0;transform:translateX(-40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js:not(.still) .feat.flip .feat-img{transform:translateX(40px)}
.js .feat.in .feat-img{opacity:1;transform:none}

/* ticks pop in */
.js:not(.still) .ticks[data-reveal] li::before{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0ms) + 250ms)}
.js .ticks[data-reveal].in li::before{transform:none}

/* buttons: gentle press */
.btn{transition:transform .15s,filter .2s,background .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.arrow::after{transition:transform .2s}
.btn.arrow:hover::after{transform:translateX(3px)}
.note-card .by{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--on-ink-muted)}
.note-card .by::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);flex:none}
.note-card .by b{font-weight:700}
.note-card .by .w{display:none}
.js:not(.still) .note-card:not(.done) .by .r{display:none}
.js:not(.still) .note-card.writing .by .w{display:inline}
.js:not(.still) .note-card:not(.done):not(.writing) .by{visibility:hidden}
.js:not(.still) .note-card.writing .by::before{animation:blink .7s steps(1) infinite}
.note-card.done .by{color:#7FD1A8}
.note-card.done .by::before{background:#7FD1A8}

/* ===== review round 2 ===== */
.card h3,.note-card h3,.tour-cap h3,.plan h2,.guarantee h3,.cta-box h3{font-weight:700;letter-spacing:-.025em}
.feat h2{font-weight:750;letter-spacing:-.035em}
/* timeline: generic hiring story */
.life .crowd{color:var(--on-bone-muted)}
.life .crowd::before{background:repeating-linear-gradient(90deg,#C9C2B2 0 6px,transparent 6px 10px)}
.life-flag{display:block;margin-top:4px}
.life-flag.dim{color:var(--on-bone-muted);font-weight:600}
.life .win+.win .life-flag,.life .win:not(:nth-child(2)) .life-flag{display:none}
@media (max-width:640px){.life{grid-template-columns:repeat(3,1fr)}}
.sectors{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;align-items:center}
.sectors span{font-size:14px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--bone-2);border:1px solid var(--bone-line);color:var(--on-bone)}
.sectors .lab{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
/* notes: the opening line is readable, the rest is there but blurred */
.note-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.note-body{position:relative;background:var(--ink-3);border-radius:12px;padding:16px 16px 44px;overflow:hidden}
.note-card .note-body blockquote{margin:0;padding:0;background:none;border-radius:0;min-height:0;font-size:15px;line-height:1.6}
.note-body .blur{margin:2px 0 0;font-size:15px;line-height:1.6;color:var(--on-ink);filter:blur(4.5px);user-select:none;pointer-events:none;opacity:.85}
.bespoke{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;font-weight:700;color:var(--ink);background:var(--yellow);padding:6px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.bespoke::before{content:"";width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1A2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:13px;font-weight:600;color:var(--on-ink-muted);border:1px solid var(--ink-line);border-radius:999px;padding:4px 10px}
.notes-foot{margin-top:28px;color:var(--on-ink-muted);font-size:16px;max-width:60ch}
.js:not(.still) .note-card:not(.done) .blur,.js:not(.still) .note-card:not(.done) .bespoke{opacity:0}
.note-card .blur{transition:opacity .8s .1s}
.note-card .bespoke{transition:opacity .5s .6s}
.note-card.done .blur{opacity:.85}
/* pricing: two options */
.plans2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{border:1px solid var(--bone-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;background:#fff}
.opt.best{border:2px solid var(--ink);padding:15px}
.opt-l{font-size:14px;font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.opt-l em{font-style:normal;font-size:12px;background:var(--yellow);color:var(--ink);padding:3px 8px;border-radius:999px}
.opt .amt{font-size:44px}
.opt .amt small{display:block;margin:6px 0 0;font-size:14px}
.opt-s{font-size:13px;color:var(--on-bone-muted)}
@media (max-width:420px){.plans2{grid-template-columns:1fr}}
/* tour: clearer controls */
.tour-left{display:flex;flex-direction:column;gap:12px}
.tour-hint{font-size:14px;font-weight:600;color:var(--on-bone-muted);display:flex;align-items:center;gap:8px}
.tour-hint::before{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E5968' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V5a2 2 0 0 1 4 0v6'/%3E%3Cpath d='M13 10a2 2 0 0 1 4 0v1a2 2 0 0 1 4 0v4a6 6 0 0 1-6 6h-2a6 6 0 0 1-5-3l-3-5a2 2 0 0 1 3-2l2 2'/%3E%3C/svg%3E") center/contain no-repeat}
.tour-tabs button{border:1px solid transparent}
.tour-tabs button:not([aria-selected="true"]){border-color:var(--bone-line)}
.tour-tabs button::after{content:"›";margin-left:auto;opacity:.35;font-size:20px;line-height:1}
.tour-tabs button[aria-selected="true"]::after{opacity:1}
.tour-count{font-size:14px;font-weight:600;color:var(--on-bone-muted);margin-left:4px}
.tour-count b{color:var(--on-bone)}
.tour-all{font-weight:700;font-size:15px;text-underline-offset:4px;display:inline-flex;gap:6px}
.tour-ctl [data-next]{padding:14px 20px;font-size:17px}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(255,197,61,0)}50%{box-shadow:0 0 0 7px rgba(255,197,61,.3)}}
.js:not(.still) .tour.in [data-next]:not(.used){animation:nudge 1.8s ease-in-out 1.2s 3}
@media (max-width:899px){.tour-tabs button::after{display:none}.tour-hint{justify-content:center}}
.note-card .note-body{flex:1}

/* ===== round 3: the trick, the ticker, fewer template tells ===== */
.fields{margin-top:36px;font-size:17px;color:var(--on-bone-muted);max-width:60ch}
.trust{padding:0 0 72px}
.trust p{font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.02em;max-width:34ch;line-height:1.35;border-top:1px solid var(--bone-line);padding-top:32px}

/* ticker */
.ticker{position:relative;z-index:1;display:flex;align-items:center;gap:0;background:var(--bone);border-top:1px solid var(--bone-line);border-bottom:1px solid var(--bone-line);height:56px;overflow:hidden}
.tk-label{flex:none;display:flex;align-items:center;gap:9px;padding:0 18px 0 max(16px,calc((100vw - var(--wrap))/2 + 32px));height:100%;font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--on-bone);background:var(--bone);position:relative;z-index:2;box-shadow:16px 0 18px var(--bone)}
.tk-label i{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(255,197,61,.6);animation:live 2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(255,197,61,.7)}100%{box-shadow:0 0 0 10px rgba(255,197,61,0)}}
.tk-viewport{overflow:hidden;flex:1;height:100%;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 94%,transparent)}
.tk-track{display:flex;width:max-content;animation:tk 90s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tk{to{transform:translateX(-50%)}}
.tk-item{white-space:nowrap;font-size:15px;color:var(--on-bone);padding-right:44px;position:relative}
.tk-item::after{content:"";position:absolute;right:20px;top:50%;width:4px;height:4px;border-radius:50%;background:#B9B2A2}
.tk-place{font-weight:700;margin-right:6px}
.tk-arrow{color:var(--yellow-text);font-weight:700;margin:0 2px}
.tk-hire{color:var(--yellow-text);font-weight:600}
.still .tk-track{animation:none}
.still .tk-viewport{overflow-x:auto}
@media (max-width:720px){.tk-label{padding-left:16px;font-size:13px}.tk-item{font-size:14px}}

/* the trick: news -> what it means -> what you send */
.trick{margin-top:48px}
.trick-tabs{display:flex;gap:6px;margin-bottom:20px}
.trick-tabs button{all:unset;cursor:pointer;font-weight:700;font-size:15px;padding:9px 16px;border-radius:10px;color:var(--on-ink-muted);border:1px solid var(--ink-line);transition:background .2s,color .2s}
.trick-tabs button:hover{color:var(--on-ink)}
.trick-tabs button:focus-visible{outline:2px solid var(--yellow)}
.trick-tabs button[aria-selected="true"]{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.story{display:grid;gap:0;align-items:stretch}
@media (min-width:980px){.story{grid-template-columns:1fr 44px 1fr 44px 1.15fr}}
.step{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:14px;transition:border-color .5s,opacity .5s,transform .5s}
.step-n{font-size:13px;font-weight:700;color:var(--yellow);letter-spacing:.01em}
.news-card .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--on-ink-faint);margin-bottom:10px}
.news-card h3{font-size:22px;line-height:1.2}
.means{color:var(--on-ink);font-size:16px;line-height:1.55}
.hiring{display:flex;flex-direction:column;gap:8px}
.hiring>span{font-size:13px;color:var(--on-ink-muted);font-weight:600}
.hiring ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hiring li{font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px}
.hiring li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow)}
.win-line{font-size:15px;color:var(--on-ink-muted);margin-top:auto;padding-top:12px;border-top:1px solid var(--ink-line)}
.win-line b{color:var(--yellow)}
.who{font-size:15px;color:var(--on-ink-muted)}
.who b{color:var(--on-ink)}
.step .note-body{flex:1}
.link{display:flex;align-items:center;justify-content:center;height:28px}
.link i{display:block;width:2px;height:100%;background:var(--ink-line);position:relative;overflow:hidden;border-radius:2px}
.link i::after{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleY(0);transform-origin:top;transition:transform .5s ease}
@media (min-width:980px){.link{height:auto}.link i{width:100%;height:2px}.link i::after{transform:scaleX(0);transform-origin:left}}
.story.go .link i::after{transform:none}
.story.go .link:nth-of-type(2) i::after{transition-delay:.25s}
.story.go .link:nth-of-type(4) i::after{transition-delay:1.6s}
.js:not(.still) .story .s2,.js:not(.still) .story .s3{opacity:.35}
.js .story.go .s2{opacity:1;transition-delay:.7s}
.js .story.go .s3{opacity:1;transition-delay:2.1s}
.story.go .s1{border-color:#3A5174}
.story.typed .s3{border-color:var(--yellow)}
.js:not(.still) .story:not(.typed) .s3 .blur,.js:not(.still) .story:not(.typed) .s3 .bespoke{opacity:0}
.story .s3 .blur{transition:opacity .8s .1s}
.story .s3 .bespoke{transition:opacity .5s .5s}
.story.typed .s3 .blur{opacity:.85}
.js:not(.still) .story:not(.typing):not(.typed) .s3 blockquote{color:transparent}
.mini-steps{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px;counter-reset:ms;color:var(--on-ink-muted);font-size:16px}
.mini-steps li{counter-increment:ms;display:flex;gap:10px;align-items:baseline}
.mini-steps li::before{content:counter(ms);font-weight:800;color:var(--ink);background:var(--yellow);width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:13px;flex:none;transform:translateY(-1px)}
.mini-steps b{color:var(--on-ink);font-weight:700}
/* beta link: quieter, not a pill */
.beta-link{border:0;padding:8px 4px;color:var(--on-ink-muted)}
.beta-link:hover{color:var(--on-ink)}
/* phones: nothing may push the page sideways */
.tour>*,.price-grid>*,.feat>*,.story>*,.avail>*,.promise>*,.hero .wrap>*{min-width:0}
@media (max-width:899px){
  .tour{grid-template-columns:minmax(0,1fr)}
  .js:not(.still) .feat .feat-img,.js:not(.still) .feat.flip .feat-img{transform:translateY(30px)}
  .plan{padding:24px}
}
.src-link{margin-top:auto;font-size:14px;font-weight:600;color:var(--on-ink-muted);text-decoration:none}
.src-link:hover{color:var(--on-ink)}

/* Beta tester quotes (homepage, 16 Oct) */
.quotes{display:grid;gap:16px;margin-top:36px;grid-template-columns:1fr}
@media (min-width:640px){.quotes{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.quotes{grid-template-columns:repeat(4,1fr)}}
.quote{margin:0;background:var(--bone);border:1px solid var(--bone-line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;border-top:4px solid var(--yellow)}
.quote blockquote{margin:0;font-size:21px;line-height:1.35;font-weight:650;letter-spacing:-.01em;color:var(--on-bone)}
.quote figcaption{font-size:14px;font-weight:600;color:var(--on-bone);display:flex;flex-direction:column;gap:2px}
.quote figcaption span{font-weight:500;color:var(--on-bone-muted)}

/* "Where did you hear about us?" on the thanks page (17 Oct) */
.src{margin-top:28px;max-width:520px}
.src-q{display:block;font-weight:600;margin-bottom:10px}
.src-row{display:flex;gap:10px;flex-wrap:wrap}
.src select,.src input[type=text]{flex:1 1 220px;min-width:0;font:400 17px var(--font);padding:14px 16px;border-radius:12px;border:1px solid var(--ink-line);background:var(--ink-2);color:var(--on-ink)}
.src input[type=text]{margin-top:10px;width:100%}