/* Layout: one long ledger. Chore by hand on the left, the real draft on the right; each draft gets approved as you scroll. Single dark look to match robomarketer.com. */
:root{
  --ink:#121212; --ink-2:#161616; --shell:#1a1a1a; --line:#262626; --line-2:#343434;
  --fg:#f5f5f5; --body:#cfcfcf; --muted:#a5a5a5; --faint:#8a8a8a;
  --teal:#14b8a6; --teal-hi:#2dd4bf; --teal-ink:#04201d;
  --display:"Inter","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--display);font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
::selection{background:var(--teal);color:var(--teal-ink)}
a{color:var(--teal-hi);text-underline-offset:3px}
a:hover{color:#5eead4}
:focus-visible{outline:2px solid var(--teal-hi);outline-offset:3px;border-radius:8px}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}

/* Nav: floating pill */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-top:16px}
.nav-in{display:flex;align-items:center;gap:28px;height:56px;padding:0 8px 0 22px;border-radius:999px;background:rgba(22,22,22,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 12px 32px -16px rgba(0,0,0,.6)}
.brand{color:var(--fg);text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.02em}
.links{display:flex;gap:24px;flex:1}
.links a{color:var(--muted);text-decoration:none;font-size:14.5px;transition:color .2s ease}
.links a:hover,.links a[aria-current]{color:var(--fg)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-cta .signin{color:var(--body);text-decoration:none;font-size:14.5px;white-space:nowrap}

/* Buttons: pill with a nested arrow */
.btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 6px 0 22px;border-radius:999px;background:var(--teal);color:var(--teal-ink);font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;transition:transform .16s var(--ease-out),background-color .2s ease}
.btn:hover{background:var(--teal-hi);color:var(--teal-ink)}
.btn:active{transform:scale(.97)}
.btn .ic{width:36px;height:36px;border-radius:999px;background:rgba(4,32,29,.14);display:grid;place-items:center;transition:transform .3s var(--ease-out)}
.btn.sm{height:40px;font-size:14.5px;padding-left:16px}
.btn.sm .ic{width:30px;height:30px}
@media (hover:hover) and (pointer:fine){.btn:hover .ic{transform:translate(2px,-1px) scale(1.05)}}
.tlink{font-weight:500;font-size:16px}

/* Hero */
.hero{position:relative;padding-top:96px}
.hero::before{content:"";position:absolute;z-index:-1;inset:-120px -10% auto auto;width:720px;height:620px;background:radial-gradient(closest-side,rgba(20,184,166,.16),rgba(20,184,166,0));pointer-events:none}
.crumb{font-size:14px;color:var(--faint);margin-bottom:28px}
.crumb a{color:var(--muted);text-decoration:none}
.h1{max-width:1000px;font-size:clamp(40px,6vw,76px);line-height:1.02;font-weight:700;letter-spacing:-.04em}
.h1 .w{display:inline-block}
.lead{margin-top:28px;max-width:560px;font-size:19px;line-height:1.55;color:var(--body)}
.actions{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:28px}

/* Ledger */
.ledger-sec{padding-top:112px;padding-bottom:40px}
.lhead,.lrow{display:grid;grid-template-columns:minmax(0,5fr) 1px minmax(0,7fr);column-gap:64px}
.lhead{padding-bottom:18px;border-bottom:1px solid var(--line)}
.lhead p{font-size:14.5px;font-weight:600;color:var(--faint)}
.lhead p.us{color:var(--teal-hi)}
.ledger{position:relative}
.rail{position:absolute;top:0;bottom:0;width:1px;left:calc((100% - 129px) * 5 / 12 + 64px);background:var(--line)}
.rail i{position:absolute;inset:0;background:var(--teal);transform-origin:top;transform:scaleY(1)}
.rail-slot{grid-column:2}
.lrow{padding-block:56px;border-top:1px solid #1f1f1f}
.lrow:first-of-type{border-top:0}
.chore h3{display:inline;position:relative;font-size:28px;font-weight:600;letter-spacing:-.02em}
.chore h3::after{content:"";position:absolute;left:-2px;right:-4px;top:55%;height:1.5px;background:#6b6b6b;transform-origin:left;transform:scaleX(var(--strike,0))}
.chore p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--muted);max-width:420px}
.chore .hrs{margin-top:16px;font-size:13.5px;color:var(--faint)}

/* Double-bezel frame for real screenshots */
.frame{position:relative;padding:12px;border-radius:28px;background:linear-gradient(180deg,rgba(207,207,207,.06),rgba(207,207,207,.015)),#151515;box-shadow:inset 0 0 0 1px rgba(207,207,207,.09),inset 1px 1px 0 rgba(255,255,255,.04),0 40px 80px -40px rgba(0,0,0,.85);transition:transform .5s var(--ease-drawer)}
.frame img,.frame video{border-radius:18px;box-shadow:0 0 0 1px rgba(207,207,207,.07)}
.frame + .demo-note,.frame + p.demo-note{display:none}
@media (hover:hover) and (pointer:fine){.frame:hover{transform:translateY(-3px)}}
.frame > .ok{position:absolute;top:-12px;right:18px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 8px;border-radius:999px;background:var(--teal);color:var(--teal-ink);font-size:13px;font-weight:600;box-shadow:0 8px 20px -8px rgba(20,184,166,.6)}
.cap{margin-top:22px;font-size:15px;line-height:1.55;color:var(--body);max-width:560px}
.demo-note{display:none}

/* Approval */
.band{background:var(--ink-2);border-block:1px solid var(--line)}
.sec{padding-block:160px}
.h2{font-size:clamp(32px,4vw,52px);line-height:1.06;font-weight:700;letter-spacing:-.035em;max-width:880px}
.scrub{margin-top:28px;max-width:760px;font-size:clamp(20px,2.2vw,26px);line-height:1.45;font-weight:500;letter-spacing:-.01em;color:var(--fg)}
.scrub .w{color:inherit}
.queue{margin-top:72px;max-width:920px}
.choices{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.choices dt{font-size:30px;font-weight:700;letter-spacing:-.02em}
.choices dt.a{color:var(--teal-hi)} .choices dt.d{color:var(--faint)}
.choices dd{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--muted)}

/* Roles */
.sub{margin-top:22px;max-width:620px;font-size:18px;line-height:1.6;color:var(--body)}
.roles{margin:64px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px}
.role{padding:24px 0;border-top:1px solid var(--line)}
.role dt{font-size:23px;font-weight:600;letter-spacing:-.015em}
.role dd{margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.connect{margin-top:48px;max-width:780px;font-size:17px;line-height:1.7;color:var(--body)}
.connect b{color:var(--fg);font-weight:500}

/* Video + new layouts */
video{display:block;width:100%;height:auto;border-radius:18px;background:#0f0f0f}
.herovid{margin-top:72px}
.apgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}
.apgrid .queue{margin:0;max-width:520px}
.aptext .choices{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:48px}
.aptext .choices dt{font-size:26px}
.teamshot{margin-top:56px}
.chatgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:center}
/* Report image */
.wide{margin-top:72px}

/* Compare */
.tbl{margin-top:56px;overflow-x:auto}
table{width:100%;min-width:720px;border-collapse:collapse;font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums}
thead th{text-align:left;padding:0 24px 16px 0;border-bottom:1px solid var(--line-2);font-weight:600}
thead th.us{color:var(--teal-hi)}
tbody th{text-align:left;font-weight:500;color:var(--muted);padding:20px 24px 0 0;width:28%}
tbody td{padding:20px 24px 0 0;color:var(--body)}
tbody td.us{color:var(--fg)}

/* Pricing */
.plans{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.plan{padding-right:56px}
.plan+.plan{padding-left:56px;padding-right:0;border-left:1px solid var(--line)}
.plan .n{font-size:18px;font-weight:600}
.plan .n span{font-size:14px;font-weight:500;color:var(--teal-hi);padding-left:10px}
.plan .p{margin-top:14px;font-size:64px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.plan .p small{font-size:18px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan .d{margin-top:18px;font-size:16px;line-height:1.6;color:var(--muted);max-width:380px}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px}
details{border-top:1px solid var(--line);padding-block:24px}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font-size:19px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary svg{flex:none;margin-top:3px;transition:transform .25s var(--ease-out)}
details[open] summary svg{transform:rotate(180deg)}
details p{margin-top:12px;font-size:16px;line-height:1.65;color:var(--muted);max-width:620px}

/* Close + footer */
.close .h2{font-size:clamp(36px,5vw,64px);max-width:900px}
footer{border-top:1px solid var(--line)}
.fcols{padding-block:64px 40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.fcols h4,.fcols .fh{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--fg)}
.fcols a{display:block;color:var(--muted);text-decoration:none;font-size:14px;line-height:2}
.fcols a:hover{color:var(--fg)}
.fbar{padding-block:20px 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:24px;font-size:13px;color:var(--faint)}
.fbar a{color:var(--faint);text-decoration:none}
.fbar .r{margin-left:auto}

@media (max-width:480px){.nav-cta .signin{display:none}}
@media (max-width:860px){
  .links{display:none}
  .nav-in{gap:12px;padding-left:18px}
  .wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  .hero{padding-top:64px}
  .lhead{display:none}
  .lrow{grid-template-columns:minmax(0,1fr);row-gap:24px;padding-block:44px}
  .rail-slot,.rail{display:none}
  .sec{padding-block:88px}
  .choices,.roles,.plans,.faq,.fcols,.apgrid,.chatgrid{grid-template-columns:minmax(0,1fr)}
  .apgrid,.chatgrid{gap:48px}
  .herovid{margin-top:48px}
  .choices{gap:32px}
  .plan,.plan+.plan{padding:0;border-left:0}
  .plan+.plan{margin-top:36px;padding-top:36px;border-top:1px solid var(--line)}
  .faq{gap:28px}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Shared components for every page ---------- */
/* Screen switcher: tabs over a stack of real screens */
.switch{margin-top:56px}
.switch .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.switch .tabs button{font:inherit;font-size:15px;font-weight:500;color:var(--muted);background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--line);height:38px;padding:0 16px;border-radius:999px;cursor:pointer;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .16s var(--ease-out)}
.switch .tabs button:active{transform:scale(.97)}
.switch .tabs button[aria-selected="true"]{color:var(--teal-ink);background:var(--teal);box-shadow:none}
@media (hover:hover) and (pointer:fine){.switch .tabs button:not([aria-selected="true"]):hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}}
.switch .panes{display:grid}
.switch .pane{grid-area:1/1;opacity:0;transform:scale(.985);transition:opacity .45s var(--ease-out),transform .6s var(--ease-out);pointer-events:none}
.switch .pane.on{opacity:1;transform:none;pointer-events:auto}
.switch .pane figcaption{margin-top:16px;font-size:15px;line-height:1.55;color:var(--body);max-width:640px}

/* Scroll story: steps on the left, a sticky screen on the right that follows the active step */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;margin-top:64px}
.story .steps{display:flex;flex-direction:column}
.story .step{padding-block:12vh;opacity:.78;transition:opacity .4s var(--ease-out)}
.story .step:first-child{padding-top:0}
.story .step.on{opacity:1}
.story .step h3{font-size:26px;font-weight:600;letter-spacing:-.02em}
.story .step p{margin-top:12px;font-size:17px;line-height:1.6;color:var(--muted);max-width:440px}
.story .step .n{display:block;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--teal-hi)}
.story .stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 110px);align-self:start}
.story .stage .panes{display:grid}
.story .stage .pane{grid-area:1/1;opacity:0;transform:translateY(12px) scale(.985);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
.story .stage .pane.on{opacity:1;transform:none}

/* Flow: a horizontal pipeline of real steps */
.flow{margin-top:56px;display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:0;position:relative}
.flow::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--line)}
.flow .line{position:absolute;left:0;right:0;top:15px;height:1px;background:var(--teal);transform-origin:left;transform:scaleX(1)}
.flow .st{position:relative;padding-right:24px}
.flow .st .dot{width:31px;height:31px;border-radius:999px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--muted);position:relative}
.flow .st.on .dot{background:var(--teal);color:var(--teal-ink);box-shadow:none}
.flow .st h3{margin-top:18px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.flow .st p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted)}

