/* ─────────────────────────────────────────────────────────────────────────
   guide-modern.css: shared readability/modernisation layer for every
   static guide in /guides. Loaded AFTER each guide's inline <style>, so
   equal-specificity rules here win.

   The guides were written in two template families (".content" column and
   "article + aside" grid) with ~34 slightly different inline stylesheets,
   almost all sized in rem. Raising the root size scales every component in
   proportion; the rules below then tidy type, spacing and cards.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand tokens (some guides used an older teal/gold) */
  --teal: #1A5C70;
  --teal-dark: #123F4F;
  --teal-light: #E8F1F4;
  --gold: #C4622D;
  --gold-light: #FBF0E8;
  --cream: #FAF8F4;
  --light: #F3EFE9;
  --border: #E5DED4;
  --cream-dark: #E5DED4;
  --dark: #1B1B1B;
  --text-dark: #1B1B1B;
  --mid: #3F3F3F;
  --text-mid: #3F3F3F;
  --text-light: #6B6B6B;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 16px rgba(20, 30, 40, .05);
  --shadow: 0 2px 4px rgba(20, 30, 40, .04), 0 12px 32px rgba(20, 30, 40, .08);
  /* Brand font. Macs have no Calibri/Candara, so they get the system font
     (San Francisco) rather than falling through to Helvetica or Optima. */
  --font: Calibri, Candara, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 1. Bigger base: every rem in the guides grows ~19% (0.97rem → 18.4px).
   Calibri has a small x-height, so it needs a larger size than most fonts. */
html { font-size: 118.75%; -webkit-text-size-adjust: 100%; }
@media (max-width: 640px) { html { font-size: 112.5%; } }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body * { font-family: inherit; }
/* Logo at 600: on Macs (system-font fallback) 700 looks heavy */
body :is(nav .brand-name, .logo) { font-weight: 600; letter-spacing: -0.02em; }

/* 2. Headings */
h1, h2, h3, h4 { letter-spacing: -0.015em; text-wrap: balance; }
:is(.content, article) > :is(h2, h3) { color: var(--dark); }
h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.75rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; }
h1 em { color: var(--teal); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.8rem); line-height: 1.2; font-weight: 700; }
:is(.content, article) > h2 {
  margin: 3rem 0 .9rem;
  padding-bottom: 0;
  border-bottom: 0;
}
:is(.content, article) > h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--gold);
  margin-bottom: .75rem;
}
h3 { font-size: 1.15rem; line-height: 1.3; font-weight: 700; margin: 1.75rem 0 .5rem; }

/* 3. Body copy in the main reading column */
:is(.content, article) :is(p, li) { line-height: 1.75; text-wrap: pretty; }
:is(.content, article) > p,
:is(.content, article) > :is(ul, ol) > li { color: var(--mid); }
:is(.content, article) > p,
:is(.content, article) > ul > li,
:is(.content, article) > ol > li { font-size: 1rem; }
:is(.content, article) > p { margin-bottom: 1.1rem; }
:is(.content, article) > :is(ul, ol) { margin: 0 0 1.25rem 1.3rem; }
:is(.content, article) > :is(ul, ol) > li { margin-bottom: .5rem; padding-left: .2rem; }
:is(.content, article) li::marker { color: var(--teal); }
:is(.content, article) > :is(p, ul, ol) strong { color: var(--dark); font-weight: 650; }

/* Reading width: ~70 characters per line */
.content, .hero { max-width: 780px; }
.page-hero-inner, .guide-hero-inner { max-width: 820px; }

/* 4. Hero */
.intro, .hero-intro {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--mid);
}
.intro { border-left-width: 4px; padding-left: 1.1rem; }
:is(.meta, .hero-meta, .guide-meta) {
  font-size: .85rem;
  gap: .5rem 1.1rem;
  align-items: center;
}
:is(.meta, .hero-meta, .guide-meta) :is(span, div) { font-size: inherit; }
:is(.guide-label, .eyebrow) { font-size: .75rem; letter-spacing: .14em; }
.breadcrumb { font-size: .82rem; }

/* 5. Links and focus */
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
:is(.content, article) > p a,
:is(.content, article) > :is(ul, ol) a { text-decoration: underline; text-decoration-color: rgba(26, 92, 112, .35); }
:is(.content, article) > p a:hover,
:is(.content, article) > :is(ul, ol) a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* 6. Top bar: sticky with a soft blur */
body > nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 248, 244, .9);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
:is(nav a.cta, .nav-cta) { border-radius: 999px; padding: .6rem 1.2rem; transition: background .15s, transform .15s; }
:is(nav a.cta, .nav-cta):hover { background: var(--teal-dark); text-decoration: none; transform: translateY(-1px); }

