/* ==========================================================================
   Sweet — editorial/corporate theme (v2)
   Replaces the "up in the clouds" sky theme with a restrained, monochrome-
   first design closer to claude.com/product/claude-code: serif display
   headlines, clean sans body copy, flat bordered cards (no blur/gradient),
   solid black/white buttons, color reserved for small accents only.
   Light-default + auto-dark via `prefers-color-scheme`, same as before.
   Loaded LAST on the marketing pages so it wins the cascade over
   shared-styles.min.css and marketing.css; out-of-scope pages (blog/admin/
   demos) that never link it keep their old look.

   Two jobs in one file:
     1. Re-map the legacy shared-styles token names (--text, --surface, …)
        so inline `var(--text)` usages on the old pages adapt automatically.
     2. Style each shared component (.nav-wrap, .hero, .price-card, …) to the
        new design language — same selectors as before, so no HTML changes
        were needed on the 8 marketing pages that don't have hero decoration.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── 1. Design tokens ─────────────────────────────────────────────────── */
:root{
  /* neutral surface scale (light) */
  --sky-top:#ffffff; --sky-mid:#fafafa; --sky-low:#f7f7f5;
  --ink:#18181b; --ink-soft:#65656d;
  --sky-accent:#9a6a3a; --gold:#b8824a;           /* single restrained accent */
  --glass:#ffffff; --glass-border:#e6e6e3;
  --sun:transparent;
  --accent-rgb:154,106,58; --gold-rgb:184,130,74;
  --cta-text:#ffffff; --chip-bg:#f2f2ef;
  --cloud-far:transparent; --cloud-near:transparent;
  --h1-grad:none;
  --install-bg:#141416;
  --nav-bg:rgba(255,255,255,.86);
  --play-bg:#141416;
  --foot-line:#e6e6e3;
  --term-text:#e8e8e6;
  --tri-a:rgba(24,24,27,.06); --tri-b:rgba(24,24,27,.01);
  --tri-stroke:rgba(24,24,27,.16); --tri-text:#18181b; --tri-mid:#65656d;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* remapped legacy shared-styles tokens */
  --primary:var(--ink); --primary-dark:#3f3f46;
  --background:var(--sky-top);
  --surface:var(--glass); --surface-light:#ffffff;
  --text:var(--ink); --text-muted:var(--ink-soft); --text-light:#3f3f46;
  --text-dim:#87878f; --muted:#87878f;
  --border:var(--glass-border); --border-hover:#c9c9c4;
  --success:#3fa365; --warning:#c7862b; --error:#c0503f;
  --sweet:var(--gold); --claude:#8a63d2; --gpt:#3fa365; --gemini:#4d7ea8;
  --bg:#ffffff; --fg:var(--ink); --card:var(--surface);
  --accent:var(--sky-accent); --accent-dim:#c9ab8a;
  --bg-alt:#f4f4f2; --bg-hover:rgba(24,24,27,.04); --bg-card:var(--surface);
  --bg-raised:#f4f4f2;
}

@media (prefers-color-scheme: dark){
  :root{
    --sky-top:#0a0a0b; --sky-mid:#0c0c0d; --sky-low:#0e0e10;
    --ink:#f2f2f0; --ink-soft:#95959c;
    --sky-accent:#c9a06a; --gold:#d4ad78;
    --glass:#141416; --glass-border:#242428;
    --sun:transparent;
    --accent-rgb:201,160,106; --gold-rgb:212,173,120;
    --cta-text:#0a0a0b; --chip-bg:#1a1a1d;
    --cloud-far:transparent; --cloud-near:transparent;
    --h1-grad:none;
    --install-bg:#000000;
    --nav-bg:rgba(10,10,11,.82);
    --play-bg:#000000;
    --foot-line:#222224;
    --term-text:#e8e8e6;
    --tri-a:rgba(255,255,255,.06); --tri-b:rgba(255,255,255,.01);
    --tri-stroke:rgba(255,255,255,.16); --tri-text:#f2f2f0; --tri-mid:#95959c;

    --primary:var(--ink); --primary-dark:#d4d4d8;
    --background:var(--sky-top);
    --surface:var(--glass); --surface-light:#1a1a1d;
    --text:var(--ink); --text-muted:var(--ink-soft); --text-light:#d4d4d8;
    --text-dim:#77777e; --muted:#77777e;
    --border:var(--glass-border); --border-hover:#3a3a3f;
    --success:#3fa365; --warning:#c7862b; --error:#e0776a;
    --sweet:var(--gold); --claude:#9b7fe0; --gpt:#3fa365; --gemini:#7fa8d0;
    --bg:var(--sky-top); --fg:var(--ink); --card:var(--surface);
    --accent:var(--sky-accent); --accent-dim:#8a7256;
    --bg-alt:#141416; --bg-hover:rgba(255,255,255,.05); --bg-card:var(--surface);
    --bg-raised:#141416;
  }
}

