/* ==========================================================================
   Sweet — the "up in the clouds" theme
   Combines the approved landing look (light, `landing.html`) with the
   night-sky variant (`landing-dark.html`), switched automatically via
   `prefers-color-scheme`. Loaded LAST on the marketing pages so it wins the
   cascade over shared-styles.min.css and marketing.css, while out-of-scope
   pages (docs/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
        cloud design language.
   ========================================================================== */

/* ── 1. Design tokens ─────────────────────────────────────────────────── */
:root{
  /* landing palette (light) */
  --sky-top:#bfe0fb; --sky-mid:#e3f1fc; --sky-low:#fbf5ec;
  --sky-accent:#5b9bd8; --gold:#f5b860;
  --ink:#1e3a52; --ink-soft:#587390;
  --glass:rgba(255,255,255,.5); --glass-border:rgba(255,255,255,.82);
  --sun:rgba(255,214,153,.6);
  --accent-rgb:91,155,216; --gold-rgb:245,184,96;
  --cta-text:#fff; --chip-bg:rgba(255,255,255,.45);
  --cloud-far:rgba(255,255,255,.5); --cloud-near:rgba(255,255,255,.88);
  --h1-grad:linear-gradient(180deg,#1e3a52,#3f7bb0);
  --install-bg:rgba(20,42,58,.92);
  --nav-bg:rgba(255,255,255,.35);
  --play-bg:rgba(14,32,44,.94);
  --foot-line:rgba(255,255,255,.55);
  --term-text:#eafcff;
  --tri-a:rgba(255,255,255,.55); --tri-b:rgba(255,255,255,.12);
  --tri-stroke:rgba(255,255,255,.75); --tri-text:#1e3a52; --tri-mid:#2f6a9c;

  /* remapped legacy shared-styles tokens */
  --primary:var(--ink); --primary-dark:#3f7bb0;
  --background:var(--sky-top);
  --surface:var(--glass); --surface-light:rgba(255,255,255,.75);
  --text:var(--ink); --text-muted:var(--ink-soft); --text-light:#46617e;
  --text-dim:#6d87a3; --muted:#7b93ab;
  --border:var(--glass-border); --border-hover:var(--sky-accent);
  --success:#3fa365; --warning:#c7862b; --error:#d45d5d;
  --sweet:var(--gold); --claude:#8a63d2; --gpt:#3fa365; --gemini:#2f6a9c;
  --bg:#ffffff; --fg:var(--ink); --card:var(--surface);
  --accent:var(--sky-accent); --accent-dim:#9bc4e6;
  --bg-alt:#eef7fe; --bg-hover:rgba(var(--accent-rgb),.08); --bg-card:var(--surface);
  --bg-raised:var(--surface);
}

@media (prefers-color-scheme: dark){
  :root{
    --sky-top:#0d1b2e; --sky-mid:#16283e; --sky-low:#22314a;
    --sky-accent:#7fb8e8; --gold:#ffcf8a;
    --ink:#eef4fa; --ink-soft:#93a8c2;
    --glass:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.14);
    --sun:rgba(255,207,138,.16);
    --accent-rgb:127,184,232; --gold-rgb:255,207,138;
    --cta-text:#0c1826; --chip-bg:rgba(255,255,255,.08);
    --cloud-far:rgba(215,228,245,.18); --cloud-near:rgba(215,228,245,.34);
    --h1-grad:linear-gradient(180deg,#f4fbff,#ffcf8a);
    --install-bg:rgba(6,14,22,.9);
    --nav-bg:rgba(9,17,28,.55);
    --play-bg:rgba(6,13,19,.95);
    --foot-line:rgba(255,255,255,.12);
    --term-text:#eafcff;
    --tri-a:rgba(255,255,255,.16); --tri-b:rgba(255,255,255,.03);
    --tri-stroke:rgba(255,255,255,.3); --tri-text:#eef4fa; --tri-mid:#ffcf8a;

    --primary:var(--ink); --primary-dark:#dbe7f4;
    --background:var(--sky-top);
    --surface:var(--glass); --surface-light:rgba(255,255,255,.08);
    --text:var(--ink); --text-muted:var(--ink-soft); --text-light:#cdd9e6;
    --text-dim:#7c94b0; --muted:#5f7692;
    --border:var(--glass-border); --border-hover:var(--sky-accent);
    --success:#3fa365; --warning:#c7862b; --error:#d45d5d;
    --sweet:var(--gold); --claude:#9b7fe0; --gpt:#3fa365; --gemini:#7fb8e8;
    --bg:var(--sky-top); --fg:var(--ink); --card:var(--surface);
    --accent:var(--sky-accent); --accent-dim:#a7ccee;
    --bg-alt:#16283e; --bg-hover:rgba(255,255,255,.06); --bg-card:var(--surface);
    --bg-raised:var(--surface);
  }
}

/* ── 2. Base ─────────────────────────────────────────────────────────── */
html{ scroll-behavior:smooth; }
body{
  font-family:ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:linear-gradient(180deg, var(--sky-top), var(--sky-mid) 30%, var(--sky-low) 100%);
  background-repeat:no-repeat; background-attachment:fixed;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(var(--accent-rgb),.28); }
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 bar) ─────── */
nav, .nav-wrap{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--nav-bg); backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--glass-border);
  width:100%; max-width:none; border-radius:0; transform:none;
  box-shadow:0 6px 24px rgba(15,35,55,.08);
}
.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-weight:700; font-size:19px; letter-spacing:-.02em; 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:600; font-size:14px;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-link:hover{ color:var(--ink); text-decoration:none; }
.nav-links a.current{ color:var(--ink); font-weight:600; }
.nav-cta, .nav-links .nav-cta{
  text-decoration:none; color:var(--cta-text) !important; font-weight:600; font-size:14px; padding:9px 18px;
  border-radius:999px; background:linear-gradient(135deg, var(--sky-accent), var(--gold)) !important;
  box-shadow:0 6px 20px rgba(var(--accent-rgb),.32); transition:transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(var(--accent-rgb),.4); opacity:1; }

