/* ClearStatement — shared marketing stylesheet
 * Depends on clear-statement-tokens.css, which must be linked first.
 * Serves index.html, help.html, terms.html and privacy.html.
 *
 * FIELD CONTRAST — measured, not assumed. Every bold field below carries
 * only text that clears AA against it:
 *   ink   #080914  white 19.82  neutral-300 13.62  amber-300 12.93  amber-500 8.74
 *   blue  #43597C  white  7.10  neutral-50   6.74  neutral-300 4.88  amber-300 4.63
 *   amber #E2A000  ink    8.74
 * Ink text on blue is 2.79 and white text on amber is 2.27. Neither is used.
 */

/* ---------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--cs-font-sans);
  font-size: var(--cs-text-base);
  line-height: var(--cs-leading-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
a.logo:hover { text-decoration: none; }

h1, h2, h3 {
  margin: 0;
  font-weight: var(--cs-weight-semibold);
  line-height: var(--cs-leading-tight);
  letter-spacing: var(--cs-tracking-tight);
}

p { margin: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--cs-radius-sm);
}

/* One page container, used by .wrap and matched by the nav so the logo lines
   up with the content below it rather than sitting at the viewport edge. */
:root { --page-max: 1120px; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--cs-space-5);
}

/* ---------------------------------------------------------------- logo -- */
/* Two drawings, two jobs. The roundel is solid and holds down to 16px, so it
 * takes every small slot. The hairline mark has a 1/24 stroke and breaks up
 * below roughly 40px, so it is only ever used large. Never substitute one for
 * the other. Clearspace follows --cs-logo-clearspace-horizontal. */

/* Exact spec, taken from CS_Horizontal_Black.svg. Set --lockup (the CLEAR
 * font-size in px) and everything else follows:
 *   CLEAR      Outfit SemiBold 600, tracking 0.1em
 *   STATEMENT  Outfit ExtraLight 200, tracking 0.1em, 0.5277 of CLEAR
 *   baselines  0.5948 of CLEAR apart      mark height  1.635 of CLEAR
 *   mark gap   0.4374 of mark height      indent       0.0901 of CLEAR
 * Weight 200 must be in the Outfit request or the browser fakes it.
 * Both lines carry the same 0.1em tracking — STATEMENT is NOT tracked out to
 * match CLEAR's width. Their widths are close by coincidence, not by rule. */

.logo {
  --lockup: 22px;
  display: flex;
  color: var(--text-primary); /* the nav lockup is a link on some pages; keep it ink, not link blue */
  text-decoration: none;
  align-items: center;
  gap: calc(var(--lockup) * 1.635 * 0.4374);
}

.logo-mark {
  display: block;
  width: calc(var(--lockup) * 1.635);
  height: calc(var(--lockup) * 1.635);
  min-width: var(--cs-logo-min-roundel);
  flex: none;
  overflow: visible; /* the disc touches the viewBox edge; don't let it shave off a pixel */
  color: var(--surface-inverse);      /* disc */
  --cs-knockout: var(--text-inverse); /* monogram */
}

/* The hairline drawing is taller than it is wide (77.89 x 91.64). */
.logo-mark--lg {
  width: calc(var(--lockup) * 1.635 * 0.85);
  height: calc(var(--lockup) * 1.635);
  min-width: 40px; /* never below the cutover */
}

.logo-word { display: grid; line-height: 1; text-transform: uppercase; }

.logo-word b {
  font-size: var(--lockup);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.logo-word span {
  font-size: calc(var(--lockup) * 0.5277);
  font-weight: 200;
  letter-spacing: 0.1em;
  /* baseline gap 0.5948 of CLEAR, less the cap height already occupied */
  margin-top: calc(var(--lockup) * 0.16);
  margin-left: calc(var(--lockup) * 0.0901);
}

/* ----------------------------------------------------------------- nav -- */

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-4);
  padding-block: var(--cs-space-4);
  /* inset to the page container; falls back to a plain gutter below 1120px */
  padding-inline: max(
    var(--cs-space-5),
    calc((100% - var(--page-max)) / 2 + var(--cs-space-5))
  );
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-right { display: flex; align-items: center; gap: var(--cs-space-2); }

.nav-login { padding: var(--cs-space-2) var(--cs-space-3); color: var(--text-secondary); font-weight: var(--cs-weight-medium); font-size: var(--cs-text-sm); }
.nav-login:hover { color: var(--text-primary); text-decoration: none; }

/* --------------------------------------------------------- action bits -- */

.btn-primary, .nav-cta, .price-cta {
  display: inline-block;
  padding: var(--cs-space-3) var(--cs-space-6);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  border: 1px solid transparent;
  border-radius: var(--cs-radius-md);
  font-weight: var(--cs-weight-medium);
  font-size: var(--cs-text-sm);
  transition: background var(--cs-duration-fast) var(--cs-ease);
}
.btn-primary:hover, .nav-cta:hover, .price-cta:hover { background: var(--action-primary-bg-hover); text-decoration: none; }

.btn-secondary {
  display: inline-block;
  padding: var(--cs-space-3) var(--cs-space-6);
  background: transparent;
  color: var(--action-secondary-fg);
  border: 1px solid var(--action-secondary-border);
  border-radius: var(--cs-radius-md);
  font-weight: var(--cs-weight-medium);
  font-size: var(--cs-text-sm);
  transition: background var(--cs-duration-fast) var(--cs-ease);
}
.btn-secondary:hover { background: var(--action-secondary-bg-hover); text-decoration: none; }

/* On the ink hero, actions invert: amber fill with ink text (8.74). */
.on-ink .btn-primary { background: var(--action-brand-bg); color: var(--action-brand-fg); }
.on-ink .btn-primary:hover { background: var(--action-brand-bg-hover); }
.on-ink .btn-secondary { color: var(--text-inverse); border-color: var(--cs-neutral-700); }
.on-ink .btn-secondary:hover { background: var(--cs-neutral-900); }

