:root {
    --purple: #7B2D8E;
    --purple-hover: #6A2679;
    --purple-light: #F3E8F7;
    --purple-surface: #F9F3FB;
    --purple-deep: #4A1A5E;
    --bg: #FFFFFF;
    --bg-alt: #F7F7F9;
    --surface: #FFFFFF;
    --surface-alt: #F4F4F7;
    --border: #E5E5EA;
    --border-light: #EDEDF0;
    --text-dark: #1A1A2E;
    --text-mid: #4A4A5A;
    --text-light: #7A7A8A;
    --text-faint: #A0A0AE;
    --green: #1AA35E;
    --green-light: #E6F7EE;
    --caution: #D97706;
    --ribbon-gold: #F5A623;
    --ribbon-pink: #E8368F;
    --ribbon-teal: #0EA5E9;
    --topbar: #2D1B4E;
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
    --sh-sm: 0 1px 4px rgba(0,0,0,0.05);
    --sh-md: 0 4px 20px rgba(0,0,0,0.07);
  }
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 90px; }
  body {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    background: var(--bg); color: var(--text-dark);
    line-height: 1.7; font-size: 14px;
    -webkit-font-smoothing: antialiased;
  }

  /* ─── SKIP LINK (a11y) ─── */
  .skip-link {
    position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 999;
    background: var(--purple); color: #fff; padding: 12px 24px; font-size: 14px; font-weight: 700;
    text-decoration: none; border-radius: 0 0 var(--r-sm) var(--r-sm);
  }
  .skip-link:focus { position: fixed; left: 50%; top: 0; transform: translateX(-50%); width: auto; height: auto; }

  /* ─── GLOBAL FOCUS ─── */
  :focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
    border-radius: 2px;
  }
  :focus:not(:focus-visible) { outline: none; }

  /* ─── TOP BAR ─── */
  .topbar { background: var(--topbar); height: 4px; }

  /* ─── NAV ─── */
  .nav { background: var(--bg); border-bottom: 1px solid var(--border-light); position: sticky; top: 0; z-index: 200; }
  .nav-inner { max-width: 1220px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 88px; }
  .nav-logo { display: flex; align-items: center; text-decoration: none; }
  .nav-logo-img { height: 38px; width: auto; display: block; }
  .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }

  /* Top-level nav items */
  .nav-item { position: relative; }
  .nav-link,
  .nav-trigger { font-size: 15px; font-weight: 400; color: var(--text-dark); text-decoration: none; padding: 8px 16px; border-radius: 8px; transition: background 0.15s, color 0.15s; display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font-family: inherit; letter-spacing: normal; }
  .nav-link:hover,
  .nav-trigger:hover,
  .nav-trigger[aria-expanded="true"] { background: rgba(0,0,0,0.04); color: var(--text-dark); }
  .nav-chevron { transition: transform 0.2s; opacity: 0.5; }
  .nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); opacity: 1; }


  /* Dropdown panel */
  .nav-dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 240px; background: var(--bg); border: 1px solid var(--border-light); border-radius: 12px; padding: 16px 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 8px 16px rgba(0,0,0,0.04), 0 16px 32px rgba(0,0,0,0.04); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(4px); transition: opacity 0.15s, visibility 0.15s, transform 0.15s; pointer-events: none; }
  .nav-item--has-dropdown:hover .nav-dropdown,
  .nav-item--has-dropdown.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }

  /* Dropdown links */
  .nav-dropdown-link { display: block; font-size: 14px; font-weight: 400; color: var(--text-dark); text-decoration: none; padding: 8px 12px; border-radius: var(--r-sm); line-height: 1.4; transition: background 0.1s; }
  .nav-dropdown-link:hover { background: var(--purple-light); }
  .nav-dropdown-link:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; border-radius: var(--r-sm); }
  .nav-dropdown-desc { display: block; font-size: 12px; color: #8A8A9A; margin-top: 2px; }

  /* ─── BREADCRUMB ─── */
  .hero-zone {
    background: #F9F5FB;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 48px;
  }
  .crumb { max-width: 1220px; margin: 0 auto; padding: 16px 32px 0; font-size: 14px; color: var(--text-light); }
  .crumb a { color: var(--purple); text-decoration: none; font-weight: 500; }
  .crumb a:hover { text-decoration: underline; }
  .crumb .sep { margin: 0 6px; color: var(--text-faint); }

  /* ════════════════════════════════════
     HERO — full-width, no sidebar yet
     ════════════════════════════════════ */
  .hero-wrap { max-width: 1220px; margin: 0 auto; padding: 0 32px; }
  .hero { padding: 32px 0 0; }
  .hero-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
  .read-time { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--purple); }
  .ad-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-mid); border: 1px solid var(--border); padding: 8px 16px; border-radius: 20px; cursor: pointer; transition: 0.15s; position: relative; }
  .ad-pill:hover { background: var(--bg-alt); }
  .ad-body { display: none; position: absolute; right: 0; top: 40px; width: 380px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 24px; font-size: 14px; color: var(--text-light); line-height: 1.5; box-shadow: var(--sh-md); z-index: 10; }
  .ad-pill.open .ad-body { display: block; }

  .hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: stretch; }
  @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }
  .hero-left { display: flex; flex-direction: column; }

  .hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -0.5px; margin-bottom: 12px; }
  .hero-sub { font-size: 16px; color: var(--text-mid); line-height: 1.65; margin-bottom: 16px; }
  .byline { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 0; }
  .by-person { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-mid); }
  .by-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--purple-light), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
  .by-role { font-size: 11px; color: var(--text-light); line-height: 1; margin-bottom: 2px; }
  .by-name { font-weight: 600; color: var(--text-dark); line-height: 1; }
  .by-name a { color: inherit; text-decoration: none; }
  .by-name a:hover { color: var(--purple); }
  .hero-date { font-size: 14px; color: var(--text-mid); margin-top: 16px; }
  .verify { font-size: 14px; font-weight: 700; color: var(--purple); font-style: italic; line-height: 1.5; }

  /* "What this guide covers" mini-list */
  .hero-covers { margin-top: 24px; }
  .hero-covers-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-faint); margin-bottom: 8px;
  }
  .hero-covers-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .hero-covers-list a {
    display: inline-block; padding: 8px 16px;
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: 20px; font-size: 14px; font-weight: 500;
    color: var(--text-mid); text-decoration: none; transition: 0.15s;
  }
  .hero-covers-list a:hover {
    border-color: var(--purple); color: var(--purple); background: var(--purple-surface);
  }

  /* Top Pick card */
  .tp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-md); }
  .tp-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--purple); margin-bottom: 8px; text-align: center; }
  .tp-name { font-size: 14px; font-weight: 700; text-align: center; margin-bottom: 4px; color: var(--text-dark); }
  .tp-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); text-align: center; margin-bottom: 8px; }
  .tp-tagline { font-size: 14px; color: var(--text-mid); text-align: center; margin-bottom: 0; line-height: 1.45; }
  .tp-logo { width: 160px; height: 100px; margin: 24px auto; background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--text-light); }
  .tp-logo img { max-width: 140px; max-height: 80px; object-fit: contain; }
  .tp-list { list-style: none; margin-bottom: 24px; }
  .tp-list li { font-size: 14px; color: var(--text-mid); padding: 8px 0 8px 24px; position: relative; line-height: 1.5; }
  .tp-list li::before { content: '\2713'; position: absolute; left: 0; top: 8px; color: var(--green); font-weight: 700; font-size: 11px; }
  .tp-cta { display: block; width: 100%; padding: 16px; background: var(--purple); color: #fff; border: none; border-radius: var(--r-sm); font-size: 14px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; transition: 0.15s; }
  .tp-cta:hover { background: var(--purple-hover); }
  .tp-sub { display: block; text-align: center; margin-top: 8px; font-size: 11px; color: var(--text-light); text-decoration: none; }
  .tp-sub:hover { text-decoration: underline; }

  /* Trust strip */
  .trust { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding: 16px 24px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md); margin-top: auto; }
  .trust-i { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text-light); }
  .trust-dot { width: 6px; height: 6px; background: var(--purple); border-radius: 50%; }

  /* ─── ALSO CONSIDER ─── */
  .also-section { max-width: 1220px; margin: 0 auto; padding: 48px 32px 48px; }
  .also-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--purple); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
  .also-label::before { content: ''; width: 16px; height: 2px; background: var(--purple); }
  .also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 780px) { .also-grid { grid-template-columns: 1fr; } }
  .also-card { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; gap: 8px 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; transition: 0.2s; position: relative; overflow: hidden; }
  .also-card:hover { box-shadow: var(--sh-md); border-color: #ccc; }
  .also-badge { position: absolute; top: 0; right: 0; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: #fff; padding: 4px 12px 4px 16px; border-radius: 0 0 0 12px; }
  .also-badge.gold { background: var(--ribbon-gold); }
  .also-badge.pink { background: var(--ribbon-pink); }
  .also-badge.teal { background: var(--ribbon-teal); }
  .also-badge.top { background: var(--purple); }
  .also-logo { grid-row: 1; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--text-light); overflow: hidden; }
  .also-logo img { max-width: 40px; max-height: 40px; object-fit: contain; }
  .also-info { grid-row: 1; }
  .also-info h3 { font-size: 14.5px; font-weight: 700; line-height: 1.25; margin: 0; padding: 0; }
  .also-info p { font-size: 12.5px; color: var(--text-mid); line-height: 1.4; margin: 4px 0 0; padding: 0; }
  a.also-cta, .also-card a.also-cta { grid-column: 1 / -1; padding: 8px 16px; background: var(--purple); color: #fff; border: none; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: 0.15s; cursor: pointer; line-height: 1; display: inline-block; text-align: center; }
  a.also-cta:hover, .also-card a.also-cta:hover { background: var(--purple-hover); color: #fff; }

  /* ════════════════════════════════════
     FULL-WIDTH CONTENT (no sidebar)
     ════════════════════════════════════ */
  .full-width-content {
    max-width: 1220px; margin: 0 auto; padding: 0;
  }

  /* ════════════════════════════════════
     SIDEBAR LAYOUT — starts from reviews
     ════════════════════════════════════ */
  .layout { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 1fr 200px; gap: 48px; padding: 0 32px; align-items: start; }
  .main { min-width: 0; }
  @media (max-width: 1060px) { .layout { grid-template-columns: 1fr; gap: 0; } .sidebar { display: none; } }

  /* Sidebar */
  .sidebar { position: sticky; top: 84px; padding-top: 8px; }
  .sb-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-faint); margin-bottom: 14px; padding-left: 14px; }
  .sidebar ul { list-style: none; }
  .sidebar a { display: block; padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--text-light); text-decoration: none; border-left: 2px solid transparent; transition: 0.15s; line-height: 1.3; }
  .sidebar a:hover { color: var(--text-dark); background: var(--bg-alt); }
  .sidebar a.on { color: var(--purple); font-weight: 700; border-left-color: var(--purple); background: var(--purple-surface); }

  /* Sidebar CTA card */
  .sb-cta {
    margin-top: 24px; padding: 20px;
    background: var(--purple-surface); border: 1px solid var(--purple-light);
    border-radius: var(--r-lg);
  }
  .sb-cta p {
    font-size: 14px; color: var(--text-mid); line-height: 1.5; margin-bottom: 12px;
  }
  .sb-cta-btn {
    display: block; width: 100%; padding: 11px;
    background: var(--purple); color: #fff; border: none;
    border-radius: var(--r-sm); font-size: 14px; font-weight: 700;
    cursor: pointer; text-align: center; text-decoration: none; transition: 0.15s;
  }
  .sb-cta-btn:hover { background: var(--purple-hover); }

  /* Sidebar partner badge */
  .sb-partner {
    margin-top: 16px; padding: 16px;
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: var(--r-md); text-align: center;
  }
  .sb-partner-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 6px; }
  .sb-partner-name { font-size: 14px; /* already on scale */ font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
  .sb-partner-desc { font-size: 14px; color: var(--text-light); line-height: 1.4; margin-bottom: 10px; }
  .sb-partner-link { font-size: 14px; font-weight: 600; color: var(--purple); text-decoration: none; }
  .sb-partner-link:hover { text-decoration: underline; }

  /* ── Shared section header ── */
  .sh { margin-bottom: 28px; }
  .sh-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--purple); margin-bottom: 8px; }
  .sh-lab::before { content: ''; width: 14px; height: 2px; background: var(--purple); }
  .sh h2 { font-family: 'Newsreader', Georgia, serif; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.3px; line-height: 1.25; }
  .sh p { font-size: 14px; color: var(--text-mid); margin-top: 6px; line-height: 1.6; }

  /* ════════ MAIN CONTENT TYPOGRAPHY ════════
     Single source of truth for the primary content column.
     .main = design-reference class, .be-main = builder output class.
     Both resolve to identical rules here. No duplication elsewhere. */
  .main p, .be-main p { font-size: 18px; line-height: 34px; word-spacing: 1px; font-weight: 350; color: #44404A; margin-bottom: 28px; max-width: 780px; }
  .main p:last-child, .be-main p:last-child { margin-bottom: 0; }
  .main strong, .be-main strong { color: var(--text-dark); }
  .main h2, .be-main h2 { margin-top: 48px; margin-bottom: 48px; font-size: 32px; line-height: 1.19; color: #250141; max-width: 780px; }
  .main h2:first-child, .be-main h2:first-child { margin-top: 0; }
  .main h3, .be-main h3 { font-size: 22px; color: #250141; margin-top: 32px; margin-bottom: 32px; max-width: 780px; }
  .main ul, .main ol, .be-main ul, .be-main ol { margin: 24px 0; padding-left: 24px; max-width: 780px; }
  .main li, .be-main li { font-size: 18px; line-height: 34px; word-spacing: 1px; font-weight: 350; color: #44404A; margin-bottom: 8px; }
  /* WordPress block wrappers — constrain all Gutenberg figure/div wrappers
     to the same content measure as prose. This is the system-level fix:
     any wp-block-* inside the content column respects the 780px measure. */
  .main figure, .be-main figure,
  .main .wp-block-table, .be-main .wp-block-table { max-width: 780px; margin-bottom: 40px; overflow-x: auto; }
  /* ── Tables — harmonised with card spacing system ──
     Padding: 16px vertical (8-based rhythm), 20px horizontal
     Header: stronger bottom border for hierarchy
     Stripes: subtle alternating rows for scanability
     Letter-spacing: 0.03em matches card metric labels
     Line-height: 1.45 matches card body text ── */
  .main table, .be-main table { width: 100%; font-size: 14px; border-collapse: collapse; margin: 0; }
  .main table th, .be-main table th {
    padding: 14px 20px;
    font-weight: 700;
    color: var(--text-dark);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    vertical-align: bottom;
    border-bottom: 2px solid #E8E2EF;
  }
  .main table td, .be-main table td {
    padding: 14px 20px;
    color: #44404A;
    line-height: 1.45;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-light);
  }
  .main table tr:last-child td, .be-main table tr:last-child td { border-bottom: none; }
  /* Stripe rows — WordPress .is-style-stripes */
  .main .is-style-stripes table tbody tr:nth-child(odd),
  .be-main .is-style-stripes table tbody tr:nth-child(odd) { background: #FAFAFE; }
  .main .is-style-stripes table tbody tr:nth-child(even),
  .be-main .is-style-stripes table tbody tr:nth-child(even) { background: #fff; }
  /* Editorial prose links — exclude CTA buttons which have their own colour */
  .main a:not([class*="cta"]):not(.cc-tab-card__review-link),
  .be-main a:not([class*="cta"]):not(.cc-tab-card__review-link) { color: var(--purple); font-weight: 600; text-decoration: underline; text-decoration-color: var(--purple-light); text-underline-offset: 2px; transition: 0.15s; }
  .main a:not([class*="cta"]):not(.cc-tab-card__review-link):hover,
  .be-main a:not([class*="cta"]):not(.cc-tab-card__review-link):hover { text-decoration-color: var(--purple); }
  .main .sec-cards, .be-main .sec-cards { margin-top: 64px; }
  .main .sec-cards + h2, .be-main .sec-cards + h2 { margin-top: 16px; }
  .main .cc-faq__list, .be-main .cc-faq__list { margin-top: 24px; margin-bottom: 64px; }
  .main .sec-table, .be-main .sec-table { overflow-x: auto; max-width: 780px; }
  .main .tw, .be-main .tw { overflow-x: auto; max-width: 780px; }
  .main .cc-tab-card, .be-main .cc-tab-card { max-width: 780px; }

  /* ════════ GUTENBERG BLOCK STYLES ════════
     Core WordPress blocks styled to match the design system.
     These ensure a human using the block editor gets the same
     typography, spacing, and visual language as builder pages. */

  /* ── Blockquote ── */
  .main blockquote, .be-main blockquote {
    max-width: 780px;
    margin: 32px 0;
    padding: 24px 28px;
    border-left: 3px solid var(--purple);
    background: var(--purple-surface);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }
  .main blockquote p, .be-main blockquote p {
    font-size: 18px;
    line-height: 32px;
    font-weight: 400;
    font-style: italic;
    color: #44404A;
    margin-bottom: 0;
  }
  .main blockquote cite, .be-main blockquote cite {
    display: block;
    font-size: 14px;
    font-style: normal;
    color: var(--text-faint);
    margin-top: 12px;
  }

  /* ── Images ── */
  .main img, .be-main img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm);
  }
  .main .wp-block-image, .be-main .wp-block-image {
    max-width: 780px;
    margin: 32px 0;
  }
  .main .wp-block-image figcaption, .be-main .wp-block-image figcaption {
    font-size: 14px;
    color: var(--text-faint);
    margin-top: 8px;
    line-height: 1.5;
  }

  /* ── Separator / horizontal rule ── */
  .main hr, .be-main hr,
  .main .wp-block-separator, .be-main .wp-block-separator {
    max-width: 780px;
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 40px 0;
  }

  /* ── Pullquote ── */
  .main .wp-block-pullquote, .be-main .wp-block-pullquote {
    max-width: 780px;
    margin: 40px 0;
    padding: 32px 0;
    border-top: 2px solid var(--purple);
    border-bottom: 2px solid var(--purple);
  }
  .main .wp-block-pullquote blockquote {
    border-left: none;
    background: none;
    padding: 0;
    margin: 0;
  }
  .main .wp-block-pullquote p, .be-main .wp-block-pullquote p {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 400;
    font-style: italic;
    color: var(--text-dark);
    text-align: center;
  }

  /* ── Columns ── */
  .main .wp-block-columns, .be-main .wp-block-columns {
    max-width: 780px;
    margin: 32px 0;
    gap: 32px;
  }

  /* ── Group / cover ── */
  .main .wp-block-group, .be-main .wp-block-group {
    max-width: 780px;
    margin: 32px 0;
  }

  /* ── Code block ── */
  .main pre, .be-main pre,
  .main .wp-block-code, .be-main .wp-block-code {
    max-width: 780px;
    margin: 28px 0;
    padding: 20px 24px;
    background: #F8F7FA;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    overflow-x: auto;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #44404A;
  }
  .main code, .be-main code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.875em;
    background: #F8F7FA;
    padding: 2px 6px;
    border-radius: 3px;
  }
  .main pre code, .be-main pre code {
    background: none;
    padding: 0;
  }

  /* ── Embed / video ── */
  .main .wp-block-embed, .be-main .wp-block-embed {
    max-width: 780px;
    margin: 32px 0;
  }
  .main .wp-block-embed__wrapper, .be-main .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .main .wp-block-embed__wrapper iframe, .be-main .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* ── Button ── */
  .main .wp-block-button, .be-main .wp-block-button {
    margin: 28px 0;
  }
  .main .wp-block-button__link, .be-main .wp-block-button__link {
    display: inline-block;
    padding: 12px 28px;
    background: var(--purple);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: background 0.15s;
  }
  .main .wp-block-button__link:hover, .be-main .wp-block-button__link:hover {
    background: var(--purple-deep);
  }

  /* ── Details (accordion) ── */
  .main details, .be-main details {
    max-width: 780px;
    margin: 16px 0;
    padding: 16px 20px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
  }
  .main details summary, .be-main details summary {
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    list-style: none;
  }
  .main details summary::-webkit-details-marker, .be-main details summary::-webkit-details-marker { display: none; }
  .main details[open] summary { margin-bottom: 12px; }

  /* ════════════════════════════════════════════
     CONTENT LAYOUT — two-column grid + sidebar
     ════════════════════════════════════════════ */
  .be-layout { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 1fr 200px; gap: 48px; padding: 0 32px; align-items: start; }
  .be-main { min-width: 0; overflow: hidden; }
  @media (max-width: 1060px) { .be-layout { grid-template-columns: 1fr; gap: 0; } .be-sidebar { display: none; } }
  .be-sidebar { position: sticky; top: 84px; padding-top: 8px; }
  .be-sidebar .sb-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-faint); margin-bottom: 14px; padding-left: 14px; }
  .be-sidebar ul { list-style: none; }
  .be-sidebar a { display: block; padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--text-light); text-decoration: none; border-left: 2px solid transparent; transition: 0.15s; line-height: 1.3; }
  .be-sidebar a:hover { color: var(--text-dark); background: var(--bg-alt); }
  .be-sidebar a.on { color: var(--purple); font-weight: 700; border-left-color: var(--purple); background: var(--purple-surface); }

  /* ── Byline aliases ── */
  .byline-block { margin-bottom: 0; }
  .byline-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .by-date { font-size: 14px; color: var(--text-mid); margin-top: 16px; }

  /* ── Section dividers ── */
  .cc-section-divider { display: flex; align-items: center; gap: 12px; margin: 56px 0 28px; }
  .cc-section-divider::before { content: ''; flex: 0 0 16px; height: 2px; background: var(--purple); }
  .cc-section-divider__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--purple); }

  /* ════════════════════════════════════════════
     TABBED CARD COMPONENT (.cc-tab-card)
     Single unified divider: #E8E2EF
     Outer padding: 40px
     Internal grid shares one content column
     ════════════════════════════════════════════ */
  .cc-tab-card {
    border: 1px solid #E8E2EF; border-radius: 14px; background: #fff;
    margin-top: 48px; margin-bottom: 48px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .cc-tab-card__strip {
    background: #FDFCFE; border-bottom: 1px solid #E8E2EF;
    padding: 8px 40px; font-size: 14px; font-weight: 500;
    color: #A0A0AA; margin-bottom: 28px;
  }
  .cc-tab-card__header {
    display: grid; grid-template-columns: 120px 1fr auto;
    gap: 0 28px; align-items: center; min-height: 92px; padding: 0 40px 28px;
  }
  .cc-tab-card__image {
    width: 120px; height: 86px; background: #FCFBFD;
    border-radius: 8px; border: 1px solid #EEEAF2;
    display: flex; align-items: center; justify-content: center; padding: 6px;
  }
  .cc-tab-card__image img { max-width: 100%; max-height: 72px; object-fit: contain; }
  .cc-tab-card__identity h3 {
    font-size: 17px; font-weight: 700; line-height: 1.12;
    color: #2A2A2E; margin: 0 0 10px 0; max-width: 28ch;
  }
  .cc-tab-card__summary { font-size: 14px; line-height: 1.45; color: #4A4A52; max-width: 36ch; }
  .cc-tab-card__header-cta { display: flex; align-items: center; flex-shrink: 0; align-self: center; }
  .be-main .cc-tab-card__cta, .main .cc-tab-card__cta {
    display: inline-block; padding: 10px 24px; background: var(--purple); color: #fff;
    font-size: 14px; font-weight: 600; border-radius: 7px; text-decoration: none;
    text-align: center; transition: background 0.15s; white-space: nowrap; border: none; cursor: pointer;
  }
  .be-main .cc-tab-card__cta:hover, .main .cc-tab-card__cta:hover { background: var(--purple-hover); color: #fff; text-decoration: none; }
  .cc-tab-card__stats {
    display: flex; gap: 0; margin: 0 40px; padding: 24px 0;
    border-top: 1px solid #E8E2EF; border-bottom: 1px solid #E8E2EF;
  }
  .cc-tab-card__stat { flex: 1; padding: 0; }
  .cc-tab-card__stat + .cc-tab-card__stat { border-left: 1px solid #E8E2EF; padding-left: 24px; margin-left: 24px; }
  .cc-tab-card__stat-label {
    display: block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em; color: #8A8A94; margin-bottom: 6px;
  }
  .cc-tab-card__stat-value { display: block; font-size: 14px; font-weight: 700; color: #2A2A2E; line-height: 1.2; }
  .cc-tab-card__tabs { display: flex; gap: 0; margin: 0 40px; padding-top: 0; border-bottom: 1px solid #E8E2EF; }
  .cc-tab-card__tab {
    padding: 10px 12px; font-size: 14px; font-weight: 500; color: #A0A0AA;
    background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap;
  }
  .cc-tab-card__tab:hover { color: #4A4A52; }
  .cc-tab-card__tab:first-child { padding-left: 0; }
  .cc-tab-card__tab--active { color: var(--purple); font-weight: 600; border-bottom-color: var(--purple); }
  .cc-tab-card__tab:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; border-radius: 4px; }
  .cc-tab-card__panel { display: none; padding: 28px 40px; }
  .cc-tab-card__panel--active { display: block; }
  .cc-tab-card__item { font-size: 14px; line-height: 1.45; color: #4A4A52; padding: 0; margin-bottom: 18px; max-width: 52ch; }
  .cc-tab-card__item:last-child { margin-bottom: 0; }
  .cc-tab-card__item strong { color: #2A2A2E; font-weight: 700; }
  .cc-tab-card__detail-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #F0ECF4; }
  .cc-tab-card__detail-row:last-child { border-bottom: none; }
  .cc-tab-card__detail-label { font-size: 14px; font-weight: 600; color: #6E6E78; flex-shrink: 0; width: 160px; }
  .cc-tab-card__detail-value { font-size: 14px; font-weight: 600; color: #2A2A2E; text-align: right; line-height: 1.45; }
  .cc-tab-card__qual { font-size: 11px; font-weight: 400; color: #8A8A94; display: block; }
  .cc-tab-card__list { margin: 0 0 16px; padding: 0; }
  .cc-tab-card__list-item { position: relative; padding: 6px 0 6px 28px; font-size: 14px; line-height: 1.5; color: #2A2A2E; list-style: none; }
  .cc-tab-card__list-item::before { position: absolute; left: 0; top: 7px; font-size: 14px; }
  .cc-tab-card__list-item--pro::before { content: "\2713"; color: #1B8A3E; }
  .cc-tab-card__list-item--con::before { content: "\2717"; color: #C0392B; }
  .cc-tab-card__list--pros { border-bottom: 1px solid #E8E2EF; padding-bottom: 12px; margin-bottom: 12px; }
  .cc-tab-card__list--cons { margin-bottom: 0; }
  .cc-tab-card__footer { margin: 0 40px; padding: 16px 0 20px; border-top: 1px solid #E8E2EF; }
  .cc-tab-card__trust { font-size: 11px; color: #B0B0BA; line-height: 1.4; }
  .cc-tab-card__review-link { display: inline-block; margin-right: 16px; font-size: 14px; font-weight: 600; color: var(--purple); text-decoration: none; }
  .cc-tab-card__review-link:hover { text-decoration: underline; }
  @media (max-width: 640px) {
    .cc-tab-card__strip { padding: 10px 24px; }
    .cc-tab-card__header { grid-template-columns: 72px 1fr; grid-template-rows: auto auto; gap: 0 14px; padding: 0 24px 24px; }
    .cc-tab-card__image { width: 72px; height: 52px; padding: 5px; }
    .cc-tab-card__identity h3 { font-size: 16px; }
    .cc-tab-card__header-cta { grid-column: 1 / -1; padding-top: 12px; }
    .be-main .cc-tab-card__cta, .main .cc-tab-card__cta { display: block; width: 100%; text-align: center; min-width: 0; }
    .cc-tab-card__stats { flex-direction: column; margin: 0 24px; padding: 20px 0; }
    .cc-tab-card__stat + .cc-tab-card__stat { border-left: none; border-top: 1px solid #E8E2EF; padding-left: 0; margin-left: 0; padding-top: 12px; margin-top: 12px; }
    .cc-tab-card__tabs { margin: 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cc-tab-card__panel { padding: 24px; }
    .cc-tab-card__footer { margin: 0 24px; padding: 20px 0 24px; }
  }

  /* ════════════════════════════════════════════
     FAQ COMPONENT (.cc-faq)
     ════════════════════════════════════════════ */
  .cc-faq__list { list-style: none; padding: 0; margin: 0; }
  .cc-faq__item { border-bottom: 1px solid var(--border-light); }
  .cc-faq__item:last-child { border-bottom: none; }
  .cc-faq__question {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; cursor: pointer; font-size: 14px; font-weight: 600;
    gap: 12px; list-style: none; user-select: none; transition: 0.1s;
  }
  .cc-faq__question:hover { background: var(--bg-alt); }
  .cc-faq__question::-webkit-details-marker { display: none; }
  .cc-faq__question::marker { display: none; content: ''; }
  .cc-faq__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-faint); transition: transform 0.2s; }
  .cc-faq__details[open] .cc-faq__icon { transform: rotate(90deg); color: var(--purple); }
  .cc-faq__item.open .cc-faq__icon { transform: rotate(90deg); color: var(--purple); }
  .cc-faq__answer { padding: 0 24px 20px; font-size: 14px; color: var(--text-mid); line-height: 1.65; }
  .cc-faq__answer p { margin-bottom: 12px; }
  .cc-faq__answer p:last-child { margin-bottom: 0; }
  .cc-faq__item .cc-faq__answer { display: none; }
  .cc-faq__item.open .cc-faq__answer { display: block; }

  /* ── Builder content width fallback ── */
  .builder-content > p, .builder-content > h2, .builder-content > h3,
  .builder-content > ul, .builder-content > ol, .builder-content > blockquote {
    max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px;
  }

  /* ════════ EDITORIAL PROSE SECTION ════════ */
  .sec-prose { padding: 56px 0; }
  .prose-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 40px 44px;
  }
  @media (max-width: 720px) { .prose-card { padding: 28px 24px; } }
  .prose-card h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 22px; font-weight: 700; line-height: 1.3;
    letter-spacing: -0.2px; margin-bottom: 20px;
  }
  .prose-card h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 22px; font-weight: 700; line-height: 1.3;
    margin-top: 32px; margin-bottom: 12px;
  }
  .prose-card p {
    font-size: 14px; color: var(--text-mid);
    line-height: 1.8; margin-bottom: 16px;
    max-width: 680px;
  }
  .prose-card a { color: var(--purple); font-weight: 600; text-decoration: underline; text-decoration-color: var(--purple-light); text-underline-offset: 2px; transition: 0.15s; }
  .prose-card a:hover { text-decoration-color: var(--purple); }
  .prose-card ul, .prose-card ol {
    padding-left: 20px; margin-bottom: 16px; max-width: 680px;
  }
  .prose-card li {
    font-size: 14px; color: var(--text-mid);
    line-height: 1.75; padding: 3px 0;
  }
  .prose-card li a { font-weight: 600; }

  /* Callout block inside prose */
  .prose-callout {
    background: var(--purple-surface);
    border-left: 3px solid var(--purple);
    padding: 18px 24px; margin: 24px 0;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    max-width: 680px;
  }
  .prose-callout p { color: var(--text-dark); margin-bottom: 0; font-size: 14px; line-height: 1.7; }
  .prose-callout strong { color: var(--purple); }

  /* Key takeaway box */
  .prose-takeaway {
    background: var(--green-light);
    border: 1px solid #C6EDDA;
    border-radius: var(--r-md);
    padding: 20px 24px; margin: 28px 0;
    max-width: 680px;
  }
  .prose-takeaway-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--green); margin-bottom: 6px;
  }
  .prose-takeaway p { color: var(--text-dark); margin-bottom: 0; font-size: 14px; line-height: 1.65; }

  /* ════════ §2 TABLE ════════ */
  .sec-table { padding: 56px 0px; background: var(--bg-alt); border-radius: var(--r-lg); margin-bottom: 64px; }
  .sec-table .sh { padding: 0 32px; }
  .sec-table .tw { margin: 0 32px; }
  .tw { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh-sm); }
  .ct { width: 100%; border-collapse: collapse; background: var(--surface); min-width: 820px; }
  .ct thead th {
    background: var(--purple-deep); color: rgba(255,255,255,0.85);
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.7px; padding: 16px 20px; text-align: left; white-space: nowrap;
  }
  .ct thead th:first-child { padding-left: 24px; }
  .ct thead th:last-child { padding-right: 24px; text-align: center; }
  .ct tbody td {
    padding: 20px 20px; font-size: 14px;
    border-bottom: 1px solid var(--border-light); vertical-align: middle;
  }
  .ct tbody td:first-child { padding-left: 24px; }
  .ct tbody td:last-child { padding-right: 24px; text-align: center; }
  .ct tbody tr:last-child td { border-bottom: none; }
  .ct tbody tr { transition: background 0.1s; }
  .ct tbody tr:hover { background: var(--purple-surface); }
  .tp { display: flex; align-items: center; gap: 12px; font-weight: 600; white-space: nowrap; }
  .tl {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--surface-alt); border: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: var(--text-faint); flex-shrink: 0;
  }
  .tt {
    display: inline-block; background: var(--purple-light); color: var(--purple);
    font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    white-space: nowrap;
  }
  /* CTA button */
  .tc {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 90px; padding: 10px 18px;
    background: var(--purple); color: #fff;
    font-size: 14px; font-weight: 700; border-radius: var(--r-sm);
    text-decoration: none; transition: 0.15s; white-space: nowrap;
  }
  .tc:hover { background: var(--purple-hover); }

  /* ════════ §3 PRODUCT CARDS — redesigned ════════ */
  .sec-cards { padding: 56px 0; }

  .pc {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); margin-bottom: 28px; overflow: hidden;
    transition: 0.2s;
  }
  .pc:hover { box-shadow: var(--sh-md); }

  /* ── Header: offer banner + logo/title + key stats ── */
  .pc-banner {
    background: var(--purple-surface); border-bottom: 1px solid var(--border-light);
    padding: 10px 32px; font-size: 14px; font-weight: 700; color: var(--purple);
  }
  .pc-header {
    display: grid; grid-template-columns: 64px 1fr auto;
    gap: 20px; align-items: start;
    padding: 28px 32px;
  }
  @media (max-width: 720px) { .pc-header { grid-template-columns: 56px 1fr; } .pc-header-cta { grid-column: 1 / -1; } }
  .pc-logo {
    width: 64px; height: 64px; border-radius: var(--r-md);
    background: var(--surface-alt); border: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px; color: var(--text-light);
  }
  .pc-title-group {}
  .pc-title { font-size: 22px; font-weight: 800; line-height: 1.25; margin-bottom: 4px; }
  .pc-subtitle { font-size: 14px; color: var(--text-mid); line-height: 1.5; }
  .pc-header-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 170px; }
  .pc-btn {
    display: block; width: 100%; padding: 13px 20px;
    background: var(--purple); color: #fff; border: none;
    border-radius: var(--r-sm); font-size: 14px; font-weight: 700;
    text-align: center; text-decoration: none; cursor: pointer; transition: 0.15s;
  }
  .pc-btn:hover { background: var(--purple-hover); }
  .pc-btn-sub { font-size: 11px; color: var(--text-light); }

  /* ── Fee grid: 2x2 ── */
  .pc-feegrid {
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }
  .pc-feeblock {
    padding: 16px 32px;
    border-right: 1px solid var(--border-light);
  }
  .pc-feeblock:nth-child(2n) { border-right: none; }
  .pc-feeblock:nth-child(n+3) { border-top: 1px solid var(--border-light); }
  .pc-fee-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--text-faint); margin-bottom: 3px;
  }
  .pc-fee-value { font-size: 18px; font-weight: 700; color: var(--text-dark); line-height: 1.3; }
  .pc-fee-note { font-size: 11px; color: var(--text-light); margin-top: 1px; }

  /* ── Semantic callout lines (BE signature) ── */
  .pc-callouts { padding: 24px 32px; }
  .pc-callout {
    display: flex; gap: 12px; align-items: baseline;
    padding: 10px 16px; margin-bottom: 8px;
    background: var(--bg-alt); border-radius: var(--r-sm);
    border-left: 3px solid transparent;
    font-size: 14px; line-height: 1.5; color: var(--text-mid);
  }
  .pc-callout:last-child { margin-bottom: 0; }
  .pc-callout strong {
    font-size: 11px; font-weight: 700; white-space: nowrap;
    min-width: 80px; flex-shrink: 0;
  }
  .pc-callout.best { border-left-color: var(--purple); }
  .pc-callout.best strong { color: var(--purple); }
  .pc-callout.warn { border-left-color: var(--caution); }
  .pc-callout.warn strong { color: var(--caution); }
  .pc-callout.no { border-left-color: #DC2626; }
  .pc-callout.no strong { color: #DC2626; }
  .pc-callout.elig { border-left-color: var(--text-light); }
  .pc-callout.elig strong { color: var(--text-mid); }

  /* ── Expandable editorial body ── */
  .pc-body {
    padding: 0 32px; max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }
  .pc.expanded .pc-body {
    max-height: 600px; padding: 24px 32px;
    border-top: 1px solid var(--border-light);
  }
  .pc-body p {
    font-size: 14px; color: var(--text-mid);
    line-height: 1.75; margin-bottom: 12px; max-width: 680px;
  }
  .pc-body p:last-child { margin-bottom: 0; }
  .pc-expand {
    display: block; width: 100%; padding: 12px 32px;
    background: none; border: none; border-top: 1px solid var(--border-light);
    font-size: 14px; font-weight: 600; color: var(--purple);
    cursor: pointer; text-align: left; transition: 0.15s;
  }
  .pc-expand:hover { background: var(--purple-surface); }
  .pc.expanded .pc-expand span { display: inline-block; transform: rotate(180deg); }

  /* ── Structured key-value bullets (Capitalise-inspired) ── */
  .pc-kv { padding: 0 32px 24px; }
  .pc-kv-item {
    display: flex; gap: 10px; align-items: baseline;
    padding: 8px 0; border-bottom: 1px solid var(--border-light);
    font-size: 14px; line-height: 1.6; color: var(--text-mid);
  }
  .pc-kv-item:last-child { border-bottom: none; }
  .pc-kv-tick {
    color: var(--green); font-weight: 700; font-size: 14px;
    flex-shrink: 0; margin-top: 1px;
  }
  .pc-kv-item strong {
    color: var(--text-dark); font-weight: 700;
    min-width: 90px; flex-shrink: 0;
  }

  /* ── "What's new" freshness block ── */
  .pc-new {
    margin: 0 32px 20px; padding: 16px 20px;
    background: var(--green-light); border: 1px solid #C6EDDA;
    border-radius: var(--r-md);
  }
  .pc-new-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--green); margin-bottom: 6px;
  }
  .pc-new ul { list-style: none; }
  .pc-new li {
    font-size: 14px; color: var(--text-mid); line-height: 1.55;
    padding: 3px 0 3px 16px; position: relative;
  }
  .pc-new li::before {
    content: '→'; position: absolute; left: 0; top: 3px;
    color: var(--green); font-weight: 700; font-size: 11px;
  }

  /* ── Editorial headline (use-case framing) ── */
  .pc-editorial-hl {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 22px; font-weight: 700; line-height: 1.3;
    color: var(--text-dark); padding: 0 32px;
    margin-bottom: 20px;
  }

  /* ── Verified footer ── */
  .pc-verified {
    padding: 10px 32px; font-size: 11px; color: var(--text-faint);
    border-top: 1px solid var(--border-light);
  }

  /* ════════ §4 SEGMENTS ════════ */
  .sec-seg { padding: 56px 32px; background: var(--bg-alt); border-radius: var(--r-lg); margin-bottom: 8px; }
  .sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 860px) { .sg { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .sg { grid-template-columns: 1fr; } }
  .s { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; transition: 0.2s; cursor: pointer; position: relative; overflow: hidden; }
  .s::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--purple); transform: scaleX(0); transition: 0.2s; }
  .s:hover { box-shadow: var(--sh-md); border-color: var(--purple); }
  .s:hover::after { transform: scaleX(1); }
  .s-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--purple-light); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 14px; }
  .s h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
  .s p { font-size: 14px; color: var(--text-mid); line-height: 1.5; margin-bottom: 10px; }
  .s-pk { font-size: 14px; font-weight: 700; color: var(--purple); }

  /* ════════ §5 GUIDE ════════ */
  .sec-guide { padding: 56px 0; }
  .gg { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 720px) { .gg { grid-template-columns: 1fr; } }
  .gc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; }
  .gc h3 { font-family: 'Newsreader', Georgia, serif; font-size: 18px; font-weight: 700; margin-bottom: 16px; }
  .gc ol, .gc ul { padding-left: 18px; }
  .gc li { font-size: 14px; color: var(--text-mid); padding: 5px 0; line-height: 1.55; }
  .gc li strong { color: var(--text-dark); }

  /* ════════ §6 INSIGHTS ════════ */
  .sec-ins { padding: 56px 32px; background: var(--bg-alt); border-radius: var(--r-lg); margin-bottom: 8px; }
  .ins { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; margin-bottom: 18px; }
  .ins h3 { font-family: 'Newsreader', Georgia, serif; font-size: 18px; font-weight: 700; margin-bottom: 14px; }
  .ins p { font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: 12px; }
  .scn { background: var(--purple-surface); border-left: 3px solid var(--purple); padding: 18px 22px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-top: 14px; }
  .scn p { font-size: 14px; color: var(--text-dark); margin-bottom: 0; }
  .scn strong { color: var(--purple); }

  /* ════════ §7 FAQs ════════ */
  .sec-faq { padding: 56px 0; }
  .fl { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
  .fq { border-bottom: 1px solid var(--border-light); }
  .fq:last-child { border-bottom: none; }
  .fq-q { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; cursor: pointer; font-size: 14px; font-weight: 600; transition: 0.1s; user-select: none; gap: 12px; }
  .fq-q:hover { background: var(--bg-alt); }
  .fq-ch { font-size: 14px; color: var(--text-faint); transition: transform 0.2s; flex-shrink: 0; }
  .fq.open .fq-ch { transform: rotate(180deg); color: var(--purple); }
  .fq-a { display: none; padding: 0 24px 20px; font-size: 14px; color: var(--text-mid); line-height: 1.65; }
  .fq.open .fq-a { display: block; }

  /* ════════ §8 LINKS ════════ */
  .sec-lnk { padding: 56px 32px; background: var(--bg-alt); border-radius: var(--r-lg); margin-bottom: 8px; }
  .lg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 720px) { .lg { grid-template-columns: 1fr; } }
  .il { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; text-decoration: none; color: var(--text-dark); font-size: 14px; font-weight: 600; transition: 0.15s; }
  .il:hover { border-color: var(--purple); color: var(--purple); box-shadow: var(--sh-sm); }

  /* ════════ §9 TRUST ════════ */
  .sec-trust { padding: 56px 0; }
  .tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 720px) { .tg { grid-template-columns: 1fr; } }
  .trst { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; }
  .trst h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
  .trst p { font-size: 14px; color: var(--text-mid); line-height: 1.6; }

  /* ════════ FOOTER ════════ */
  .ft { background: var(--topbar); color: #9B8FB0; padding: 44px 32px; font-size: 14px; line-height: 1.6; }
  .ft-in { max-width: 1220px; margin: 0 auto; }
  .ft-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 20px; }
  .ft-col .ft-heading { color: #D4C8E0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; }
  .ft-col a { display: block; color: #9B8FB0; text-decoration: none; padding: 3px 0; transition: 0.15s; }
  .ft-col a:hover { color: #fff; }
  .ft-leg { font-size: 11px; color: #6A5C7A; max-width: 820px; }

  /* ════════ MOBILE NAV ════════ */

  /* Burger button — hidden on desktop */
  .nav-burger { display: none; }

  @media (max-width: 768px) {
    /* Tighter nav bar */
    .nav-inner { height: 56px; padding: 0 20px; }
    .nav-logo-img { height: 30px; }

    /* Hide desktop links, show burger */
    .nav-links { display: none; }
    .nav-burger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 8px;
      background: none;
      border: none;
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.15s;
      flex-shrink: 0;
    }
    .nav-burger:hover { background: rgba(0,0,0,0.05); }
    .nav-burger-bar {
      display: block;
      width: 22px;
      height: 2px;
      background: #2A2A2E;
      border-radius: 2px;
      transition: transform 0.2s, opacity 0.2s;
      transform-origin: center;
    }

    /* Burger → X when open */
    .nav.is-mobile-open .nav-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.is-mobile-open .nav-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav.is-mobile-open .nav-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile menu panel */
    .nav.is-mobile-open .nav-links {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 56px;
      left: 0;
      right: 0;
      background: #fff;
      border-bottom: 1px solid #E5E5EA;
      padding: 8px 0 16px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      z-index: 199;
      gap: 0;
    }

    /* Mobile top-level items */
    .nav.is-mobile-open .nav-link,
    .nav.is-mobile-open .nav-trigger {
      width: 100%;
      padding: 12px 20px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 0;
      justify-content: space-between;
    }

    /* Mobile dropdowns — static, not floating */
    .nav.is-mobile-open .nav-dropdown {
      position: static;
      transform: none;
      opacity: 1;
      visibility: visible;
      box-shadow: none;
      border: none;
      border-radius: 0;
      padding: 0 0 4px 0;
      min-width: 0;
      background: transparent;
      display: none;
      pointer-events: auto;
    }
    .nav.is-mobile-open .nav-item--has-dropdown.is-open .nav-dropdown { display: block; }
    .nav.is-mobile-open .nav-dropdown-link {
      padding: 10px 20px 10px 32px;
      font-size: 15px;
      border-radius: 0;
    }
    .nav.is-mobile-open .nav-dropdown-link:hover { background: #EDE7F5; }

    /* Chevron stays visible on mobile */
    .nav.is-mobile-open .nav-chevron { opacity: 0.7; }
  }

  /* ════════ PRINT ════════ */
  @media print {
    .topbar, .nav, .progress-track, .sidebar, .ft, .skip-link,
    .sb-cta, .sb-partner, .cc-tab-card__cta { display: none; }
    body { font-size: 12pt; line-height: 1.6; color: #000; background: #fff; }
    .layout { display: block; max-width: 100%; padding: 0; }
    .main { max-width: 100%; }
    .main p, .main li { color: #000; font-size: 12pt; line-height: 1.6; }
    .main h2 { font-size: 18pt; margin-top: 24pt; page-break-after: avoid; }
    .main h3 { font-size: 14pt; page-break-after: avoid; }
    a { color: #000; text-decoration: underline; }
    .main a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
    .main a[href^="#"]::after, .main a[href^="javascript"]::after { content: ""; }
    img { max-width: 100%; page-break-inside: avoid; }
    table { page-break-inside: avoid; }
  }