/* Shared stylesheet for the server-rendered content pages (/pricing, /faq, /terms, /privacy).
   Plain CSS, no Tailwind, no app JS: these pages are content-first and stay light for Core Web
   Vitals. Theme tokens are copied verbatim from index.html so the pages match the app in both
   modes. Dark lives on :root; light overrides on :root[data-theme="light"] (the default). */
:root {
  --surface-deep: #070c15;
  --surface: #0b111d;
  --surface-inset: #101a2b;
  --panel: #141d30;
  --border-soft: #1c2739;
  --border: #233047;
  --border-2: #31405c;
  --border-hover: #33435f;
  --faint: #64718a;
  --muted: #8b99b1;
  --muted-2: #a5b1c6;
  --text: #c6d0e2;
  --bright: #f1f4fa;
  --action-400: 143 179 255;
  --action-500: 133 172 255;
  --action-600: 110 155 255;
  --accent-400: 242 200 120;
  --accent-500: 237 189 92;
  --accent-600: 227 172 63;
  --ok-400: 52 211 153;
  --shadow-card: 0 10px 26px rgba(0,0,0,.40);
  --hero-glow: rgb(var(--action-600) / 0.16);
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="light"] {
  --surface-deep: #16203a;
  --surface: #eff2f8;
  --surface-inset: #e9eef5;
  --panel: #ffffff;
  --border-soft: #e2e8f1;
  --border: #d8e0eb;
  --border-2: #becad9;
  --border-hover: #b3c1d3;
  --faint: #8792a5;
  --muted: #5d6a7f;
  --muted-2: #47546b;
  --text: #26324b;
  --bright: #0e1524;
  --action-400: 21 55 155;
  --action-500: 26 70 198;
  --action-600: 30 80 224;
  --accent-400: 122 84 14;
  --accent-500: 143 98 16;
  --accent-600: 169 118 27;
  --ok-400: 11 138 96;
  --shadow-card: 0 8px 20px rgba(20,35,70,.08);
  --hero-glow: rgb(var(--action-600) / 0.09);
}
* { box-sizing: border-box; }
html { background: var(--surface); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  background-image: radial-gradient(56rem 30rem at 50% -6rem, var(--hero-glow), transparent 70%);
  background-repeat: no-repeat;
  line-height: 1.6;
}
a { color: rgb(var(--accent-500)); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Header / footer chrome */
header.site { border-bottom: 1px solid var(--border); }
header.site .bar, footer.site .bar {
  max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bright); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 28px; height: 28px; border-radius: 6px; background: rgb(var(--accent-600));
  color: var(--surface); font-weight: 800; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
header.site nav { display: flex; align-items: center; gap: 4px; }
header.site nav a, .themebtn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted);
  background: none; border: none; cursor: pointer;
}
header.site nav a:hover, .themebtn:hover { color: var(--bright); text-decoration: none; }
.themebtn { width: 36px; padding: 0; justify-content: center; font-size: 16px; }
/* !important on background too: header.site nav a { background:none } is more specific (0,1,3)
   than .nav-cta (0,1,0) and was stripping the button's fill, leaving light text invisible. */
.nav-cta {
  color: var(--surface) !important; background: rgb(var(--action-600)) !important;
  box-shadow: 0 4px 16px rgb(var(--action-600) / 0.30);
}
.nav-cta:hover { background: rgb(var(--action-500)) !important; color: var(--surface) !important; }

/* Header "More" dropdown (FAQ / Guide / Calculators). Native <details>, closes on outside click
   via a small script in each page. */
.moremenu { position: relative; }
.moremenu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted);
}
.moremenu > summary::-webkit-details-marker { display: none; }
.moremenu > summary::after { content: '\25BE'; margin-left: 5px; font-size: 9px; opacity: .8; }
.moremenu > summary:hover, .moremenu[open] > summary { color: var(--bright); }
.moremenu-panel {
  position: absolute; right: 0; top: 40px; z-index: 40; min-width: 168px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-card); padding: 6px;
}
/* Scoped with header.site (0,2,2) so it outranks `header.site nav a` (0,1,2), which
   otherwise forces these into inline-flex pills and makes them wrap 2-across. */
header.site .moremenu-panel a {
  display: block; width: 100%; height: auto; padding: 8px 12px; border-radius: 6px;
  font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap;
}
header.site .moremenu-panel a:hover { background: var(--surface-inset); color: var(--bright); text-decoration: none; }

footer.site { border-top: 1px solid var(--border); margin-top: 72px; }
footer.site .bar { height: auto; padding-top: 22px; padding-bottom: 30px; flex-wrap: wrap; }
footer.site, footer.site a { font-size: 13px; color: var(--faint); }
footer.site a:hover { color: var(--bright); }