.btn-primary, .btn-secondary, .nav-cta, .price-cta { white-space: nowrap; }

/* ---------------------------------------------------------------- hero -- */

.hero {
  background: var(--cs-blue);
  color: var(--text-inverse);
  padding-block: var(--cs-space-16) var(--cs-space-20);
  text-align: center;
}

.hero-tag {
  display: inline-block;
  padding: var(--cs-space-1) var(--cs-space-4);
  background: var(--surface-brand);
  color: var(--text-on-brand);
  border-radius: var(--cs-radius-full);
  font-size: var(--cs-text-xs);
  font-weight: var(--cs-weight-semibold);
}

.hero h1 { max-width: 20ch; margin: var(--cs-space-6) auto var(--cs-space-5); font-size: var(--cs-text-3xl); }
.hero h1 span { color: var(--cs-amber-300); }   /* 4.63 on blue: display size, so AA large-text */

.hero p { max-width: 58ch; margin-inline: auto; color: var(--cs-neutral-200); font-size: var(--cs-text-lg); line-height: var(--cs-leading-relaxed); }

.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cs-space-3); margin-block: var(--cs-space-8) var(--cs-space-4); }

.hero-note { color: var(--cs-neutral-200); font-size: var(--cs-text-sm); }   /* 5.68 on blue */
/* On the blue hero the slate border used on ink disappears (1.1:1). */
.hero .btn-secondary { border-color: rgba(255, 255, 255, 0.6); }
.hero .btn-secondary:hover { background: rgba(8, 9, 20, 0.2); }

/* ------------------------------------------------------------- showcase -- */

.showcase { padding-block: 0 var(--cs-space-16); }

.panel {
  margin-top: calc(var(--cs-space-12) * -1);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--cs-radius-xl);
  box-shadow: var(--cs-shadow-lg);
  overflow: hidden;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cs-space-2) var(--cs-space-4);
  padding: var(--cs-space-4) var(--cs-space-6);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}
.panel-head strong { font-size: var(--cs-text-sm); font-weight: var(--cs-weight-semibold); }
.panel-head span { color: var(--text-tertiary); font-size: var(--cs-text-xs); }

.panel-cols { display: grid; grid-template-columns: 1fr; }
.panel-col { padding: var(--cs-space-5) var(--cs-space-6); }
.panel-col + .panel-col { border-top: 1px solid var(--border-subtle); }

.col-label {
  margin-bottom: var(--cs-space-4);
  color: var(--text-tertiary);
  font-size: var(--cs-text-2xs);
  font-weight: var(--cs-weight-semibold);
  letter-spacing: var(--cs-tracking-wide);
  text-transform: uppercase;
}

.txn {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px var(--cs-space-4);
  padding-block: var(--cs-space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--cs-text-sm);
}
.txn:last-child { border-bottom: 0; }

.txn-desc { font-weight: var(--cs-weight-medium); }
.txn-amt { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-secondary); }
.txn-amt.in { color: var(--cs-success-fg); }

.txn-cat {
  grid-column: 1;
  justify-self: start;
  padding: 1px var(--cs-space-2);
  background: var(--cs-neutral-100);
  border-radius: var(--cs-radius-sm);
  color: var(--text-secondary);
  font-size: var(--cs-text-2xs);
  font-weight: var(--cs-weight-medium);
}
.txn-cat.flag { background: var(--cs-warning-surface); border: 1px solid var(--cs-amber-200); color: var(--cs-amber-800); }

.txn-fix { grid-column: 2; justify-self: end; color: var(--text-link); font-size: var(--cs-text-2xs); font-weight: var(--cs-weight-semibold); }

.total-head, .total { display: grid; grid-template-columns: 1fr auto auto; gap: var(--cs-space-4); }

.total-head {
  padding-bottom: var(--cs-space-2);
  color: var(--text-tertiary);
  font-size: var(--cs-text-2xs);
  letter-spacing: var(--cs-tracking-wide);
  text-transform: uppercase;
}
.total-head span:not(:first-child) { text-align: right; }

.total { align-items: baseline; padding-block: var(--cs-space-2); font-size: var(--cs-text-sm); }
.total + .total { border-top: 1px solid var(--border-subtle); }
.total-name { color: var(--text-secondary); }
.total-avg { font-variant-numeric: tabular-nums; color: var(--text-tertiary); font-size: var(--cs-text-xs); min-width: 7ch; text-align: right; }
.total-sum { font-variant-numeric: tabular-nums; font-weight: var(--cs-weight-semibold); min-width: 8ch; text-align: right; }

.total.net { margin-top: var(--cs-space-3); padding-top: var(--cs-space-3); border-top: 2px solid var(--border-default); }
.total.net .total-name { color: var(--text-primary); font-weight: var(--cs-weight-semibold); }

.panel-foot {
  padding: var(--cs-space-4) var(--cs-space-6);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--cs-text-xs);
}

/* ---------------------------------------------------------------- banks -- */
/* Ink field, type only — no boxes, no bank logos. Bank names are trademarks;
 * naming them to describe compatibility is fine, reproducing their marks is not.
 * KEEP THIS LIST MATCHED TO WHAT `main` SUPPORTS, not to `dev`. */

.banks { background: var(--surface-inverse); color: var(--text-inverse); }
.banks .section-label { color: var(--cs-neutral-400); }
.banks .section-title { color: var(--text-inverse); }
.banks .section-sub { color: var(--cs-neutral-300); }

.bank-group { margin-top: var(--cs-space-12); }

.bank-group-label {
  margin-bottom: var(--cs-space-5);
  color: var(--cs-amber-300);            /* 12.93 on ink */
  font-size: var(--cs-text-2xs);
  font-weight: var(--cs-weight-semibold);
  letter-spacing: var(--cs-tracking-wide);
  text-transform: uppercase;
}

.bank-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cs-space-2) var(--cs-space-5);
  font-size: var(--cs-text-lg);
  font-weight: var(--cs-weight-light);
  line-height: var(--cs-leading-relaxed);
}

