/* TrailScope — design tokens + global styles */

:root {
  /* Surfaces (light theme) */
  --bg-base: #ffffff;
  --bg-deep: #f3f5fa;
  --bg-surface: #ffffff;
  --bg-elev: #ffffff;
  --bg-elev-2: #fafbfd;
  --bg-light: #f6f7fb;
  --bg-light-2: #ffffff;

  /* Borders */
  --border: rgba(8, 12, 24, 0.08);
  --border-strong: rgba(8, 12, 24, 0.16);
  --border-light: rgba(8, 12, 24, 0.08);

  /* Text */
  --text: #0a0e1a;
  --text-dim: #4b5468;
  --text-muted: #6b7388;
  --text-faint: #9aa3b8;
  --text-on-light: #0a0e1a;
  --text-on-light-dim: #4b5468;

  /* Accents */
  --accent: #4f7cff;          /* electric blue */
  --accent-bright: #6b95ff;
  --accent-deep: #2a4cd6;
  --cyan: #5ee5ff;
  --purple: #a78bfa;
  --emerald: #10b981;
  --emerald-bright: #34d399;
  --amber: #f59e0b;
  --rose: #f43f5e;

  /* Glow */
  --glow-blue: 0 0 0 1px rgba(79, 124, 255, 0.35), 0 8px 32px -8px rgba(79, 124, 255, 0.4);
  --glow-cyan: 0 0 0 1px rgba(94, 229, 255, 0.3), 0 8px 32px -8px rgba(94, 229, 255, 0.35);

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.8);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;

  /* Type */
  --font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

::selection { background: var(--accent); color: white; }

/* ───────── Page background atmosphere (subtle on white) ───────── */
.bg-atmos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-atmos::before,
.bg-atmos::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.45;
}
.bg-atmos::before {
  top: -200px;
  left: -100px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(79, 124, 255, 0.18), transparent 60%);
}
.bg-atmos::after {
  top: 200px;
  right: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.14), transparent 60%);
}

.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(8,12,24,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,12,24,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 70%);
}

/* ───────── Layout helpers ───────── */
.shell {
  position: relative;
  z-index: 1;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

section { position: relative; }

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: white;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12) inset,
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 8px 24px -8px rgba(79,124,255,0.6);
}
.btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 12px 28px -8px rgba(79,124,255,0.75);
}
.btn-ghost {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: #f3f5fa;
  border-color: var(--border-strong);
}
.btn-light {
  background: white;
  color: var(--text-on-light);
}
.btn-link {
  padding: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
}
.btn-link:hover { color: var(--text); }

/* ───────── Eyebrow / pill ───────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 100px;
  background: #ffffff;
  backdrop-filter: blur(10px);
}
.eyebrow .dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  font-size: 10px;
  color: white;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}

/* ───────── Headings ───────── */
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.025em; }
h1 { font-size: clamp(40px, 6.5vw, 76px); line-height: 1; }
h2 { font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05; }
h3 { font-size: 22px; line-height: 1.2; }
p { margin: 0; line-height: 1.55; }