/* Split: media + text, used once per page at most */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:center}
.split.rev{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.split .txt .sub{margin-top:18px}
.checks{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.checks li{display:flex;gap:12px;font-size:17px;line-height:1.5;color:var(--body)}
.checks li svg{flex:none;margin-top:4px;color:var(--teal-hi)}

/* Callout line for definitions (answer-first, AEO) */
.answer{margin-top:40px;max-width:820px;font-size:clamp(20px,2vw,24px);line-height:1.5;color:var(--fg);font-weight:500;letter-spacing:-.01em}
.answer b{color:var(--teal-hi);font-weight:600}

/* Placeholder slot for a real customer quote (never invented) */
.quote-slot{margin-top:56px;padding:28px 32px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line-2);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.015) 14px 28px);color:var(--faint);font-size:15px;line-height:1.6}

@media (max-width:860px){
  .story{grid-template-columns:minmax(0,1fr);gap:32px}
  .story .stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);order:-1;z-index:2;padding-block:8px 16px;background:linear-gradient(var(--ink) 85%,rgba(18,18,18,0))}
  .band .story .stage{background:linear-gradient(var(--ink-2) 85%,rgba(22,22,22,0))}
  .story .stage .pane img,.story .stage .pane video{max-height:42vh;width:auto;max-width:100%;margin-inline:auto}
  .story .step{padding-block:22vh 4vh}
  .flow{grid-template-columns:minmax(0,1fr);gap:28px}
  .flow::before,.flow .line{display:none}
  .split,.split.rev{grid-template-columns:minmax(0,1fr);gap:40px}
}

/* Links inside running text stay underlined (not colour alone) */
p a,li a,dd a,td a,.crumb a,.fbar a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fcols a{text-decoration:none}
main li a[href^="#"]{display:inline-block;padding-block:3px}