.bank-list span { color: var(--text-inverse); white-space: nowrap; }

/* hairline separator between names, not after the last */
.bank-list span:not(:last-child)::after {
  content: "·";
  margin-left: var(--cs-space-5);
  color: var(--cs-neutral-700);
}

.bank-note {
  max-width: 68ch;
  margin-top: var(--cs-space-12);
  color: var(--cs-neutral-400);
  font-size: var(--cs-text-sm);
  line-height: var(--cs-leading-relaxed);
}

.bank-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-5);
  margin-top: var(--cs-space-8);
  padding-top: var(--cs-space-8);
  border-top: 1px solid var(--cs-neutral-800);
}
.bank-ask h3 { color: var(--cs-amber-300); font-size: var(--cs-text-lg); margin-bottom: var(--cs-space-2); }
.bank-ask p { max-width: 62ch; color: var(--cs-neutral-300); font-size: var(--cs-text-sm); line-height: var(--cs-leading-relaxed); }
/* The ink panel needs the on-dark secondary button, not the default dark-on-light one. */
.bank-ask .btn-secondary { color: var(--text-inverse); border-color: var(--cs-neutral-500); }
.bank-ask .btn-secondary:hover { background: var(--cs-neutral-900); }

/* ------------------------------------------------------------- sections -- */

section { padding-block: var(--cs-space-16); }
.sunken { background: var(--surface-sunken); }

.section-label { margin-bottom: var(--cs-space-2); color: var(--text-tertiary); font-size: var(--cs-text-sm); font-weight: var(--cs-weight-medium); }
.section-title { max-width: 26ch; font-size: var(--cs-text-2xl); font-weight: var(--cs-weight-semibold); line-height: var(--cs-leading-tight); letter-spacing: var(--cs-tracking-tight); }
.section-sub { max-width: 56ch; margin-top: var(--cs-space-4); color: var(--text-secondary); line-height: var(--cs-leading-relaxed); }

/* ------------------------------------------------------------- features -- */

.features-grid { display: grid; grid-template-columns: 1fr; gap: var(--cs-space-5); margin-top: var(--cs-space-10); }
.feature-card { padding: var(--cs-space-6); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--cs-radius-lg); }
.feature-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--cs-space-4); color: var(--text-primary); }
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { margin-bottom: var(--cs-space-2); font-size: var(--cs-text-lg); }
.feature-card p { color: var(--text-secondary); font-size: var(--cs-text-sm); line-height: var(--cs-leading-relaxed); }

/* ---------------------------------------------------------------- steps -- */
/* Blue field. White and amber-300 only — ink is 2.79 here and never used. */

.how { background: var(--cs-blue); color: var(--text-inverse); }
.how .section-label { color: var(--cs-neutral-300); }
.how .section-title { color: var(--text-inverse); }

.steps { display: grid; grid-template-columns: 1fr; gap: var(--cs-space-8); margin-top: var(--cs-space-10); }
.step { position: relative; padding-left: var(--cs-space-12); }

.step-num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--cs-amber-300);
  color: var(--cs-neutral-950);
  border-radius: var(--cs-radius-full);
  font-size: var(--cs-text-sm);
  font-weight: var(--cs-weight-bold);
  font-variant-numeric: tabular-nums;
}

.step h3 { margin-bottom: var(--cs-space-2); font-size: var(--cs-text-lg); color: var(--text-inverse); }
.step p { color: var(--cs-neutral-300); font-size: var(--cs-text-sm); line-height: var(--cs-leading-relaxed); }

/* -------------------------------------------------------------- pricing -- */

.price-card { max-width: 460px; margin-top: var(--cs-space-10); padding: var(--cs-space-8); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--cs-radius-xl); box-shadow: var(--cs-shadow-md); }
.price-tag { color: var(--text-tertiary); font-size: var(--cs-text-sm); font-weight: var(--cs-weight-medium); }
.price-amount { margin-top: var(--cs-space-2); font-size: var(--cs-text-4xl); font-weight: var(--cs-weight-semibold); line-height: 1; letter-spacing: var(--cs-tracking-tight); font-variant-numeric: tabular-nums; }
.price-amount sup { top: -0.5em; font-size: var(--cs-text-xl); font-weight: var(--cs-weight-medium); }
.price-period { margin-top: var(--cs-space-2); color: var(--text-tertiary); font-size: var(--cs-text-sm); }
.price-features { margin: var(--cs-space-6) 0 var(--cs-space-8); padding: 0; list-style: none; }
.price-features li { display: flex; gap: var(--cs-space-3); padding-block: var(--cs-space-2); border-bottom: 1px solid var(--border-subtle); font-size: var(--cs-text-sm); color: var(--text-secondary); }
.price-features li:last-child { border-bottom: 0; }
.check { color: var(--cs-success-fg); font-weight: var(--cs-weight-bold); flex: none; }
.price-cta { display: block; text-align: center; padding-block: var(--cs-space-4); }
.price-note { margin-top: var(--cs-space-4); color: var(--text-tertiary); font-size: var(--cs-text-xs); text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--cs-space-6); max-width: 1040px; margin-top: var(--cs-space-10); align-items: stretch; }
.pricing-grid .price-card { max-width: none; margin-top: 0; display: flex; flex-direction: column; }
.pricing-grid .price-features { flex-grow: 1; }
/* Reserve two lines for the note under each button, so a card with a
 * one-line note (Enterprise) keeps its button level with the others. */
.pricing-grid .price-note { min-height: 3em; }
.referral-banner { max-width: 720px; margin: 0 0 var(--cs-space-6, 24px); padding: 12px 18px; border-radius: var(--cs-radius-md, 10px); background: var(--cs-amber-100); color: var(--cs-ink); font-size: var(--cs-text-sm, 14px); font-weight: 500; text-align: left; }

/* ------------------------------------------------------------------ faq -- */

