/* ---------------------------------------------------------------------------
   Stylesheet for the programmatic-SEO pages (/convert, /guides, /compare,
   /for, /glossary, /resources).

   Separate from index.html's inline <style> on purpose. The homepage ships its
   CSS inline because it is one page and the render-blocking round trip costs
   more than the bytes; this sheet serves ~60 pages, so one cacheable file wins
   from the second pageview on, and it keeps the marketing surface from
   depending on the app template's internals.

   Tokens are copied from BRAND.md's website palette, not invented here. Gold
   carries text in exactly one place — on the navy CTA panel — because seal
   gold is 3.22:1 on white and fails AA everywhere else.
--------------------------------------------------------------------------- */

:root {
  --bg:            #FFFFFF;
  --bg-subtle:     #F7F8FA;   /* cool grey surface */
  --fg:            #10173A;   /* page navy — 17.4:1 on white */
  --fg-muted:      #454C6B;   /* 8.4:1 on white, 7.9:1 on surface */
  --fg-subtle:     #6F7590;   /* 4.5:1 on white */
  --border:        #E3E6EB;
  --border-soft:   #EEF0F4;
  --primary:       #1B2559;   /* ink navy */
  --primary-fg:    #FFFFFF;   /* 14.4:1 on primary */
  --primary-hover: #26326F;
  --accent:        #EDEFF4;   /* hover surface */
  --gold-on-navy:  #BA9434;   /* 5.07:1 on --primary; the only gold text */
  --ring:          #1B2559;
  --warning:       #8A6216;
  --warning-bg:    #FBF3E0;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -0.005em;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 3px;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

/* Skip link — these pages are long and keyboard users shouldn't tab the whole
   header and breadcrumb trail on every one. */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--primary); color: var(--primary-fg);
  padding: 10px 16px; border-radius: 6px; z-index: 100;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ─── Header (mirrors index.html so the two surfaces read as one site) ─── */
header {
  border-bottom: 1px solid var(--border);
  background: hsl(0 0% 100% / 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  position: sticky; top: 0; z-index: 10;
}
.header-inner {
  max-width: 1140px; margin: 0 auto;
  padding: 0 28px; height: 62px;
  display: flex; align-items: center; gap: 10px;
}
.logo { width: 26px; height: 26px; flex-shrink: 0; display: block; }
.brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand {
  font-size: 15.5px; font-weight: 700;
  letter-spacing: -0.021em; color: var(--fg); white-space: nowrap;
}
.header-nav { display: flex; align-items: center; gap: 22px; margin: 0 auto; }
.header-nav a {
  font-size: 13.5px; font-weight: 500; color: var(--fg-muted);
  text-decoration: none; letter-spacing: -0.005em; transition: color .15s;
  white-space: nowrap;
}
.header-nav a:hover { color: var(--fg); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: 7px; font-weight: 600;
  font-family: inherit; letter-spacing: -0.008em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: var(--bg); color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { background: var(--accent); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 22px; font-size: 14.5px; }

/* ─── Bands ─── */
.band     { padding: 60px 0; background: var(--bg); }
.band-alt {
  padding: 60px 0; background: var(--bg-subtle);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* ─── Page head ─── */
.page-head { padding: 34px 0 8px; }
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--fg-subtle); margin-bottom: 20px;
}
.breadcrumbs a { color: var(--fg-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--fg); text-decoration: underline; }
.breadcrumbs span[aria-hidden] { color: var(--border); }

.eyebrow {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--primary); margin-bottom: 14px;
}
.page-head h1 {
  font-size: 40px; font-weight: 700;
  letter-spacing: -0.034em; line-height: 1.12;
  max-width: 20ch; margin-bottom: 18px;
}
.page-intro {
  font-size: 16.5px; line-height: 1.65; color: var(--fg-muted);
  max-width: 66ch;
}
.page-intro p + p { margin-top: 14px; }
.page-intro strong { color: var(--fg); font-weight: 600; }

.page-meta {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px; color: var(--fg-subtle);
  display: flex; flex-wrap: wrap; gap: 16px;
}