.h-display {
  letter-spacing: -0.035em;
  font-weight: 480;
  text-wrap: balance;
}
.h-gradient {
  background: linear-gradient(180deg, #0a0e1a 0%, #4b5468 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* ───────── Reveal on scroll ───────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ───────── Cards ───────── */
.card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
  box-shadow: 0 1px 2px rgba(8,12,24,0.04);
}
.card-hover {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px -16px rgba(8,12,24,0.18);
}

/* ───────── Nav ───────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px 0;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.scrolled { border-bottom-color: var(--border); background: rgba(255,255,255,0.92); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-dim);
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover {
  color: var(--text);
  background: rgba(8,12,24,0.04);
}
.nav-cta { display: flex; align-items: center; gap: 8px; }
/* ── Mobile menu ─────────────────────────────────────────────
   Below 880px .nav-links is hidden and there was no other route to those
   pages from the chrome, so the whole primary nav was unreachable on a
   phone. The burger and drawer restore it. */
.nav-burger {
  display: none;                 /* desktop: the links are already visible */
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;                /* the nav row is flex; without this the
                                    burger shrank to 20px at 390px */
  width: 44px;                   /* 44px square = WCAG 2.5.8 comfortably */
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
}
.nav-burger:hover { background: rgba(8,12,24,0.04); }

@media (max-width: 880px) {
  .nav-links { display: none; }
  /* The burger only exists where the links are hidden. */
  .nav-burger { display: inline-flex; }
  /* The burger adds 44px to a bar that also carries the logo and both CTAs,
     so the 32px desktop gap no longer fits. This has to apply across the whole
     burger range — scoping it to 380px only was why 360px passed and 390px
     overflowed. */
  .nav-inner { gap: 12px; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { padding-left: 12px; padding-right: 12px; font-size: 13px; }
}

.nav-burger-bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-burger-bars > span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease, top 0.18s ease;
}
.nav-burger-bars > span:nth-child(1) { top: 0; }
.nav-burger-bars > span:nth-child(2) { top: 5px; }
.nav-burger-bars > span:nth-child(3) { top: 10px; }
/* Open state morphs the bars into a cross. */
.nav-burger-bars.is-open > span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-burger-bars.is-open > span:nth-child(2) { opacity: 0; }
.nav-burger-bars.is-open > span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* Sits below the sticky bar. z-index is under .nav (100) so the bar and its
   close button stay on top, and above the scrim. */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 24, 0.28);
  z-index: 90;
}
.nav-drawer {
  position: fixed;
  top: 61px;                     /* 14px padding + 32px content + 14px + 1px border */
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 20px 18px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 28px -12px rgba(8, 12, 24, 0.25);
  max-height: calc(100vh - 61px);
  overflow-y: auto;
}
.nav-drawer a {
  display: flex;
  align-items: center;
  min-height: 48px;              /* generous touch target in a list */
  padding: 0 12px;
  font-size: 15px;
  color: var(--text);
  border-radius: 10px;
  text-decoration: none;
}
.nav-drawer a:hover,
.nav-drawer a:focus-visible { background: rgba(8,12,24,0.05); }

/* `display:flex` on .nav-drawer outranks the UA's `[hidden] { display: none }`,
   so the closed drawer was still laid out — visible on the page and pushing it
   sideways. Restore the attribute's meaning explicitly. */
.nav-drawer[hidden],
.nav-scrim[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-burger-bars > span { transition: none; }
}

/* Very narrow phones (320px — iPhone SE 1st gen and similar). .nav-inner is a
   nowrap flex row with a 32px gap, so the logo plus the Sign in / Contact us
   pair measured 353px in a 320px container and every page scrolled sideways by
   33px. Tighten the gaps and the button padding rather than wrapping: the nav
   is a fixed-height sticky bar, and wrapping would double its height and push
   the page content down under it. */
.nav-drawer-signin { display: none; }

@media (max-width: 400px) {
  .nav-inner { gap: 8px; }
  .nav-cta .btn { padding-left: 10px; padding-right: 10px; font-size: 12.5px; }
  /* The logo + burger + both CTAs measure past 320px however hard the gaps are
     squeezed, so the secondary action leaves the bar and reappears in the
     drawer. Contact us — the primary CTA — stays visible. */
  .nav-cta .btn-link { display: none; }
  .nav-drawer-signin { display: flex; }
}

/* ───────── Logo ───────── */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 580;
  font-size: 16px;
  letter-spacing: -0.015em;
}
.logo-mark {
  width: 26px;
  height: 26px;
}

/* ───────── Hero ───────── */
.hero {
  padding: 96px 0 60px;
  position: relative;
}
@media (min-width: 880px) {
  .hero { padding: 120px 0 80px; }
}
.hero-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.hero h1 { max-width: 14ch; }
.hero p.sub {
  max-width: 56ch;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--text-dim);
  text-wrap: balance;
}
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-stage {
  margin-top: 56px;
  position: relative;
}

/* ───────── Dashboard mock ───────── */
.dash {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  box-shadow: 0 30px 80px -30px rgba(8,12,24,0.25), 0 0 120px -20px rgba(79, 124, 255, 0.15);
  overflow: hidden;
}
.dash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(79, 124, 255, 0.08), transparent 70%);
  pointer-events: none;
}
.dash-frame {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.dash-dots { display: flex; gap: 6px; }
.dash-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(8,12,24,0.10);
}
.dash-tab {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 100px;
  background: #f3f5fa;
  font-family: var(--font-mono);
  font-size: 11px;
}
.dash-tab .live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald-bright);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}