.faq-list { max-width: 74ch; margin-top: var(--cs-space-10); }
.faq-item { padding-block: var(--cs-space-6); border-top: 1px solid var(--border-subtle); }
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-q { margin-bottom: var(--cs-space-2); font-weight: var(--cs-weight-semibold); }
.faq-a { color: var(--text-secondary); line-height: var(--cs-leading-relaxed); }
.faq-a a { color: var(--text-link); font-weight: var(--cs-weight-medium); }

/* ----------------------------------------------------------- cta banner -- */
/* Amber field. Ink only — 8.74. White here would be 2.27. */

.cta-banner { background: var(--surface-brand); color: var(--text-on-brand); text-align: center; }
.cta-banner h2 { font-size: var(--cs-text-2xl); }
.cta-banner p { margin-block: var(--cs-space-4) var(--cs-space-8); font-size: var(--cs-text-lg); }
.cta-banner .btn-primary { background: var(--cs-neutral-950); color: var(--text-inverse); font-size: var(--cs-text-base); padding: var(--cs-space-4) var(--cs-space-10); }
.cta-banner .btn-primary:hover { background: var(--cs-neutral-800); }

/* --------------------------------------------------------------- footer -- */

.footer-strip {
  padding: var(--cs-space-4);
  background: var(--cs-warning-surface);
  border-block: 1px solid var(--cs-amber-200);
  color: var(--cs-amber-800);
  font-size: var(--cs-text-sm);
  text-align: center;
}
.footer-strip a { color: var(--cs-amber-800); font-weight: var(--cs-weight-semibold); text-decoration: underline; }

footer { padding-block: var(--cs-space-12); background: var(--surface-inverse); color: var(--cs-neutral-400); font-size: var(--cs-text-sm); }
footer .logo-mark { color: var(--cs-amber-500); --cs-knockout: var(--cs-neutral-950); }
footer a { color: var(--cs-neutral-300); }
footer a:hover { color: var(--text-inverse); }

/* --lockup 32px puts the hairline mark at 51px, clear of its ~40px floor. */
.footer-brand { --lockup: 32px; margin-bottom: var(--cs-space-6); }
.footer-brand .logo-word { color: var(--text-inverse); }
.footer-lines > * + * { margin-top: var(--cs-space-2); }

.footer-legal {
  margin-top: var(--cs-space-8);
  padding-top: var(--cs-space-6);
  border-top: 1px solid var(--cs-neutral-800);
  color: var(--cs-neutral-500);
  font-size: var(--cs-text-xs);
  line-height: var(--cs-leading-relaxed);
}

/* ---------------------------------------------------------- legal pages -- */

.legal { max-width: 72ch; margin-inline: auto; padding-block: var(--cs-space-12); }
.legal h1 { font-size: var(--cs-text-2xl); margin-bottom: var(--cs-space-2); }
.legal .updated { margin-bottom: var(--cs-space-10); color: var(--text-tertiary); font-size: var(--cs-text-sm); }
.legal h2 { margin-top: var(--cs-space-10); margin-bottom: var(--cs-space-3); font-size: var(--cs-text-lg); }
.legal p, .legal li { color: var(--text-secondary); line-height: var(--cs-leading-relaxed); }
.legal p + p { margin-top: var(--cs-space-4); }
.legal ul { padding-left: var(--cs-space-5); }
.legal li + li { margin-top: var(--cs-space-2); }

/* ------------------------------------------------------------ help page -- */
/* One page of questions; each is a native <details> so it opens and closes
   without JavaScript and works with keyboard and screen readers. */

.help { max-width: 72ch; margin-inline: auto; padding-block: var(--cs-space-12); }
.help h1 { font-size: var(--cs-text-2xl); margin-bottom: var(--cs-space-2); }
.help-intro { color: var(--text-secondary); margin-bottom: var(--cs-space-6); }
.help-search input {
  width: 100%;
  padding: var(--cs-space-3) var(--cs-space-4);
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--cs-radius-md);
}
.help-empty { margin-top: var(--cs-space-4); color: var(--text-secondary); }
.help-group { padding-block: 0; margin-top: var(--cs-space-10); }
.help-group h2 { font-size: var(--cs-text-lg); margin-bottom: var(--cs-space-3); }
.help-item { border-top: 1px solid var(--border-subtle); scroll-margin-top: 96px; } /* clear the sticky nav on deep links */
.help-group .help-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.help-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cs-space-4);
  padding-block: var(--cs-space-4);
  font-weight: var(--cs-weight-medium);
  cursor: pointer;
  list-style: none;
}
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--cs-duration-fast) var(--cs-ease);
}
.help-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.help-item summary:hover { color: var(--text-link); }
.help-a { padding-bottom: var(--cs-space-5); }
.help-a p, .help-a li { color: var(--text-secondary); line-height: var(--cs-leading-relaxed); }
.help-a p + p, .help-a ul + p, .help-a ol + p, .help-a p + ul { margin-top: var(--cs-space-3); }
.help-a ul, .help-a ol { margin: 0; padding-left: var(--cs-space-5); }
.help-a li + li { margin-top: var(--cs-space-2); }
.help-a a { font-weight: var(--cs-weight-medium); }
.help-item:target summary, .help-item:focus-within summary { color: var(--text-primary); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------- demo -- */
/* Homepage product demo (index.html .showcase). Static markup shows the
 * finished state; the inline script steps data-stage through
 * empty → drop → reading → results → ai → done → export. */

.demo { margin: 0; }
.demo-window { font-size: var(--cs-text-sm); text-align: left; }

.demo-bar { display: flex; justify-content: center; padding: 8px var(--cs-space-4); background: var(--cs-neutral-100); border-bottom: 1px solid var(--border-subtle); }
.demo-bar span { padding: 3px 14px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--cs-radius-full); color: var(--text-secondary); font-size: var(--cs-text-xs); }