/* ── 4. Hero + scene + clouds ───────────────────────────────────────── */
.hero{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:150px 24px 70px; overflow:hidden;
}
/* No max-width here on purpose: .scene/.hero-clouds (and the tool-float tiles
   inside them) are absolutely positioned by percentage against this box. The
   landing header.hero needs the FULL viewport width so left:1%/right:1% tiles
   land near the screen edges, clear of the centered (max-width:900px) headline
   — constraining .hero itself would shrink that box and push the tiles into
   the text. h1/.sub already cap their own width below, so text stays centered
   without .hero needing to. */
/* The landing hero (<header class="hero">) hosts the absolutely-positioned
   agent-panel/tool-float tiles at percentage offsets — it needs full viewport
   height for those percentages to fan the tiles out instead of cramming them
   against the headline. Subpage heroes (<section class="hero"> in .container
   or main, no floating tiles) stay content-sized via the overrides below. */
header.hero{ min-height:92vh; }
.hero::before{ content:''; display:none; }         /* drop legacy backdrop glow */
.hero h1{
  font-size:clamp(38px,6vw,72px); font-weight:800; letter-spacing:-.035em; line-height:1.06;
  max-width:900px; margin:0 0 16px;
  background:var(--h1-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub, .hero p, .hero-subtitle, .hero p.hero-subtitle{
  margin:0; font-size:clamp(17px,2.2vw,21px); color:var(--ink-soft);
  max-width:640px; line-height:1.55; font-weight:450;
}
.hero .sub{ margin-top:22px; }
/* 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; }
.container .hero h1{ font-size:clamp(34px,5vw,54px); }
.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:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 14px;
}
.scene, .hero-clouds{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.hero > *:not(.scene):not(.hero-clouds){ position:relative; z-index:5; }
.hero-inner{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; }
.cloud{ position:absolute; pointer-events:none; animation:drift linear infinite; }
.cloud div{ position:absolute; border-radius:50%; }
.cloud-far{ filter:blur(22px); }
.cloud-near{ filter:blur(13px); }
@keyframes drift{ from{ transform:translateX(-32vw); } to{ transform:translateX(132vw); } }
.sunbeam{
  position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:60vw; height:70vh;
  background:radial-gradient(ellipse at top, var(--sun), transparent 70%); filter:blur(8px);
}
.agent-panel{
  position:absolute; width:104px; height:64px; border-radius:15px;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(var(--accent-rgb),.2);
  display:flex; align-items:center; justify-content:center; gap:7px;
  animation:floaty 7s ease-in-out infinite;
}
.agent-panel .dot{ width:11px; height:11px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px var(--gold); }
.agent-panel .lbl{ font-size:11px; color:var(--ink-soft); font-weight:600; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-16px) rotate(1.2deg);} }
.ap1{top:9%;left:10%;animation-delay:0s}
.ap2{top:7%;right:12%;animation-delay:1.2s}
.ap3{top:40%;left:9%;animation-delay:2.1s}
.ap4{top:38%;right:10%;animation-delay:.6s}
.ap5{bottom:12%;left:16%;animation-delay:1.7s}
.ap6{bottom:10%;right:16%;animation-delay:2.6s}
.tool-float{
  position:absolute; z-index:2; white-space:nowrap;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12px; color:var(--ink-soft); padding:7px 12px; border-radius:10px;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(8px); box-shadow:0 6px 18px rgba(var(--accent-rgb),.12);
  animation:floaty 6s ease-in-out infinite;
}

.install{
  margin-top:14px; 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:15px;
  padding:14px 22px; border-radius:14px; border:1px solid rgba(var(--gold-rgb),.25);
  box-shadow:0 14px 40px rgba(15,35,55,.3); animation:glowpulse 3s ease-in-out infinite;
}
.install .prompt{ color:var(--gold); }
.free-tag{
  margin-top:18px; font-size:14px; font-weight:600; color:var(--sky-accent);
  padding:0; border:none; background:none; border-radius:0; box-shadow:none;
}
/* billing.html heroes sit directly under <main> (not .container) — compact, nav-clearing */
main .hero{ padding:132px 24px 44px; }
main .hero h1{ font-size:clamp(32px,5vw,54px); }
/* billing price-card primary CTA gets the gradient (billing's own .price-card .btn-primary
   sets bg:var(--text); beat it with same specificity, later source-order) */
.price-card .btn-primary{ background:linear-gradient(135deg,var(--sky-accent),var(--gold)); color:var(--cta-text); border:none; box-shadow:0 8px 24px rgba(var(--accent-rgb),.28); }
.meter-container{ background:var(--chip-bg); }
.meter-bar{ background:linear-gradient(90deg,var(--sky-accent),var(--gold)); }
@keyframes glowpulse{
  0%,100%{ box-shadow:0 14px 40px rgba(15,35,55,.3); }
  50%{ box-shadow:0 14px 52px rgba(var(--gold-rgb),.4); }
}

/* ── 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:112px 24px; max-width:1040px; margin:0 auto; }
section .container, .section .container{ padding:0; }
.section-title{
  font-size:clamp(26px,4vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1.12;
  color:var(--ink); margin:0;
}
.section-title + .section-sub{ margin-top:14px; }
.section-sub, .sec-sub{
  margin:14px 0 0; font-size:18px; color:var(--ink-soft); line-height:1.6; max-width:660px;
}
.section-sub.center, .sec-sub{ margin-left:auto; margin-right:auto; text-align:center; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible{ opacity:1; transform:none; }
html:not(.js) .reveal{ opacity:1; transform:none; }

/* ── 6. Cards (features / use-cases / panels / steps) ───────────────── */
.features, .features-grid, .use-cases-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:44px;
}
.feature, .feature-card, .use-case-card, .panel-card{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:20px;
  padding:24px 22px; backdrop-filter:blur(16px);
  box-shadow:0 12px 36px rgba(var(--accent-rgb),.14);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature:hover, .feature-card:hover, .use-case-card:hover, .panel-card:hover{
  transform:translateY(-5px); box-shadow:0 22px 52px rgba(var(--accent-rgb),.24);
}
.feature .check{ color:var(--sky-accent); font-weight:700; }
.feature h3, .feature-card h3, .use-case-card h3{ font-size:18px; font-weight:700; margin:8px 0 8px; letter-spacing:-.01em; color:var(--ink); }
.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:30px; line-height:1; margin-bottom:14px; }
.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:18px; margin-top:28px; }
.workflow-step{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:18px;
  padding:24px; display:flex; gap:14px; align-items:flex-start; backdrop-filter:blur(16px);
}
.step-number{
  width:34px; height:34px; border-radius:999px; flex:0 0 auto;
  background:rgba(var(--accent-rgb),.12); border:1px solid var(--accent-dim);
  color:var(--sky-accent); display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-family:"JetBrains Mono",ui-monospace,monospace;
}
.workflow-step h3{ margin:0 0 6px; font-size:17px; color:var(--ink); }
.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:52px; height:52px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--surface); border:1.5px solid var(--accent-dim);
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:19px; color:var(--sky-accent);
  box-shadow:0 0 0 6px var(--bg); transition:transform .25s, box-shadow .25s, background .25s, color .25s;
}
.step-node{ box-shadow: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:24px; text-align:center;
  background:var(--install-bg); color:var(--term-text); box-shadow:0 24px 70px rgba(15,35,55,.35);
}
.diff .big{ font-size:clamp(22px,3.4vw,34px); font-weight:700; 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:480px; height:auto; }
.trust-line{ text-align:center; margin-top:30px; font-size:13.5px; color:var(--ink-soft); font-weight:500; }
.trust-line .sep{ opacity:.5; margin:0 6px; }

