:root{
  color-scheme:light;
  --ink:#1B133C;
  --ink-rgb:27,19,60;
  --paper:#FFFFFF;
  --surface:#fff;
  --on-ink:#FEFEFE;
  --ink-hover:#2c2350;
  --surface-hover:#efeef3;
  --yes:#15803d;
  --warn:#b45309;
  --hairline:rgba(var(--ink-rgb),.1);
  --veil:rgba(var(--ink-rgb),.04);
  --r-ui:12px;
  --scrim:rgba(255,255,255,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ── Hero: copy, CTA pair, then the product devices mock ─────────────────── */
.hero{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:64px;overflow:hidden}
/* Background clip (self-hosted, poster only on phones / reduced motion /
   Save-Data — landing.js decides) fills the hero behind copy and the product
   card; the card itself stays solid white. Clip is absolute, so no layout shift. */
.hero-stage{position:relative;z-index:1;width:min(1100px,calc(100% - 32px));margin-top:40px;display:flex;justify-content:center}
/* Clip fills the whole hero; a white wash keeps copy legible and fades to the
   page at the bottom so the next section starts on plain white. */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.7) 38%,rgba(255,255,255,.55) 62%,rgba(255,255,255,.8) 85%,#fff 100%)}

/* Nav pill */
.nav-outer{position:relative;z-index:10;padding:16px 16px 0;width:100%;display:flex;justify-content:center}
.nav{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--r-ui);padding:10px 12px;box-shadow:0 0 0 1px var(--hairline);max-width:100%}
.nav-logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-logo img{object-fit:contain}
.nav-logo span{font-weight:600;font-size:15px;letter-spacing:-.01em}
.lang-switch{display:flex;gap:2px}
.nav-links{display:none;gap:24px}
.nav-links a{font-size:14px;font-weight:500;color:rgba(var(--ink-rgb),.8);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.lang-switch a{text-decoration:none;font-size:12px;font-weight:500;padding:4px 6px;border-radius:8px;background:transparent;border:none;cursor:pointer;color:rgba(var(--ink-rgb),.6)}
.lang-switch a.active{color:var(--ink);background:rgba(var(--ink-rgb),.08)}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-signin{font-size:14px;font-weight:500;color:rgba(var(--ink-rgb),.8);white-space:nowrap}
.nav-signin:hover{color:var(--ink)}
.nav-trial{font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;background:var(--ink);color:var(--on-ink);white-space:nowrap}
.nav-trial:hover{background:var(--ink-hover)}
@media (max-width:439px){ .nav{gap:8px;width:100%} .nav-logo span{display:none} .nav-actions{gap:8px} }
@media (max-width:339px){ .nav-trial{display:none} }

.hero-content{position:relative;z-index:10;margin-top:56px;padding:0 20px;max-width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}

.hero h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(34px,10.5vw,44px);line-height:.98;letter-spacing:-.02em;max-width:min(56rem,100%);overflow-wrap:break-word;text-wrap:balance}
.hero-eyebrow{margin-bottom:18px;text-wrap:balance;font-size:13px;font-weight:500;letter-spacing:.02em;color:rgba(var(--ink-rgb),.65)}
.hero .sub{margin-top:20px;max-width:40rem;font-size:15px;line-height:1.6;color:rgba(var(--ink-rgb),.72)}

.cta-row{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px}
.cta{display:inline-block;border-radius:var(--r-ui);background:var(--ink);padding:12px 22px;font-size:15px;font-weight:600;
  color:var(--on-ink);transition:background .2s}