.demo-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-3) var(--cs-space-5); padding: var(--cs-space-3) var(--cs-space-5); border-bottom: 1px solid var(--border-subtle); }
.demo-logo { display: grid; line-height: 1; text-transform: uppercase; }
.demo-logo b { font-size: 15px; font-weight: var(--cs-weight-semibold); letter-spacing: 0.1em; }
.demo-logo span { margin: 3px 0 0 1px; font-size: 8px; font-weight: 200; letter-spacing: 0.1em; }
.demo-nav { display: flex; align-items: center; gap: var(--cs-space-4); margin-left: auto; color: var(--text-secondary); font-size: var(--cs-text-xs); font-weight: var(--cs-weight-semibold); }
.demo-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--cs-radius-full); background: var(--cs-amber-500); color: var(--cs-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }

/* One black notices banner, as in the app */
.demo-notices { background: var(--cs-ink); color: rgba(255, 255, 255, 0.86); font-size: 10px; line-height: 1.5; }
.demo-nrow { display: flex; align-items: flex-start; gap: var(--cs-space-3); padding: 6px var(--cs-space-5); }
.demo-nrow + .demo-nrow { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.demo-nrow > span { flex: 1 1 auto; min-width: 0; }
.demo-nrow b { color: var(--cs-amber-300); font-weight: 600; }
.demo-nrow u { flex: none; color: #fff; text-underline-offset: 2px; white-space: nowrap; }
.demo-nrow u i { font-style: normal; }

/* Case toolbar: white / black / orange pills, in the app's order */
.demo-toolbar { display: flex; align-items: center; gap: var(--cs-space-2); padding: var(--cs-space-3) var(--cs-space-5); background: var(--surface-sunken); }
.demo-grow { flex: 1 1 auto; }
.demo-tb { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid transparent; border-radius: var(--cs-radius-full); font-size: var(--cs-text-xs); font-weight: var(--cs-weight-semibold); white-space: nowrap; transition: background var(--cs-duration-base) var(--cs-ease), color var(--cs-duration-base) var(--cs-ease); }
.demo-tb-white { background: var(--surface-raised); border-color: var(--border-default); color: var(--text-primary); }
.demo-tb-black { background: var(--cs-ink); color: #fff; }
.demo-tb-orange { background: var(--cs-amber-500); color: var(--cs-ink); }
/* Export, Print and Save are greyed out until a statement is loaded */
.demo[data-stage="empty"] .demo-tb-black, .demo[data-stage="empty"] .demo-tb-orange,
.demo[data-stage="drop"] .demo-tb-black, .demo[data-stage="drop"] .demo-tb-orange,
.demo[data-stage="reading"] .demo-tb-black, .demo[data-stage="reading"] .demo-tb-orange { background: var(--surface-raised); border-color: var(--border-subtle); color: var(--text-tertiary); }

.demo-body { position: relative; display: flex; gap: var(--cs-space-5); height: 500px; overflow: hidden; padding: var(--cs-space-5); background: var(--surface-sunken); }
/* Fixed height so the page below never jumps as the loop changes stage; the
 * fade shows the list carries on, as it would when scrolling in the app. */
.demo-body::after { content: ""; position: absolute; inset: auto 0 0 0; height: 56px; background: linear-gradient(to bottom, rgba(248, 249, 251, 0), var(--surface-sunken)); pointer-events: none; }

.demo-template { display: none; flex: 0 0 200px; align-self: flex-start; padding: var(--cs-space-3); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--cs-radius-lg); }
.demo-template-title { font-weight: var(--cs-weight-semibold); }
.demo-template-sub { margin: 2px 0 var(--cs-space-3); color: var(--text-tertiary); font-size: var(--cs-text-2xs); line-height: 1.4; }
.demo-cat { display: grid; grid-template-columns: 7px 1fr; column-gap: var(--cs-space-2); align-items: center; padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: var(--cs-radius-md); }
.demo-cat + .demo-cat { margin-top: 6px; }
.demo-cat i, .demo-group-head i { width: 7px; height: 7px; border-radius: var(--cs-radius-full); }
.demo-cat b { font-size: var(--cs-text-xs); }
.demo-cat small { grid-column: 2; overflow: hidden; color: var(--text-tertiary); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }

.demo-main { flex: 1 1 auto; min-width: 0; }

.demo-drop { display: none; min-height: 170px; padding: var(--cs-space-8) var(--cs-space-5); background: var(--surface-raised); border: 2px dashed var(--border-default); border-radius: var(--cs-radius-lg); text-align: center; transition: background var(--cs-duration-base) var(--cs-ease), border-color var(--cs-duration-base) var(--cs-ease); }
.demo-drop-idle, .demo-drop-reading { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.demo-drop strong { font-size: var(--cs-text-base); }
.demo-drop span { color: var(--text-secondary); font-size: var(--cs-text-xs); }
.demo-drop-reading { display: none; }
.demo-files { display: none; flex-wrap: wrap; justify-content: center; gap: var(--cs-space-2); margin-top: var(--cs-space-3); }
.demo-file { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); color: var(--text-primary) !important; }
.demo-file em { padding: 1px 5px; border-radius: var(--cs-radius-sm); color: #fff; font-size: 10px; font-style: normal; font-weight: var(--cs-weight-semibold); }
.demo-file em.pdf { background: var(--cs-danger-solid); }
.demo-file em.csv { background: var(--cs-success-solid); }
.demo-progress { width: 60%; height: 6px; margin-top: var(--cs-space-2); background: var(--border-subtle); border-radius: var(--cs-radius-full); overflow: hidden; }
.demo-progress div { width: 90%; height: 100%; background: var(--action-primary-bg); border-radius: inherit; transition: width 450ms var(--cs-ease); }
.demo[data-progress="start"] .demo-progress div { width: 35%; }

.demo-results { display: flex; flex-direction: column; gap: var(--cs-space-3); transform: translateY(0); transition: transform 450ms var(--cs-ease); }
.demo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-2); }
.demo-chips span { padding: 3px 10px; background: var(--border-subtle); border-radius: var(--cs-radius-full); font-size: var(--cs-text-2xs); }
.demo-chips small { color: var(--text-tertiary); font-size: var(--cs-text-2xs); }
.demo-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-space-2); }
.demo-stats div { padding: var(--cs-space-2) var(--cs-space-3); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--cs-radius-lg); }
.demo-stats small { display: block; color: var(--text-secondary); font-size: 10px; letter-spacing: var(--cs-tracking-wide); text-transform: uppercase; }
.demo-stats b { display: block; margin-top: 2px; font-size: var(--cs-text-lg); font-weight: var(--cs-weight-semibold); }
.demo-uncat-count { color: var(--cs-success-fg); }
.demo[data-stage="results"] .demo-uncat-count, .demo[data-stage="ai"] .demo-uncat-count { color: var(--cs-amber-800); }

