/* Red Urchin — marketing site
   Palette and type lifted directly from the app's styles.css so the
   website reads as the same product, not a separate brand. */
:root {
  --accent: #c2313a;
  --accent-dark: #9c2731;
  --accent-soft: #fdf2f2;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-soft: #f3f4f6;
  --head-bg: #f9fafb;
  --sel: #fde8e9;
  --radius: 10px;
  --radius-lg: 18px;
  --max: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #fff; color: var(--ink); }
body { font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: var(--accent); }
img, svg { display: block; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 8px; padding: 10px 20px; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; transition: all .12s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn.lg { padding: 13px 28px; font-size: 16px; border-radius: 10px; }
.btn.block { width: 100%; }

/* ---------- top nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: #fff;
  border-bottom: 2px solid var(--accent);
}
.nav {
  display: flex; align-items: center; gap: 8px; padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 19px; }
.brand span.mark { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 36px; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px;
  padding: 8px 14px; border-radius: 8px;
}
.nav-links a:hover { background: var(--line-soft); color: var(--ink); }
.nav-links a.active { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }

@media (max-width: 800px) {
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column;
    align-items: stretch; border-bottom: 1px solid var(--line); padding: 8px 24px 16px; display: none; margin-left: 0; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 8px; }
  .nav-toggle {
    display: flex; margin-left: auto; border: 1px solid var(--line); background: #fff; border-radius: 8px;
    padding: 8px 10px; color: var(--ink);
  }
  .nav-cta { margin-left: 10px; }
  .nav-cta .btn:not(.primary) { display: none; }
  .site-header { position: sticky; }
  .nav { position: relative; flex-wrap: wrap; }
}

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(160deg, #fff 0%, var(--accent-soft) 100%);
  padding: 84px 0 90px;
  border-bottom: 1px solid var(--line);
}
.hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: var(--accent); background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 14px; margin-bottom: 18px;
}
.hero h1 { font-size: 44px; letter-spacing: -0.02em; }
.hero p.lead { font-size: 18px; color: var(--muted); max-width: 46ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
/* Credibility, not fine print. Sits directly above the CTA so it is read on the
   way to the button, and is coloured rather than muted so it does not disappear
   into the same grey as the price note beneath. 15 years and tens of thousands
   of users is the strongest thing we can say, and it was being whispered. */
.hero-proof {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--accent-dark);
  letter-spacing: .01em;
}
.hero-proof strong { font-weight: 700; }

@media (max-width: 800px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
  .hero { padding: 48px 0 56px; text-align: center; }
  .hero p.lead { max-width: none; margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
}

/* ---------- app preview mock ---------- */
.app-mock {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.08); overflow: hidden;
}
.app-mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--head-bg); }
.app-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.app-mock-body { padding: 16px; }
.mock-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.mock-tab { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px 6px 0 0; color: var(--muted); }
.mock-tab.sel { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.mock-section { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.mock-sec-head { background: var(--head-bg); color: var(--accent); font-weight: 700; font-size: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.mock-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12px; border-bottom: 1px solid var(--line-soft); }
.mock-row:last-child { border-bottom: none; }
.mock-prio { font-weight: 700; color: var(--accent); width: 22px; }
.mock-row.done { color: #9ca3af; text-decoration: line-through; }

/* ── Hero demo loop ─────────────────────────────────────────────────────────
   The A/B renumbering — the moment the product makes sense — animated in the
   mock rather than recorded as video. No megabytes in front of the LCP element,
   no PII to scrub, nothing to re-record when the UI moves, and it loops
   seamlessly because CSS returns to its start.

   One 12s timeline. Every element animates against the same percentages:

     0–15%   rest: A1, A2, A3 and a blank entry line
     15–22%  "A1" types into the blank line
     22–28%  its title appears
     32–36%  everything below renumbers: A1→A2, A2→A3, A3→A4
     38–43%  the "next task" marker moves to the new row
     43–75%  hold, long enough to read
     75–83%  fade back
     83–100% rest again

   Four iterations, then it settles on the finished state — enough for anyone
   who looks, without animating on someone's battery indefinitely. Change
   `4` to `infinite` below if you would rather it never stopped.          */

.ru-demo { --ru-t: 12s; --ru-n: 4; }

.ru-demo .mock-prio { position: relative; display: inline-block; width: 22px; }

/* before / after priority codes, stacked so nothing reflows when they swap */
.ru-demo .ru-now { position: absolute; left: 0; top: 0; opacity: 0; }

.ru-demo .ru-was { animation: ru-was var(--ru-t) linear var(--ru-n) forwards; }
.ru-demo .ru-now { animation: ru-now var(--ru-t) linear var(--ru-n) forwards; }

@keyframes ru-was { 0%, 32% { opacity: 1 } 36%, 75% { opacity: 0 } 82%, 100% { opacity: 1 } }
@keyframes ru-now { 0%, 32% { opacity: 0 } 36%, 75% { opacity: 1 } 82%, 100% { opacity: 0 } }

/* the blank entry line the app really has, so the row costs no layout shift */
.ru-demo .ru-type {
  display: inline-block; overflow: hidden; white-space: nowrap;
  vertical-align: bottom; width: 0;
  animation: ru-type var(--ru-t) steps(2, end) var(--ru-n) forwards;
}
@keyframes ru-type { 0%, 15% { width: 0 } 22%, 75% { width: 2ch } 82%, 100% { width: 0 } }

.ru-demo .ru-title { opacity: 0; }
@keyframes ru-title { 0%, 22% { opacity: 0 } 28%, 75% { opacity: 1 } 82%, 100% { opacity: 0 } }

/* The lowest uncompleted A# is the next thing to do, and the app shows that by
   setting the task title to font-weight 700 — see the `bold` prop on TaskRow in
   app/src/tdt.jsx. Nothing else marks it: no bar, no highlight, no icon. The
   mock has to do the same thing or it is advertising an affordance that does
   not exist in the product. */
.ru-demo .ru-bold-out { font-weight: 700; animation: ru-bold-out var(--ru-t) linear var(--ru-n) forwards; }
/* Both animations in ONE declaration: these two classes share a span, and two
   competing `animation` shorthands would mean the later rule silently wins. */
.ru-demo .ru-bold-in { font-weight: 400; }
.ru-demo .ru-title.ru-bold-in {
  animation: ru-title var(--ru-t) linear var(--ru-n) forwards,
             ru-bold-in var(--ru-t) linear var(--ru-n) forwards;
}

@keyframes ru-bold-out { 0%, 38% { font-weight: 700 } 43%, 75% { font-weight: 400 } 82%, 100% { font-weight: 700 } }
@keyframes ru-bold-in  { 0%, 38% { font-weight: 400 } 43%, 75% { font-weight: 700 } 82%, 100% { font-weight: 400 } }

/* Someone who has asked for less motion still gets the point — they just get
   the finished state, held still, instead of the transition. */
@media (prefers-reduced-motion: reduce) {
  .ru-demo .ru-was,
  .ru-demo .ru-now,
  .ru-demo .ru-type,
  .ru-demo .ru-title,
  .ru-demo .ru-bold-out,
  .ru-demo .ru-title.ru-bold-in { animation: none; }
  .ru-demo .ru-was { opacity: 0; }
  .ru-demo .ru-now { opacity: 1; }
  .ru-demo .ru-type { width: 2ch; }
  .ru-demo .ru-title { opacity: 1; }
  .ru-demo .ru-bold-out { font-weight: 400; }
  .ru-demo .ru-bold-in { font-weight: 700; }
}
.mock-dot-status { width: 8px; height: 8px; border-radius: 50%; background: #34d399; margin-left: auto; }

/* ---------- sections ---------- */
section { padding: 76px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head .eyebrow { color: var(--accent); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.section-head h2 { font-size: 32px; letter-spacing: -0.01em; }
.section-alt { background: var(--head-bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* feature grid */
.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; background: #fff;
  transition: box-shadow .15s, border-color .15s;
}
.card:hover { border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.card .ic {
  width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.card .ic svg { width: 22px; height: 22px; }
.card h3 { font-size: 17px; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 14px; margin-bottom: 0; }

/* how it works steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { text-align: center; padding: 0 8px; }
.step .num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.step h4 { font-size: 15px; margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--muted); margin: 0; }

/* pricing */
.price-wrap { display: flex; justify-content: center; }
.price-card {
  border: 2px solid var(--accent); border-radius: var(--radius-lg); background: #fff;
  padding: 40px 44px; max-width: 440px; width: 100%; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}
.billing-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 20px; padding: 3px; margin-bottom: 22px;
  background: var(--head-bg);
}
.bt-opt {
  border: none; background: none; padding: 7px 16px; border-radius: 16px; font-weight: 600; font-size: 13.5px;
  color: var(--muted); cursor: pointer;
}
.bt-opt.sel { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.bt-opt .bt-save { font-weight: 700; color: #047857; margin-left: 4px; }
.bt-opt.sel .bt-save { color: #047857; }
.price-badge {
  display: inline-block; background: var(--accent-soft); color: var(--accent); font-weight: 700;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; border-radius: 20px; padding: 5px 14px; margin-bottom: 18px;
}
.price-amount { font-size: 52px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.price-amount span { font-size: 16px; font-weight: 600; color: var(--muted); }
.price-list { list-style: none; padding: 0; margin: 28px 0; text-align: left; }
.price-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.price-list li:last-child { border-bottom: none; }
.price-list .check { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #ecfdf5; color: #047857; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.price-list .check svg { width: 11px; height: 11px; }
.price-note { font-size: 13px; color: var(--muted); margin-top: 18px; }

/* ── Comparison pages ───────────────────────────────────────────────────────
   Deliberately plain. The persuasive work is done by admitting where the other
   product wins; a table that visually shouts undermines that. */
.cmp-wrap { overflow-x: auto; margin: 18px 0 10px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.cmp-table th, .cmp-table td {
  text-align: left; vertical-align: top; padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.cmp-table thead th { font-size: 13px; color: var(--muted); border-bottom: 2px solid var(--line); }
.cmp-table thead th:nth-child(2) { color: var(--accent); }
.cmp-table tbody th { font-weight: 600; width: 26%; color: var(--ink); }
.cmp-table .cmp-ru { background: var(--accent-soft); }

/* the site's tick list, without the card padding, for the "choose X if" lists */
.price-list.plain { margin: 14px 0 4px; padding: 0; }
.price-list.plain li { align-items: flex-start; padding: 7px 0; border: 0; }
.price-list.plain .check {
  background: none; color: var(--accent); width: auto; height: auto;
  margin-right: 10px; font-weight: 700; flex: 0 0 auto;
}

/* the comparison prompt on the homepage */
.cmp-prompt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  justify-content: center; padding: 18px 20px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
}
.cmp-prompt p { margin: 0; font-size: 14px; color: var(--ink); }
.cmp-prompt .cmp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-prompt .cmp-links a {
  font-size: 13px; font-weight: 600; color: var(--accent-dark);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  text-decoration: none; white-space: nowrap;
}
.cmp-prompt .cmp-links a:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ── Install instructions ──────────────────────────────────────────────── */
.install-grid {
  display: grid; gap: 14px; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.install-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; background: #fff;
}
.install-card h3 { margin: 0 0 8px; font-size: 15px; color: var(--accent-dark); }
.install-card p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.install-card p:last-child { margin-bottom: 0; }
/* Reassurance directly beneath a call to action — price risk is the top unstated
   objection, and answering it at the point of click is worth several points of
   conversion. Same sentence everywhere, deliberately. */
.cta-note { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }
.price-card .cta-note { margin-top: 10px; }

.faq-note {
  max-width: 700px; margin: 40px auto 0; border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 18px 22px; font-size: 14px; color: var(--muted); text-align: center;
}

/* FAQ / support accordion */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 4px; font-weight: 600; font-size: 15.5px; color: var(--ink);
}
.faq-q .chev { color: var(--accent); transition: transform .15s; flex: none; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .2s ease; color: var(--muted); font-size: 14.5px; }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a p { padding: 0 4px 18px; margin: 0; }

/* support channels */
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }

/* forms */
.form-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; max-width: 620px; margin: 0 auto;
  background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.06);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px;
  font: inherit; background: var(--head-bg); outline: none; transition: border-color .12s, background .12s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.form-note { font-size: 12.5px; color: var(--muted); }
.form-error { color: #b91c1c; font-size: 13px; margin: 14px 0 0; }
.form-success {
  border: 1px solid #a7f3d0; border-radius: var(--radius-lg); padding: 40px; max-width: 620px; margin: 0 auto;
  background: #ecfdf5; text-align: center;
}
.form-success h3 { color: #047857; font-size: 19px; margin-bottom: 8px; }
.form-success p { color: #047857; margin: 0; }

/* CTA banner */
.cta-band {
  background: var(--accent); color: #fff; text-align: center; padding: 64px 0;
}
.cta-band h2 { font-size: 30px; }
.cta-band p { color: #fde8e9; font-size: 16px; }
.cta-band .btn { background: #fff; color: var(--accent); border-color: #fff; }
.cta-band .btn:hover { background: var(--accent-soft); }
.cta-band .btn.ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.cta-band .btn.ghost:hover { border-color: #fff; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 28px; background: #fff; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media (max-width: 800px) { .footer-top { grid-template-columns: 1fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; text-decoration: none; color: var(--ink); }

/* Wordmark treatment — matches the app exactly (see app/src/styles.css .brand b) */
.logo, .brand, .footer-brand {
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700; color: #c2313a; text-transform: lowercase;
}
.footer-col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--ink); text-decoration: none; font-size: 14px; margin-bottom: 10px; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  border-top: 1px solid var(--line-soft); padding-top: 20px; font-size: 13px; color: var(--muted);
}

/* ---------- help center ---------- */
.help-search-wrap { max-width: 560px; margin: 0 auto 8px; position: relative; }
.help-search-wrap svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.help-search {
  width: 100%; border: 1px solid var(--line); border-radius: 24px; padding: 12px 16px 12px 42px;
  font: inherit; outline: none; background: #fff;
}
.help-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.help-search-results {
  max-width: 560px; margin: 10px auto 0; text-align: left; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: #fff; display: none;
}
.help-search-results.show { display: block; }
.help-search-results a {
  display: block; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink);
}
.help-search-results a:last-child { border-bottom: none; }
.help-search-results a:hover { background: var(--accent-soft); }
.help-search-results .cat-lbl { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-right: 8px; }
.help-search-empty { padding: 14px 16px; color: var(--muted); font-size: 14px; }

.help-crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.help-crumbs a { color: var(--muted); text-decoration: none; }
.help-crumbs a:hover { color: var(--accent); }

.help-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .help-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .help-cat-grid { grid-template-columns: 1fr; } }
.help-cat-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; background: #fff; text-decoration: none;
  color: var(--ink); display: block; transition: box-shadow .15s, border-color .15s;
}
.help-cat-card:hover { border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.help-cat-card .ic {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.help-cat-card .ic svg { width: 20px; height: 20px; }
.help-cat-card h3 { font-size: 16px; margin-bottom: 4px; }
.help-cat-card p { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.help-cat-card .count { font-size: 12px; font-weight: 700; color: var(--accent); }

.help-article-list { max-width: 780px; margin: 0 auto; }
.help-article-row {
  display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: var(--ink);
}
.help-article-row:hover .help-article-title { color: var(--accent); }
.help-article-row .ic { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.help-article-row .ic svg { width: 17px; height: 17px; }
.help-article-title { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.help-article-summary { font-size: 13px; color: var(--muted); }
.help-article-chev { margin-left: auto; color: var(--muted); flex: none; }

.help-article-body { max-width: 720px; margin: 0 auto; }
.help-article-body h1 { font-size: 28px; margin-bottom: 10px; }
.help-article-body .help-summary { font-size: 15px; color: var(--muted); margin-bottom: 28px; }
.help-article-body .prose p { margin-bottom: 14px; font-size: 15px; }
.help-article-body .prose ul { margin: 0 0 14px; padding-left: 20px; }
.help-article-body .prose li { margin-bottom: 6px; font-size: 15px; }
.help-article-body .prose code { background: var(--head-bg); border-radius: 4px; padding: 1px 6px; font-size: 13px; }
.help-article-body .prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); margin: 4px 0 20px; }
.help-article-foot { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 20px; }

.related-list { list-style: none; padding: 0; margin: 10px 0 0; }
.related-list li { margin-bottom: 8px; }
.related-list a { text-decoration: none; font-size: 14px; font-weight: 600; }
.related-list a:hover { text-decoration: underline; }
.help-article-layout { display: grid; grid-template-columns: 1fr 200px; gap: 40px; align-items: start; }
#help-related { border-left: 1px solid var(--line); padding-left: 24px; }
@media (max-width: 720px) {
  .help-article-layout { grid-template-columns: 1fr; }
  #help-related { display: none; }
}

/* ---------- news ---------- */
.news-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } }
.news-card {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px;
  background: #fff; color: var(--ink); height: 100%;
}
.news-card h3 { font-size: 17px; margin-bottom: 10px; line-height: 1.35; }
.news-card h3 a { color: var(--ink); text-decoration: none; transition: color .12s; }
.news-card h3 a:hover, .news-card h3 a:focus-visible { color: var(--accent); text-decoration: underline; }
.news-card p.news-summary {
  color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.news-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.news-tag {
  display: inline-block; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-radius: 20px; padding: 3px 10px;
}
.news-date { font-size: 12.5px; color: var(--muted); }
.news-card-img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: calc(var(--radius-lg) - 6px); margin-bottom: 14px;
}

.news-article-body { max-width: 720px; margin: 0 auto; }
.news-article-body h1 { font-size: 30px; margin: 4px 0 24px; }
.news-article-body .article-hero-img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); margin: 0 0 24px;
}
.news-article-body .prose p { margin-bottom: 14px; font-size: 15px; }
.news-article-body .prose ul { margin: 0 0 14px; padding-left: 20px; }
.news-article-body .prose li { margin-bottom: 6px; font-size: 15px; }
.news-article-body .prose code { background: var(--head-bg); border-radius: 4px; padding: 1px 6px; font-size: 13px; }
.news-article-body .prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); margin: 4px 0 20px; }

/* misc */
.tag { display: inline-block; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; border-radius: 20px; padding: 4px 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.badge-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.badge-list span { font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; }

/* ---------- funnel comparison (how it works) ---------- */
.funnel-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
@media (max-width: 800px) { .funnel-compare { grid-template-columns: 1fr; } }
.funnel-panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 26px 22px 30px;
  text-align: center; transition: box-shadow .15s, border-color .15s;
}
.funnel-panel.is-urchin { border-color: var(--accent); box-shadow: 0 18px 50px rgba(0,0,0,.07); }
.funnel-panel .funnel-label {
  display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 20px; padding: 5px 14px; margin-bottom: 6px;
  background: var(--line-soft); color: var(--muted);
}
.funnel-panel.is-urchin .funnel-label { background: var(--accent-soft); color: var(--accent); }
.funnel-panel h3 { font-size: 18px; margin: 10px 0 6px; }
.funnel-panel p { color: var(--muted); font-size: 14px; max-width: 34ch; margin: 0 auto 18px; }
.funnel-panel img { max-width: 100%; max-height: 340px; width: auto; height: auto; margin: 0 auto; }

/* diagram panel — one card treatment for every system diagram, site-wide.
   Images are capped by HEIGHT so portrait and landscape diagrams sit at a
   comparable visual weight instead of filling their column. */
.diagram-figure {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
  padding: 24px 22px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: box-shadow .15s, border-color .15s;
}
.diagram-figure:hover { border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.diagram-figure img { max-width: 100%; max-height: 280px; width: auto; height: auto; margin: 0 auto; }
.diagram-figure figcaption { color: var(--muted); font-size: 13px; margin-top: 16px; max-width: 42ch; }
.diagram-figure.is-tall img { max-height: 400px; }
.diagram-figure.diagram-wide { max-width: 860px; }
@media (max-width: 620px) {
  .diagram-figure img, .diagram-figure.is-tall img, .funnel-panel img { max-height: 300px; }
}

/* ---------- system guide page ---------- */
.system-layout { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: start; }
.system-toc { position: sticky; top: 92px; border-right: 1px solid var(--line); padding-right: 20px; }
.system-toc h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }
.system-toc ul { list-style: none; margin: 0; padding: 0; }
.system-toc li { margin-bottom: 2px; }
.system-toc a { display: block; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.system-toc a:hover { background: var(--line-soft); color: var(--ink); }
@media (max-width: 860px) {
  .system-layout { grid-template-columns: 1fr; }
  .system-toc { position: static; border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 18px; margin-bottom: 10px; }
  .system-toc ul { display: flex; flex-wrap: wrap; gap: 4px; }
}

.system-body { max-width: 720px; }
.system-body h2 { font-size: 25px; margin: 48px 0 14px; scroll-margin-top: 92px; }
.system-body > h2:first-of-type { margin-top: 0; }
.system-body h3 { font-size: 19px; margin: 30px 0 10px; scroll-margin-top: 92px; }
.system-body p { margin-bottom: 15px; font-size: 15.5px; line-height: 1.7; }
.system-body ul { margin: 0 0 16px; padding-left: 22px; }
.system-body li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.65; }
.system-body strong { color: var(--ink); }
.system-body figure {
  margin: 28px 0 32px; text-align: center; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 20px;
}
.system-body figure img { display: block; max-width: 100%; max-height: 420px; width: auto; height: auto; margin: 0 auto; }
.system-body figure.tall img { max-height: 600px; }
@media (max-width: 620px) { .system-body figure img, .system-body figure.tall img { max-height: 340px; } }
.system-body figcaption { color: var(--muted); font-size: 13px; margin-top: 10px; }
.system-callout {
  border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px; margin: 26px 0; font-size: 17.5px; font-weight: 700; color: var(--ink); line-height: 1.5;
}