/* Typography */
main { padding: 40px 0 8px; }
h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; color: var(--bright); margin: 8px 0 10px; font-weight: 700; }
h2 { font-size: 21px; color: var(--bright); margin: 40px 0 10px; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 16px; color: var(--bright); margin: 26px 0 8px; font-weight: 600; }
p { margin: 0 0 14px; }
ul { padding-left: 22px; margin: 0 0 14px; }
li { margin: 4px 0; }
.lead { font-size: 17px; color: var(--muted-2); margin-bottom: 8px; max-width: 640px; }
.kicker { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--accent-500)); font-weight: 700; margin: 0 0 6px; }
.updated { font-family: var(--font-mono); font-size: 13px; color: var(--faint); margin-bottom: 30px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }

/* FAQ accordions (copied from the app's .faq-item language) */
.faq-section { margin-top: 30px; }
.faq-section > .kicker { margin-bottom: 8px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--bright);
  list-style: none; display: flex; align-items: baseline; gap: 8px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+'; color: rgb(var(--accent-600)); font-weight: 700; flex-shrink: 0; }
.faq-item[open] summary::before { content: '\2212'; }
.faq-item .a { padding: 0 0 12px; color: var(--text); font-size: 15px; }
.faq-item .a p { margin: 0 0 10px; }

/* Call-to-action + free callout */
.cta-row { margin: 26px 0 8px; display: flex; flex-wrap: wrap; gap: 12px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px;
  border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.cta-primary { color: var(--surface); background: rgb(var(--action-600)); box-shadow: 0 4px 16px rgb(var(--action-600) / 0.30); }
.cta-primary:hover { background: rgb(var(--action-500)); color: var(--surface); text-decoration: none; }
.cta-ghost { color: var(--text); border: 1px solid var(--border-2); }
.cta-ghost:hover { border-color: rgb(var(--action-600) / 0.6); text-decoration: none; }
.callout {
  margin: 22px 0; border: 1px solid rgb(var(--accent-600) / 0.35);
  background: rgb(var(--accent-600) / 0.07); border-radius: 8px; padding: 16px 20px;
}
.callout .kicker { margin-bottom: 6px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 8px; }
.plan { border: 1px solid var(--border); border-radius: 10px; padding: 20px; background: var(--panel); box-shadow: var(--shadow-card); }
.plan.featured { border-color: rgb(var(--action-600) / 0.55); }
.plan .name { font-size: 16px; font-weight: 700; color: var(--bright); }
.plan.featured .name { color: rgb(var(--accent-500)); }
.plan .price { font-size: 26px; font-weight: 800; color: var(--bright); margin: 8px 0 2px; }
.plan .price span { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan .note { font-size: 13px; color: var(--faint); }
.plan .tag { font-size: 13px; color: var(--muted); margin: 10px 0 14px; min-height: 40px; }
.badge { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--surface); background: rgb(var(--action-600)); padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; }
table.pricing { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 14px; }
table.pricing th, table.pricing td { text-align: center; padding: 10px 10px; border-bottom: 1px solid var(--border); }
table.pricing th:first-child, table.pricing td:first-child { text-align: left; color: var(--text); }
table.pricing thead th { color: var(--bright); font-size: 15px; }
table.pricing tr.group td { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; font-weight: 700; color: rgb(var(--accent-500) / 0.9); padding-top: 22px; text-align: left; border-bottom: none; }
table.pricing .yes { color: rgb(var(--accent-500)); font-weight: 800; }
table.pricing .no { color: var(--border-hover); }

/* Tools: breadcrumb, calculators, hub grid (SEO Phase 2) */
.crumb { font-size: 13px; color: var(--faint); margin: 0 0 14px; }
.crumb a { color: var(--muted); }
.crumb span { color: var(--muted-2); }
.formula {
  font-family: var(--font-mono); font-size: 15px; color: var(--bright);
  background: var(--surface-inset); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 16px; margin: 14px 0; overflow-x: auto;
}
.formula sup { font-size: .7em; }

.calc {
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  box-shadow: var(--shadow-card); padding: 20px; margin: 22px 0 8px;
}
.calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field .l { font-size: 13px; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; gap: 8px; }
.field .u { color: var(--faint); font-weight: 500; }
.field input[type=number] {
  height: 42px; padding: 0 12px; font-size: 15px; font-family: var(--font-mono);
  color: var(--bright); background: var(--surface-inset);
  border: 1px solid var(--border-2); border-radius: 7px; width: 100%;
}
.field input[type=number]:focus { outline: none; border-color: rgb(var(--action-600)); }
.field .hint { font-size: 12px; color: var(--faint); }
.field-check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--text); font-weight: 600; cursor: pointer; align-self: end; height: 42px; }
.field-check input { width: 16px; height: 16px; accent-color: rgb(var(--action-600)); }