/* ── 1b. Code block reset ───────────────────────────────────────────────
   shared-styles.min.css styles bare `code` as a small highlighted chip
   (background + padding + border-radius) for short inline snippets like
   `variable_name`. That's fine standalone, but the same rule also matches
   the `<code>` nested inside `<pre><code>…</code></pre>` blocks — and since
   `code` is an inline element, a background+padding on it renders as a
   separate little rounded box around *each wrapped line* once the content
   is long enough to wrap, instead of one clean block. Reset it here so only
   the outer `<pre>` provides the visual container. */
body:not(.docs) pre{ color:var(--term-text); }
body:not(.docs) pre code, .article-content pre code{ background:none; padding:0; border-radius:0; color:var(--term-text); font-size:inherit; }

/* ── 2. Base ─────────────────────────────────────────────────────────── */
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:var(--sky-top);
}
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(var(--accent-rgb),.22); }
main #main-content{ position:relative; }
.container{ position:relative; max-width:1000px; margin:0 auto; padding:132px 24px 40px; }
.content-section{ max-width:860px; margin:0 auto; }
.wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }

/* ── 3. Nav (landing top bar + legacy .nav-wrap pill → same flat bar) ── */
nav, .nav-wrap{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--nav-bg); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--glass-border);
  width:100%; max-width:none; border-radius:0; transform:none;
  box-shadow:none;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:1120px; margin:0 auto; padding:0 34px; height:58px;
}
.nav-inner{ padding:0 24px; }
.nav-logo, .logo{
  font-family:var(--serif); font-weight:500; font-size:20px; letter-spacing:-.01em; color:var(--ink);
  background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:var(--ink); animation:none; text-decoration:none;
}
.nav-logo .dot, .logo .dot{ color:var(--sky-accent); }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a, .nav-link{
  color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:14px;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-link:hover{ color:var(--ink); text-decoration:none; }
.nav-links a.current, .nav-links .current{ color:var(--ink); font-weight:600; background:none; padding:0; border-radius:0; }
.nav-cta, .nav-links .nav-cta{
  text-decoration:none; color:var(--cta-text) !important; font-weight:600; font-size:13.5px; padding:8px 18px;
  border-radius:7px; background:var(--ink) !important;
  box-shadow:none; transition:opacity .2s ease;
}
.nav-cta:hover{ opacity:.82; transform:none; box-shadow:none; }

/* ── 4. Hero ───────────────────────────────────────────────────────────
   Editorial/corporate hero: serif headline, muted subtitle, dual CTA
   buttons (solid + outline), small mono caption below — no background
   decoration, no floating tiles. */
.hero{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:150px 24px 80px; overflow:hidden; max-width:1040px; margin:0 auto;
}
header.hero{ min-height:0; padding-top:172px; padding-bottom:96px; }
.hero::before{ content:''; display:none; }
.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px,7vw,88px); letter-spacing:-.02em; line-height:1.02;
  max-width:820px; margin:0 0 20px; color:var(--ink);
  background:none; -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:var(--ink);
}
.hero .sub, .hero p, .hero-subtitle, .hero p.hero-subtitle{
  margin:0; font-size:clamp(16px,2vw,19px); color:var(--ink-soft);
  max-width:560px; line-height:1.6; font-weight:400;
}
.hero .sub{ margin-top:20px; }
/* Subpage heroes sit inside .container, which already clears the fixed nav with
   132px of top padding — tone the hero down there so it reads compact. */
.container .hero{ padding:56px 0 44px; max-width:none; }
.container .hero h1{ font-size:clamp(32px,5vw,52px); }
.container .hero .hero-subtitle, .container .hero .sub{ font-size:clamp(16px,2vw,18px); }
.section-label{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 14px;
}
.scene, .hero-clouds{ display:none; }
.hero > *{ position:relative; z-index:5; }
.hero-inner{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; }