.dash-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 540px;
}
@media (max-width: 880px) {
  .dash-body { grid-template-columns: 1fr; min-height: 0; }
  .dash-side { display: none; }
}

.dash-side {
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.dash-side .group {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 10px 6px;
}
.dash-side a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--text-dim);
}
.dash-side a:hover { background: rgba(8,12,24,0.04); color: var(--text); }
.dash-side a.active {
  background: rgba(79,124,255,0.10);
  color: var(--accent-deep);
}
.dash-side a .ico {
  width: 14px; height: 14px;
  color: var(--text-muted);
}
.dash-side a.active .ico { color: var(--accent); }

.dash-main {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dash-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.dash-title h2 { font-size: 22px; letter-spacing: -0.02em; font-weight: 520; }
.dash-title .sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

.kpi {
  background: #fafbfd;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.kpi .label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi .val {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 6px;
  font-feature-settings: "tnum";
}
.kpi .delta {
  font-size: 11px;
  font-family: var(--font-mono);
  margin-top: 2px;
}
.kpi .delta.up { color: var(--emerald-bright); }
.kpi .delta.dn { color: var(--rose); }
.kpi .spark {
  position: absolute;
  right: 10px; top: 12px;
  width: 56px; height: 22px;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
}
@media (max-width: 880px) { .dash-grid { grid-template-columns: 1fr; } }

/* Showcase split — the sticky copy column beside its panel column.
   This was an inline `grid-template-columns: 1fr 1.6fr` in Showcase.jsx, which
   no media query could reach. Both fr tracks carry an automatic min-content
   minimum, so at 390px they resolved to 105px + 237px + the 32px gap = 374px
   inside a 350px grid, pushing the panel 4px past the viewport and giving the
   homepage a permanent sideways wobble on phones.

   minmax(0, …) removes the min-content floor so the tracks can actually
   shrink, and the layout stacks below 880px where two columns stop fitting. */
/* Showcase tab rail. Was an inline flex pill with width:fit-content, which
   could not shrink: at 360px — the most common Android width — the buttons
   measured 360px inside a ~320px content box and body{overflow-x:hidden}
   clipped the overflow, so the last tab was unreachable.

   Scrolls rather than wraps: the pill's rounded shape depends on staying one
   row. justify-content is flex-start, not center — with center, an overflowing
   flex row splits the excess both sides and the FIRST item becomes
   unreachable. `width: fit-content` + `margin: 0 auto` still centres the pill
   whenever it does fit. */
.showcase-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px;
  background: #f3f5fa;
  border: 1px solid var(--border);
  border-radius: 100px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.showcase-tabs::-webkit-scrollbar { display: none; }
.showcase-tabs > button { flex: 0 0 auto; white-space: nowrap; }

.showcase-sticky { position: sticky; top: 100px; }
/* Declared here rather than inline on the element: an inline `position:sticky`
   outranks the stacked-layout override below, so the heading stayed pinned on
   phones even after the columns stacked. */
.showcase-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 880px) {
  .showcase-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Sticky is meaningless once the columns stack — it would pin the heading
     while the panels scroll past underneath it. */
  .showcase-sticky { position: static; }
}

.panel {
  background: #fafbfd;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-h h4 { font-size: 13px; font-weight: 500; }
.panel-h .legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
}
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 8px; height: 8px; border-radius: 2px; }

/* Chart */
.chart {
  position: relative;
  height: 180px;
}
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tip {
  position: absolute;
  pointer-events: none;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  white-space: nowrap;
  transform: translate(-50%, -110%);
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 12px 28px -16px rgba(8,12,24,0.18);
}
.tip.show { opacity: 1; }
.tip .ttl { color: var(--text-muted); margin-bottom: 2px; }