.cta:hover{background:var(--ink-hover)}
.cta-link{font-size:15px;font-weight:500;color:rgba(var(--ink-rgb),.8);text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:5px}
.cta-link:hover{color:var(--ink);text-decoration-color:currentColor}
.hero-proof{margin-top:20px;max-width:36rem;font-size:14px;font-weight:500;line-height:1.5;text-wrap:balance}
.hero-proof::before{content:'';display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--yes);vertical-align:1px}
.hero-def{margin-top:10px;max-width:40rem;font-size:14px;line-height:1.55;color:rgba(var(--ink-rgb),.65);text-wrap:pretty}
.hero-trust{margin-top:6px;max-width:40rem;font-size:13px;line-height:1.5;color:rgba(var(--ink-rgb),.6)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── Hero devices: desktop workspace, phone and notification stack. A static
   mock (aria-hidden), sized in em so the whole composition scales with one
   font-size; from 640px down the phone moves in front and the desktop is
   cropped behind it. Entrance motion only without reduced motion. */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
.devices{position:relative;width:100%;max-width:1080px;margin:0 auto;padding:4em 0 12em;font-size:clamp(9px,1.2vw,13px);line-height:1.4;text-align:left}
.devices img{display:block}
.dk{width:76%;margin-left:12%;border-radius:1.1em;background:#f6f5f9;box-shadow:0 0 0 1px var(--hairline),0 3em 6em -2.5em rgba(var(--ink-rgb),.32);overflow:hidden}
.dk-bar{position:relative;display:flex;align-items:center;gap:.55em;height:2.8em;padding:0 1.1em}
.dk-bar i{width:.85em;height:.85em;border-radius:50%;background:#ff5f57}
.dk-bar i:nth-child(2){background:#febc2e}
.dk-bar i:nth-child(3){background:#28c840}
.dk-bar span{position:absolute;left:0;right:0;text-align:center;font-size:.9em;font-weight:500;color:rgba(var(--ink-rgb),.6)}
.dk-body{display:grid;grid-template-columns:4.4em minmax(0,1fr);padding:0 1.1em 1.1em 0}
.dk-rail{display:flex;flex-direction:column;align-items:center;gap:1.15em;padding-top:.2em}
.dk-rail img{width:1.45em;height:1.45em}
.dk-rail .dk-logo{width:2.6em;height:2.6em;padding:.55em .45em;border-radius:.75em;background:#fff;box-shadow:0 0 0 1px var(--hairline);object-fit:contain}
.dk-main{display:flex;flex-direction:column;gap:.8em;min-width:0}
.dk-search{display:flex;align-items:center;gap:.65em;height:2.9em;padding:0 1em;border-radius:.8em;background:#fff;box-shadow:0 0 0 1px var(--hairline);color:rgba(var(--ink-rgb),.6)}
.dk-search svg{width:1.15em;height:1.15em;flex-shrink:0}
.dk-inbox{background:#fff;border-radius:.9em;box-shadow:0 0 0 1px var(--hairline);overflow:hidden}
.dk-head{display:flex;align-items:baseline;gap:.8em;padding:.95em 1.25em .7em}
.dk-head b{font-weight:600;font-size:1.05em}
.dk-head span{font-size:.85em;color:rgba(var(--ink-rgb),.6)}
.dk ul{list-style:none}
.dk li{display:flex;align-items:center;gap:.9em;padding:.72em 1.25em;border-top:1px solid var(--hairline)}
.dk li.is-top{background:rgba(var(--ink-rgb),.035)}
.av{flex-shrink:0;width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;font-size:.85em;font-weight:600}
.av.a1{color:#5b21b6;background:#efe9fb}.av.a2{color:#1d4ed8;background:#e8effd}.av.a3{color:#9a3412;background:#fdeee3}
.av.a4{color:#15803d;background:#e7f5ec}.av.a5{color:#9d174d;background:#fce8f1}.av.a6{color:var(--on-ink);background:var(--ink)}
.dk-txt{flex:1;min-width:0}
.dk-txt p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-txt b{font-weight:600}
.dk-txt time{margin-left:.6em;font-size:.85em;color:rgba(var(--ink-rgb),.6)}
.dk-txt .sum{font-size:.92em;color:rgba(var(--ink-rgb),.7)}
.dk .src{width:1.3em;height:1.3em;flex-shrink:0}
/* Triage chips: the dashboard's real categories. Tinted fill + dark text, AA. */
.chip{flex-shrink:0;display:inline-block;font-size:.8em;font-weight:600;line-height:1.5;padding:.15em .75em;border-radius:999px;white-space:nowrap}
.chip.reply{color:#1d4ed8;background:#e8effd}
.chip.urgent{color:#b91c1c;background:#fdecec}
.chip.task{color:#5b21b6;background:#efe9fb}
.chip.meeting{color:#166534;background:#e7f5ec}
.chip.deadline{color:#9a3412;background:#fdeee3}

.ph{position:absolute;left:6%;bottom:0;width:17.5em}
.ph-frame{height:33em;padding:.55em;border-radius:2.8em;background:#fff;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.14),0 2.5em 5em -1.5em rgba(var(--ink-rgb),.4)}
.ph-screen{position:relative;height:100%;display:flex;flex-direction:column;padding:.9em 1.15em 1em;border-radius:2.3em;overflow:hidden;
  background:radial-gradient(circle at 22% 14%,rgba(244,170,140,.42),transparent 52%),radial-gradient(circle at 88% 26%,rgba(150,180,225,.38),transparent 50%),#fff}
.ph-status{display:flex;align-items:center;justify-content:space-between;font-size:.8em;font-weight:600}
.ph-status i{width:6.5em;height:1.9em;border-radius:999px;background:var(--ink)}
.ph-status s{width:2em;height:.9em;border-radius:.25em;box-shadow:inset 0 0 0 1.5px var(--ink);text-decoration:none}
.ph-hi{margin-top:auto;font-size:1.2em;font-weight:600;letter-spacing:-.01em}
.ph-sub{margin-top:.2em;font-size:.95em;color:rgba(var(--ink-rgb),.65)}
.ph-items{list-style:none;margin-top:.9em;display:flex;flex-direction:column;gap:.45em}
.ph-items li{padding:.55em .8em;border-radius:.8em;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px var(--hairline);font-size:.85em}
.ph-ask{margin-top:.9em;display:flex;align-items:center;justify-content:space-between;height:2.7em;padding:0 .35em 0 1em;border-radius:999px;background:#fff;
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.2),0 .6em 1.4em -.8em rgba(var(--ink-rgb),.35);font-size:.9em;color:rgba(var(--ink-rgb),.65)}
.ph-ask i{width:2em;height:2em;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-ink)}
.ph-ask svg,.ph-tabs svg{width:1.1em;height:1.1em}
.ph-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:.75em .4em;border-radius:1.3em;background:rgba(var(--ink-rgb),.05);color:rgba(var(--ink-rgb),.6)}
.ph-tabs svg{width:1.35em;height:1.35em}
.ph-tabs .on{color:var(--ink)}
.ph-cap{align-self:center;margin-top:.9em;white-space:nowrap;font-size:.78em;font-weight:500;padding:.25em .85em;border-radius:999px;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px var(--hairline);color:rgba(var(--ink-rgb),.72)}

.nts{position:absolute;top:1em;right:1.5%;width:27em;display:flex;flex-direction:column;gap:.7em}
.nt{display:flex;gap:.85em;padding:.95em 1.1em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px var(--hairline),0 1.2em 2.6em -1.2em rgba(var(--ink-rgb),.3)}
.nt img{width:1.35em;height:1.35em;flex-shrink:0;margin-top:.1em}
.nt div{flex:1;min-width:0}
.nt-k{display:flex;gap:.6em;font-size:.85em;color:rgba(var(--ink-rgb),.6)}
.nt-k b{font-weight:600;color:var(--ink)}
.nt-k time{margin-left:auto}
.nt p + p{margin-top:.15em;color:rgba(var(--ink-rgb),.85)}
.nt p b{font-weight:600;color:var(--ink)}
.nt.is-hot{padding:1.15em 1.2em;border:1.5px solid transparent;font-size:1.06em;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--ink),#7c3aed 55%,#ea580c) border-box;
  box-shadow:0 1.6em 3.2em -1.2em rgba(var(--ink-rgb),.42)}
@media (prefers-reduced-motion:no-preference){
  .dk{animation:dev-rise .9s var(--ease) .1s both}
  .ph{animation:dev-rise .9s var(--ease) .35s both}
  .nt{animation:dev-slide .7s var(--ease) both}
  .nt:nth-child(1){animation-delay:.7s}
  .nt:nth-child(2){animation-delay:.85s}
  .nt:nth-child(3){animation-delay:1s}
}
@keyframes dev-rise{from{opacity:0;transform:translateY(28px)}}
@keyframes dev-slide{from{opacity:0;transform:translateX(28px)}}
/* Phones: phone in front at a readable size, desktop cropped behind, only
   the highlighted notification. The stage goes edge to edge and clips. */
@media (max-width:640px){
  .hero-stage{width:100%}
  .devices{height:46em;padding:0;font-size:11px;overflow:hidden}
  .dk{position:absolute;top:3.5em;left:7.5em;width:58em;margin:0}
  .ph{left:max(16px,calc(50% - 15em));bottom:1.5em}
  .nts{top:.6em;right:12px;width:min(22em,calc(100% - 7.5em))}
  .nt:not(.is-hot){display:none}
}

/* Integrations: official marks (icons/brands, nominative use) as app tiles
   with the name underneath. */
.integrations{position:relative;z-index:1;margin-top:8px;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:16px}
.integrations p{font-size:13px;color:rgba(var(--ink-rgb),.6)}
.integrations ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 12px;max-width:44rem}
.integrations li{width:88px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:500;line-height:1.3;text-align:center;color:rgba(var(--ink-rgb),.72)}
.integrations img{width:52px;height:52px;padding:13px;flex-shrink:0;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--hairline),0 8px 18px -10px rgba(var(--ink-rgb),.35)}

@media (min-width:640px){
  .nav-links{display:flex}
  .nav{gap:24px;padding:12px 16px}
  .hero h1{font-size:56px}
  .hero .sub{font-size:16px}
}
@media (min-width:768px){
  .nav-outer{padding-top:24px}
  .nav{padding:12px 20px}
  .hero-content{margin-top:80px}
  .hero h1{font-size:72px}
  .hero .sub{font-size:17px}
}
/* The full link row only fits from ~1000px with the actions beside it. */
@media (min-width:640px) and (max-width:999px){ .nav-links a.nav-opt{display:none} }

/* ── Every inbox: compact three-column strip ────────────────────────────── */
.section.strip{padding:72px 0}
.strip-grid{display:grid;grid-template-columns:1fr;gap:0 32px;max-width:60rem;margin:0 auto}
.strip-item{padding:24px 4px;border-top:1px solid var(--hairline);text-align:left}
.strip-item img{width:28px;height:28px;margin-bottom:12px}
.strip-item h3{font-size:17px;font-weight:600;margin-bottom:6px}
.strip-item p{font-size:15px;line-height:1.6;color:rgba(var(--ink-rgb),.7)}
@media (min-width:768px){ .strip-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ── Morning briefing: dark ink band with a faint grid; text tokens are solid
   so contrast is checkable (test-landing-devices.js). ───────────────────── */
.band{--band-muted:#c9c4da;--band-line:rgba(254,254,254,.14);padding:96px 0;color:var(--on-ink);background-color:var(--ink);
  background-image:linear-gradient(rgba(254,254,254,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(254,254,254,.045) 1px,transparent 1px);background-size:22px 22px}
.band-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.band-kicker{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--band-muted);margin-bottom:14px}
.band h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(32px,9vw,40px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.band-copy > p{margin-top:16px;max-width:32rem;font-size:16px;line-height:1.6;color:var(--band-muted)}
.band-list{list-style:none;margin-top:28px;display:flex;flex-direction:column;max-width:32rem}
.band-list li{display:grid;gap:2px;padding:14px 0;border-top:1px solid var(--band-line)}
.band-list b{font-size:15px;font-weight:600}
.band-list span{font-size:14px;line-height:1.55;color:var(--band-muted)}
.band a:focus-visible{outline-color:var(--on-ink)}
.bph{width:min(400px,100%);margin:0 auto;padding:16px 16px 18px;border-radius:36px;background:rgba(254,254,254,.05);box-shadow:inset 0 0 0 1px var(--band-line),0 40px 80px -40px #000}
.bph-top{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;font-size:14px}
.bph-top img{width:22px;height:22px}
.bph-top span{margin-left:auto;font-size:12px;color:var(--band-muted)}
.bmsg{padding:16px 18px;border-radius:18px 18px 18px 6px;background:#fff;color:var(--ink);font-size:13px;line-height:1.5;text-align:left}
.bmsg-hi{font-weight:600;font-size:14px}
.bmsg-k{margin-top:12px;margin-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(var(--ink-rgb),.6)}
.bmsg ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.bmsg li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.bmsg .chip{font-size:11px}
.bmsg .prio{gap:8px}
.bmsg .prio li{flex-direction:column;align-items:flex-start;gap:2px}
.bph-ask{margin-top:14px;display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 6px 0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--band-line);font-size:14px;color:var(--band-muted)}
.bph-ask i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--on-ink);color:var(--ink)}
@media (min-width:768px){ .band{padding:120px 0} .band h2{font-size:56px} }
@media (min-width:900px){ .band-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px} }

/* ── Replies: incoming mail -> draft saved to Drafts ────────────────────── */
.rp-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:60rem;margin:0 auto;align-items:center}
.rp-arrow{justify-self:center;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-ink);transform:rotate(90deg)}
.rp-grid .pcard{padding:20px;gap:12px;font-size:14px}
.rp-grid .pcard-head img{width:16px;height:16px;align-self:center}
.rp-out{box-shadow:0 0 0 1.5px var(--ink),0 24px 48px -28px rgba(var(--ink-rgb),.45)}
.rp-note{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--hairline);font-size:12px;color:rgba(var(--ink-rgb),.65)}
.rp-note::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--yes);flex-shrink:0}
.rp-points{list-style:none;display:grid;grid-template-columns:1fr;gap:0 32px;max-width:60rem;margin:48px auto 0}
.rp-points li{display:grid;gap:4px;padding:20px 4px;border-top:1px solid var(--hairline);text-align:left}
.rp-points b{font-size:15px;font-weight:600}
.rp-points span{font-size:14px;line-height:1.6;color:rgba(var(--ink-rgb),.7)}
@media (min-width:768px){
  .rp-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px}
  .rp-arrow{transform:none}
  .rp-points{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── Sections below (light theme, centered to match the hero) ───────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-head{text-align:center;margin-bottom:56px;display:flex;flex-direction:column;align-items:center}
.section-head h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(30px,9vw,40px);line-height:1.05;letter-spacing:-.02em;margin-bottom:16px}
.section-head p{font-size:16px;color:rgba(var(--ink-rgb),.7);max-width:34rem}

.num-list{display:flex;flex-direction:column;max-width:56rem;margin:0 auto}
.num-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:22px 4px;border-top:1px solid var(--hairline)}
.num-row:last-child{border-bottom:1px solid var(--hairline)}
.num-row .label{font-size:17px}
.num-row .idx{font-size:14px;color:rgba(var(--ink-rgb),.45);font-variant-numeric:tabular-nums}

/* Typographic rows (features, steps): same rhythm as .num-list, no boxes. */
.text-list{display:flex;flex-direction:column;max-width:56rem;margin:0 auto}
.text-row{display:grid;grid-template-columns:1fr;gap:6px;padding:24px 4px;border-top:1px solid var(--hairline);text-align:left}
.text-row:last-child{border-bottom:1px solid var(--hairline)}
.text-row h3{font-size:17px;font-weight:600}
.text-row p{font-size:15px;color:rgba(var(--ink-rgb),.7);line-height:1.6}
.text-row .n{font-family:'Instrument Serif',Georgia,serif;font-size:28px;line-height:1;color:rgba(var(--ink-rgb),.35)}

footer{border-top:1px solid var(--hairline);padding:32px 0;text-align:center;font-size:13px;color:rgba(var(--ink-rgb),.5)}
footer > a{transition:color .2s}
footer > a:hover{color:var(--ink)}
footer .legal{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;padding:0 16px}
footer .legal a{color:rgba(var(--ink-rgb),.5)}
footer .legal a:hover{color:var(--ink)}
footer .footer-pages{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;padding:0 16px;margin-bottom:16px}
footer .footer-pages span{font-weight:600;color:rgba(var(--ink-rgb),.75)}
footer .footer-pages a{color:rgba(var(--ink-rgb),.7)}
footer .footer-pages a:hover{color:var(--ink)}

/* Chat transcript mock */
.demo-chat{max-width:34rem;margin:48px auto 0;border-radius:var(--r-ui);padding:20px;text-align:left;background:var(--veil)}
.msg{display:flex;margin-bottom:12px}
.msg:last-child{margin-bottom:0}
.msg .bubble{font-size:14px;line-height:1.5;padding:10px 14px;border-radius:12px;max-width:82%}
.msg.me{justify-content:flex-end}
.msg.me .bubble{background:var(--ink);color:var(--on-ink);border-bottom-right-radius:4px}
.msg.bot .bubble{background:var(--surface);border-bottom-left-radius:4px}

/* ── Showcase: real-screen video ────────────────────────────────────────── */
.showcase-frame{position:relative;max-width:1040px;margin:0 auto;border-radius:16px;overflow:hidden;background:var(--veil)}
.showcase-frame video{width:100%;display:block}
.showcase-fullscreen-btn{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:9px;border:none;
  background:var(--surface);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .2s,background .15s}
.showcase-frame:hover .showcase-fullscreen-btn,.showcase-fullscreen-btn:focus-visible{opacity:1}
.showcase-fullscreen-btn:hover{background:var(--surface-hover)}
.showcase-frame:fullscreen{max-width:none;border-radius:0;display:flex;align-items:center;background:#000}
.showcase-frame:fullscreen video{width:auto;height:100%;max-width:100%;margin:0 auto}
@media (hover:none){ .showcase-fullscreen-btn{opacity:1} }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Pause/play for the looping videos (WCAG 2.2.2); shown by landing.js once a video can play. */
.video-toggle{position:absolute;z-index:2;width:36px;height:36px;border-radius:9px;border:none;background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 1px var(--hairline)}
.video-toggle[hidden]{display:none}
.video-toggle:hover{background:var(--surface-hover)}
.video-toggle .i-play,.video-toggle[data-state="paused"] .i-pause{display:none}
.video-toggle[data-state="paused"] .i-play{display:block}
.hero-toggle{right:16px;bottom:16px;z-index:11}
.showcase-toggle{left:14px;bottom:14px}

/* ── Personas ───────────────────────────────────────────────────────────── */
.persona-grid{display:grid;grid-template-columns:1fr;gap:0 40px;max-width:64rem;margin:0 auto}
.persona{padding:24px 4px;border-top:1px solid var(--hairline);text-align:left}
.persona .role{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:10px}
.persona p{font-size:15px;line-height:1.65;color:rgba(var(--ink-rgb),.8)}
@media (min-width:768px){ .persona-grid{grid-template-columns:repeat(3,1fr)} }

/* ── Static product cards ("your day" + tabs): shared card look, no motion ── */
.pcard{border-radius:12px;padding:16px;background:var(--surface);box-shadow:0 0 0 1px var(--hairline);display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.5;text-align:left;min-width:0}
.pcard-head{display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:600}
.pcard-meta{margin-left:auto;font-size:12px;font-weight:500;color:rgba(var(--ink-rgb),.65);white-space:nowrap}
.pcard-meta.pending::before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--warn);vertical-align:1px}
.pcard ul{list-style:none;display:flex;flex-direction:column}
.pcard li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--hairline);color:rgba(var(--ink-rgb),.85)}
.pcard .grow{flex:1;min-width:0}
.pcard b{font-weight:500;color:var(--ink)}
.pcard .muted{display:block;font-size:12px;color:rgba(var(--ink-rgb),.6)}
.pcard .checks li::before{content:'';flex-shrink:0;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(var(--ink-rgb),.35)}
.pcard-field{display:grid;grid-template-columns:4.5rem 1fr;gap:8px}
.pcard-field dt{color:rgba(var(--ink-rgb),.6)}
.pcard-body{color:rgba(var(--ink-rgb),.8);padding-top:10px;border-top:1px solid var(--hairline)}
.pcard-actions{display:flex;gap:8px}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;margin-right:4px;border-radius:999px;background:rgba(var(--ink-rgb),.07);color:var(--ink)}
.pbtn{flex-shrink:0;font-size:12px;font-weight:500;padding:5px 10px;border-radius:8px;background:rgba(var(--ink-rgb),.07);white-space:nowrap}
.pbtn.primary{background:var(--ink);color:var(--on-ink)}

/* ── Your day: three columns from 900px, stacked below ─────────────────── */
.day-grid{display:grid;grid-template-columns:1fr;gap:48px;max-width:64rem;margin:0 auto}
.day{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid var(--hairline);text-align:left;min-width:0}
.day h3{font-size:17px;font-weight:600}
.day > p{font-size:15px;line-height:1.6;color:rgba(var(--ink-rgb),.7);margin-bottom:10px}
.day .pcard{margin-top:auto}
@media (min-width:900px){ .day-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} }