.install{
  margin-top:8px; display:inline-flex; align-items:center; gap:10px;
  background:var(--install-bg); color:var(--term-text);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:14px;
  padding:12px 20px; border-radius:9px; border:1px solid rgba(255,255,255,.1);
  box-shadow:none;
}
.install .prompt{ color:var(--gold); }
.hero-cta{
  margin-top:8px; display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:8px; font-weight:600; font-size:15px;
  background:var(--ink); color:var(--cta-text);
  text-decoration:none; box-shadow:none;
  transition:opacity .2s ease, transform .2s ease;
}
.hero-cta:hover{ opacity:.85; transform:none; box-shadow:none; }
.hero-cli-alt{
  margin-top:14px; display:flex; align-items:center; gap:8px; justify-content:center;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:13px; color:var(--ink-soft);
}
.hero-cli-alt .prompt{ color:var(--gold); }
.free-tag{
  margin-top:18px; font-size:13.5px; font-weight:500; color:var(--ink-soft);
  padding:0; border:none; background:none; border-radius:0; box-shadow:none;
}
/* Dual-CTA row (solid primary + outline secondary), matching the reference's
   button pairing pattern. */
.hero-cta-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.hero-cta-outline{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 27px; border-radius:8px; font-weight:600; font-size:15px;
  background:transparent; color:var(--ink); border:1px solid var(--glass-border);
  text-decoration:none; transition:border-color .2s ease, background .2s ease;
}
.hero-cta-outline:hover{ border-color:var(--border-hover); background:var(--bg-hover); }
/* billing.html heroes sit directly under <main> (not .container) — compact, nav-clearing */
main .hero{ padding:132px 24px 44px; max-width:none; }
main .hero h1{ font-size:clamp(30px,5vw,48px); }
.price-card .btn-primary{ background:var(--ink); color:var(--cta-text); border:none; box-shadow:none; }
.meter-container{ background:var(--chip-bg); }
.meter-bar{ background:var(--sky-accent); }

/* ── 5. Sections & head/topic type ──────────────────────────────────── */
/* Landing sections are direct children of body; subpage sections live inside
   .container, which already clears the fixed nav — so scoped to body > section
   so the two layouts don't double-pad. */
body > section{ position:relative; z-index:5; padding:104px 24px; max-width:1040px; margin:0 auto; }
section .container, .section .container{ padding:0; }
.section-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px,4vw,44px); letter-spacing:-.01em; line-height:1.1;
  color:var(--ink); margin:0;
}
.section-title + .section-sub{ margin-top:14px; }
.section-sub, .sec-sub{
  margin:14px 0 0; font-size:17px; color:var(--ink-soft); line-height:1.6; max-width:640px;
}
.section-sub.center, .sec-sub{ margin-left:auto; margin-right:auto; text-align:center; }

.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible{ opacity:1; transform:none; }
html:not(.js) .reveal{ opacity:1; transform:none; }

/* ── 6. Cards (features / use-cases / panels / steps) — flat, bordered ── */
.features, .features-grid, .use-cases-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:44px;
}
.feature, .feature-card, .use-case-card, .panel-card{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:12px;
  padding:26px 24px;
  box-shadow:none;
  transition:background .2s ease, border-color .2s ease;
}
.feature:hover, .feature-card:hover, .use-case-card:hover, .panel-card:hover{
  transform:none; box-shadow:none; background:var(--bg-hover); border-color:var(--border-hover);
}
.feature .check{ color:var(--sky-accent); font-weight:700; }
.feature h3, .feature-card h3, .use-case-card h3{ font-size:17px; font-weight:600; margin:8px 0 8px; letter-spacing:-.005em; color:var(--ink); font-family:var(--sans); }
.feature p, .feature-card p, .use-case-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; }
.feature-icon, .use-case-icon{ font-size:26px; line-height:1; margin-bottom:14px; opacity:.85; }
.feature-details ul, .use-case-details ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:13px; line-height:1.5; }

.workflow-section{ max-width:1000px; margin:auto; }
.workflow-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:28px; }
.workflow-step{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:12px;
  padding:24px; display:flex; gap:14px; align-items:flex-start;
}
.step-number{
  width:32px; height:32px; border-radius:7px; flex:0 0 auto;
  background:var(--chip-bg); border:1px solid var(--glass-border);
  color:var(--ink); display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px;
}
.workflow-step h3{ margin:0 0 6px; font-size:16px; color:var(--ink); font-weight:600; }
.workflow-step p{ margin:0; color:var(--ink-soft); font-size:14px; }

.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; margin-top:40px; }
.step{ text-align:center; }
.step-node{
  width:48px; height:48px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:var(--chip-bg); border:1px solid var(--glass-border);
  font-family:"JetBrains Mono",monospace; font-weight:600; font-size:17px; color:var(--ink);
  box-shadow:none; transition:none;
}
.step-title{ font-size:16px; font-weight:600; margin:0 0 8px; color:var(--ink); }
.step-desc{ color:var(--ink-soft); font-size:13.5px; line-height:1.6; margin:0 auto; max-width:230px; }

.social-proof-badges{ display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; margin:22px 0 0; }
.social-proof-badge{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }
.social-proof-badge-icon{ color:var(--sky-accent); font-weight:700; }