/* Risk list */
.risk-list { display: flex; flex-direction: column; gap: 8px; }
.risk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12px;
  background: #fafbfd;
  border: 1px solid var(--border);
}
.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 500;
  color: white;
  background: linear-gradient(135deg, #4f7cff, #a78bfa);
  flex-shrink: 0;
}
.risk-row .name { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.risk-row .meta { color: var(--text-muted); font-family: var(--font-mono); }
.tag {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 100px;
  border: 1px solid;
}
.tag.high { color: #b91c47; border-color: rgba(244,63,94,0.3); background: rgba(244,63,94,0.10); }
.tag.med  { color: #b45309; border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.10); }
.tag.low  { color: #047857; border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.10); }

/* AI insight chip */
.ai-chip {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 24px 48px -24px rgba(8,12,24,0.22);
  font-size: 12px;
  display: flex;
  gap: 10px;
  max-width: 280px;
  backdrop-filter: blur(20px);
}
.ai-chip .ai-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: grid; place-items: center;
  flex-shrink: 0;
  color: white;
}
.ai-chip .ai-body strong { display: block; font-weight: 500; margin-bottom: 2px; }
.ai-chip .ai-body span { color: var(--text-dim); }

.float-card {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 24px 48px -24px rgba(8,12,24,0.22);
  font-size: 12px;
  backdrop-filter: blur(20px);
}

/* ───────── Logo strip ───────── */
.logo-strip {
  padding: 32px 0 24px;
  text-align: center;
}
.logo-strip .lab {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.logo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  opacity: 0.7;
}
.logo-row .brand {
  font-family: var(--font-sans);
  font-weight: 540;
  letter-spacing: -0.02em;
  color: var(--text-dim);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.logo-row .brand svg { opacity: 0.85; }

/* ───────── Section spacing ───────── */
.section-pad { padding: 110px 0; }
@media (max-width: 720px) { .section-pad { padding: 80px 0; } }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-head p {
  color: var(--text-dim);
  font-size: 17px;
  text-wrap: balance;
}

/* ───────── Features ───────── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 920px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }

/* Two-up variant. contact.html and data-residency.html wanted 2 columns
   instead of the 3-column default and set `style="grid-template-columns:
   repeat(2, 1fr)"` inline — which outranks every media query above, so the
   grid stayed 2-up on a phone. The cards' min-content is ~270px each (long
   support@trailscope.com.au addresses at 17px), so the row measured 541px
   inside a 350px container and `body { overflow-x: hidden }` CLIPPED it:
   on contact.html the Support and Partnerships cards were pushed to
   x=306-575 and were invisible and unreachable. Use this class instead of
   an inline override so the collapse still happens. */
.feat-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .feat-grid-2 { grid-template-columns: 1fr; } }

.feat {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.feat .ico-wrap {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(79,124,255,0.12), rgba(79,124,255,0.04));
  border: 1px solid rgba(79,124,255,0.25);
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 12px;
}
.feat h3 { font-size: 16px; font-weight: 500; }
.feat p { font-size: 14px; color: var(--text-dim); }
.feat .feat-vis {
  margin-top: auto;
  padding-top: 16px;
  height: 70px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

/* Big feature highlight */
.feat-big {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  padding: 40px;
  margin-bottom: 14px;
  align-items: center;
}
@media (max-width: 880px) { .feat-big { grid-template-columns: 1fr; padding: 28px; } }
.feat-big h3 { font-size: 28px; font-weight: 480; letter-spacing: -0.02em; }
.feat-big p { font-size: 15px; color: var(--text-dim); margin-top: 10px; }
.feat-big .stat { font-size: 12px; color: var(--text-muted); margin-top: 18px; font-family: var(--font-mono); }

/* ───────── How it works ───────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
}
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 28px 26px 30px;
  position: relative;
  min-height: 240px;
}
.step .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-bright);
  letter-spacing: 0.1em;
}
.step h3 { font-size: 19px; font-weight: 500; margin-top: 12px; }
.step p { color: var(--text-dim); font-size: 14px; margin-top: 8px; }
.step .vis {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

/* ───────── Testimonials ───────── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 920px) { .testi-grid { grid-template-columns: 1fr; } }
.testi {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.testi .quote { font-size: 15px; line-height: 1.55; }
.testi .who { display: flex; align-items: center; gap: 10px; }
.testi .who .name { font-size: 13px; }
.testi .who .role { font-size: 12px; color: var(--text-muted); }

.proof-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 14px;
}
@media (max-width: 720px) { .proof-bar { grid-template-columns: repeat(2, 1fr); } }
.proof-bar .cell {
  background: #ffffff;
  padding: 22px 22px 24px;
}
.proof-bar .v {
  font-size: 32px;
  font-weight: 480;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #0a0e1a, #4b5468);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.proof-bar .l { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ───────── Pricing ───────── */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1080px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 340px)); } }