/* ── Product tabs. Without JS the tablist stays hidden and every panel shows. */
.tablist{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-bottom:32px}
.tablist[hidden]{display:none}
.tab-panels{display:flex;flex-direction:column;gap:56px;max-width:56rem;margin:0 auto}
.tab-panel{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;text-align:left}
.tab-panel[hidden]{display:none}
.tab-panel:focus-visible{outline:2px solid var(--ink);outline-offset:8px;border-radius:4px}
.tab-copy h3{font-size:20px;font-weight:600;line-height:1.3;margin-bottom:10px}
.tab-copy p{font-size:15px;line-height:1.6;color:rgba(var(--ink-rgb),.7)}
@media (max-width:400px){ .wrap{padding:0 16px} }
@media (min-width:768px){ .tab-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px} }

/* ── Comparison table ───────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;max-width:64rem;margin:0 auto;-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}
table.cmp th,table.cmp td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--hairline)}
table.cmp th:first-child,table.cmp td:first-child{text-align:left;font-weight:500}
table.cmp thead th{font-weight:600;font-size:13px;vertical-align:bottom}
table.cmp .self{background:rgba(var(--ink-rgb),.04)}
table.cmp .note{display:block;font-size:11px;font-weight:400;color:rgba(var(--ink-rgb),.5);margin-top:3px}
.yes{color:var(--yes);font-weight:600}
.no{color:rgba(var(--ink-rgb),.3)}
.no[data-i18n]{color:rgba(var(--ink-rgb),.65)}
.cmp-foot{max-width:64rem;margin:18px auto 0;font-size:12px;line-height:1.6;color:rgba(var(--ink-rgb),.5)}

/* ── Pricing ────────────────────────────────────────────────────────────── */
.price-toggle{display:flex;justify-content:center;gap:20px;margin-bottom:28px}
.price-toggle button,.tablist button{font:inherit;font-size:14px;font-weight:500;padding:4px 0;border:0;background:transparent;cursor:pointer;color:rgba(var(--ink-rgb),.65);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px}
.price-toggle button[aria-pressed="true"],.tablist button[aria-selected="true"]{color:var(--ink);text-decoration-color:var(--ink)}
/* Three tiers as typographic columns under a hairline; the featured tier is
   framed by a 1px ink ring and is the only one with the ink CTA. */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:60rem;margin:0 auto}