/* ── 7. Differentiator / triangle / trust line ──────────────────────── */
.diff{
  margin-top:60px; padding:44px 34px; border-radius:16px; text-align:center;
  background:var(--install-bg); color:var(--term-text); box-shadow:none;
}
.diff .big{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,3.4vw,32px); line-height:1.3; }
.diff .big em{ color:var(--gold); font-style:normal; }
.triangle-wrap{ display:flex; justify-content:center; margin-top:46px; }
.triangle-svg{ width:100%; max-width:440px; height:auto; }
.trust-line{ text-align:center; margin-top:30px; font-size:13px; color:var(--ink-soft); font-weight:450; }
.trust-line .sep{ opacity:.5; margin:0 6px; }

/* ── 8. Terminal (product-screenshot equivalent) ────────────────────── */
.terminal-wrap{ margin-top:56px; }
.terminal{
  background:var(--play-bg); border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 20px 60px -20px rgba(0,0,0,.35);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:14px; color:var(--term-text);
}
.term-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); }
.term-bar .tb-r, .term-bar .tb-y, .term-bar .tb-g{ width:11px; height:11px; border-radius:50%; }
.tb-r{background:#ff5f57}.tb-y{background:#febc2e}.tb-g{background:#28c840}
.term-bar .t{ margin-left:10px; color:rgba(232,232,230,.45); font-size:12px; }
.term-body{ padding:22px 22px; min-height:360px; }
.line{ margin:0 0 14px; line-height:1.5; white-space:pre-wrap; }
.line .u{ color:#8be9fd; } .line .p{ color:var(--gold); font-weight:600; } .line .dim{ color:rgba(232,232,230,.4); }
.task{ display:flex; align-items:center; gap:10px; margin:8px 0 8px 18px; }
.task .st{ width:8px; height:8px; border-radius:50%; }
.st.running{background:#febc2e;box-shadow:none;animation:pulse 1.4s ease-in-out infinite}
.st.queued{background:rgba(232,232,230,.3)} .st.done{background:var(--gold);box-shadow:none}
.st.fail{background:#e0776a;box-shadow:none}
.task .name{ color:var(--term-text); } .task .state{ color:rgba(232,232,230,.45); font-size:13px; }
.msg{ margin:10px 0 10px 18px; padding:8px 12px; border-radius:8px; background:rgba(255,255,255,.04); font-size:13px; color:rgba(232,232,230,.65); }
@keyframes pulse{ 50%{opacity:.4} }
.caret{ display:inline-block; width:8px; height:16px; background:var(--gold); vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }

/* ── 8a. Demo tabs (switch which terminal transcript is shown) ──────── */
.demo-tabs{ display:flex; gap:28px; justify-content:center; margin:36px 0 -4px; border-bottom:1px solid var(--glass-border); }
.demo-tab{
  background:none; border:none; cursor:pointer; padding:0 0 14px;
  font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s ease, border-color .2s ease;
}
.demo-tab:hover{ color:var(--ink); }
.demo-tab.active{ color:var(--ink); border-bottom-color:var(--ink); }
.term-body{ max-height:420px; overflow-y:auto; }

/* ── Web-app demo — replica of the actual Sweet chat UI (dark, permanent,
   like a real screenshot) inside a window-chrome card. Session tabs above
   switch scenarios; tool rows expand/collapse on click for real
   interactivity, not just a static mock. Styled closer to Claude Code's own
   product UI: plain flowing text (no boxed bubbles), text-only tool rows
   with a trailing chevron instead of icon badges, generous input padding
   with a control strip below it. ─────────────────────────────────────── */
.webapp-demo{
  background:var(--play-bg); border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 60px -24px rgba(0,0,0,.4);
  font-family:var(--sans); color:var(--term-text);
}
.webapp-demo-topbar{
  display:flex; align-items:center; gap:18px; padding:15px 22px;
  border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.015);
}
.webapp-demo-brand{ font-family:var(--serif); font-weight:500; font-size:16px; color:var(--term-text); }
.webapp-demo-brand .dot{ color:var(--gold); }
.webapp-demo-tabs{ display:flex; gap:4px; }
.wd-tab{
  font-size:12.5px; font-weight:500; color:rgba(232,232,230,.4); padding:5px 11px; border-radius:6px;
}
.wd-tab.active{ color:var(--term-text); background:rgba(255,255,255,.07); }
.webapp-demo-status{
  margin-left:auto; display:flex; align-items:center; gap:7px; font-size:12px; color:rgba(232,232,230,.45);
}
.wd-status-dot{ width:6px; height:6px; border-radius:50%; background:rgba(232,232,230,.3); transition:background .3s ease; }
.wd-status-dot.working{ background:var(--gold); animation:pulse 1.4s ease-in-out infinite; }

.webapp-demo-body{ padding:28px 30px 8px; min-height:320px; max-height:440px; overflow-y:auto; }
.demo-bubble{
  font-size:14px; line-height:1.65; color:rgba(232,232,230,.82); margin-bottom:22px; max-width:560px;
}
.demo-bubble.user{
  background:rgba(255,255,255,.06); border-radius:14px; padding:10px 16px; display:inline-block; color:var(--term-text);
}
.demo-bubble b{ color:var(--term-text); font-weight:600; }

.demo-tool{
  display:flex; align-items:baseline; gap:7px; padding:3px 0; margin-bottom:10px;
  cursor:pointer; color:rgba(232,232,230,.45); font-size:13px; line-height:1.5;
}
.demo-tool:hover{ color:rgba(232,232,230,.7); }
.demo-tool-name{ color:rgba(232,232,230,.6); }
.demo-tool:hover .demo-tool-name{ color:rgba(232,232,230,.85); }
.demo-tool-path{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; }
.demo-tool-stat{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px; }
.demo-tool-stat .add{ color:#7cc99a; } .demo-tool-stat .rem{ color:#e0776a; }
.demo-tool-chev{ flex:0 0 auto; opacity:.6; font-size:11px; transition:transform .2s ease; }
.demo-tool.expanded .demo-tool-chev{ transform:rotate(90deg); }
.demo-tool-detail{
  display:none; margin:2px 0 12px 2px; padding:8px 0 8px 14px; border-left:2px solid rgba(255,255,255,.1);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px; color:rgba(232,232,230,.5);
  white-space:pre-wrap; line-height:1.6;
}
.demo-tool.expanded .demo-tool-detail{ display:block; }

.webapp-demo-inputwrap{ padding:10px 22px 22px; }
.webapp-demo-input{
  padding:16px 20px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.03);
  font-size:13.5px; color:rgba(232,232,230,.35);
}
.webapp-demo-controls{
  display:flex; align-items:center; justify-content:space-between; margin-top:10px;
  font-size:12px; color:rgba(232,232,230,.35);
}
.wd-send{
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; color:rgba(232,232,230,.55);
}

/* ── 8b. Showcase — three product-screenshot cards (window-chrome mocks,
   permanently dark like real screenshots, regardless of page theme) ─── */
.showcase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; align-items:start; }
.showcase-card{ display:flex; flex-direction:column; }
.showcase-shot{
  background:var(--play-bg); border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 20px 50px -24px rgba(0,0,0,.4);
  margin-bottom:20px;
}
.showcase-shot .term-bar{ padding:10px 14px; }
.showcase-shot-body{ padding:20px; min-height:150px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; color:var(--term-text); }
.shot-line{ margin:0 0 9px; line-height:1.5; }
.shot-dim{ color:rgba(232,232,230,.4); }
.shot-accent{ color:var(--gold); }
.shot-bubble{ background:rgba(255,255,255,.06); border-radius:8px; padding:9px 12px; margin-bottom:12px; color:var(--term-text); font-family:var(--sans); font-size:12.5px; }
.shot-tool{ color:rgba(232,232,230,.75); font-size:12px; margin-bottom:8px; }
.shot-tool b{ color:var(--term-text); font-weight:600; }
.shot-pill{
  display:inline-block; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; padding:6px 12px; font-family:var(--sans); font-size:12px; color:var(--term-text);
  margin:0 8px 8px 0;
}
.showcase-card h3{ font-size:17px; font-weight:600; margin:0 0 8px; color:var(--ink); letter-spacing:-.005em; }
.showcase-card p{ margin:0 0 14px; color:var(--ink-soft); font-size:14px; line-height:1.55; }
.showcase-tags a{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; color:var(--ink-soft);
  background:var(--chip-bg); border:1px solid var(--glass-border); border-radius:6px; padding:6px 10px;
  display:inline-block; text-decoration:none; transition:border-color .2s ease, color .2s ease;
}
.showcase-tags a:hover{ color:var(--ink); border-color:var(--border-hover); }

/* ── 8b. Triangle SVG (theme-aware via presentation-attr override) ──── */
.triangle-svg path{ stroke:var(--tri-stroke); }
.triangle-svg stop:first-child{ stop-color:var(--tri-a); }
.triangle-svg stop:last-child{ stop-color:var(--tri-b); }
.triangle-svg circle{ fill:var(--ink); }
.triangle-svg circle:nth-of-type(2){ fill:var(--gold); }
.triangle-svg text{ fill:var(--tri-text); }
.triangle-svg text:last-child{ fill:var(--tri-mid); }

/* ── 8c. Changelog ("Latest updates") ────────────────────────────────── */
.changelog{ margin-top:40px; display:flex; flex-direction:column; }
.changelog-item{
  display:flex; gap:28px; padding:22px 4px; border-top:1px solid var(--glass-border);
  text-decoration:none; color:inherit; transition:opacity .2s ease;
}
.changelog-item:last-child{ border-bottom:1px solid var(--glass-border); }
.changelog-item:hover{ opacity:.72; }
.changelog-date{
  flex:0 0 auto; width:110px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12.5px; color:var(--ink-soft); padding-top:2px;
}
.changelog-tag{
  display:inline-block; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--sky-accent); margin-bottom:7px;
}
.changelog-body h3{ font-size:16px; font-weight:600; margin:0 0 6px; color:var(--ink); letter-spacing:-.005em; }
.changelog-body p{ margin:0; font-size:14px; color:var(--ink-soft); line-height:1.55; max-width:600px; }

/* ── 8d. Docs link row ("Get the technical rundown") ─────────────────── */
.docs-links{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px 32px; }
.docs-links a{
  font-size:14.5px; font-weight:500; color:var(--ink); padding-bottom:2px;
  border-bottom:1px solid var(--glass-border); transition:border-color .2s ease;
}
.docs-links a:hover{ border-color:var(--ink); }

/* ── 9. FAQ ─────────────────────────────────────────────────────────── */
.faq, .faq-list{ margin-top:44px; display:flex; flex-direction:column; gap:0; border:1px solid var(--glass-border); border-radius:14px; overflow:hidden; }
.faq-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:44px; }
details{
  background:var(--glass); border:none; border-radius:0; border-bottom:1px solid var(--glass-border);
  overflow:hidden; transition:background .2s ease;
}
.faq details:last-child{ border-bottom:none; }
details[open]{ box-shadow:none; background:var(--bg-hover); }
summary{
  cursor:pointer; list-style:none; padding:18px 22px; font-weight:550; font-size:15.5px;
  display:flex; justify-content:space-between; align-items:center; color:var(--ink);
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; color:var(--ink-soft); font-size:19px; font-weight:400; transition:transform .25s ease; flex:0 0 auto; }
details[open] summary::after{ transform:rotate(45deg); }
.faq-body{ padding:0 22px 18px; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }
.faq-body code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.92em; color:var(--sky-accent);
  background:var(--chip-bg); border-radius:4px; padding:1px 6px;
}
.faq-card{ background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:22px; }
.faq-card h4{ margin:0 0 8px; font-size:15px; color:var(--ink); }
.faq-card p{ margin:0; color:var(--ink-soft); font-size:14px; line-height:1.6; }