@media (max-width: 720px)  { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.price-card.featured {
  background: linear-gradient(180deg, rgba(79,124,255,0.08), rgba(79,124,255,0.02));
  border-color: rgba(79,124,255,0.30);
  position: relative;
}
/* Featured styling without the "Most popular" badge — used by the single
   free plan card, where a "most popular" label would be meaningless. */
.price-card.featured.no-badge::after { content: none; }
.price-card.featured::after {
  content: "Most popular";
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; padding: 3px 10px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: white;
  border-radius: 100px;
  font-weight: 500;
}
.price-card .tier { font-size: 13px; color: var(--text-muted); }
.price-card .price { font-size: 42px; letter-spacing: -0.03em; font-weight: 460; }
.price-card .price .per { font-size: 14px; color: var(--text-muted); font-weight: 400; }
.price-card .price-desc { font-size: 13px; color: var(--text-dim); }
.price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.price-card ul li { display: flex; gap: 8px; }
.price-card ul li .check {
  color: var(--accent-bright); flex-shrink: 0;
}
.price-toggle {
  display: inline-flex;
  padding: 4px;
  background: #f3f5fa;
  border: 1px solid var(--border);
  border-radius: 100px;
  margin: 0 auto 32px;
}
.price-toggle button {
  padding: 7px 16px;
  font-size: 13px;
  border-radius: 100px;
  color: var(--text-dim);
  transition: all 0.15s;
}
.price-toggle button.active {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(8,12,24,0.08);
}

/* ───────── Final CTA ───────── */
.final-cta {
  padding: 64px 56px;
  background: linear-gradient(135deg, #eef2ff, #f6f7fb 60%, #f5efff);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(79,124,255,0.18), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}
.final-cta h2 { position: relative; max-width: 22ch; margin: 0 auto; color: var(--text); }
.final-cta p { position: relative; color: var(--text-dim); max-width: 50ch; margin: 16px auto 28px; font-size: 17px; }
.final-cta .ctas { position: relative; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ───────── Footer ───────── */
footer.foot {
  border-top: 1px solid var(--border);
  padding: 64px 0 40px;
  margin-top: 80px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.foot ul li { font-size: 13px; color: var(--text-dim); }
.foot ul li a:hover { color: var(--text); }
.foot-tag { color: var(--text-muted); font-size: 13px; max-width: 28ch; margin-top: 14px; line-height: 1.5; }
.foot-bot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 32px; margin-top: 56px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
  flex-wrap: wrap;
}
.foot-bot .socials { display: flex; gap: 12px; }
.foot-bot .socials a {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  transition: background 0.15s;
}
.foot-bot .socials a:hover { background: #f3f5fa; }

/* draw chart line */
.draw-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.bar-anim { transform-origin: bottom; transform: scaleY(0); animation: grow 0.7s cubic-bezier(0.2,0.8,0.2,1) forwards; }
@keyframes grow { to { transform: scaleY(1); } }

.fade-in { opacity: 0; animation: fadeIn 0.6s ease 0.4s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* ─────────────────────────────────────────────────────────────────────
   Calculator widget styles. Used by every component in
   src/components/CalculatorsAll.jsx + LoanCalculatorPage.jsx.
   The widgets emit classes like .calc-wrap, .field-input, .kpi-grid;
   these rules are the only thing that turns them from raw browser
   defaults into a modern two-panel calculator. Keep the visual
   tokens (Inter + JetBrains Mono, light cards, blue accent, rose
   for cost, emerald for principal) in sync with the rest of the site.
   ───────────────────────────────────────────────────────────────────── */

/* Container */
.calc-title { font-size: 14px; font-weight: 500; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.calc-desc  { font-size: 15px; color: var(--text-dim); line-height: 1.6; max-width: 60ch; margin-bottom: 28px; }

/* Two-panel grid — inputs on the left, results on the right. */
.calc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 880px) {
  /* minmax(0, …), not a bare 1fr: a plain fr track keeps an automatic
     min-content floor, so at 320px this column resolved to 370px inside a
     280px container and every calculator page scrolled sideways. */
  .calc-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* The floor is only removed if the content can actually shrink. These rows are
   flex containers whose default `min-width: auto` stops their children going
   below min-content, which puts the floor straight back. */
.calc-wrap .field-wrap,
.calc-wrap .slider-row,
.calc-wrap .field-input-row,
.calc-wrap .kpi { min-width: 0; }

@media (max-width: 420px) {
  /* The slider's value column is fixed at 86px, which crowds the track on a
     narrow phone. Narrowed here rather than globally: that floor stops the
     layout jittering as the number changes width, which is still wanted on
     desktop. No card-padding rule — CalcWrap sets padding inline, so any
     rule here would be dead code. */
  .slider-val { min-width: 62px; font-size: 12px; }
  .slider-row { gap: 10px; }
}

/* Card overrides specific to calculator panels — slightly more breathing room
   than the default .card and a subtle accent-tinted result side. */
.calc-wrap > .card { padding: 28px; }
.calc-wrap > .card:nth-child(2) {
  background: linear-gradient(180deg, rgba(79,124,255,0.04), rgba(79,124,255,0.01));
  border-color: rgba(79,124,255,0.16);
}

/* Field wrapping */
.field-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field-wrap:last-child { margin-bottom: 0; }
.field-label {
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}

/* Inline input row (prefix · input · suffix) */
.field-input-row {
  display: flex; align-items: stretch;
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.field-input-row:focus-within {
  border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(79,124,255,0.12);
}
.field-fix {
  display: inline-flex; align-items: center; padding: 0 12px;
  font-size: 14px; color: var(--text-muted); font-family: var(--font-mono);
  background: transparent;
}
.field-fix-right { border-left: 1px solid var(--border); }
.field-fix + .field-input,
.field-input:first-child { padding-left: 4px; }
.field-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 11px 12px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text);
  -moz-appearance: textfield;
}
.field-input::-webkit-outer-spin-button,
.field-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Native select */
.field-select {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 11px 12px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text);
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236b7388' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 32px;
}

/* Slider row */
.slider-row { display: flex; align-items: center; gap: 14px; }
.slider-row input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; height: 6px;
  background: rgba(8,12,24,0.08); border-radius: 100px; cursor: pointer; outline: none;
  background-image: linear-gradient(90deg, var(--accent), var(--accent-bright));
  background-repeat: no-repeat;
}
.slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 100px;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(79,124,255,0.35);
  cursor: grab; transition: transform 0.1s, box-shadow 0.1s;
}
.slider-row input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 3px 10px rgba(79,124,255,0.5); }
.slider-row input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; }
.slider-row input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 100px;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(79,124,255,0.35);
  cursor: grab;
}
.slider-val {
  min-width: 86px; text-align: right;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text);
}