.price-col{border-top:1px solid var(--hairline);padding:24px 20px;text-align:left;display:flex;flex-direction:column}
.price-col.featured{background:var(--surface);border-top-color:transparent;border-radius:var(--r-ui);box-shadow:0 0 0 1px var(--ink)}
.price-col h3{font-size:16px;font-weight:600;margin-bottom:10px}
.price-col .popular{font-size:12px;font-weight:500;color:rgba(var(--ink-rgb),.6);margin-left:8px}
.price-col .amount{font-family:'Instrument Serif',Georgia,serif;font-size:48px;line-height:1;margin-bottom:6px}
.price-col .per{font-size:13px;color:rgba(var(--ink-rgb),.6)}
.price-col .per + .per{margin-top:2px}
.price-col .price-list{margin-top:20px}
.price-col .cta{margin-top:0;text-align:center;background:rgba(var(--ink-rgb),.07);color:var(--ink)}
.price-col .cta:hover{background:rgba(var(--ink-rgb),.12)}
.price-col.featured .cta{background:var(--ink);color:var(--on-ink)}
.price-col.featured .cta:hover{background:var(--ink-hover)}
.price-list{list-style:none;text-align:left;display:flex;flex-direction:column;gap:10px;margin-bottom:22px;flex:1}
.price-list li{font-size:14px;display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.price-list li::before{content:'✓';color:var(--yes);font-weight:600;flex-shrink:0}
.price-note{max-width:60rem;margin:18px auto 0;text-align:center;font-size:12px;color:rgba(var(--ink-rgb),.55)}

/* ── About ──────────────────────────────────────────────────────────────── */
.prose{max-width:38rem;margin:0 auto;text-align:center}
.prose p{font-size:16px;line-height:1.7;color:rgba(var(--ink-rgb),.75);margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose a{text-decoration:underline}

/* ── FAQ (native <details>, no JS) ──────────────────────────────────────── */
.faq{max-width:48rem;margin:0 auto}
.faq details{border-top:1px solid var(--hairline)}
.faq details:last-child{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 4px;font-size:17px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex-shrink:0;font-size:20px;line-height:1;color:rgba(var(--ink-rgb),.5);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faq details p{padding:0 4px 22px;max-width:40rem;font-size:15px;line-height:1.65;color:rgba(var(--ink-rgb),.72)}
.section-link{margin-top:28px;text-align:center;font-size:15px;font-weight:500}
.section-link a{text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:5px}
.section-link a:hover{text-decoration-color:currentColor}

/* ── Final CTA band: flat brand ink, inverted CTA ───────────────────────── */
.final-cta{background:var(--ink);color:var(--on-ink);padding:88px 0;text-align:center}
.final-cta h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:40px;line-height:1.05;letter-spacing:-.02em;overflow-wrap:break-word}
.final-cta p{margin:16px auto 0;max-width:34rem;font-size:16px;line-height:1.6;opacity:.8}
.final-cta .cta{background:var(--on-ink);color:var(--ink)}
.final-cta .cta:hover{background:var(--on-ink);opacity:.9}
.final-cta .cta-link{color:var(--on-ink);text-decoration-color:currentColor}
.final-cta a:focus-visible{outline-color:var(--on-ink)}
@media (min-width:768px){ .final-cta{padding:112px 0} .final-cta h2{font-size:56px} }

@media (min-width:768px){
  .text-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;align-items:baseline}
  .text-row.has-n{grid-template-columns:3rem minmax(0,1fr) minmax(0,2fr)}
  .section-head h2{font-size:56px}
}
@media (prefers-reduced-motion:reduce){
  .cta{transition:none}
}

/* ── Content pages (content/*.html, inlined after the homepage CSS) ─────── */
.page{max-width:48rem;padding-top:40px;padding-bottom:88px}
.page .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0}
.page .crumbs li{margin:0;font-size:13px;line-height:1.5;color:rgba(var(--ink-rgb),.7)}
.crumbs li + li::before{content:'/';margin-right:6px;color:rgba(var(--ink-rgb),.4)}
.crumbs a{text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:4px}
.crumbs a:hover{text-decoration-color:currentColor}
.page h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(34px,8.5vw,56px);line-height:1.02;letter-spacing:-.02em;margin:24px 0 12px;text-wrap:balance;overflow-wrap:break-word}
.page .updated{font-size:13px;color:rgba(var(--ink-rgb),.7)}
.page .lede{margin-top:28px;font-size:18px;line-height:1.65;color:var(--ink)}
.page h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(28px,7vw,38px);line-height:1.1;letter-spacing:-.015em;margin:64px 0 16px;text-wrap:balance}
.page h3{font-size:17px;font-weight:600;line-height:1.4;margin:28px 0 6px}
.page p,.page li{font-size:16px;line-height:1.7;color:rgba(var(--ink-rgb),.8)}
.page p + p{margin-top:14px}
.page ul,.page ol.steps{margin:14px 0 0 22px}
.page li + li{margin-top:8px}
.page li b,.page p b{color:var(--ink);font-weight:600}
.page :is(p,li,td) a{text-decoration:underline;text-decoration-color:rgba(var(--ink-rgb),.35);text-underline-offset:3px}
.page :is(p,li,td) a:hover{text-decoration-color:currentColor}
.page .cta-row{justify-content:flex-start;margin-top:24px}
.page .table-scroll{margin-top:24px}
.page table.cmp{min-width:640px}
.page table.cmp td,.page table.cmp th{font-size:14px;line-height:1.45}
.page table.cmp td:first-child{text-align:left}
.page .cmp-foot,.page .note{margin:14px 0 0;font-size:13px;line-height:1.6;color:rgba(var(--ink-rgb),.7)}
.page .sources{margin-top:10px;font-size:13px}
.page .sources li{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
table.plans{border-collapse:collapse;width:100%;font-size:14px}
table.plans th,table.plans td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top;line-height:1.5}
table.plans thead th{font-size:13px;font-weight:600}
table.plans tbody th{font-weight:600}
.page .faq{margin-top:8px}
.page .faq details p{padding-bottom:22px}
.page .faq details p + p{margin-top:-8px}