/* ── 10. Pricing — flat bordered cards, monochrome ───────────────────── */
.prices, .price-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.plan, .price-card{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:14px;
  padding:28px 24px; position:relative;
  box-shadow:none; transition:border-color .2s ease;
}
.plan:hover, .price-card:hover{ transform:none; box-shadow:none; border-color:var(--border-hover); }
.plan.pop, .price-card.featured{ border-color:var(--ink); box-shadow:none; }
.plan-label{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.plan.pop .plan-label{ color:var(--ink); font-weight:600; }
.plan-name, .price-name{ font-size:19px; font-weight:600; margin-bottom:8px; letter-spacing:-.01em; color:var(--ink); font-family:var(--sans); }
.plan-name.muted, .price-name.muted{ color:var(--ink-soft); }
.plan-limit{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px; color:var(--ink-soft);
  padding:4px 9px; background:var(--chip-bg); border-radius:6px; display:inline-block; margin-bottom:18px;
}
.plan-price, .price-amount{ font-family:var(--serif); font-weight:500; font-size:34px; letter-spacing:-.01em; margin-bottom:4px; color:var(--ink); }
.plan-price .mo, .price-amount .per{ font-family:var(--sans); font-size:13px; color:var(--ink-soft); font-weight:400; }
.plan-price .free-text{ color:var(--ink); }
.plan-desc, .price-desc{ color:var(--ink-soft); font-size:14px; line-height:1.5; margin-bottom:18px; }
.plan ul, .price-list{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:22px; padding:0; }
.plan li, .price-list li{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:9px; align-items:flex-start; }
.plan li::before{ content:"✓"; color:var(--ink); font-size:12px; flex-shrink:0; margin-top:2px; }
.plan-btn{
  display:block; text-align:center; padding:10px; border-radius:8px; font-weight:600; font-size:14px;
  text-decoration:none; transition:all .2s ease;
}
.plan-btn.solid, .btn-primary{ background:var(--ink); color:var(--cta-text); }
.plan-btn.solid:hover, .btn-primary:hover{ opacity:.85; }
.plan-btn.outline{
  border:1px solid var(--glass-border); color:var(--ink);
  background:transparent; border-radius:8px;
}
.plan-btn.outline:hover{ border-color:var(--border-hover); background:var(--bg-hover); }
.price-badge{ }
.pricing-features{ }

/* ── 11. CTA + buttons ──────────────────────────────────────────────── */
.cta{ text-align:center; padding:100px 24px; }
.cta h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,5vw,46px); letter-spacing:-.01em; color:var(--ink); margin:0; }
.cta-section{
  max-width:780px; margin:auto; padding:44px 32px; text-align:center; border-radius:16px;
  background:var(--glass); border:1px solid var(--glass-border);
}
.cta-section h2{ margin:0 0 10px; font-family:var(--serif); font-weight:500; font-size:clamp(22px,3vw,28px); letter-spacing:-.005em; color:var(--ink); }
.cta-section p{ margin:0 0 24px; color:var(--ink-soft); font-size:16px; }
.cta-buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn, .btn-primary, .btn-secondary, .cta-buttons .btn, .content-section .btn{
  display:inline-block; border:none; border-radius:8px; padding:12px 24px;
  font-weight:600; font-size:14.5px; cursor:pointer; text-decoration:none; transition:all .2s ease;
  background:var(--ink); color:var(--cta-text);
}
.btn:hover{ opacity:.85; transform:none; }
.btn-secondary, .cta-buttons .btn.btn-secondary, .content-section .btn.btn-secondary{
  background:transparent; color:var(--ink); border:1px solid var(--glass-border); font-weight:500; box-shadow:none;
}
.btn-secondary:hover, .cta-buttons .btn.btn-secondary:hover{ border-color:var(--border-hover); opacity:1; background:var(--bg-hover); }
.btn-sm{ padding:8px 15px; font-size:13px; }