.demo-addmore { display: flex; align-items: center; gap: var(--cs-space-3); padding: 8px var(--cs-space-4); background: var(--surface-raised); border: 1.5px dashed var(--border-default); border-radius: var(--cs-radius-lg); font-size: var(--cs-text-xs); }
.demo-addmore i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--cs-radius-full); background: var(--cs-ink); color: #fff; font-style: normal; font-weight: 700; line-height: 1; }
.demo-addmore span { overflow: hidden; color: var(--text-tertiary); white-space: nowrap; text-overflow: ellipsis; }
.demo-client small { display: block; color: var(--text-tertiary); font-size: 10px; letter-spacing: var(--cs-tracking-wide); text-transform: uppercase; }
.demo-client div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-2) var(--cs-space-3); }
.demo-client b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.demo-pen { color: var(--text-tertiary); }
.demo-match { padding: 3px 10px; background: var(--cs-success-surface); border-radius: var(--cs-radius-full); color: var(--cs-success-fg); font-size: var(--cs-text-2xs); font-weight: var(--cs-weight-semibold); }
.demo-match strong { font-weight: inherit; }
.demo-resbar { display: flex; align-items: center; justify-content: space-between; }
.demo-resbar b { font-size: var(--cs-text-sm); }
.demo-resbar small { color: var(--text-tertiary); font-size: var(--cs-text-2xs); font-weight: var(--cs-weight-regular, 400); }
.demo-collapse { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--cs-radius-full); color: var(--text-secondary); font-size: var(--cs-text-2xs); font-weight: var(--cs-weight-semibold); }
.demo-chev { flex: none; color: var(--text-secondary); }
.demo-btn { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--action-primary-bg); border-radius: var(--cs-radius-full); color: var(--action-primary-fg); font-size: var(--cs-text-xs); font-weight: var(--cs-weight-semibold); }
.demo-btn-brand { background: var(--action-brand-bg); color: var(--action-brand-fg); }
.demo-toast { display: none; align-self: flex-end; padding: 6px 12px; background: var(--cs-success-surface); border: 1px solid var(--cs-success-border); border-radius: var(--cs-radius-md); color: var(--cs-success-fg); font-size: var(--cs-text-xs); }

.demo-groups { display: flex; flex-direction: column; gap: var(--cs-space-2); }
/* Static finished state (no script, reduced motion): drop two groups so the
 * Uncategorised group with its AI result fits in the fixed-height window. */
.demo:not(.is-animated) .demo-group:nth-child(3), .demo:not(.is-animated) .demo-group:nth-child(4), .demo:not(.is-animated) .demo-group:nth-child(5),
.demo:not(.is-animated) .demo-addmore, .demo:not(.is-animated) .demo-chips { display: none; }
.demo-group { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; }
.demo-group.is-hidden { display: none; }
.demo-group-head { display: flex; align-items: center; gap: var(--cs-space-2); padding: 6px var(--cs-space-3); background: var(--border-subtle); }
.demo-group-uncat .demo-group-head { background: var(--cs-warning-surface); }
.demo-group-head b { font-size: var(--cs-text-sm); }
.demo-group-head small { color: var(--text-secondary); font-size: var(--cs-text-2xs); }
.demo-group-head > span { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--cs-weight-semibold); }
.demo-row { display: flex; align-items: center; gap: var(--cs-space-3); padding: 5px var(--cs-space-3); border-top: 1px solid var(--cs-neutral-100); font-size: var(--cs-text-xs); }
.demo-row time { flex: none; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.demo-row > span:nth-of-type(1) { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-amt { flex: none; font-variant-numeric: tabular-nums; }
.demo-amt.in { color: var(--cs-success-fg); }
.demo-pill { display: none; flex: none; min-width: 150px; padding: 2px 8px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 6px; color: var(--cs-neutral-900); font-size: var(--cs-text-2xs); }
.demo-pill-flag { background: var(--cs-success-surface); border-color: var(--cs-success-border); color: var(--cs-success-fg); }
.demo[data-stage="results"] .demo-pill-flag, .demo[data-stage="ai"] .demo-pill-flag { background: var(--cs-warning-surface); border-color: var(--cs-amber-200); color: var(--cs-amber-800); }
.demo-more { padding: 4px var(--cs-space-3); border-top: 1px solid var(--cs-neutral-100); color: var(--text-tertiary); font-size: var(--cs-text-2xs); }
.demo-ai { padding: var(--cs-space-2) var(--cs-space-3); border-top: 1px solid var(--cs-neutral-100); }

/* Which words show at each stage. Default (no script) is the finished state. */
.demo-when-open, .demo-when-ai { display: none; }
.demo[data-stage="results"] .demo-when-open,
.demo[data-stage="ai"] .demo-uncat-count .demo-when-open,
.demo[data-stage="ai"] .demo-group-head .demo-when-open { display: inline; }
.demo[data-stage="results"] .demo-when-resolved,
.demo[data-stage="ai"] .demo-when-resolved { display: none; }
.demo[data-stage="ai"] .demo-when-ai { display: inline; }

/* Stage layout */
.demo[data-stage="empty"] .demo-drop,
.demo[data-stage="drop"] .demo-drop,
.demo[data-stage="reading"] .demo-drop { display: block; }
.demo[data-stage="empty"] .demo-results,
.demo[data-stage="drop"] .demo-results,
.demo[data-stage="reading"] .demo-results { display: none; }
.demo[data-stage="drop"] .demo-drop { background: var(--cs-warning-surface); border-color: var(--cs-amber-500); }
.demo[data-stage="drop"] .demo-files { display: flex; }
.demo[data-stage="reading"] .demo-drop-idle { display: none; }
.demo[data-stage="reading"] .demo-drop-reading { display: flex; }
.demo[data-stage="export"] .demo-toast { display: block; }
.demo[data-stage="ai"] .demo-ai .demo-btn,
.demo[data-stage="export"] .demo-export { animation: demo-pulse 1s ease-in-out infinite; }

.demo.is-animated .demo-group, .demo.is-animated .demo-files, .demo.is-animated .demo-toast { animation: demo-in var(--cs-duration-base) var(--cs-ease) both; }
@keyframes demo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes demo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 160, 0, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(226, 160, 0, 0); } }

