/* Marketing page styles. Mirrors the app's own palette (ts/theme.ts) so the device mockup
   visually matches what you actually see after sign-in. No third-party fonts. */
:root{
  --paper:#FFFFFF;--paper-2:#F3F1EC;--ink:#1A1A1A;--ink-soft:#454545;
  --muted:#5A5A5A;--line:#EEEDEA;
  --alert:#C25D4A;--inbox:#4A7C8F;--todo:#B8883A;--bulk:#7B6CA5;--sent:#5E8A5E;--mute:#777;
  --gh:#6B6B6B;--rss:#5E8A5E;--claude:#C97B5C;
  --calm:#4A7C8F;
  --maxw:980px;--narrow:660px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 24px}

nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:22px 24px}
.logo{font-family:Spectral,Georgia,"Times New Roman",serif;font-weight:600;font-size:21px;letter-spacing:-.01em}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-link{font-size:14px;color:var(--ink-soft);text-decoration:none;transition:.15s}
.nav-link:hover{color:var(--calm)}
.nav-cta{font-size:14px;color:var(--ink-soft);text-decoration:none;border:1px solid var(--line);padding:7px 15px;border-radius:999px;transition:.15s;background:var(--paper)}
.nav-cta:hover{border-color:var(--calm);color:var(--calm)}