/* ── 12. Billing dashboard extras ───────────────────────────────────── */
.hero-loggedin{ display:none; }
body.signed-in .hero-loggedin{ display:block; }
body.signed-in .hero-loggedout{ display:none; }
#user-status-panel, #subscription-panel, #usage{ }
.plans-heading{ text-align:center; }
.plans-heading .section-title{ font-size:23px; }
.price-card.current{ border-color:var(--ink); box-shadow:none; }
.price-card .btn-current{
  width:100%; text-align:center; font-size:14px; padding:12px; display:block; box-sizing:border-box;
  border-radius:8px; border:1px dashed var(--border-hover); background:var(--chip-bg);
  color:var(--ink-soft); font-weight:600; cursor:default;
}
.panel-note{ font-size:13px; color:var(--ink-soft); }
.activity-empty{ margin-top:14px; padding:14px; border:1px dashed var(--glass-border); border-radius:8px; font-size:13px; color:var(--ink-soft); text-align:center; }
.price-card.current .btn-current, .price-badge.is-current{}
.free-trial-banner{ margin-top:10px; }

/* tables / forms inside panels keep readable contrast */
input, select, textarea, .input{
  background:var(--glass); color:var(--ink);
  border:1px solid var(--glass-border); border-radius:8px; padding:10px 14px;
  font-family:inherit; font-size:14px;
}
@media (prefers-color-scheme: dark){
  input, select, textarea, .input{ background:#1a1a1d; }
}

/* ── 13. Footer ─────────────────────────────────────────────────────── */
footer{ text-align:center; padding:44px 24px; color:var(--ink-soft); font-size:13px; border-top:1px solid var(--foot-line); margin-top:40px; }
footer .foot-line{ margin:0 0 16px; }
footer .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin:0 0 16px; }
footer .foot-links a{ color:var(--ink-soft); font-size:13px; transition:color .2s ease; }
footer .foot-links a:hover{ color:var(--ink); }
footer .footer-grid{
  margin:0 auto 20px; padding:0; border-top:none; max-width:1000px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:28px; text-align:left;
}
footer .footer-section h4{ font-size:14px; font-weight:600; margin:0 0 12px; color:var(--ink); }
footer .footer-section p, footer .footer-section li, footer .footer-section a{ font-size:13px; line-height:1.7; color:var(--ink-soft); }
footer .footer-section ul{ list-style:none; margin:0; padding:0; }
footer .footer-section a:hover{ color:var(--ink); }
footer .copyright{ margin-top:24px; padding-top:18px; border-top:1px solid var(--foot-line); text-align:center; font-size:13px; color:var(--ink-soft); }