/* ── 8. Terminal ────────────────────────────────────────────────────── */
.terminal-wrap{ margin-top:60px; }
.terminal{
  background:var(--play-bg); border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 80px rgba(15,35,55,.35);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:14.5px; color:var(--term-text);
}
.term-bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08); }
.term-bar span{ width:12px; height:12px; border-radius:50%; }
.tb-r{background:#ff5f57}.tb-y{background:#febc2e}.tb-g{background:#28c840}
.term-bar .t{ margin-left:10px; color:rgba(234,252,255,.5); font-size:12px; }
.term-body{ padding:24px 22px; min-height:380px; }
.line{ margin:0 0 14px; line-height:1.5; white-space:pre-wrap; }
.line .u{ color:#8be9fd; } .line .p{ color:var(--gold); font-weight:700; } .line .dim{ color:rgba(234,252,255,.45); }
.task{ display:flex; align-items:center; gap:10px; margin:8px 0 8px 18px; }
.task .st{ width:9px; height:9px; border-radius:50%; }
.st.running{background:#febc2e;box-shadow:0 0 10px #febc2e;animation:pulse 1.4s ease-in-out infinite}
.st.queued{background:rgba(234,252,255,.35)} .st.done{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.st.fail{background:#ff6b6b;box-shadow:0 0 10px #ff6b6b}
.task .name{ color:var(--term-text); } .task .state{ color:rgba(234,252,255,.5); font-size:13px; }
.msg{ margin:10px 0 10px 18px; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.05); font-size:13px; color:rgba(234,252,255,.7); }
@keyframes pulse{ 50%{opacity:.45} }
.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} }

/* ── 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(--sky-accent); }
.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); }

/* ── 9. FAQ ─────────────────────────────────────────────────────────── */
.faq, .faq-list{ margin-top:44px; display:flex; flex-direction:column; gap:12px; }
.faq-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:44px; }
details{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
  backdrop-filter:blur(16px); overflow:hidden; transition:box-shadow .25s ease;
}
details[open]{ box-shadow:0 14px 40px rgba(var(--accent-rgb),.18); }
summary{
  cursor:pointer; list-style:none; padding:18px 22px; font-weight:650; font-size:16px;
  display:flex; justify-content:space-between; align-items:center; color:var(--ink);
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; color:var(--sky-accent); font-size:20px; 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:15px; line-height:1.6; }
.faq-card{ background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:22px; backdrop-filter:blur(16px); }
.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 ────────────────────────────────────────────────────── */
.prices, .price-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.plan, .price-card{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:20px;
  padding:30px 26px; backdrop-filter:blur(16px); position:relative;
  box-shadow:0 12px 36px rgba(var(--accent-rgb),.14); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan:hover, .price-card:hover{ transform:translateY(-4px); box-shadow:0 20px 48px rgba(var(--accent-rgb),.22); }
.plan.pop, .price-card.featured{ border-color:rgba(var(--gold-rgb),.55); box-shadow:0 0 0 1px rgba(var(--gold-rgb),.15), 0 20px 50px -20px rgba(var(--gold-rgb),.4); }
.plan-label{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.plan.pop .plan-label{ color:var(--gold); }
.plan-name, .price-name{ font-size:21px; font-weight:800; margin-bottom:8px; letter-spacing:-.02em; color:var(--ink); }
.plan-name.muted, .price-name.muted{ color:var(--ink-soft); }
.plan-limit{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px; color:var(--ink-soft);
  padding:5px 10px; background:var(--chip-bg); border-radius:7px; display:inline-block; margin-bottom:18px;
}
.plan-price, .price-amount{ font-size:36px; font-weight:800; letter-spacing:-.03em; margin-bottom:4px; color:var(--ink); }
.plan-price .mo, .price-amount .per{ font-size:13.5px; color:var(--ink-soft); font-weight:450; }
.plan-price .free-text{ color:var(--gold); }
.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(--sky-accent); font-size:12px; flex-shrink:0; margin-top:2px; }
.plan-btn{
  display:block; text-align:center; padding:11px; border-radius:10px; font-weight:650; font-size:14px;
  text-decoration:none; transition:all .2s ease;
}
.plan-btn.solid, .btn-primary{ background:linear-gradient(135deg, var(--sky-accent), var(--gold)); color:var(--cta-text); }
.plan-btn.solid:hover, .btn-primary:hover{ opacity:.9; }
.plan-btn.outline{
  border:1px solid var(--glass-border); color:var(--ink);
  background:transparent; border-radius:10px;
}
.plan-btn.outline:hover{ border-color:var(--sky-accent); }
.price-badge{ }
.pricing-features{ }

/* ── 11. CTA + buttons ──────────────────────────────────────────────── */
.cta{ text-align:center; padding:110px 24px; }
.cta h2{ font-size:clamp(30px,5vw,50px); font-weight:800; letter-spacing:-.03em; color:var(--ink); margin:0; }
.cta-section{
  max-width:780px; margin:auto; padding:44px 32px; text-align:center; border-radius:24px;
  background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(16px);
}
.cta-section h2{ margin:0 0 10px; font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-.02em; 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:10px; padding:12px 26px;
  font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; transition:all .2s ease;
  background:linear-gradient(135deg, var(--sky-accent), var(--gold)); color:var(--cta-text);
}
.btn:hover{ opacity:.9; transform:translateY(-1px); }
.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(--sky-accent); opacity:1; }
.btn-sm{ padding:9px 16px; 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:24px; }
.price-card.current{ border-color:var(--sky-accent); box-shadow:0 0 0 1px var(--sky-accent) inset; }
.price-card .btn-current{
  width:100%; text-align:center; font-size:14px; padding:12px; display:block; box-sizing:border-box;
  border-radius:10px; border:1px dashed var(--accent-dim); background:rgba(var(--accent-rgb),.08);
  color:var(--sky-accent); 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:10px; 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 on glass */
input, select, textarea, .input{
  background:rgba(255,255,255,.75); color:var(--ink);
  border:1px solid var(--glass-border); border-radius:10px; padding:10px 14px;
  font-family:inherit; font-size:14px;
}
@media (prefers-color-scheme: dark){
  input, select, textarea, .input{ background:rgba(0,0,0,.25); }
}

/* ── 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);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
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);
}
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); }

/* ── 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 50px; }
  .features, .features-grid, .use-cases-grid, .workflow-steps, .steps{ grid-template-columns:1fr; }
  .steps{ max-width:340px; margin-left:auto; margin-right:auto; }
  section, .section{ padding:70px 20px; }
}
@media (max-width:640px){
  .hero h1{ font-size:clamp(30px,8vw,40px); }
  .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; }
  .agent-panel{ display:none; }
}

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