/* ─── Layout: body + rail ─── */
.page-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px;
  gap: 56px; align-items: start;
}
.rail { position: sticky; top: 82px; }
.rail-title {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--primary); margin-bottom: 12px;
}
/* The markdown `toc` extension emits a nested <div class="toc"><ul>…. */
.rail .toc ul { list-style: none; }
.rail .toc > ul > li { margin-bottom: 9px; }
.rail .toc ul ul { margin: 7px 0 0 12px; padding-left: 10px; border-left: 1px solid var(--border); }
.rail .toc ul ul li { margin-bottom: 6px; }
.rail .toc a {
  font-size: 13px; line-height: 1.45; color: var(--fg-muted);
  text-decoration: none; display: block;
}
.rail .toc a:hover { color: var(--fg); }

/* ─── Prose ─── */
.prose {
  max-width: 72ch; font-size: 15.5px; line-height: 1.72; color: var(--fg);
  /* Inline <code> can't break at a hyphen and these pages carry filenames and
     header names inline; without this a long token pushes the page sideways
     on a narrow screen. */
  overflow-wrap: break-word;
}
.prose > * + * { margin-top: 20px; }
.prose h2 {
  font-size: 25px; font-weight: 700; letter-spacing: -0.028em;
  line-height: 1.22; margin-top: 46px; padding-top: 4px;
  scroll-margin-top: 80px;
}
.prose h3 {
  font-size: 18px; font-weight: 650; letter-spacing: -0.02em;
  line-height: 1.3; margin-top: 34px; scroll-margin-top: 80px;
}
.prose h2 + *, .prose h3 + * { margin-top: 14px; }
/* The band already supplies the space above the body; an h2's 46px top margin
   on top of it opened a gap that read as a missing element. */
.prose > :first-child { margin-top: 0; }
.prose p { color: var(--fg-muted); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a {
  color: var(--primary); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.prose a:hover { text-decoration-color: var(--primary); }
.prose ul, .prose ol { padding-left: 22px; color: var(--fg-muted); }
.prose li + li { margin-top: 9px; }
.prose li::marker { color: var(--fg-subtle); }
.prose blockquote {
  border-left: 3px solid var(--border);
  padding: 2px 0 2px 20px; color: var(--fg-muted); font-style: normal;
}
.prose code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; background: var(--bg-subtle);
  border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 1.5px 5px; color: var(--fg);
}
.prose pre {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 18px; overflow-x: auto; font-size: 13px;
}
.prose pre code { background: none; border: none; padding: 0; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }

/* Tables carry the comparison pages, so they get real treatment rather than
   browser defaults. They scroll inside their own box on narrow screens. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
  border-collapse: collapse; width: 100%; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px;
  /* Below this the columns become unreadable, so the wrapper scrolls instead
     of the cells collapsing to two words per line. */
  min-width: 520px;
}
.prose th, .prose td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft); vertical-align: top;
}
.prose thead th {
  background: var(--bg-subtle); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose td { color: var(--fg-muted); }
.prose td:first-child { color: var(--fg); font-weight: 500; }

/* ─── Callouts ─── */
.note {
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  background: var(--bg-subtle); border-radius: 8px;
  padding: 16px 20px; font-size: 14.5px; line-height: 1.65;
  color: var(--fg-muted);
}
.note strong { color: var(--fg); }
.note-warn {
  border-color: #EADFC2; border-left-color: var(--warning);
  background: var(--warning-bg); color: #5E430F;
}
.note-warn strong { color: #4A350B; }

/* ─── Steps ─── */
.steps { list-style: none; counter-reset: step; padding: 0; }
.steps li {
  counter-increment: step; position: relative;
  padding-left: 44px; margin-top: 22px;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: var(--primary-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; font-variant-numeric: lining-nums;
}
.steps h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; letter-spacing: -0.018em; }
.steps p { margin: 0; color: var(--fg-muted); font-size: 14.5px; line-height: 1.65; }

/* ─── FAQ ─── */
.faq-list { max-width: 72ch; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 34px 18px 0; position: relative;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--fg); line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.75px solid var(--fg-subtle);
  border-bottom: 1.75px solid var(--fg-subtle);
  transform: rotate(45deg); transition: transform .18s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:hover { color: var(--primary); }
.faq-answer {
  padding: 0 40px 20px 0; font-size: 14.5px; line-height: 1.7;
  color: var(--fg-muted); max-width: 68ch;
}
.faq-answer > * + * { margin-top: 12px; }
.faq-answer a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* ─── CTA panel ─── */
.cta-panel {
  background: var(--primary); color: var(--primary-fg);
  border-radius: 14px; padding: 38px 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px; align-items: center;
}
.cta-eyebrow {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--gold-on-navy); margin-bottom: 12px;
}
.cta-panel h2 {
  font-size: 25px; font-weight: 700; letter-spacing: -0.028em;
  line-height: 1.2; margin-bottom: 10px; color: var(--primary-fg);
}
.cta-panel p {
  font-size: 15px; line-height: 1.65; max-width: 56ch;
  color: hsl(0 0% 100% / 0.82);
}
.cta-action {
  background: var(--bg); color: var(--primary);
  height: 46px; padding: 0 24px; font-size: 15px; white-space: nowrap;
}
.cta-action:hover { background: var(--accent); }

/* ─── Related ─── */
.related-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.related-card {
  display: block; text-decoration: none; background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 20px;
  transition: border-color .15s, background .15s;
}
.related-card:hover { border-color: var(--primary); background: var(--bg-subtle); }
.related-kind {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--primary); margin-bottom: 9px;
}
.related-card h3 {
  font-size: 15.5px; font-weight: 650; letter-spacing: -0.018em;
  color: var(--fg); line-height: 1.35; margin-bottom: 7px;
}
.related-card p { font-size: 13.5px; line-height: 1.55; color: var(--fg-muted); }