header{padding:48px 24px 8px;max-width:var(--narrow);margin:0 auto;text-align:center}
h1{font-family:Spectral,Georgia,serif;font-weight:400;letter-spacing:-.02em;font-size:clamp(34px,5.6vw,52px);line-height:1.05;margin:0 auto 18px;max-width:15em}
h1 em{font-style:italic;color:var(--calm)}
.lede{font-size:clamp(16px,1.9vw,18px);color:var(--ink-soft);max-width:32em;margin:0 auto 28px}
.lede em{font-style:italic;color:var(--ink);font-weight:500;font-family:Spectral,Georgia,serif}
.capture{display:flex;gap:8px;flex-wrap:wrap;max-width:460px;margin:0 auto;justify-content:center}
.capture input{flex:1;min-width:200px;font-family:inherit;font-size:15px;color:var(--ink);padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;transition:.15s}
.capture input::placeholder{color:var(--muted)}
.capture input:focus{outline:none;border-color:var(--calm);box-shadow:0 0 0 3px rgba(74,124,143,.13)}
.capture button{font-family:inherit;font-size:15px;font-weight:500;color:#fff;background:var(--ink);border:none;padding:11px 20px;border-radius:8px;cursor:pointer;transition:.15s;white-space:nowrap}
.capture button:hover{background:var(--calm)}
.capture button:disabled{background:var(--muted);cursor:default}
.capture .note{font-size:12.5px;color:var(--muted);width:100%;margin-top:4px}
.capture.done input,.capture.done button{display:none}
.capture .thanks{display:none;font-size:14.5px;color:var(--calm);font-weight:500;padding:11px 0;width:100%}
.capture.done .thanks{display:block}
.capture .err{display:none;font-size:13px;color:var(--alert);width:100%;margin-top:4px}
.capture.err .err{display:block}

/* Device — mirrors the actual app's chrome and list layout (ts/Cove.tsx + ts/components/list.tsx).
   Palette pulled from ts/theme.ts so the mockup reads as a real screenshot, not a redesign. */
.shot-wrap{padding:40px 0 56px}
.device{max-width:390px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(60,50,40,.04),0 24px 50px -28px rgba(60,50,40,.28);font-size:14px}

/* Top bar: serif "Cove" wordmark + Archive text button + ⚙ settings + ⎋ sign-out. */
.d-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.d-top .title{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.d-actions{display:flex;align-items:center;gap:4px;color:#6B6B6B}
.archive-link{font-size:13px;color:#6E6E6E;padding:4px 8px;border-radius:6px;font-weight:500}
.gear{font-size:16px;padding:4px 6px;border-radius:6px}
.signout{font-size:18px;padding:4px}

/* Tabs: 6 levels, even-distributed, label + count below. Active = colored 2px underline + bold. */
.tabs{display:flex;padding:0 8px;border-bottom:1px solid var(--line)}
.tab{flex:1;padding:10px 2px 8px;text-align:center;border-bottom:2px solid transparent;display:flex;flex-direction:column;align-items:center;gap:3px}
.tab .tlbl{font-size:13px;color:#454545;font-weight:400}
.tab .tn{font-size:10px;color:#6E6E6E;font-weight:500;min-height:12px}
.tab.on{border-bottom-color:var(--inbox)}
.tab.on .tlbl{color:var(--inbox);font-weight:600}
.tab.on .tn{color:var(--inbox)}

/* Two list-item kinds, both ~9px row padding.
   • .conv = full ConversationItem (3 lines: sender row, subject, snippet)
   • .stream = collapsed StreamItem (▸ + topic-title row + snippet, no subject) */
.conv,.stream{padding:9px 16px 10px;border-bottom:1px solid #F3F2EE;cursor:default}
.conv:last-child,.stream:last-child{border-bottom:none}
.stream{display:flex;align-items:flex-start;gap:6px}
.stream-arrow{font-size:10px;color:#6E6E6E;line-height:1.6;flex-shrink:0;width:12px}
.stream-body{flex:1;min-width:0}
.row-menu{font-size:16px;color:#6E6E6E;line-height:1;align-self:center;flex-shrink:0;padding:0 2px}

/* Row 1: sender (or topic title, italic) + source pill + count pill + timestamp on the right. */
.row{display:flex;align-items:center;gap:6px;margin-bottom:2px;min-width:0}
/* `.who` (conv sender) and `.topic-title` (stream/topic identifier) play the same role — the
   row's primary identifier — so they're styled identically. The source pill or count pill next
   to them carries enough context to tell a conv-row from a topic-row. */
.row .who,.row .topic-title{font-size:14px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.row .t{font-size:11px;color:#585858;margin-left:auto;flex-shrink:0}
/* Source pill: 9px text, tinted bg using the source's color at ~7% alpha. Matches list.tsx. */
.row .src{font-size:9px;font-weight:500;padding:1px 4px;border-radius:3px;background:rgba(74,124,143,.07);color:var(--inbox);flex-shrink:0}
.row .src.rss{background:rgba(94,138,94,.09);color:var(--rss)}
.row .src.gh{background:rgba(107,107,107,.10);color:#3F3F3F}
.row .src.claude{background:rgba(201,123,92,.10);color:#A2583E}
/* Count pill: number of items in a conv (#messages) or stream (#convs). */
.row .count-pill{font-size:10px;font-weight:500;padding:1px 5px;border-radius:4px;background:#F0EFEC;color:#444;flex-shrink:0}
/* Digest type badge (PR/Issue/Release/etc.) — replaces the sender slot, tinted by state. */
.row .digest{font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:.02em;flex-shrink:0}
.row .digest.dg-merged{background:#E6DFEC;color:#5B4A7A}
.row .digest.dg-open{background:#DFEEDF;color:#3A5C3A}
.row .digest.dg-closed{background:#F2D8D2;color:#8A3D2E}

/* Subject line (ConversationItem only; digests skip this). */
.subject{font-size:13px;color:var(--ink);line-height:1.3;margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Snippet line: shared by .conv and .stream. .from prefix is greyed (matches list.tsx). */
.snippet{font-size:12px;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snippet .from{color:#585858}

.caption{text-align:center;font-size:13.5px;color:var(--ink-soft);margin:22px auto 0;max-width:34em}

/* Content sections. No borders between them — whitespace does the dividing. */
section{padding:56px 0}
h2{font-family:Spectral,Georgia,serif;font-weight:400;letter-spacing:-.015em;font-size:clamp(26px,3.8vw,34px);line-height:1.18;margin:0 0 18px}
h2 em{font-style:italic;color:var(--calm)}
/* Paragraphs in a content section all share one font-size + line-height; the margin between
   blocks is exactly one line-height so consecutive paragraphs read on a clean grid. */
.prose p,.prose-p{font-size:16.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 1.55em;max-width:36em}
.prose p:last-child,.prose-p:last-child{margin-bottom:0}

/* Pull-quote: serif, slightly larger than body, soft left rail. No italic (matches the page-wide
   decision). Quote marks are generated via ::before/::after so the underlying text stays clean
   for copy-paste, and the rail itself signals "this is a quote" structurally. */
.pull-quote{font-family:Spectral,Georgia,"Times New Roman",serif;font-size:clamp(18px,2.2vw,22px);line-height:1.45;color:var(--ink);margin:0 0 24px;padding-left:18px;border-left:3px solid var(--line);max-width:36em}
.pull-quote::before{content:"\201C";color:var(--muted);margin-right:1px}
.pull-quote::after{content:"\201D";color:var(--muted);margin-left:1px}

/* Levels list. Soft inset (background tint) rather than a hard border. */
.levels{margin-top:22px;background:#fff;border-radius:12px;padding:8px 6px;box-shadow:inset 0 0 0 1px var(--line)}
.lvl{display:flex;align-items:center;gap:14px;padding:11px 14px}
.lvl + .lvl{border-top:1px solid #F3F2EE}
.lvl .swatch{width:9px;height:9px;border-radius:50%;flex:none}
.lvl .name{font-weight:600;font-size:14.5px;width:58px;flex:none}
.lvl .desc{font-size:14px;color:var(--ink-soft)}

/* Sources list — same font + line-height as `.prose-p` so the whole section reads on one grid.
   Each `li` is treated as a paragraph: margin-bottom equals one line-height (vertical margins
   collapse with the surrounding `.prose-p` margins so the gap stays exactly one line both ways). */
.sources{list-style:none;font-size:16.5px;line-height:1.55;padding-left:0;margin:1.55em 0}
.sources li{color:var(--ink-soft);max-width:38em;margin:0 0 1.55em}
.sources li:last-child{margin-bottom:0}
.sources strong{color:var(--ink);font-weight:600}

.closing{padding:56px 24px 48px;max-width:var(--narrow);margin:0 auto;text-align:center}
.closing h2{margin-bottom:10px}
.closing .sub{font-size:16.5px;color:var(--ink-soft);max-width:30em;margin:0 auto 26px}
.closing .have-account{font-size:14px;color:var(--ink-soft);margin-top:22px}
.closing .have-account a{color:var(--calm);text-decoration:none;font-weight:500}
.closing .have-account a:hover{text-decoration:underline}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:600px){
  header,.closing{padding-left:20px;padding-right:20px}
  section{padding:40px 0}
  .lvl{gap:10px}
  .lvl .name{width:48px}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}