.demo-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cs-space-3) var(--cs-space-5); margin-top: var(--cs-space-5); }
.demo-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cs-space-3) var(--cs-space-5); margin: 0; padding: 0; list-style: none; }
.demo-steps li { display: flex; align-items: center; gap: var(--cs-space-2); color: var(--text-secondary); font-size: var(--cs-text-sm); }
.demo-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--border-subtle); border-radius: var(--cs-radius-full); color: var(--text-primary); font-size: var(--cs-text-xs); font-weight: var(--cs-weight-semibold); }
.demo[data-step="1"] [data-step="1"], .demo[data-step="2"] [data-step="2"], .demo[data-step="3"] [data-step="3"] { color: var(--text-primary); font-weight: var(--cs-weight-semibold); }
.demo[data-step="1"] [data-step="1"] span, .demo[data-step="2"] [data-step="2"] span, .demo[data-step="3"] [data-step="3"] span { background: var(--cs-amber-500); }
.demo-toggle { min-width: 44px; min-height: 44px; padding: 0 var(--cs-space-4); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--cs-radius-full); color: var(--action-secondary-fg); font: inherit; font-size: var(--cs-text-sm); cursor: pointer; }
.demo-toggle:hover { background: var(--action-secondary-bg-hover); }
.demo-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--border-focus); }
.demo-note { max-width: 70ch; margin: var(--cs-space-4) auto 0; color: var(--text-tertiary); font-size: var(--cs-text-xs); text-align: center; }

@media (min-width: 560px) {
  .demo-pill { display: inline-block; }
  .demo-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.demo-long { display: none; }
@media (min-width: 560px) {
  .demo-long { display: inline; }
}
@media (max-width: 559px) {
  .demo-nrow-data, .demo-nrow u { display: none; }
  .demo-nrow, .demo-toolbar { padding-left: var(--cs-space-3); padding-right: var(--cs-space-3); }
  .demo-tb { padding: 5px 9px; font-size: 11px; }
  .demo-toolbar { gap: 6px; }
  .demo-toolbar .demo-tb-white:first-child { display: none; }
  .demo-client b { font-size: 22px; }
  .demo-group-head b { font-size: var(--cs-text-xs); }
  .demo-group-head small { display: none; }
  .demo-group-head > span { white-space: nowrap; }
  .demo-addmore span { display: none; }
  .demo-body { height: 460px; padding: var(--cs-space-3); }
  .demo-group:nth-child(3), .demo-group:nth-child(4), .demo-group:nth-child(5) { display: none; }
}
@media (min-width: 820px) {
  .demo-template { display: block; }
}

/* ---------------------------------------------------------- breakpoints -- */

@media (min-width: 700px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: var(--cs-text-4xl); }
  .section-title { font-size: var(--cs-text-3xl); }
  .cta-banner h2 { font-size: var(--cs-text-3xl); }
}

@media (min-width: 980px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .panel-cols { grid-template-columns: 1.35fr 1fr; }
  .panel-col + .panel-col { border-top: 0; border-left: 1px solid var(--border-subtle); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Homepage walkthrough video
   ========================================================================== */
/* Hero link to the walkthrough */
.hero-watch { color: var(--cs-amber-300) !important; font-weight: var(--cs-weight-medium); white-space: nowrap; }
.hero-watch:hover { text-decoration: underline; }

/* "See it in action" section — sits on plain white between the blue
   How-it-works field and the sunken Pricing field. */
.watch { scroll-margin-top: 72px; }
.watch-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--cs-space-4) var(--cs-space-8); }
.watch-head > div { min-width: 0; }
.watch-length { display: inline-flex; align-items: center; gap: var(--cs-space-2); padding: 6px 14px; border: 1px solid var(--border-default); border-radius: var(--cs-radius-full); color: var(--text-secondary); font-size: var(--cs-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.watch-length svg { width: 14px; height: 14px; }
.watch-frame { position: relative; margin-top: var(--cs-space-10); aspect-ratio: 16 / 9; max-width: 100%; background: var(--cs-neutral-950); border: 1px solid var(--border-subtle); border-radius: var(--cs-radius-xl); box-shadow: var(--cs-shadow-lg); overflow: hidden; }
.watch-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--cs-neutral-950); }
.watch-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; background: linear-gradient(to top, rgba(8,9,20,.35), rgba(8,9,20,0) 45%); border: 0; cursor: pointer; }
.watch-play span { display: inline-flex; align-items: center; gap: var(--cs-space-3); padding: 14px 26px 14px 20px; background: var(--action-brand-bg); color: var(--action-brand-fg); border-radius: var(--cs-radius-full); box-shadow: var(--cs-shadow-lg); font: inherit; font-size: var(--cs-text-base); font-weight: var(--cs-weight-semibold); transition: background var(--cs-duration-fast) var(--cs-ease), transform var(--cs-duration-fast) var(--cs-ease); }
/* display:grid above would otherwise override the hidden attribute and leave
   the overlay covering the video and its controls after Play is pressed. */