/* 7. Callouts */
:is(.tip, .warning, .alert, .callout, .answer-box, .honest-box, .highlight-box, .key-points, .abuse-alert, .tiktok-callout) {
  border-radius: 14px;
  padding: 1.1rem 1.35rem;
  margin: 1.75rem 0;
}
:is(.tip, .warning, .alert, .callout) :is(p, li) { font-size: .95rem; line-height: 1.65; }
.tip { border-left-color: var(--teal); }

/* 8. Cards */
:is(.step, .option-card, .factor, .timeline-step, .mistake, .mistake-item, .section-card, .stat-card,
    .cost-card, .saving-card, .product-card, .route-card, .col-card, .rt-card, .feature, .faq-item,
    .guide-nav-card, .toc-card, .clause, .hybrid-card) {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}
:is(.step-body, .f-body, .stage-body) p { font-size: .95rem; line-height: 1.65; }
:is(.step-body, .f-body, .stage-body) h3 { font-size: 1.05rem; }
.stat { border-radius: 14px; padding: 1.1rem 1rem; box-shadow: var(--shadow-sm); }
.stat .label, .stat-label { font-size: .8rem; line-height: 1.45; }

/* 9. Tables: rounded, and scroll sideways on phones instead of squashing */
:is(.content, article) table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  font-size: .9rem;
  background: #fff;
}
:is(.content, article) th { font-weight: 650; }
:is(.content, article) :is(th, td) { padding: .75rem 1rem; }
:is(.content, article) tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  :is(.content, article) table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 10. CTA boxes and buttons */
:is(.cta-box, .sidebar-cta) { border-radius: 20px; box-shadow: var(--shadow); }
.cta-box { padding: 2rem 2.1rem; background: linear-gradient(145deg, var(--teal) 0%, var(--teal-dark) 100%); }
.cta-box h3 { font-size: 1.35rem; margin-top: 0; }
.cta-box :is(p, li) { font-size: .95rem; color: rgba(255, 255, 255, .9); }
:is(.cta-box a.btn, a.btn, .pc-btn) {
  border-radius: 999px;
  padding: .75rem 1.5rem;
  font-size: .95rem;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
:is(.cta-box a.btn, a.btn, .pc-btn):hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); text-decoration: none; filter: brightness(1.05); }
@media (max-width: 640px) { .cta-box { padding: 1.5rem 1.25rem; } }

/* 11. Related links, disclaimer, images */
.related { border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.related li { font-size: .98rem; }
.disclaimer { border-radius: 14px; font-size: .85rem; line-height: 1.65; }
:is(.article-image, .content img, article img) { border-radius: 14px; }
.hero-image { border-radius: 0; }
footer { font-size: .85rem; }

/* 12. Small-screen and sticky-sidebar tweaks */
aside { top: 96px; }
@media (max-width: 640px) {
  .intro, .hero-intro { font-size: 1.05rem; }
  :is(.meta, .hero-meta, .guide-meta) { gap: .35rem .9rem; }
}
/* Long stat figures (e.g. "Simultaneous") must not push the page sideways */
.stat .num, .stat-figure { overflow-wrap: anywhere; }
@media (max-width: 640px) { .stat .num { font-size: 1.35rem; } }
/* Narrow phones (≤400px): keep logo + "Get started" on one line */
@media (max-width: 400px) {
  body > nav { padding: 10px 14px; gap: 10px; }
  body :is(nav .brand-name, .logo) { font-size: 1.05rem; }
  body :is(nav .brand-tagline, .logo-tag) { display: none; }
  :is(nav a.cta, .nav-cta) { font-size: .8rem; padding: .5rem .9rem; }
}
/* Lead paragraph that sits inside <article> keeps its larger size */
:is(.content, article) > p.intro { font-size: 1.15rem; }
@media (max-width: 640px) { :is(.content, article) > p.intro { font-size: 1.05rem; } }
/* Breadcrumbs marked up as <nav> were picking up the top-bar's space-between */
nav.breadcrumb { justify-content: flex-start; gap: .5rem; flex-wrap: wrap; }