.calc-out { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 8px; }
.calc-out .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.calc-out .row:last-child { border-bottom: none; }
.calc-out .rl { font-size: 14px; color: var(--muted); }
.calc-out .rv { font-size: 18px; font-weight: 700; font-family: var(--font-mono); color: var(--bright); }
.calc-out .row.primary .rl { color: var(--text); font-weight: 600; }
.calc-out .row.primary .rv { font-size: 28px; color: rgb(var(--accent-500)); }
.calc-out .rv.good { color: rgb(var(--ok-400)); }
.calc-out .rv.bad { color: #e5484d; }
.calc-note { font-size: 12px; color: var(--faint); margin: 12px 0 0; }

.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0 8px; }
.tool-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 18px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  box-shadow: var(--shadow-card); color: var(--text);
}
.tool-card:hover { border-color: rgb(var(--action-600) / 0.55); text-decoration: none; }
.tc-name { font-size: 15px; font-weight: 700; color: var(--bright); }
.tool-card:hover .tc-name { color: rgb(var(--accent-500)); }
.tc-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.tc-step { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--accent-500)); }

/* Guide article prev/next nav */
.guide-nav { display: flex; justify-content: space-between; gap: 12px; margin: 34px 0 0; }
.guide-nav .gn {
  display: flex; flex-direction: column; gap: 2px; max-width: 48%;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--bright); font-weight: 600; font-size: 14px;
}
.guide-nav .gn:hover { border-color: rgb(var(--action-600) / 0.55); text-decoration: none; }
.guide-nav .gn span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.guide-nav .gn.next { text-align: right; margin-left: auto; }
ul.related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
ul.related li { margin: 0; }

/* Highlight cards (the "Key Features" grid at the top of /features) */
.hl-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0 10px; }
.hl-card { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; padding:16px 18px; background:var(--panel); box-shadow:var(--shadow-card); }
.hl-ic { width:34px; height:34px; border-radius:9px; background:rgb(var(--accent-600) / 0.14); color:rgb(var(--accent-600)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; margin-bottom:11px; }
.hl-t { font-size:15px; font-weight:700; color:var(--bright); line-height:1.28; }
.hl-d { font-size:13.5px; color:var(--muted); margin-top:5px; line-height:1.5; }

/* Feature list (checkmark bullets) on the /features hub */
ul.featlist { list-style:none; padding:0; margin:14px 0 24px; display:flex; flex-direction:column; gap:14px; }
ul.featlist li { position:relative; padding-left:32px; font-size:16px; line-height:1.55; color:var(--text); }
ul.featlist li::before { content:'\2713'; position:absolute; left:0; top:0; color:rgb(var(--accent-500)); font-weight:800; font-size:17px; }
ul.featlist li strong { color:var(--bright); font-weight:700; }

/* Support gatekeeper chat (FAQ page) */
.support { margin: 18px 0 8px; }
.support-thread { display:flex; flex-direction:column; gap:10px; }
.support-thread:empty { display:none; }
.support-bubble { max-width:90%; padding:11px 14px; border-radius:12px; font-size:14.5px; line-height:1.55; }
.support-bubble.user { align-self:flex-end; background:rgb(var(--action-600)); color:var(--surface); border-bottom-right-radius:4px; }
.support-bubble.assistant { align-self:flex-start; background:var(--surface-inset); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; }
.support-bubble.assistant strong { color:var(--bright); }
.support-input { display:flex; gap:10px; margin-top:12px; }
.support-input input { flex:1; height:44px; padding:0 14px; font-size:15px; color:var(--bright); background:var(--surface-inset); border:1px solid var(--border-2); border-radius:8px; }
.support-input input:focus { outline:none; border-color:rgb(var(--action-600)); }
.support-input button { height:44px; padding:0 22px; border:none; border-radius:8px; background:rgb(var(--action-600)); color:var(--surface); font-weight:700; font-size:14px; cursor:pointer; }
.support-input button:hover { background:rgb(var(--action-500)); }
.support-input button:disabled { opacity:.6; cursor:default; }

/* Feature screenshots gallery */
.shots { display: flex; flex-direction: column; gap: 24px; margin: 8px 0 20px; }
.shot { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-card); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 12px 16px; font-size: 13px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--border); }
.shot figcaption strong { color: var(--bright); font-weight: 600; }

@media (max-width: 720px) {
  h1 { font-size: 27px; }
  .plans { grid-template-columns: 1fr; }
  header.site nav a.hide-sm { display: none; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.pricing { min-width: 560px; }
  .calc-grid, .tool-grid { grid-template-columns: 1fr; }
}
/* Phones only: brand + Pricing + More + toggle + CTA overrun a ~375px row, forcing
   sideways scroll. The header CTA is redundant with each page's hero CTA, so drop just
   it below 520px (tablets keep it). Specificity 0,2,2 beats `header.site nav a`. */
@media (max-width: 520px) {
  header.site nav .nav-cta { display: none; }
}