/* ── 13b. Docs pages (body.docs) ───────────────────────────────────────
   docs-theme.css already uses the same --bg/--text/--border/--accent token
   names this file remaps, so colors fall out for free. Only the hero (a
   compact left-aligned info card, not a centered landing hero) and code
   blocks (hardcoded dark bg from a token this file doesn't remap) need
   explicit fixes. */
body.docs .hero{
  display:block; text-align:left; align-items:normal; justify-content:normal;
  padding:32px 36px; margin:0 0 24px; max-width:none; overflow:hidden;
  background:var(--glass); border:1px solid var(--glass-border);
}
body.docs .hero h1{
  max-width:none; background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:var(--ink); color:var(--ink); font-family:var(--serif); font-weight:500;
}
body.docs pre{ border-color:var(--glass-border); }
body.docs .nav-card{ border-color:var(--glass-border); }
body.docs nav:hover{ background:var(--nav-bg); border-color:var(--glass-border); }

/* ── 13c. Bare content headings ────────────────────────────────────────
   Pages with bespoke long-form body copy (About, Contact, Privacy, Terms)
   use plain <h2>/<h3> with no .section-title class, so they never picked up
   the editorial serif treatment and still read as the old design. Docs pages
   are excluded — their sans-serif reference-style headings already work and
   aren't part of this. More specific rules elsewhere (.feature h3, .panel h2,
   etc.) still win over this on equal specificity by loading after it. */
