/* AnswerSeen public website. Plain CSS, no build step. Light page with a faint dot grid; white panels; navy bands only where emphasis belongs (product, pricing, footer). */
@font-face{font-family:"Plex";src:url("/fonts/IBMPlexSans.woff2") format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --page:#f7f8fa;--dot:#d9dee7;--panel:#fff;--line:#e4e8ef;--panel-2:#f0f3f7;
  --navy:#06183d;--blue:#0b3f8f;--green:#0a7a4f;
  --text:#0f1b2d;--text-2:#4b5565;--sky:#7ff0b8;--sky-ink:#052016;--sky-hover:#9af5c8;
  --yellow:#fff3c4;--yellow-ink:#6b4e00;
  /* role names kept from the old sheet so component rules read the same */
  --ink:var(--text);--muted:var(--text-2);--rule:var(--line);--accent:var(--green);
  --glass:var(--panel);--glass-line:var(--line);--glass-input:#fff;--glass-hover:var(--panel-2);
  --sans:"Plex",-apple-system,"Segoe UI","Noto Sans","Noto Sans SC","PingFang SC",sans-serif;
  --mono:"Plex Mono","SF Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;color:var(--ink);font:17px/1.6 var(--sans);background:var(--page) radial-gradient(var(--dot) 1px,transparent 1px) 0 0/22px 22px}
img,svg{display:block;max-width:100%}
a{color:var(--blue);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;z-index:10;background:var(--sky);color:var(--sky-ink);padding:8px 12px}

/* the white panel: one rule set, applied by selector so page HTML needs no extra class */
.glass,.card,.answer,.stat,.window,.chips span,.compare,.summary,.toggle,.top,.prose,footer .wrap{
  background:var(--panel);border:1px solid var(--line);border-radius:20px}
/* navy band: product window, pricing, footer */
.band{background:var(--navy) radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/22px 22px;color:#fff;border-radius:28px}
.band h2,.band h3{color:#fff}
.band .muted,.band .capsule{color:rgba(255,255,255,.8)}

.wrap{max-width:1080px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.narrow{max-width:720px}
section{padding:104px 0}
section.first{padding-top:56px}
h1,h2,h3{margin:0;color:var(--navy);text-wrap:balance}
h1{font-size:clamp(44px,5.4vw,68px);line-height:1;letter-spacing:-.04em;font-weight:700}
h2{font-size:clamp(34px,4.2vw,52px);line-height:1.1;letter-spacing:-.03em;font-weight:700}
h3{font-size:19px;line-height:1.3;letter-spacing:-.01em;font-weight:600}
h1 em,h2 em{font-style:normal;color:var(--accent)}
p{margin:0}
.lede{font-size:21px;color:var(--muted);max-width:620px}
.capsule{font-size:20px;max-width:640px;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:14px}
.stack{display:grid;gap:20px;align-content:start}
.stack-lg{display:grid;gap:48px}
.eyebrow{font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* header: one white pill bar that floats over the page */
.top{position:sticky;top:12px;z-index:5;margin:12px auto 0;max-width:1080px;width:calc(100% - 32px);border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:60px;padding-left:24px;padding-right:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;color:var(--ink);text-decoration:none;margin-right:auto}
.top nav{display:flex;gap:24px}
.top nav a{color:var(--muted);text-decoration:none;font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center}
.top nav a:hover,.top nav a[aria-current=page]{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--sky);border-radius:999px;background:var(--sky);color:var(--sky-ink);font:500 14px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .1s}
.btn:hover{background:var(--sky-hover);border-color:var(--sky-hover)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:#eceff4;color:var(--ink);border-color:#eceff4}
.btn.ghost:hover{background:#e1e6ee;border-color:#e1e6ee}
.band .btn.ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.btn.sm{min-height:42px;padding:0 18px;font-size:13px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* tags */
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font:500 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--panel-2);border:1px solid transparent;color:var(--muted)}
.tag.yellow{background:var(--yellow);border-color:transparent;color:var(--yellow-ink)}
.tag.pop{background:var(--sky);border-color:transparent;color:var(--sky-ink)}
.tag.time{background:#ff8a5c;border-color:transparent;color:#2b0f00;font-size:15px;font-weight:600;padding:8px 18px;letter-spacing:.04em}
mark.need{background:var(--yellow);color:var(--yellow-ink);padding:1px 5px;border-radius:4px;font-weight:600}

/* hero: centred headline, then the product in a navy band, then a row of plain numbers */
.hero{padding:72px 0 0}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:48px;justify-items:center}
.hero .stack{gap:24px;text-align:center;justify-items:center;max-width:900px}
.hero .lede{margin:0 auto}
.hero .actions{justify-content:center}
.trust{font:500 13px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.product{width:100%;padding:24px}
.product .window{background:#0b2456;border-color:rgba(255,255,255,.14);color:#fff}
.product .window .bar{border-color:rgba(255,255,255,.12)}
.product .window .bar i{background:rgba(255,255,255,.2)}
.product .body.two{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;padding:28px}
.product .eyebrow,.product .muted,.product .small{color:rgba(255,255,255,.72)}
.product .score{font-size:28px}
.product .meter{background:rgba(255,255,255,.12)}
.product .meter b{background:var(--sky)}
.product .up{color:var(--sky)}
.product .fix{border-color:rgba(255,255,255,.14)}
.product .fix .n{color:rgba(255,255,255,.6)}
.product .tag{background:var(--sky);color:var(--sky-ink)}
.product .stack{text-align:left;justify-items:stretch;max-width:none}
.product .answer{background:#fff;color:var(--ink);border:0;align-self:start}
.product .answer .eyebrow,.product .answer .muted{color:var(--muted)}
.proof{list-style:none;margin:0;padding:8px 0 0;display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:center;font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.proof b{display:block;font:600 34px/1.1 var(--sans);letter-spacing:-.02em;color:var(--navy);text-transform:none}
.page-head{padding:56px 0 40px}
.page-head .wrap{text-align:center;justify-items:center} /* centred like the home hero */
.page-head .wrap>*{max-width:760px}
.page-head h1{max-width:900px}
.page-head .actions{justify-content:center}

/* mock AI answer */
.answer{margin:0;padding:24px;display:grid;gap:12px;font-size:15px}
.answer .head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.answer ol{margin:0;padding-left:20px;display:grid;gap:6px}
.answer mark{background:var(--sky);color:var(--sky-ink);padding:0 5px;border-radius:4px;font-weight:600}

/* research figures */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{padding:24px;display:grid;gap:10px;align-content:start}
.stat .num{font:500 44px/1 var(--mono);letter-spacing:-.02em;color:var(--navy)}
.stat .src{font-size:14px;color:var(--muted)}

/* steps and timeline */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.step{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:1px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);font:500 14px/1 var(--mono);color:var(--muted)}
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.timeline li{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid var(--navy)}
.timeline .when{font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chart{margin:0;display:grid;gap:10px;color:var(--accent)}
.chart svg{width:100%;height:auto;max-height:220px}
.chart .axis{stroke:var(--line)}
.chart text{fill:var(--muted);font:500 12px var(--mono)}
.chart figcaption{font-size:14px;color:var(--muted)}

/* faux app window (How it works examples) */
.window{overflow:hidden}
.window .bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-bottom:1px solid var(--line)}
.window .bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.window .bar span{margin-left:auto}
.window .body{padding:24px;display:grid;gap:14px}
.score{font:600 26px/1.2 var(--sans);letter-spacing:-.01em}
.up{color:var(--accent);font-weight:600}
.meter{height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden}
.meter b{display:block;height:100%;width:22.5%;background:var(--accent);border-radius:4px}
.fix{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;font-size:15px}
.fix .n{font:500 13px/1.6 var(--mono);color:var(--muted)}

/* cards */
.card{padding:28px;display:grid;gap:10px;align-content:start;min-width:0}
.card .tag{justify-self:start}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;counter-reset:b}
.bento .card{grid-column:span 3;padding:28px 28px 32px}
.bento .card:nth-child(n+5){grid-column:span 4}
.bento .card::before{counter-increment:b;content:"0" counter(b);font:500 13px/1 var(--mono);color:var(--muted);margin-bottom:6px}
.bento .card .tag{order:-1}

/* gap -> fix -> draft */
.flow{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:16px;align-items:stretch}
.flow .card{position:relative}
.flow .card+.card::before{content:"";position:absolute;left:-13px;top:50%;width:10px;height:10px;border-top:2px solid #b8c0cc;border-right:2px solid #b8c0cc;transform:translateY(-50%) rotate(45deg)}
.q{font-family:var(--mono);font-size:14px;background:var(--panel-2);border-radius:4px;padding:2px 6px}
.draft h3{font-size:22px}
.needs{border-top:1px dashed var(--line);padding-top:12px;font-size:14px;color:var(--muted)}

/* question chips (other pages) and persona tabs (home): radio + CSS, no JavaScript */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{font:500 14px/1.4 var(--mono);padding:8px 12px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs label{font:500 13px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:12px 18px;border-radius:999px;background:#eceff4;color:var(--muted);cursor:pointer}
.tabs label:hover{background:#e1e6ee}
#who-1:checked~.tabs label[for=who-1],#who-2:checked~.tabs label[for=who-2],#who-3:checked~.tabs label[for=who-3],#who-4:checked~.tabs label[for=who-4]{background:var(--navy);color:#fff}
#who-1:focus-visible~.tabs label[for=who-1],#who-2:focus-visible~.tabs label[for=who-2],#who-3:focus-visible~.tabs label[for=who-3],#who-4:focus-visible~.tabs label[for=who-4]{outline:2px solid var(--blue);outline-offset:2px}
.panels .answer{display:none;max-width:640px;font-size:16px}
#who-1:checked~.panels .p1,#who-2:checked~.panels .p2,#who-3:checked~.panels .p3,#who-4:checked~.panels .p4{display:grid}

/* comparison tables: one stacked card per row on phones */
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;overflow:clip}
.compare th,.compare td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.compare thead th{font-size:15px;color:var(--ink)}
.compare thead th small{display:block;font:500 12px/1.4 var(--mono);color:var(--muted);margin-top:2px}
.compare tbody th{font-weight:600;width:24%}
.compare td{color:var(--muted)}
.compare .hl{background:rgba(10,122,79,.07);color:var(--ink)}
.compare thead .hl{box-sizing:border-box;border-top:1px solid var(--green);background:rgba(10,122,79,.07)}
.compare .grp th{background:var(--panel-2);font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 14px}
.compare .no{color:#8a94a6}
.compare tr:last-child td{border-bottom:0}
@media (min-width:721px){
  .compare thead th{position:sticky;top:84px;z-index:1;background:#fff}
  .compare thead .hl{background:linear-gradient(rgba(10,122,79,.07),rgba(10,122,79,.07)),#fff}}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-weight:600;font-size:18px;cursor:pointer;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--muted)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 22px;color:var(--muted);max-width:680px}

/* closing call to action */
.closing{text-align:center;padding:64px 0 104px}
.closing .stack{justify-items:center}

/* forms */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
form.card{gap:18px;padding:32px}
.prose form.card{border:0;padding:0;background:none} /* a form inside a long-text panel: one panel, not two */
label{display:grid;gap:6px;font-weight:600;font-size:15px}
textarea{resize:vertical;line-height:1.5}
label small,.help{font-weight:400;color:var(--muted);font-size:14px}
input[type=text],input[type=email],input[type=url],input[type=tel],textarea,select{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #c9d0db;border-radius:8px;background:#fff;color:var(--ink);width:100%;font-weight:400}
input:focus-visible,select:focus-visible{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:2px}
input::placeholder{color:#8a94a6;font-weight:400}
select option{background:#fff;color:var(--ink)}
fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
legend{font-weight:600;font-size:15px;padding:0;margin-bottom:6px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px}
.check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--green);flex:none}
.inline{display:flex;flex-wrap:wrap;gap:8px 20px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.ticks li::before{content:"";width:14px;height:8px;margin-top:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.notice{font-size:14px;padding:12px 14px;border-radius:8px;background:var(--yellow);color:var(--yellow-ink)}

/* pricing */
.toggle{display:inline-flex;padding:4px}
.vh{position:absolute;opacity:0;pointer-events:none}
.toggle label{font-weight:500;font-size:15px;padding:8px 16px;border-radius:8px;cursor:pointer;display:block;color:var(--muted)}
#bill-m:checked~.toggle label[for=bill-m],#bill-y:checked~.toggle label[for=bill-y]{background:var(--navy);color:#fff}
#bill-m:focus-visible~.toggle label[for=bill-m],#bill-y:focus-visible~.toggle label[for=bill-y]{outline:2px solid var(--blue);outline-offset:2px}
.yearly{display:none}
#bill-y:checked~.plans .yearly{display:block}
#bill-y:checked~.plans .monthly{display:none}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.plan{padding:32px;gap:16px;display:flex;flex-direction:column}
.price{font:600 40px/1 var(--sans);letter-spacing:-.02em}
.price small{font-size:16px;font-weight:400;color:var(--muted);letter-spacing:0}
.plan ul{margin:0;padding:0 0 0 18px;display:grid;gap:8px;font-size:15px}
.plan .btn{margin-top:auto}
.plan .tag{align-self:flex-start}
.plan.growth{border-color:var(--green)}
/* pricing band (home): cards go translucent on navy */
#plans.band{margin:0 16px;padding:88px 0}
#plans .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
#plans .plan.growth{border-color:var(--sky)}
#plans .price small,#plans .plan .muted{color:rgba(255,255,255,.75)}
#plans .tag{background:rgba(255,255,255,.1);color:#fff}
#plans .tag.pop{background:var(--sky);color:var(--sky-ink)}
.row-card{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}

/* policy pages and long text: one tall panel, easy to scan */
.prose{max-width:760px;padding:40px;display:grid;gap:18px;overflow-wrap:break-word}
.prose>*{min-width:0}
.prose td,.prose th{overflow-wrap:anywhere}
.whenwhat td:last-child,.whenwhat th:last-child{white-space:nowrap} /* the short "Week 3" column must not shrink and split */
.whenwhat th[scope=row]{overflow-wrap:normal;min-width:6em} /* "Customer questions" wraps at the space, never inside a word */
.prose h2{font-size:28px;margin-top:28px;scroll-margin-top:100px}
.prose h3{margin-top:8px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:8px}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose thead th{font:500 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.prose blockquote{margin:0;padding:16px 20px;border-left:2px solid var(--green);background:var(--panel-2);border-radius:0 12px 12px 0}
.summary{padding:24px 28px;display:grid;gap:10px}
.toc{columns:2;gap:32px;font-size:15px}
.toc ol{margin:0}
.toc a{color:var(--muted)}
.todo{background:var(--yellow);color:var(--yellow-ink);padding:1px 6px;border-radius:4px;font-weight:600}

/* footer: one navy band */
footer{padding:24px 0 48px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:40px;padding-bottom:40px;width:calc(100% - 32px);background:var(--navy);border:0;border-radius:28px;color:rgba(255,255,255,.8)}
footer .tagline{font:600 20px/1.2 var(--sans);letter-spacing:-.01em;color:#fff}
footer nav{display:grid;gap:8px;align-content:start}
footer a{color:rgba(255,255,255,.8);text-decoration:none}
footer .brand,footer a:hover,footer a[aria-current=page]{color:#fff}


@media (max-width:860px){
  section{padding:64px 0}
  .hero{padding:40px 0 0}
  .page-head{padding:32px 0 24px}
  .split,footer .wrap{grid-template-columns:1fr}
  .product .body.two{grid-template-columns:1fr}
  .steps,.plans,.stats,.timeline{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}.bento .card,.bento .card:nth-child(n+5){grid-column:auto}
  #plans.band{margin:0;border-radius:0}
  .flow{grid-template-columns:1fr}.flow .card+.card::before{left:50%;top:-13px;transform:translateX(-50%) rotate(135deg)}
  html{scroll-padding-top:96px}
  .top{border-radius:20px}
  .top .wrap{flex-wrap:nowrap;gap:12px;padding-left:16px}
  .top nav{gap:12px;overflow-x:auto;scrollbar-width:none}
  .top nav a{white-space:nowrap;font-size:12px}
  .btn.sm{white-space:nowrap}
  .brand img{width:120px;height:auto}
  .toc{columns:1}
  .prose{padding:24px}
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}
@media (max-width:720px){
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare{border:0;background:none}
  .compare thead{display:none}
  .compare tr{background:var(--panel);border:1px solid var(--line);border-radius:20px;margin-bottom:12px;overflow:hidden}
  .compare tbody th{background:var(--glass);border-bottom:1px solid var(--glass-line)}
  .compare tbody th{width:auto}
  .compare td{display:flex;justify-content:space-between;gap:16px;text-align:right}
  .compare td::before{content:attr(data-label);font-weight:600;color:var(--ink);text-align:left}
  .compare td:last-child{border-bottom:0}
  .compare .grp{border:0;background:none;margin:24px 0 8px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .compare .grp th{background:none;padding:0}
}


/* ===== motion: entrances, scroll reveals, hover feedback. transform + opacity only; all of it off under prefers-reduced-motion ===== */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1)}

/* scroll progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--sky);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:20;pointer-events:none}

/* header: tightens + shadow once scrolled; nav underline slides in */
.top{transition:border-color .3s}
.top.scrolled{border-color:#cfd6e1}
.top nav a{position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out)}
.top nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* hero entrance: each row rises in turn */
.hero{position:relative;overflow:clip}
.hero .stack>*{animation:rise .8s var(--ease-out) both;animation-delay:calc(var(--i,0)*.09s)}
.hero .stack>:nth-child(1){--i:0}.hero .stack>:nth-child(2){--i:1}.hero .stack>:nth-child(3){--i:2}.hero .stack>:nth-child(4){--i:3}.hero .stack>:nth-child(5){--i:4}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* highlighter sweeps under "ask AI" after the headline lands */
h1 em{background:linear-gradient(transparent 62%,var(--sky) 62%,var(--sky) 92%,transparent 92%) no-repeat 0 0/0% 100%;animation:sweep .7s var(--ease-out) .7s forwards;padding:0 .06em;margin:0 -.06em}
@keyframes sweep{to{background-size:100% 100%}}
/* two soft colour spots behind the hero (static: a blur filter or drift would repaint every frame) */
.orb{position:absolute;border-radius:50%;opacity:.7;pointer-events:none;z-index:-1} /* static: no blur filter, no drift (was a continuous repaint) */
.orb.a{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle,#b8f7da,transparent 70%)}
.orb.b{width:460px;height:460px;right:-140px;top:160px;background:radial-gradient(circle,#c7d9ff,transparent 70%)}

/* product window: enters with a tilt, then follows the pointer in 3D */
.product{perspective:1400px}
.product .window{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;animation:land 1s var(--ease-out) .35s both}
@keyframes land{from{opacity:0;transform:translateY(40px) rotateX(8deg)}to{opacity:1;transform:none}}
.product .fix{opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.product.in .fix{opacity:1;transform:none}
.product.in .fix:nth-of-type(1){transition-delay:1.1s}.product.in .fix:nth-of-type(2){transition-delay:1.25s}.product.in .fix:nth-of-type(3){transition-delay:1.4s}
.product .meter b{width:0;transition:width 1.2s var(--ease-out) .6s}
.product.in .meter b{width:22.5%}
.product .up{display:inline-block;opacity:0;transform:translateY(6px);transition:opacity .4s 1.5s,transform .4s var(--spring) 1.5s}
.product.in .up{opacity:1;transform:none}
/* typed answer: caret + the "Your business" mark pops when it appears */
.caret::after{content:"";display:inline-block;width:2px;height:1em;background:var(--green);margin-left:2px;vertical-align:-2px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.answer mark{display:inline-block}
.answer mark.pop{animation:pop .5s var(--spring)}
@keyframes pop{0%{transform:scale(.6);background:var(--yellow)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.thinking{display:inline-flex;gap:4px;align-items:center;height:1em}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bounce .9s ease-in-out infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}

/* engine marquee under the hero */
.marquee{overflow:hidden;width:100%;mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);padding:8px 0 24px}
.marquee .track{display:flex;gap:40px;width:max-content;animation:scroll 28s linear infinite;font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.marquee span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sky);margin-right:12px;vertical-align:1px}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* scroll reveal: anything tagged [data-reveal] rises in when it enters the viewport, children stagger */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0)*.08s)}
.js [data-reveal].in{opacity:1;transform:none}
/* section headings: heading first, capsule a beat later */
.js [data-reveal] .capsule{opacity:0;transform:translateY(14px);transition:opacity .6s .25s,transform .6s var(--ease-out) .25s}
.js [data-reveal].in .capsule{opacity:1;transform:none}
/* steps: the top rule grows from the left; step number counts in */
.step{border-top-color:transparent;position:relative}
.step::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) calc(var(--i,0)*.15s)}
.step.in::after{transform:scaleX(1)}
/* timeline: rule grows, month tag gets a pulsing dot */
.timeline li{border-top-color:transparent;position:relative}
.timeline li::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) calc(var(--i,0)*.15s)}
.timeline li.in::after{transform:scaleX(1)}
.timeline .when::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:10px}
.timeline li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%;border:2px solid var(--green);animation:ping 2.4s ease-out infinite;animation-delay:calc(var(--i,0)*.4s)}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
/* chart line draws itself */
.chart polyline{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 2.2s var(--ease-out) .2s}
.chart.in polyline{stroke-dashoffset:0}
.chart text{opacity:0;transition:opacity .5s}
.chart.in text{opacity:1}
.chart.in text:nth-of-type(1){transition-delay:.3s}.chart.in text:nth-of-type(2){transition-delay:.8s}.chart.in text:nth-of-type(3){transition-delay:1.3s}.chart.in text:nth-of-type(4){transition-delay:2s}

/* cards: lift on hover + a spotlight that follows the pointer */
.card,.stat,.plan{position:relative;overflow:hidden;transition:transform .35s var(--ease-out),border-color .35s}
.card:hover,.stat:hover{transform:translateY(-4px);border-color:#cfd6e1}
.card::after,.stat::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(127,240,184,.22),transparent 60%);opacity:0;transition:opacity .3s}
.card:hover::after,.stat:hover::after{opacity:1}
#plans .card::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(127,240,184,.18),transparent 60%)}
#plans .card:hover{border-color:rgba(127,240,184,.6)}
.bento .card::before{display:inline-block;transition:transform .35s var(--spring),color .3s}
.bento .card:hover::before{transform:translateX(4px);color:var(--green)}
/* flow arrows: step forward, one after another */
.flow .card+.card::before{animation:nudge 1.6s ease-in-out infinite}
.flow .card:nth-child(3)::before{animation-delay:.4s}
@keyframes nudge{0%,100%{transform:translateY(-50%) rotate(45deg) translate(0,0)}50%{transform:translateY(-50%) rotate(45deg) translate(3px,-3px)}}
/* draft card: NEED DATA mark shimmers so the eye lands on the gap */
mark.need{background:linear-gradient(90deg,var(--yellow) 0 40%,#ffe58a 50%,var(--yellow) 60% 100%) 0 0/250% 100%;animation:shimmer 2.4s linear infinite}
@keyframes shimmer{to{background-position:-150% 0}}

/* persona tabs: panel slides in when a tab is picked; active tab pill slides colour */
.tabs label{transition:background .3s,color .3s,transform .2s var(--spring)}
.tabs label:active{transform:scale(.96)}
.panels .answer{animation:panel .45s var(--ease-out)}
@keyframes panel{from{opacity:0;transform:translateY(12px)}}

/* pricing: Growth floats and glows */
#plans .plan.growth{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
#plans .plan.growth::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at 50% 0,rgba(127,240,184,.22),transparent 70%);animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{opacity:.35}}
#plans .plan .price{display:inline-block}
/* primary buttons: shine sweep on hover, soft ring on the closing CTA */
.btn{position:relative;overflow:hidden;transition:background .2s,border-color .2s,transform .3s var(--spring)}
.btn:not(.ghost)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:not(.ghost):hover::after{left:120%}
.closing .btn{overflow:visible}.closing .btn::after{display:none}
.closing .btn::before{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--sky);animation:ring 2.8s ease-out infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.3);opacity:0}}
/* faq: content height animates (Chrome 131+), plus sign turns into minus */
details{interpolate-size:allow-keywords}
.faq details::details-content{height:0;overflow:clip;transition:height .4s var(--ease-out),content-visibility .4s allow-discrete}
.faq details[open]::details-content{height:auto}
.faq summary::after{transition:transform .35s var(--ease-out),color .3s}
.faq details[open] summary::after{transform:rotate(180deg);color:var(--green)}
.faq summary:hover{color:var(--green)}

/* count-up numbers get a tabular font so digits do not jiggle */
.proof b,.stat .num,.score{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal],.product .fix,.product .up{opacity:1;transform:none}
  .product .meter b{width:22.5%}
  .chart polyline{stroke-dashoffset:0}.chart text{opacity:1}
  .step::after,.timeline li::after{transform:none}
  .marquee .track{animation:none}
}

/* ===== product window v2: a light app window inside the navy band, three tiles then fixes + live answer ===== */
.product .window.app{background:#fff;color:var(--ink);border-color:rgba(255,255,255,.5)}
.product .window.app .bar{border-color:var(--line);background:var(--panel-2)}
.product .window.app .bar i{background:#d4dae4}
.product .window.app .bar .url{margin-left:10px;font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product .window.app .bar .tag{margin-left:auto}
.product .window.app .body{padding:20px;gap:16px}
.product .window.app .eyebrow{color:var(--muted)}
.product .window.app .muted,.product .window.app .small{color:var(--muted)}
.tiles{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:16px}
.tile{background:var(--panel-2);border-radius:16px;padding:18px;display:grid;gap:12px;align-content:start;min-width:0}
/* score: a ring that draws to 9/40, number counts up */
.tile.score{text-align:center;justify-items:center}
.gauge{position:relative;width:132px;height:132px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:10;stroke-linecap:round}
.gauge .track{stroke:#dfe5ee}
.gauge .arc{stroke:var(--green);stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.6s var(--ease-out) .5s}
.product.in .gauge .arc{stroke-dashoffset:253.2}
.gauge .val{position:absolute;inset:0;display:grid;place-content:center;line-height:1}
.gauge .val b{font:700 44px/1 var(--sans);letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.gauge .val span{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tile .line{font-weight:600;font-size:17px;color:var(--navy);margin-top:-4px}
.tile .delta{font-size:14px;color:var(--muted)}
.chip{display:inline-block;padding:3px 9px;border-radius:999px;font:600 13px/1.4 var(--sans)}
.chip.up{background:var(--sky);color:var(--sky-ink);opacity:0;transform:translateY(6px);transition:opacity .4s 1.9s,transform .4s var(--spring) 1.9s}
.product.in .chip.up{opacity:1;transform:none}
/* rivals: horizontal bars grow in, your row is green */
.bars{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.bars li{display:grid;grid-template-columns:110px 1fr 28px;align-items:center;gap:10px;color:var(--text-2)}
.bars li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars li i{display:block;height:12px;border-radius:6px;background:#b9c3d3;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out);width:calc(var(--w) * 2.6)}
.bars li b{font:600 14px/1 var(--mono);color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.bars li.you{color:var(--navy);font-weight:600}
.bars li.you i{background:var(--green)}
.product.in .bars li i{transform:scaleX(1)}
.product.in .bars li:nth-child(1) i{transition-delay:.7s}.product.in .bars li:nth-child(2) i{transition-delay:.85s}.product.in .bars li:nth-child(3) i{transition-delay:1s}.product.in .bars li:nth-child(4) i{transition-delay:1.15s}
/* engines: pills light up one by one as each engine is "checked" */
.eng{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.eng li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font:500 12px/1 var(--mono);letter-spacing:.02em;color:#8a94a6;transition:color .3s,border-color .3s,background .3s,transform .3s var(--spring)}
.eng li::before{content:"";width:8px;height:8px;border-radius:50%;background:#d4dae4;transition:background .3s}
.eng li.on{color:var(--navy);border-color:#cfd6e1;transform:scale(1.04)}
.eng li.on::before{background:#c0c8d4}
.eng li.on.hit{background:#e6faf0;border-color:#9fe6c4;color:var(--green)}
.eng li.on.hit::before{background:var(--green)}
.eng li.on::after{content:attr(data-n);color:var(--muted);font-weight:500}
.eng li.on.hit::after{color:var(--green)}
.eng li.busy::before{animation:blink .5s steps(1) infinite;background:var(--green)}
/* fixes + live answer */
.product .two{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
.fixes{display:grid;gap:10px}
.fixes .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:2px}
.product .window.app .fix{border:1px solid var(--line);border-radius:14px;padding:14px;gap:12px;background:#fff;font-size:15px;transition:border-color .3s,opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.product .window.app .fix:hover{border-color:#9fe6c4}
.product .window.app .fix .n{color:var(--muted);font-size:13px;padding-top:2px}
.product .window.app .fix>div{display:grid;gap:6px;min-width:0}
.product .window.app .fix strong{color:var(--navy);line-height:1.35}
.product .window.app .fix .why{color:var(--muted);font-size:14px}
.fix .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.gain{display:inline-block;padding:3px 9px;border-radius:999px;background:#e6faf0;color:var(--green);font:600 12px/1.4 var(--sans)}
.gain.warn{background:var(--yellow);color:var(--yellow-ink)}
.product .window.app .btn.sm{min-height:34px;padding:0 12px;font-size:11px}
.product .window.app .btn.sm.ghost{background:#eceff4;border-color:#eceff4;color:var(--ink)}
.answer.live{background:var(--panel-2);border:0;padding:16px;gap:10px;font-size:15px;min-height:290px;align-content:start}
.answer.live .head{flex-wrap:wrap;gap:8px}
.etabs{display:inline-flex;gap:2px;padding:3px;background:#e3e8f0;border-radius:999px}
.etabs button{appearance:none;border:0;background:transparent;border-radius:999px;padding:6px 10px;font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:background .3s,color .3s}
.etabs button.on{background:var(--navy);color:#fff}
.status{font:600 12px/1.4 var(--sans);padding:3px 9px;border-radius:999px;background:#e3e8f0;color:var(--muted);transition:background .3s,color .3s}
.status.hit{background:var(--sky);color:var(--sky-ink)}
.status.miss{background:#fde8e4;color:#8a2f1d}
.answer.live .qline{font:500 13px/1.4 var(--mono);color:var(--navy)}
.answer.live .out{display:grid;gap:8px;min-height:150px}
.answer.live .out ol{margin:0;padding-left:20px;display:grid;gap:6px}
.answer.live .out .miss-note{font-size:13px;color:#8a2f1d;background:#fde8e4;padding:6px 10px;border-radius:8px;justify-self:start}
.answer.live .foot{border-top:1px dashed #cfd6e1;padding-top:10px;font-size:13px}
@media (max-width:860px){
  .tiles,.product .two{grid-template-columns:1fr}
  .bars li{grid-template-columns:96px 1fr 28px}
  .product .window.app .bar .url{display:none}
}
/* score tile: last 4 months as tiny bars, this month in green */
.spark{display:flex;gap:10px;align-items:flex-end;height:64px;margin-top:auto;padding-top:6px;width:100%;justify-content:center}
.spark i{display:grid;justify-items:center;gap:4px;font-style:normal;width:34px}
.spark i::before{content:"";order:1;width:100%;height:calc(var(--h) * .4px);border-radius:4px 4px 2px 2px;background:#c4cdda;transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease-out)}
.spark i.now::before{background:var(--green)}
.spark i span{order:0;font:600 12px/1 var(--mono);color:var(--muted);opacity:0;transition:opacity .4s}
.spark i.now span{color:var(--green)}
.spark i b{order:2;font:500 10px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.product.in .spark i::before{transform:scaleY(1)}
.product.in .spark i span{opacity:1}
.product.in .spark i:nth-child(1)::before{transition-delay:1.2s}.product.in .spark i:nth-child(2)::before{transition-delay:1.35s}.product.in .spark i:nth-child(3)::before{transition-delay:1.5s}.product.in .spark i:nth-child(4)::before{transition-delay:1.65s}
.product.in .spark i span{transition-delay:2.1s}

/* looping animations (marquee, Growth float/glow, CTA ring, timeline pings, flow arrows, NEED DATA shimmer) only run while on screen */
[data-loop].off,[data-loop].off *,[data-loop].off::before,[data-loop].off::after,[data-loop].off *::before,[data-loop].off *::after{animation-play-state:paused!important}
/* Done-for-you strip under the three plans on the home page */
#plans .dfy{padding:28px 32px}
#plans .dfy>.stack:first-child{max-width:640px}
#plans .dfy .price{color:#fff}
#plans .dfy .tag.time{background:#ff8a5c;color:#2b0f00}
/* one left edge: below 1112px the header pill and footer are 100% - 32px wide but the body is 100%, so body content gets 16px more gutter. Above that both are capped at 1080px and already line up. Navy bands are inset themselves, so their inner gutter stays. */
@media (max-width:1111px){
  main .wrap{padding-left:max(40px,calc(16px + env(safe-area-inset-left,0px)));padding-right:max(40px,calc(16px + env(safe-area-inset-right,0px)))}
  main .band>.wrap{padding-left:24px;padding-right:24px}
}
@media (max-width:860px){
  main .wrap,main .band>.wrap{padding-left:max(32px,calc(16px + env(safe-area-inset-left,0px)));padding-right:max(32px,calc(16px + env(safe-area-inset-right,0px)))}
}
/* five nav links no longer fit beside the logo and button on narrow screens: the pill becomes two rows, nav on its own line */
@media (max-width:760px){
  .top .wrap{flex-wrap:wrap;row-gap:0;padding-bottom:8px}
  .top nav{order:3;width:100%;justify-content:space-between;gap:10px;overflow-x:auto;scrollbar-width:none} /* scrolls only on the very narrowest phones */
  .top nav a{min-height:36px;font-size:11px;letter-spacing:.04em}
  .brand img{width:120px;height:auto}
  html{scroll-padding-top:132px}
}
.top nav a,.top .btn{white-space:nowrap}
@media (max-width:1000px){.top .wrap{gap:18px}.top nav{gap:14px}}

/* guide figures: plain CSS and inline SVG inside the long-text panel, site tokens only */
.fig{margin:0;display:grid;gap:10px}
.fig figcaption{font-size:14px;color:var(--muted)}
.fig .box{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:8px;min-width:0;align-content:start}
.fig .lbl{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fig .bad{color:#9a3412}.fig .good{color:var(--green)}
.fig p{margin:0;font-size:15px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.links{display:grid;gap:7px}.links i{display:block;height:8px;border-radius:4px;background:var(--dot);width:var(--w,80%)}
.links i:nth-child(odd){--w:72%}.links i:nth-child(3n){--w:88%}
.bars{display:grid;gap:10px}.bars div{display:grid;grid-template-columns:170px 1fr auto;gap:12px;align-items:center;font-size:15px}
.bars i{display:block;height:18px;border-radius:9px;background:var(--dot);width:var(--w)}.bars .hi i{background:var(--green)}
.bars b{font:600 16px var(--mono)}
.prose .strip{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.strip a{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--panel-2);font-size:14px;line-height:1.3}
.strip a b{font:500 12px var(--mono);color:var(--muted)}.strip a:hover{border-color:var(--green)}
.anat{display:grid;gap:6px}.anat div{padding:10px 12px;border-radius:10px;border:1px dashed var(--line);font-size:14px}
.anat .hd{font-weight:600;border-style:solid}.anat .ans{background:var(--yellow);border-color:transparent;color:var(--yellow-ink)}
.anat .late{opacity:.55}
.nap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.nap .box{font-size:14px;gap:4px}.nap mark{background:#ffe0d6;color:#9a3412;padding:0 4px;border-radius:4px}
.prose .tline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tline li{padding:12px 12px 0;border-top:3px solid var(--line);display:grid;gap:4px;font-size:14px}
.tline li:nth-child(2){border-top-color:#9fd9bf}.tline li:nth-child(3){border-top-color:var(--green)}
.tline .when{font:500 12px/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.venn svg{width:100%;height:auto;display:block}.venn text{font:500 13px var(--sans);fill:var(--ink)}.venn .t{font:500 11px var(--mono);fill:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.box.score{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.box.score b{font:600 44px/1 var(--mono);letter-spacing:-.03em;color:var(--green)}
.botview{display:grid;gap:7px}.botview i{display:block;height:8px;border-radius:4px;background:var(--dot)}.botview i:nth-child(2){width:85%}.botview i:nth-child(4){width:60%}
.botview .empty{height:70px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;color:var(--muted);font-size:13px}
.prose .flow .card{padding:18px;font-size:15px;gap:6px}
@media (max-width:720px){.duo,.nap,.prose .strip,.prose .tline{grid-template-columns:1fr}.bars div{grid-template-columns:1fr auto}.bars div span:first-child{grid-column:1/-1}}

/* ===== contact page: split hero with the form beside it (layout from the saved landing-page design) ===== */
.hero.contact .cols{grid-template-columns:1.1fr .9fr;justify-items:stretch;align-items:center;gap:56px}
.hero.contact .stack{text-align:left;justify-items:start;max-width:none}
.hero.contact .lede{margin:0}
.rot{display:inline-block;color:var(--navy);font-weight:600;border-bottom:2px solid var(--sky)}
.rot.swap{animation:swap .5s var(--ease-out)}
@keyframes swap{from{opacity:0;transform:translateY(.4em)}}
/* the form card: 2px ring that turns slowly, card tilts toward the pointer (site.js) */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.signup{position:relative;isolation:isolate;padding:2px;border-radius:24px;transition:transform .2s ease-out}
.signup::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--a),var(--sky),transparent 30%,var(--blue) 55%,transparent 80%,var(--sky));animation:turn 6s linear infinite}
@keyframes turn{to{--a:360deg}}
.signup form.card{border:0;border-radius:22px}
.signup h2{font-size:28px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:30}
@media (max-width:860px){.hero.contact .cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.signup::before{animation:none}}