/* KPI grid — 2 cols by default (a 4-KPI calc lays out as 2×2). */
.kpi-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.kpi-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 540px) {
  .kpi-grid, .kpi-grid.cols-3 { grid-template-columns: 1fr 1fr; }
}

/* Scope to .kpi-grid so we don't conflict with the HeroDashboard mock
   (.kpi-row .kpi up at line ~477), which uses .label/.val children. */
.kpi-grid .kpi {
  background: #fff;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  position: static; overflow: visible;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.kpi-grid .kpi:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 4px 16px -8px rgba(8,12,24,0.15); }
.kpi-grid .kpi.highlight {
  background: linear-gradient(180deg, rgba(79,124,255,0.08), rgba(79,124,255,0.02));
  border-color: rgba(79,124,255,0.4);
  box-shadow: 0 4px 16px -8px rgba(79,124,255,0.3);
}
.kpi-grid .kpi-label {
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.kpi-grid .kpi-value {
  font-size: 22px; font-weight: 480; letter-spacing: -0.025em; color: var(--text);
  font-feature-settings: "tnum";
}
.kpi-grid .kpi-sub { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }

/* Inline note (e.g. principal vs interest bar). */
.calc-note {
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  font-size: 13px; color: var(--text-dim);
}

/* Segmented progress bar (principal vs interest split). */
.prog-bar-wrap {
  display: flex; height: 8px;
  background: rgba(8,12,24,0.06); border-radius: 100px; overflow: hidden;
}
.prog-bar-seg { height: 100%; transition: width 0.3s ease; }

/* Disclaimer at the bottom of every widget. */
.calc-disclaimer {
  margin-top: 20px; padding: 14px 18px;
  background: rgba(8,12,24,0.025); border-radius: 10px;
  font-size: 12px; color: var(--text-muted); line-height: 1.6;
}

/* Budget-row two-column helper (used by Budget Planner). */
.budget-row {
  display: grid; grid-template-columns: 1fr 140px; gap: 12px;
  align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.budget-row:last-child { border-bottom: 0; }
.budget-row > .field-label { margin: 0; }

/* Provider table on data-residency.html (the only .sub-table in the site, and
   it had no CSS at all). Its four columns measure 394px, which overflows the
   348px .card wrapping it on a phone. That card carries an inline
   `overflow:hidden` for its 16px border-radius, so the final "DATA HELD"
   column was CLIPPED with no way to scroll to it. Let the table scroll inside
   the card rather than being cut off. */
.sub-table { width: 100%; }
@media (max-width: 700px) {
  .sub-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Touch targets. TrailScope shipped with no `pointer: coarse` rules at all, so
   nothing here had a touch treatment. Measured at 390px: the 12 footer links
   render 16px tall, stacked in a `flex-direction: column; gap: 9px` list —
   under the 24px WCAG 2.5.8 AA minimum and tightly packed, so mis-taps are
   easy. Nav links and buttons already clear 24px and are left alone.

   Deliberately not applied to prose links: 2.5.8 exempts targets constrained
   by the line-height of surrounding text, and forcing a min-height on an
   inline link would break the paragraph flow. Scoped to pointer:coarse so
   desktop spacing is unchanged. */
@media (pointer: coarse) {
  .foot ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

/* Homepage showcase: collapse the two-column dashboard grid on narrow screens.
   This lived as a <style> tag inside the hydrating Showcase island, which
   broke it twice over: `"` is HTML-escaped in the SSR output, and <style> is a
   RAW TEXT element so the browser never decodes the entity — the selector
   arrived as [style*=&quot;…&quot;] and did not parse. React then saw a text
   mismatch, threw hydration errors (#425/#423) into the error monitor on every
   homepage load, and discarded the server-rendered markup to re-render the
   island client-side. Living in a stylesheet, it applies before hydration and
   without JS, and the island hydrates cleanly. */
@media (max-width: 920px) {
  #dashboard .reveal[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Comparison tables (11 pages). Three columns of capability text measure
   ~336px, which overflowed a 280px content box at 320px and pushed the whole
   page sideways. Let the table scroll inside its own box instead.

   Safe to declare globally even though the pages carry their own Astro-scoped
   .compare-table rules: those set width / border-collapse / font-size /
   margin and never touch display or overflow-x, so there is no conflict to
   lose. Kept here rather than in scripts/generate-content-pages.py so the
   generator does not need regenerating to pick it up. */
@media (max-width: 700px) {
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ── Article body + comparison table ─────────────────────────
   Shared by the generated content pages (guides, compares, glossary, about,
   changelog) AND the long-form sections on the indexable calculator pages.
   These rules used to live as an inline <style> inside
   scripts/generate-content-pages.py, which meant a calculator page using
   .article-body or .compare-table rendered them unstyled. One stylesheet,
   one source; the generator no longer emits its own copy. */
.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin: 48px 0 14px; color: var(--text); }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 17px; font-weight: 500; margin: 28px 0 10px; color: var(--text); }
.article-body p, .article-body li { font-size: 15px; line-height: 1.75; color: var(--text-dim); }
.article-body p { margin-bottom: 14px; }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 18px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--text); font-weight: 540; }
.article-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.article-body code { font-family: var(--font-mono); font-size: 13px; background: rgba(8,12,24,0.04); padding: 1px 6px; border-radius: 4px; }
.article-faq { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border); }
.article-faq summary { font-size: 15px; font-weight: 500; color: var(--text); padding: 14px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.article-faq summary::after { content: '+'; color: var(--text-muted); font-size: 18px; }
.article-faq details[open] summary::after { content: '−'; }
.article-faq details p { padding: 14px 0 8px; font-size: 14px; line-height: 1.7; color: var(--text-dim); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 18px 0 28px; }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.compare-table th { background: rgba(8,12,24,0.03); font-weight: 540; color: var(--text); font-size: 13px; }
.compare-table td:first-child { color: var(--text); font-weight: 480; }
.compare-table .yes { color: var(--emerald); font-weight: 500; }
.compare-table .no  { color: var(--text-faint); }
/* Wide tables scroll inside their own box rather than the page. */
.article-body .compare-table { display: block; overflow-x: auto; }
@media (min-width: 720px) { .article-body .compare-table { display: table; } }