/* ─── /resources hub ─── */
.hub-head { max-width: 640px; margin-bottom: 8px; }
.hub-group { padding: 44px 0; border-top: 1px solid var(--border-soft); }
.hub-group:first-of-type { border-top: none; padding-top: 0; }
.hub-group-head { margin-bottom: 22px; scroll-margin-top: 80px; }
.hub-group-head h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.026em; margin-bottom: 7px;
}
.hub-group-head p { font-size: 14.5px; color: var(--fg-muted); max-width: 62ch; line-height: 1.6; }
.hub-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; }
.hub-list a {
  display: block; text-decoration: none; padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}
.hub-list a:hover .hub-title { color: var(--primary); }
.hub-title {
  font-size: 14.5px; font-weight: 600; color: var(--fg);
  letter-spacing: -0.014em; line-height: 1.4; margin-bottom: 3px;
}
.hub-desc {
  font-size: 13px; color: var(--fg-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Glossary ─── */
.definition {
  border-left: 3px solid var(--primary); background: var(--bg-subtle);
  border-radius: 0 8px 8px 0; padding: 20px 24px; margin-bottom: 8px;
}
.definition dt {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--primary); margin-bottom: 8px;
}
.definition dd { font-size: 16px; line-height: 1.65; color: var(--fg); }

/* ─── Footer ─── */
footer {
  border-top: 1px solid var(--border);
  padding: 34px 0 40px; font-size: 13.5px;
  color: var(--fg-muted); line-height: 1.6;
}
.footer-inner {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 24px; flex-wrap: wrap;
}
.footer-brand {
  font-size: 14px; font-weight: 700; letter-spacing: -0.021em;
  color: var(--fg); margin-bottom: 6px;
}
.footer-note { max-width: 460px; color: var(--fg-muted); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--fg-muted); text-decoration: none; }
footer a:hover { color: var(--fg); }

/* ─── Responsive ─── */
@media (max-width: 1000px) {
  .page-grid { grid-template-columns: 1fr; gap: 0; }
  .rail { display: none; }
  .header-nav { display: none; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-panel { grid-template-columns: 1fr; gap: 24px; padding: 34px 30px; }
}
@media (max-width: 640px) {
  .header-inner { padding: 0 20px; height: 58px; }
  .container { padding: 0 20px; }
  .band, .band-alt { padding: 44px 0; }
  .page-head { padding: 24px 0 4px; }
  .page-head h1 { font-size: 30px; letter-spacing: -0.03em; max-width: none; }
  .page-intro { font-size: 15.5px; }
  .prose { font-size: 15px; }
  .prose h2 { font-size: 22px; margin-top: 38px; }
  .related-grid, .hub-list { grid-template-columns: 1fr; }
  .cta-panel { padding: 28px 22px; }
  .cta-panel h2 { font-size: 21px; }
  .cta-action { width: 100%; }
}