/* ===== BlogIndexLayout.astro ===== */
@font-face {
        font-family: 'Inter';
        src: url('/fonts/inter-latin.woff2') format('woff2');
        font-weight: 100 900; font-display: swap; font-style: normal;
      }
      :root {
        --navy: #14503A; --mint: #F6871F; --white: #ffffff; --ink: #1b2432;
        --slate: #55627a; --muted: #8b98ad; --line: #e5e9f0; --soft: #f8fafc;
        --card: #ffffff; --page: #f4f6f9;
        --cat-buy: #0f9d6b; --cat-buy-bg: #ecfdf5; --cat-buy-line: #a7f3d0;
        --cat-safe: #b45309; --cat-safe-bg: #fff7ed; --cat-safe-line: #fed7aa;
        --shadow: 0 1px 2px rgba(10,25,47,.05), 0 10px 30px rgba(10,25,47,.07);
        --shadow-sm: 0 1px 2px rgba(10,25,47,.06);
      }
      * { box-sizing: border-box; }
      button { -webkit-appearance: none; appearance: none; }
      html { -webkit-text-size-adjust: 100%; }
      /* iOS Safari ignores overflow-x on body alone; the root html needs it too. */
      @media (max-width: 1119px) { html, body { overflow-x: hidden; } }
      body { margin: 0; overflow-x: hidden; font-family: Inter, system-ui, -apple-system, sans-serif;
             color: var(--ink); background: var(--page); line-height: 1.65; font-size: 16px;
             -webkit-font-smoothing: antialiased; }
      a { color: inherit; text-decoration: none; }
      .serif { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; }

      .site-header, .site-footer { background: var(--navy); color: var(--white); }
      .site-header { padding: 18px 0; }
      .brand { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
      .brand .cited { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; }
      .brand .labs { font-family: Inter, sans-serif; color: var(--mint); }
      .brand a { color: var(--white); }
      .site-footer { padding: 28px 0; font-size: 14px; color: var(--slate); }
      .site-footer a { color: var(--slate); }
      .site-footer a:hover { color: var(--white); }

      .lib-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
      main.lib { padding: 4px 0 40px; }

      /* Masthead */
      .masthead { padding: 52px 0 26px; text-align: center; }
      .masthead h1 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: clamp(32px, 5vw, 50px); line-height: 1.08;
                     margin: 0 0 14px; color: var(--ink); text-wrap: balance; font-weight: 700; }
      .masthead p { font-size: 18.5px; color: var(--slate); max-width: 60ch; margin: 0 auto; }
      .cat-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
      .cat-nav a { font-size: 13.5px; font-weight: 600; padding: 7px 15px; border-radius: 999px;
                   border: 1px solid var(--line); background: var(--card); color: var(--slate); transition: all .15s ease; }
      .cat-nav a:hover { border-color: var(--mint); color: var(--ink); }
      .cat-nav a.on { background: var(--navy); color: #fff; border-color: var(--navy); }

      /* Blog index search */
      .lib-search { display: flex; align-items: center; gap: 8px; max-width: 480px; margin: 24px auto 0;
                    border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 14px; background: var(--card);
                    box-shadow: var(--shadow-sm); }
      .lib-search:focus-within { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(16,185,129,.16); }
      .lib-search .s-ic { width: 18px; height: 18px; color: var(--muted); flex: none; }
      .lib-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
                          font-size: 16px; color: var(--ink); font-family: inherit; }
      .lib-search button { background: var(--navy); color: #fff; border: none; font-weight: 700; font-size: 14.5px;
                           padding: 10px 17px; border-radius: 9px; cursor: pointer; }
      .lib-search button:hover { background: #12233f; }
      .lib-results { max-width: 480px; margin: 10px auto 0; text-align: left; display: grid; gap: 6px; }
      .lib-results .r-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
                             border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; background: var(--card); color: var(--ink); }
      .lib-results .r-item:hover { border-color: var(--mint); }
      .lib-results .rt { font-weight: 600; font-size: 15px; }
      .lib-results .rc { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
      .lib-results .none { color: var(--slate); font-size: 14.5px; padding: 4px 2px; margin: 0; }
      .lib-results .none a { color: var(--mint); }

      /* Category hero (SEO) */
      .cat-hero { text-align: center; padding: 46px 24px 34px; margin: 12px 0 6px; border-radius: 20px;
                  border: 1px solid var(--line); background: var(--card); }
      .cat-hero.buy { background:
          radial-gradient(120% 130% at 50% -20%, var(--cat-buy-bg), transparent 60%), var(--card); }
      .cat-hero.safe { background:
          radial-gradient(120% 130% at 50% -20%, var(--cat-safe-bg), transparent 60%), var(--card); }
      .crumb { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 13px;
               color: var(--muted); margin-bottom: 18px; }
      .crumb a { color: var(--mint); font-weight: 600; }
      .crumb a:hover { text-decoration: underline; }
      .cat-badge { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 18px;
                   margin-bottom: 18px; }
      .cat-badge svg { width: 34px; height: 34px; }
      .cat-badge.buy { background: var(--cat-buy-bg); color: var(--cat-buy); box-shadow: inset 0 0 0 1px var(--cat-buy-line); }
      .cat-badge.safe { background: var(--cat-safe-bg); color: var(--cat-safe); box-shadow: inset 0 0 0 1px var(--cat-safe-line); }
      .cat-badge.brand { background: #ecfdf5; color: var(--mint); box-shadow: inset 0 0 0 1px #a7f3d0; }
      .cat-hero h1 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: clamp(32px, 4.8vw, 46px); line-height: 1.1;
                     margin: 0 0 14px; color: var(--ink); text-wrap: balance; }
      .cat-lead { font-size: 19px; line-height: 1.6; color: var(--slate); max-width: 60ch; margin: 0 auto; }
      .cat-meta-row { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 20px;
                      font-size: 13.5px; color: var(--muted); }
      .cat-meta-row .pill { font-weight: 700; color: var(--ink); background: var(--soft);
                            border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; }

      /* Category intro + FAQ (unique content for ranking) */
      .cat-more { margin: 56px auto 0; max-width: 760px; }
      .cat-more h2, .faq h2 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 26px; color: var(--ink); margin: 0 0 16px; text-align: center; }
      .cat-more p { font-size: 16.5px; color: var(--slate); line-height: 1.75; margin: 0 0 16px; }
      .faq { margin: 56px auto 0; max-width: 820px; }
      .qa-list { display: grid; gap: 14px; }
      .qa { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow-sm); }
      .qa h3 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 18.5px; color: var(--ink); margin: 0 0 8px; }
      .qa p { font-size: 15.5px; color: var(--slate); line-height: 1.7; margin: 0; }

      /* Category tag */
      .cat { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
             text-transform: uppercase; padding: 4px 10px; border-radius: 5px; margin-bottom: 14px; align-self: flex-start; }
      .cat.buy { color: var(--cat-buy); background: var(--cat-buy-bg); box-shadow: inset 0 0 0 1px var(--cat-buy-line); }
      .cat.safe { color: var(--cat-safe); background: var(--cat-safe-bg); box-shadow: inset 0 0 0 1px var(--cat-safe-line); }
      .cat.brand { color: var(--mint); background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; }

      /* Featured */
      .featured { display: grid; grid-template-columns: 1.05fr .95fr; background: var(--card);
                  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
                  box-shadow: var(--shadow); margin-top: 12px; }
      .featured .body { padding: 40px; display: flex; flex-direction: column; }
      .flag { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
              color: var(--mint); margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
      .flag::before { content: ""; width: 20px; height: 2px; background: var(--mint); }
      .featured h2 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 32px; line-height: 1.14; margin: 0 0 14px;
                     color: var(--ink); text-wrap: balance; }
      .featured .excerpt { font-size: 17px; color: var(--slate); margin: 0 0 auto; }
      .featured .hero-frame { display: block; height: 100%; }
      .featured .hero-img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; display: block; }
      .featured h2 a:hover { text-decoration: underline; }
      .hero-panel { position: relative; background:
          radial-gradient(120% 120% at 80% 10%, rgba(16,185,129,.28), transparent 55%),
          linear-gradient(160deg, #0d2038, #14503A 70%);
          display: grid; place-items: center; min-height: 320px; }
      .hero-panel .mark { width: 120px; height: 120px; }

      /* Meta row */
      .meta { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap;
              font-size: 13.5px; color: var(--muted); }
      .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: var(--navy);
                font-weight: 800; font-size: 12px; display: grid; place-items: center; flex: none;
                font-family: 'Barlow Semi Condensed', system-ui, sans-serif; }
      .meta .who { color: var(--slate); font-weight: 600; }
      .dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }

      /* Clusters */
      .cluster { margin-top: 54px; }
      .cluster-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--line);
                      padding-bottom: 13px; margin-bottom: 26px; }
      .cluster-head h3 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 25px; margin: 0; color: var(--ink); }
      .cluster-head .tick { width: 10px; height: 21px; border-radius: 3px; flex: none; transform: translateY(3px); }
      .cluster-head.buy .tick { background: var(--cat-buy); }
      .cluster-head.safe .tick { background: var(--cat-safe); }
      .cluster-head.brand .tick { background: var(--mint); }
      .cluster-head .more { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--mint); white-space: nowrap; }
      .cluster-head .more:hover { text-decoration: underline; }

      .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
      .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
              padding: 24px 24px 20px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
              transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
      .card:hover { transform: translateY(-3px); box-shadow: var(--shadow);
                    border-color: color-mix(in srgb, var(--mint) 40%, var(--line)); }
      .card h4 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 20px; line-height: 1.22; margin: 0 0 10px;
                 color: var(--ink); text-wrap: balance; }
      .card .excerpt { font-size: 14.5px; color: var(--slate); margin: 0 0 auto; }
      .card .meta { margin-top: 18px; font-size: 12.5px; }
      .card .avatar { width: 26px; height: 26px; font-size: 11px; }
      .card.filler { justify-content: center; align-items: center; text-align: center;
                     border-style: dashed; background: transparent; box-shadow: none; color: var(--muted); font-size: 14px; }
      .card.filler:hover { transform: none; }
      @media (prefers-reduced-motion: reduce) { .card, .cat-nav a { transition: none; } }

      /* Digest */
      .digest { margin: 60px 0 8px; background:
          radial-gradient(100% 140% at 0% 0%, rgba(16,185,129,.18), transparent 50%), var(--navy);
          border-radius: 18px; padding: 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; }
      .digest h3 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; color: #fff; font-size: 26px; margin: 0 0 8px; }
      .digest p { color: #aebfd6; margin: 0; font-size: 15px; }
      .digest form { display: flex; gap: 10px; }
      .digest input { flex: 1; min-width: 0; padding: 13px 15px; border-radius: 10px; border: 1px solid #24344f;
                      background: #0e1c31; color: #fff; font-size: 15px; }
      .digest input::placeholder { color: #7b8aa3; }
      .digest button { background: var(--mint); color: var(--navy); font-weight: 800; border: none;
                       padding: 13px 20px; border-radius: 10px; font-size: 15px; cursor: pointer; }
      .digest button:hover { filter: brightness(0.96); }

      @media (max-width: 860px) {
        .featured { grid-template-columns: 1fr; }
        .featured .hero-panel, .featured .hero-frame { order: -1; }
        .featured .hero-img { min-height: 200px; }
        .digest { grid-template-columns: 1fr; }
      }
      @media (max-width: 620px) {
        .grid { grid-template-columns: 1fr; }
        .featured .body { padding: 28px 24px; }
        /* CTA box: tighter padding + stacked, full-width form so nothing gets squeezed. */
        .digest { padding: 28px 22px; margin: 44px 0 8px; gap: 20px; }
        .digest h3 { font-size: 22px; }
        .digest form { flex-direction: column; gap: 12px; }
        .digest input, .digest button { width: 100%; }
      }

/* ===== BlogLayout.astro ===== */
@font-face {
        font-family: 'Inter';
        src: url('/fonts/inter-latin.woff2') format('woff2');
        font-weight: 100 900;
        font-display: swap;
        font-style: normal;
      }
      :root {
        --navy: #14503A;
        --mint: #F6871F;
        --white: #ffffff;
        --slate: #94a3b8;
        --ink: #1b2432;
        --line: #e5e9f0;
      }
      * { box-sizing: border-box; }
      html { -webkit-text-size-adjust: 100%; }
      body { overflow-x: hidden; }
      body {
        margin: 0;
        font-family: Inter, system-ui, -apple-system, sans-serif;
        color: var(--ink);
        background: var(--white);
        line-height: 1.7;
        font-size: 18px;
      }
      a { color: var(--mint); text-decoration: none; }
      a:hover { text-decoration: underline; }

      .site-header, .site-footer {
        background: var(--navy);
        color: var(--white);
      }
      .site-header { padding: 18px 0; }
      .wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
      .brand { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
      .brand .cited { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; }
      .brand .labs { font-family: Inter, sans-serif; color: var(--mint); }
      .brand a { color: var(--white); }
      .brand a:hover { text-decoration: none; }

      article { padding: 48px 0 64px; }
      article h1 {
        font-family: 'Barlow Semi Condensed', system-ui, sans-serif;
        font-size: clamp(28px, 5vw, 40px);
        line-height: 1.2;
        color: var(--navy);
        margin: 0 0 12px;
      }
      article h2 {
        font-family: 'Barlow Semi Condensed', system-ui, sans-serif;
        font-size: 26px;
        color: var(--navy);
        margin: 40px 0 12px;
      }
      article h3 { font-size: 20px; color: var(--navy); margin: 28px 0 8px; }
      .meta { color: var(--slate); font-size: 15px; margin-bottom: 32px; }
      .lede { font-size: 20px; color: #334155; }
      article img { max-width: 100%; height: auto; border-radius: 10px; }
      article blockquote {
        border-left: 3px solid var(--mint);
        margin: 24px 0; padding: 4px 0 4px 20px; color: #334155;
      }
      article code {
        background: #f1f5f9; padding: 2px 6px; border-radius: 4px;
        font-size: 0.9em;
      }
      article pre { background: var(--navy); color: #e2e8f0; padding: 18px; border-radius: 10px; overflow-x: auto; }
      article pre code { background: none; padding: 0; }
      hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

      .authorbox {
        margin-top: 40px; padding: 20px 22px; border: 1px solid var(--line);
        border-radius: 12px; background: #f8fafc; font-size: 16px; color: #334155;
      }
      .authorbox p { margin: 0; }
      .authorbox strong { color: var(--navy); }
      .cta {
        margin-top: 48px; padding: 28px; border: 1px solid var(--line);
        border-radius: 12px; background: #f8fafc;
      }
      .cta h3 { margin-top: 0; }
      .btn {
        display: inline-block; background: var(--mint); color: var(--navy);
        font-weight: 600; padding: 12px 22px; border-radius: 8px; margin-top: 8px;
      }
      .btn:hover { text-decoration: none; filter: brightness(0.96); }

      .site-footer { padding: 28px 0; font-size: 14px; color: var(--slate); }
      .site-footer a { color: var(--slate); }

/* ===== BlogPostLayout.astro ===== */
@font-face {
        font-family: 'Inter';
        src: url('/fonts/inter-latin.woff2') format('woff2');
        font-weight: 100 900; font-display: swap; font-style: normal;
      }
      :root {
        --navy: #14503A; --mint: #F6871F; --white: #fff; --slate: #94a3b8;
        --ink: #1f2937; --line: #e5e9f0; --bg-soft: #f8fafc;
        /* Table semantic tokens (separate from the mint accent) */
        --good: #0f9d6b; --good-bg: #ecfdf5; --good-line: #a7f3d0;
        --bad: #e11d48; --bad-bg: #fff1f2; --bad-line: #fecdd3;
        --warn: #b45309; --warn-bg: #fff7ed; --warn-line: #fed7aa;
        --row-hover: #eef6ff;
      }
      * { box-sizing: border-box; }
      html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
      /* Prevent horizontal scroll on mobile (sticky rail is desktop-only, so this is safe). */
      @media (max-width: 1119px) { html, body { overflow-x: hidden; } }
      body {
        margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif;
        color: var(--ink); background: var(--white); line-height: 1.75; font-size: 19px;
      }
      a { color: var(--mint); text-decoration: none; }
      a:hover { text-decoration: underline; }
      a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 4px; }
      @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
      img { max-width: 100%; }

      .site-header { background: var(--navy); padding: 18px 0; }
      .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
      .brand { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
      .brand .cited { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; }
      .brand .labs { color: var(--mint); }
      .brand a { color: var(--white); } .brand a:hover { text-decoration: none; }

      /* Hero (gradient, split: text left / image right) */
      .post-hero {
        color: #fff;
        background:
          radial-gradient(900px 380px at 88% 15%, rgba(16,185,129,.16), transparent 60%),
          linear-gradient(120deg, #08172b 0%, #14503A 52%, #102a45 100%);
        padding: 54px 0;
      }
      .hero-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
      @media (min-width: 900px) {
        .post-hero.has-img .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 48px; }
      }
      .hero-text { max-width: 660px; }
      .badge {
        display: inline-block; background: #ecfdf5; color: #047857; font-size: 12.5px; font-weight: 700;
        letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
      }
      .post-hero .badge { background: rgba(16,185,129,.18); color: var(--mint); }
      .post-hero h1 {
        font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: clamp(28px, 4.6vw, 44px);
        line-height: 1.16; color: #fff; margin: 0 0 18px;
      }
      .byline { display: flex; align-items: center; gap: 12px; color: #cbd5e1; font-size: 15px; }
      .avatar {
        width: 40px; height: 40px; border-radius: 50%; background: #112240; color: var(--mint);
        display: grid; place-items: center; font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 700; font-size: 16px; flex: none;
      }
      .byline a { color: #fff; font-weight: 600; }
      .hero-media { max-width: 540px; margin-left: auto; }
      .hero-img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 20px 50px rgba(0,0,0,.35); }

      /* Shell: floating left rail + centered column */
      .post-shell { display: block; padding: 40px 0 64px; }
      @media (min-width: 1120px) {
        .post-shell { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 56px; justify-content: center; }
      }
      .rail { display: none; }
      @media (min-width: 1120px) {
        .rail { display: block; position: sticky; top: 28px; align-self: start; }
      }
      .rail h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); margin: 0 0 10px; }
      .toc { list-style: none; margin: 0 0 26px; padding: 0; border-left: 2px solid var(--line); }
      .toc a {
        display: block; padding: 6px 0 6px 14px; margin-left: -2px; color: #64748b; font-size: 14px;
        line-height: 1.35; border-left: 2px solid transparent;
      }
      .toc a:hover { color: var(--navy); text-decoration: none; }
      .toc a.active { color: var(--navy); font-weight: 600; border-left-color: var(--mint); }
      .share { display: flex; gap: 10px; }
      .share a {
        width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; display: grid;
        place-items: center; color: #475569; font-size: 13px; font-weight: 700;
      }
      .share a:hover { border-color: var(--mint); color: var(--mint); text-decoration: none; }
      .rail-cta { margin-top: 26px; padding: 20px 18px; border-radius: 12px; background: linear-gradient(160deg, #10263f, #14503A); color: #fff; box-shadow: 0 12px 30px rgba(10,25,47,.18); }
      .rc-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: var(--mint); padding: 2px 8px; border-radius: 5px; margin-bottom: 10px; }
      .rc-title { font-size: 15.5px; font-weight: 700; color: #fff; margin-bottom: 6px; line-height: 1.3; }
      .rail-cta p { margin: 0 0 14px; font-size: 13.5px; color: #cbd5e1; line-height: 1.5; }
      .rail-cta a { display: block; text-align: center; background: var(--mint); color: var(--navy); font-size: 14px; font-weight: 700; padding: 10px; border-radius: 8px; }
      .rail-cta a:hover { text-decoration: none; filter: brightness(.96); }

      /* Article */
      .post-main { max-width: 720px; margin: 0 auto; min-width: 0; overflow-wrap: break-word; }
      .post-main > :first-child { margin-top: 0; }
      article :global(h2) { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 30px; color: var(--navy); margin: 44px 0 14px; scroll-margin-top: 24px; line-height: 1.25; }
      article :global(h3) { font-size: 21px; color: var(--navy); margin: 30px 0 8px; }
      article :global(p) { margin: 0 0 20px; }
      article :global(ul), article :global(ol) { padding-left: 24px; margin: 0 0 20px; }
      article :global(li) { margin: 9px 0; }
      article :global(img) { max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 30px rgba(10,25,47,.10); margin: 30px 0; display: block; }
      article :global(blockquote) {
        margin: 28px 0; padding: 20px 24px; background: var(--bg-soft);
        border-left: 4px solid var(--mint); border-radius: 0 10px 10px 0; color: #334155; font-size: 18px;
      }
      article :global(blockquote p:last-child) { margin-bottom: 0; }
      article :global(code) { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: .9em; }
      article :global(pre) { background: var(--navy); color: #e2e8f0; padding: 18px; border-radius: 10px; overflow-x: auto; }
      article :global(pre code) { background: none; padding: 0; }
      .table-wrap { margin: 28px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; }
      article :global(table) { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; }
      article :global(thead th) { background: var(--navy); color: #fff; font-weight: 600; letter-spacing: .01em; }
      article :global(th), article :global(td) { padding: 12px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
      article :global(tbody tr:nth-of-type(even)) { background: var(--bg-soft); }
      article :global(tbody tr:last-child td) { border-bottom: none; }
      article :global(td:first-child), article :global(th:first-child) { font-weight: 600; color: var(--navy); }
      /* Mobile: each row becomes a labelled card (no cramped horizontal scroll). */
      @media (max-width: 640px) {
        .table-wrap { border: none; border-radius: 0; overflow: visible; }
        article :global(table), article :global(tbody), article :global(tr), article :global(td) { display: block; width: 100%; }
        article :global(thead) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
        article :global(tr) { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 14px; overflow: hidden; background: #fff; }
        article :global(tbody tr:nth-of-type(even)) { background: #fff; }
        article :global(td) { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: normal; }
        article :global(td:last-child) { border-bottom: none; }
        article :global(td::before) { content: attr(data-label); font-weight: 600; color: var(--navy); text-align: left; flex: 0 0 40%; }
        article :global(td:first-child) { color: var(--ink); background: var(--bg-soft); }
      }
      /* ===== Auto/override table variants ===== */
      /* Subtle row hover on every table */
      article :global(tbody tr) { transition: background .14s ease; }
      article :global(tbody tr:hover) { background: var(--row-hover); }
      @media (prefers-reduced-motion: reduce) { article :global(tbody tr) { transition: none; } }

      /* pricing: right-aligned tabular figures */
      article :global(td.num), article :global(th.num) { text-align: right; font-variant-numeric: tabular-nums; }
      article :global(td.num) { font-weight: 700; color: var(--navy); white-space: nowrap; }

      /* compare: green "good" column, red "bad" column, ✓/✗ icons */
      article :global(.tv-compare tbody tr:nth-of-type(even)) { background: transparent; }
      article :global(td.col-good), article :global(th.col-good) { background: var(--good-bg); }
      article :global(td.col-bad), article :global(th.col-bad) { background: var(--bad-bg); }
      article :global(tbody td.col-good) { border-bottom-color: var(--good-line); }
      article :global(tbody td.col-bad) { border-bottom-color: var(--bad-line); }
      article :global(thead th.col-good) { box-shadow: inset 0 -3px 0 var(--mint); }
      article :global(thead th.col-bad) { box-shadow: inset 0 -3px 0 var(--bad); }
      article :global(.ic) { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; margin-right: 8px; vertical-align: -3px; }
      article :global(.ic-good) { background: var(--good); }
      article :global(.ic-bad) { background: var(--bad); }

      /* matrix: status badges */
      article :global(.badge) { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; line-height: 1.45; white-space: nowrap; }
      article :global(.b-yes), article :global(.b-low) { background: var(--good-bg); color: var(--good); box-shadow: inset 0 0 0 1px var(--good-line); }
      article :global(.b-no), article :global(.b-high) { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad-line); }
      article :global(.b-mid) { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
      article :global(.b-na) { background: var(--bg-soft); color: var(--slate); box-shadow: inset 0 0 0 1px var(--line); }

      /* data: sticky header for long reference tables */
      article :global(.tv-scroll) { max-height: 440px; overflow: auto; }
      article :global(.tv-scroll thead th) { position: sticky; top: 0; z-index: 2; }
      @media (max-width: 640px) { article :global(.tv-scroll) { max-height: none; overflow: visible; } }
      article :global(hr) { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

      details.toc-mobile { margin: 0 0 28px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
      @media (min-width: 1120px) { details.toc-mobile { display: none; } }
      details.toc-mobile summary { font-weight: 600; color: var(--navy); cursor: pointer; }
      details.toc-mobile ul { list-style: none; padding: 12px 0 2px; margin: 0; }
      details.toc-mobile a { display: block; padding: 5px 0; color: #475569; font-size: 15px; }

      .authorbox { margin-top: 44px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); font-size: 16px; color: #334155; }
      .authorbox p { margin: 0; } .authorbox strong { color: var(--navy); }

      /* Keep reading — redesigned related-posts section (image-top cards) */
      .keep { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 72px 0; }
      .keep .eyebrow { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
      .keep .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--mint); border-radius: 2px; }
      .keep h2 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 700; color: var(--navy); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 30px; }
      .keep-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
      @media (min-width: 760px) { .keep-grid { grid-template-columns: repeat(3, 1fr); } }
      .kcard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
      .kcard:hover { transform: translateY(-4px); box-shadow: 0 20px 42px -24px rgba(10,25,47,.35); border-color: #d7dbe4; text-decoration: none; }
      .kcard__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); display: block; }
      .kcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; transition: transform .35s ease; }
      .kcard:hover .kcard__media img { transform: scale(1.04); }
      .kcard__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
      .kcat { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--mint); margin: 0 0 8px; }
      .ktitle { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 700; color: var(--navy); font-size: 19px; line-height: 1.26; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .18s ease; }
      .kcard:hover .ktitle { color: var(--mint); }
      .kdesc { font-family: Inter, system-ui, sans-serif; color: #475569; font-size: 14px; line-height: 1.5; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
      .kmore { margin-top: auto; font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 13.5px; color: var(--mint); display: inline-flex; align-items: center; gap: 6px; }
      .kmore .arw { display: inline-block; transition: transform .18s ease; }
      .kcard:hover .kmore .arw { transform: translateX(4px); }

      .site-footer { background: var(--navy); color: var(--slate); padding: 28px 0; font-size: 14px; }
      .site-footer a { color: var(--slate); }
      .footnav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 10px; }
      .footnav a:hover { color: var(--mint); text-decoration: none; }

/* ===== PageLayout.astro ===== */
@font-face {
        font-family: 'Inter';
        src: url('/fonts/inter-latin.woff2') format('woff2');
        font-weight: 100 900;
        font-display: swap;
        font-style: normal;
      }
      :root {
        --navy: #14503A;
        --mint: #F6871F;
        --white: #ffffff;
        --slate: #94a3b8;
        --ink: #1b2432;
        --line: #e5e9f0;
      }
      * { box-sizing: border-box; }
      button { -webkit-appearance: none; appearance: none; }
      html { -webkit-text-size-adjust: 100%; }
      /* iOS Safari ignores overflow-x on body alone; the root html needs it too. */
      @media (max-width: 1119px) { html, body { overflow-x: hidden; } }
      body { overflow-x: hidden; }
      body {
        margin: 0;
        font-family: Inter, system-ui, -apple-system, sans-serif;
        color: var(--ink);
        background: var(--white);
        line-height: 1.7;
        font-size: 17px;
      }
      a { color: var(--mint); text-decoration: none; }
      a:hover { text-decoration: underline; }
      .site-header, .site-footer { background: var(--navy); color: var(--white); }
      .site-header { padding: 18px 0; }
      .wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
      .brand { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
      .brand .cited { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; }
      .brand .labs { font-family: Inter, sans-serif; color: var(--mint); }
      .brand a { color: var(--white); }
      .brand a:hover { text-decoration: none; }
      main { padding: 48px 0 64px; }
      h1 {
        font-family: 'Barlow Semi Condensed', system-ui, sans-serif;
        font-size: clamp(28px, 5vw, 40px);
        line-height: 1.2; color: var(--navy); margin: 0 0 8px;
      }
      h2 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 24px; color: var(--navy); margin: 36px 0 10px; }
      h3 { font-size: 19px; color: var(--navy); margin: 24px 0 6px; }
      .updated { color: var(--slate); font-size: 14px; margin: 0 0 28px; }
      .lede { font-size: 20px; color: #334155; }
      ul { padding-left: 22px; }
      li { margin: 6px 0; }
      address { font-style: normal; }
      .fill {
        background: #fff7ed; border: 1px dashed #fb923c; color: #9a3412;
        padding: 2px 8px; border-radius: 5px; font-size: 0.92em;
      }
      hr { border: none; border-top: 1px solid var(--line); margin: 40px 0; }
      .site-footer { padding: 28px 0; font-size: 14px; }
      .site-footer .wrap { color: var(--slate); }
      .footnav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 10px; }
      .footnav a, .site-footer a { color: var(--slate); }
      .footnav a:hover { color: var(--mint); text-decoration: none; }

/* ===== Callout.astro ===== */
.callout { margin: 28px 0; padding: 18px 20px; border-radius: 10px; border-left: 4px solid; }
  .callout :global(p) { margin: 0 0 10px; }
  .callout :global(p:last-child) { margin: 0; }
  .c-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
  .c-tip { background: #ecfdf5; border-color: #F6871F; } .c-tip .c-label { color: #047857; }
  .c-note { background: #f1f5f9; border-color: #94a3b8; } .c-note .c-label { color: #475569; }
  .c-key { background: #fffbeb; border-color: #f59e0b; } .c-key .c-label { color: #b45309; }

/* ===== ConsentBanner.astro ===== */
.cl-cookiebar{position:fixed;bottom:1rem;left:1rem;right:1rem;max-width:36rem;margin-inline:auto;background:#14503A;border:1px solid #1e3352;border-radius:14px;padding:1rem 1.1rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:60;box-shadow:0 12px 40px rgba(0,0,0,.45)}
  .cl-cookiebar[hidden]{display:none}
  .cl-cookiebar p{margin:0;color:#94A3B8;font-size:.85rem;flex:1;min-width:12rem;line-height:1.5}
  .cl-cookiebtns{display:flex;gap:.5rem}
  .cl-btn{padding:.5rem 1rem;font-size:.85rem;border-radius:8px;font-weight:600;cursor:pointer;border:1px solid transparent;-webkit-appearance:none;appearance:none}
  .cl-primary{background:#F6871F;color:#14503A;border-color:#F6871F}
  .cl-primary:hover{filter:brightness(.96)}
  .cl-ghost{background:transparent;color:#94A3B8;border-color:#1e3352}
  .cl-ghost:hover{color:#fff}

/* ===== FAQ.astro ===== */
.faq { margin: 10px 0 0; }
  .faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
  .faq-item h3 { margin: 0 0 6px; color: var(--navy); font-size: 19px; }
  .faq-item p { margin: 0; }

/* ===== Figure.astro ===== */
.post-figure { margin: 30px 0; }
  .post-figure img {
    width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: 12px; box-shadow: 0 8px 30px rgba(10,25,47,.10); display: block;
  }
  .post-figure figcaption {
    margin-top: 9px; font-size: 13.5px; line-height: 1.5; color: #64748b;
    text-align: center; font-style: italic;
  }

/* ===== InlineCTA.astro ===== */
.inline-cta {
    margin: 34px 0; padding: 24px; border-radius: 12px; background: #14503A; color: #fff;
    display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  }
  .inline-cta strong { display: block; font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-size: 19px; margin-bottom: 4px; }
  .inline-cta p { margin: 0; color: #cbd5e1; font-size: 15px; max-width: 46ch; }
  .ic-btn { background: #F6871F; color: #14503A; font-weight: 600; padding: 12px 22px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
  .ic-btn:hover { filter: brightness(.96); }

/* ===== SiteFooter.astro ===== */
.cl-footer { background: var(--navy, #14503A); color: #aebbce; }
  .cl-fwrap { max-width: 1120px; margin: 0 auto; padding: 50px 24px 30px;
              display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr 1.15fr; gap: 30px; }
  .cl-fblog a { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cl-fblog a.cl-fblog-all { color: var(--mint, #F6871F); font-weight: 700; margin-top: 4px; }
  .cl-fbrand .cl-brand { font-size: 21px; font-weight: 700; color: #fff; text-decoration: none; }
  .cl-fbrand .cited { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; }
  .cl-fbrand .labs { color: var(--mint, #F6871F); }
  .cl-fbrand p { font-size: 14px; line-height: 1.65; color: #93a3b8; margin: 14px 0 0; max-width: 36ch; }
  .cl-loc { font-size: 12.5px; color: #7f8ea8; }
  .cl-loc a { color: #93a3b8; text-decoration: none; }
  .cl-loc a:hover { color: #fff; }
  .cl-fcol { display: flex; flex-direction: column; }
  .cl-fcol h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin: 0 0 12px; }
  .cl-fcol a { color: #aebbce; font-size: 14px; text-decoration: none; padding: 5px 0; }
  .cl-fcol a:hover { color: var(--mint, #F6871F); text-decoration: none; }
  .cl-fbottom { max-width: 1120px; margin: 0 auto; padding: 18px 24px;
                border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between;
                align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #7f8ea8; }
  .cl-fblegal a { color: #93a3b8; text-decoration: none; margin-left: 18px; }
  .cl-fblegal a:hover { color: #fff; }
  @media (max-width: 820px) {
    .cl-fwrap { grid-template-columns: 1fr 1fr; }
    .cl-fbrand { grid-column: 1 / -1; }
  }
  @media (max-width: 520px) {
    .cl-fwrap { grid-template-columns: 1fr; gap: 26px; }
  }

/* ===== SiteHeader.astro ===== */
.cl-header { background: var(--navy, #14503A); }
  .cl-hwrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; min-height: 62px;
              display: flex; align-items: center; gap: 20px; }
  .cl-brand { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: #fff;
              text-decoration: none; white-space: nowrap; }
  .cl-brand .cited { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; }
  .cl-brand .labs { color: var(--mint, #F6871F); }
  .cl-nav { display: flex; gap: 22px; margin-left: 14px; }
  .cl-nav a { color: #c3cee0; font-size: 14.5px; text-decoration: none; }
  .cl-nav a:hover, .cl-nav a.on { color: #fff; text-decoration: none; }
  .cl-cta { margin-left: auto; background: var(--mint, #F6871F); color: var(--navy, #14503A);
            font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 8px;
            text-decoration: none; white-space: nowrap; }
  .cl-cta:hover { filter: brightness(.96); text-decoration: none; }

  /* Hamburger button: hidden on desktop, shown on mobile. */
  .cl-burger { display: none; }

  @media (max-width: 820px) {
    .cl-hwrap { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 10px 14px; }
    .cl-cta { order: 1; }
    .cl-burger { order: 2; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
                 width: 44px; height: 40px; padding: 0 10px; background: transparent;
                 border: 1px solid #24344f; border-radius: 9px; cursor: pointer; }
    .cl-burger span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px;
                      transition: transform .2s ease, opacity .2s ease; }
    .cl-header.open .cl-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .cl-header.open .cl-burger span:nth-child(2) { opacity: 0; }
    .cl-header.open .cl-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Nav collapses into a stacked dropdown, revealed only when open. */
    .cl-nav { order: 3; width: 100%; margin-left: 0; flex-direction: column; gap: 0; display: none; }
    .cl-header.open .cl-nav { display: flex; }
    .cl-nav a { font-size: 16px; padding: 13px 4px; border-top: 1px solid rgba(255,255,255,.09); }
    .cl-nav a:first-child { border-top: none; }
  }
  @media (prefers-reduced-motion: reduce) { .cl-burger span { transition: none; } }