.watch-play[hidden] { display: none; }
.watch-play svg { width: 18px; height: 18px; }
.watch-play:hover span { background: var(--action-brand-bg-hover); transform: scale(1.03); }
.watch-play:focus-visible { box-shadow: none; }
.watch-play:focus-visible span { box-shadow: var(--focus-ring), var(--cs-shadow-lg); }
.watch-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--cs-space-2); margin: var(--cs-space-5) 0 0; padding: 0; list-style: none; }
.watch-chapters button { display: flex; align-items: baseline; gap: var(--cs-space-3); width: 100%; padding: var(--cs-space-3) var(--cs-space-4); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--cs-radius-md); color: var(--text-primary); font: inherit; font-size: var(--cs-text-sm); text-align: left; cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease), background var(--cs-duration-fast) var(--cs-ease); }
.watch-chapters button:hover { border-color: var(--border-default); background: var(--surface-sunken); }
.watch-chapters time { flex: none; color: var(--text-tertiary); font-size: var(--cs-text-xs); font-variant-numeric: tabular-nums; }
.watch-chapters button[aria-current="true"] { border-color: var(--cs-amber-500); background: var(--cs-warning-surface); }
.watch-chapters button[aria-current="true"] time { color: var(--cs-amber-800); }
.watch-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cs-space-4); margin-top: var(--cs-space-8); }
.watch-foot p { max-width: 60ch; color: var(--text-tertiary); font-size: var(--cs-text-xs); line-height: var(--cs-leading-relaxed); }

/* --------------------------------------------------------------- guides -- */
/* Article pages under /guides/. Built on .legal for measure and rhythm. */
.guide h3 { margin-top: var(--cs-space-6); margin-bottom: var(--cs-space-2); font-size: var(--cs-text-base); }
.guide ol { padding-left: var(--cs-space-5); }
.guide ol li + li { margin-top: var(--cs-space-2); }
.guide ul + p, .guide ol + p, .guide table + p { margin-top: var(--cs-space-4); }
.guide code { font-family: var(--cs-font-mono); font-size: 0.9em; background: var(--surface-sunken); padding: 1px 6px; border-radius: var(--cs-radius-sm); }
.guide-crumbs { font-size: var(--cs-text-sm); color: var(--text-tertiary); margin-bottom: var(--cs-space-3); }
.guide-crumbs a { color: var(--text-tertiary); }
.guide-answer { margin-block: var(--cs-space-8); padding: var(--cs-space-5) var(--cs-space-6); background: var(--cs-amber-50); border-left: 4px solid var(--cs-amber-500); border-radius: var(--cs-radius-md); }
.guide-answer p { color: var(--text-primary); }
.guide-answer-label { font-size: var(--cs-text-xs); font-weight: var(--cs-weight-semibold); letter-spacing: var(--cs-tracking-wide); text-transform: uppercase; color: var(--cs-amber-800) !important; margin-bottom: var(--cs-space-2); }
.guide-note { font-size: var(--cs-text-sm); color: var(--text-tertiary) !important; margin-top: var(--cs-space-6); }
.guide-table { width: 100%; border-collapse: collapse; margin-top: var(--cs-space-4); font-size: var(--cs-text-sm); }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: var(--cs-space-3); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); line-height: var(--cs-leading-normal); }
.guide-table thead th { color: var(--text-primary); border-bottom: 2px solid var(--border-default); }
.guide-table tbody th { color: var(--text-primary); font-weight: var(--cs-weight-semibold); width: 28%; }
.guide-download { display: inline-block; margin-top: var(--cs-space-3); padding: var(--cs-space-3) var(--cs-space-5); background: var(--action-primary-bg); color: var(--action-primary-fg) !important; border-radius: var(--cs-radius-md); font-weight: var(--cs-weight-semibold); text-decoration: none; }
.guide-download:hover { background: var(--action-primary-bg-hover); }
.guide-cta { margin-top: var(--cs-space-12); padding: var(--cs-space-6); background: var(--surface-inverse); border-radius: var(--cs-radius-lg); }
.guide-cta p { color: var(--cs-neutral-300) !important; }
.guide-cta .guide-cta-title { color: var(--text-inverse) !important; font-size: var(--cs-text-lg); font-weight: var(--cs-weight-semibold); margin-bottom: var(--cs-space-2); }
.guide-cta .btn-primary { display: inline-block; margin-top: var(--cs-space-4); background: var(--cs-amber-500); color: var(--cs-neutral-950); }
.guide-related { list-style: none; padding-left: 0 !important; }
.guide-related li { padding-block: var(--cs-space-2); border-bottom: 1px solid var(--border-subtle); }
.guide-cards { display: grid; gap: var(--cs-space-4); margin-top: var(--cs-space-8); }
.guide-card { display: block; padding: var(--cs-space-5) var(--cs-space-6); border: 1px solid var(--border-subtle); border-radius: var(--cs-radius-lg); text-decoration: none; background: var(--surface-raised); transition: border-color var(--cs-duration-fast) var(--cs-ease); }
.guide-card:hover { border-color: var(--cs-amber-500); }
.guide-card-title { display: block; font-size: var(--cs-text-lg); font-weight: var(--cs-weight-semibold); color: var(--text-primary); }
.guide-card-text { display: block; margin-top: var(--cs-space-2); color: var(--text-secondary); line-height: var(--cs-leading-normal); }

/* Narrow phones: the nav ran wider than the screen (Help/Guides + Log in +
   the trial button). Keep Log in and the button; Help and Guides stay in the footer. */
@media (max-width: 479px) {
  .nav-right { gap: 0; }
  .nav-right .nav-login:not([href^="https://app"]) { display: none; }
  .nav-cta { padding-inline: var(--cs-space-3); }
}