body:not(.docs) .container h2,
body:not(.docs) main h2{
  font-family:var(--serif); font-weight:500; font-size:clamp(22px,3.4vw,30px);
  letter-spacing:-.005em; color:var(--ink); margin:28px 0 14px;
}
body:not(.docs) .container h3,
body:not(.docs) main h3{
  font-family:var(--sans); font-weight:600; font-size:17px; color:var(--ink); margin:20px 0 8px;
}

/* ── 13d. compare.html — legacy bespoke markup ─────────────────────────
   This page predates the redesign and carries its own inline <style> block
   (a gradient .hero, plus .panel/.grid/.feature/.btn.primary/.calculator-
   container/.slider that were never part of the shared component set). The
   old .hero gradient used --primary/--primary-dark, which the new token
   system remapped to near-black — so it now renders as an unreadable dark
   box instead of being neutralized. Overriding here rather than editing the
   page's own markup, consistent with how the rest of this file works. */
.hero{ background:none; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.panel{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:14px;
  padding:26px 24px;
}
.panel h2{ font-family:var(--sans); font-weight:600; font-size:17px; margin:0 0 14px; color:var(--ink); }
.feature{ margin-bottom:18px; }
.feature:last-child{ margin-bottom:0; }
.feature h3{ font-size:15px; font-weight:600; margin:0 0 6px; color:var(--ink); }
.feature p{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0; }
.btn.primary{
  display:inline-block; background:var(--ink); color:var(--cta-text); border:none; border-radius:8px;
  padding:12px 22px; font-weight:600; font-size:14.5px; text-decoration:none; cursor:pointer; text-align:center;
  transition:opacity .2s ease;
}
.btn.primary:hover{ opacity:.85; }
.btn.primary.w-full{ display:block; width:100%; }
.btn.primary.btn-xl{ padding:15px 30px; font-size:16px; }
.calculator-container{ background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:24px; margin:32px 0; }
.slider{ width:100%; height:6px; border-radius:4px; background:var(--glass-border); outline:none; -webkit-appearance:none; }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--ink); cursor:pointer; }
.slider-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:var(--ink-soft); }

/* ── 14. Responsive ─────────────────────────────────────────────────── */
@media (max-width:860px){
  .prices, .price-options{ grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; }
}
@media (max-width:768px){
  .container{ padding:112px 18px 40px; }
  .hero{ padding:130px 20px 60px; }
  .features, .features-grid, .use-cases-grid, .workflow-steps, .steps, .showcase-grid{ grid-template-columns:1fr; }
  .steps{ max-width:340px; margin-left:auto; margin-right:auto; }
  section, .section{ padding:70px 20px; }
  .demo-tabs{ gap:18px; overflow-x:auto; justify-content:flex-start; padding-bottom:2px; }
  .demo-tab{ white-space:nowrap; }
}
@media (max-width:640px){
  .hero h1{ font-size:clamp(32px,9vw,44px); }
  .nav-inner{ padding:0 16px; }
  .nav-links{ gap:14px; }
  .nav-links a:not(.nav-cta):not(.current){ display:none; }
  .cta-buttons{ flex-direction:column; align-items:stretch; }
  .cta-buttons .btn{ text-align:center; }
  .hero-cta-row{ flex-direction:column; align-items:stretch; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
}