/* ============================================================
   The Coromandel — pro-2026.css  (loaded LAST, additive)
   Professional design system: spacing/type scale, tasteful RG bar,
   premium offer cards, content-format boxes, comparison tables.
   No DOM/URL structural changes. WCAG-AA checked.
   ============================================================ */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem; --fs-lg:1.1875rem;
  --fs-h3:clamp(1.25rem,1.1rem+.6vw,1.5rem);
  --fs-h2:clamp(1.6rem,1.3rem+1.4vw,2.15rem);
  --fs-h1:clamp(2rem,1.5rem+2.4vw,2.9rem);
  --lh-body:1.7; --lh-tight:1.25;
  --container:1120px; --measure:720px;
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(13,58,79,.06),0 2px 6px rgba(13,58,79,.06);
  --shadow-md:0 4px 14px rgba(13,58,79,.10);
  --ink:#17242b; --muted:#55636d; --bg:#fff; --surface:#f7f9fa; --line:#e4eaed;
  --teal-950:#0a2c3d; --teal-900:#0d3a4f; --teal-700:#12607f;
  --link:#12607f; --link-hover:#0d3a4f;
  --cta:#0b7a4b; --cta-hover:#09633d; --accent:#c8412d;
  --mint:#eef6f2; --mint-line:#bfe3d2; --amber-bg:#fdf6e7; --amber-ink:#8a5a10;
  --sand-bg:#fff5e8; --rank-ink:#9c4e10; --focus:#12607f;
  --font-head:"Source Serif 4",Georgia,serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- Base rhythm + typography ---- */
body{font-family:var(--font-body);font-size:var(--fs-base);color:var(--ink);-webkit-font-smoothing:antialiased}
.main__content{max-width:var(--container);margin-inline:auto;padding-inline:var(--s-4)}
.main__content > p,.main__content > ul,.main__content > ol,.main__content > h2,.main__content > h3{max-width:var(--measure)}
.main__content h1{font-family:var(--font-head);font-size:var(--fs-h1);color:var(--teal-900);line-height:var(--lh-tight);letter-spacing:-.01em;margin:0 0 var(--s-4)}
.main__content h2{font-family:var(--font-head);font-size:var(--fs-h2);color:var(--teal-900);line-height:var(--lh-tight);margin:var(--s-8) 0 var(--s-4);padding-top:var(--s-2)}
.main__content h3{font-family:var(--font-head);font-size:var(--fs-h3);color:var(--teal-900);margin:var(--s-6) 0 var(--s-3)}
.main__content p{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--ink);margin:0 0 var(--s-4)}
.main__content h2 + p{font-size:var(--fs-lg);color:#2b3a43}
.main__content ul li{margin-bottom:var(--s-2);line-height:1.6}
.main__content a{color:var(--link);text-underline-offset:2px}
.main__content a:hover{color:var(--link-hover)}
.main__content h2::before{content:"";display:block;width:44px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:var(--s-4)}

/* ---- RG bar: tasteful light strip (not a dark banner) ---- */
.rg-bar{background:var(--surface);color:var(--muted);border-bottom:1px solid var(--line);font-size:var(--fs-xs);line-height:1.4;text-align:center;padding:6px var(--s-4);letter-spacing:.01em}
.rg-bar .rg-badge{background:var(--teal-900);color:#fff;border:0;border-radius:4px;padding:1px 6px;font-weight:700;font-size:11px;margin-right:6px;letter-spacing:.02em}
.rg-bar a{color:var(--teal-700);font-weight:600;text-decoration:underline}
.rg-bar .rg-ic{vertical-align:-2px;margin-right:4px;fill:var(--muted)}

/* ---- Offer cards: premium comparison ---- */
.card__items{max-width:var(--container);margin-inline:auto;display:flex;flex-direction:column;gap:var(--s-4)}
.content__popular-bk-main__item{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6);gap:var(--s-4);transition:box-shadow .15s,border-color .15s,transform .15s}
.content__popular-bk-main__item:hover{box-shadow:var(--shadow-md);border-color:var(--teal-700);transform:translateY(-1px)}
.card__item:first-child .content__popular-bk-main__item{border:2px solid var(--cta);box-shadow:0 6px 20px rgba(11,122,75,.14)}
.card__item:first-child .content__popular-bk-main__item::after{content:"OUR TOP PICK";position:absolute;top:-11px;left:var(--s-6);background:var(--cta);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:20px}
.rank-badge{position:absolute;top:var(--s-4);left:-14px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--sand-bg);color:var(--rank-ink);border:2px solid #fff;border-radius:50%;font-family:var(--font-head);font-weight:700;font-size:16px;box-shadow:var(--shadow-sm)}
.card__item:first-child .rank-badge{background:var(--cta);color:#fff}
.content__popular-bk__rating p.grey__text,.rating-chip{display:inline-flex;align-items:center;gap:4px;background:var(--teal-900);color:#fff!important;font-weight:700;font-size:var(--fs-sm);padding:2px 9px;border-radius:6px}
.content__popular-bk__rating p.grey__text::after{content:"★";font-size:11px;color:#ffd24a;margin-left:2px}
.content__popular-bk-main__text{background:var(--surface);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4)}
.content__popular-bk-main__text p strong{color:var(--ink);font-size:var(--fs-sm)}
.best-for{display:inline-block;background:var(--mint);color:#0d5c3f;border:1px solid var(--mint-line);border-radius:20px;font-size:var(--fs-xs);font-weight:600;padding:2px 10px;margin-top:var(--s-2)}
.content__popular-bk-main__btn a{background:var(--cta);color:#fff;font-weight:700;min-height:46px;padding:12px 24px;border-radius:var(--radius-sm);text-transform:none;letter-spacing:.2px}
.content__popular-bk-main__btn a::after{content:" \2192";font-weight:700}
.content__popular-bk-main__btn a:hover{background:var(--cta-hover)}
.content__popular-bk-main__link a{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.editorial-rating{max-width:var(--container);margin:calc(-1*var(--s-3)) auto var(--s-2);background:var(--amber-bg);border:1px solid #f0e2c0;border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4);font-size:var(--fs-sm);line-height:1.6;color:#3a3226}
.editorial-rating strong{color:var(--amber-ink)}

/* ---- Content-format boxes ---- */
.tldr{max-width:var(--measure);margin:var(--s-5) auto var(--s-6);background:var(--mint);border:1px solid var(--mint-line);border-radius:var(--radius);padding:var(--s-5) var(--s-5) var(--s-4)}
.tldr__title{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-head);font-weight:700;color:#0d5c3f;font-size:var(--fs-lg);margin:0 0 var(--s-3)}
.tldr__title::before{content:"\2713";display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;background:#0d5c3f;color:#fff;border-radius:50%;font-size:14px}
.tldr ul{margin:0;padding-left:var(--s-5)} .tldr li{margin-bottom:var(--s-2);line-height:1.55}
.callout{max-width:var(--measure);margin:var(--s-5) auto;background:var(--surface);border-left:4px solid var(--teal-700);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:var(--s-4) var(--s-5)}
.callout--warn{background:var(--amber-bg);border-left-color:var(--amber-ink)}
.callout__label{font-weight:700;color:var(--teal-900);font-size:var(--fs-sm);letter-spacing:.02em;text-transform:uppercase;margin:0 0 var(--s-1)}
.callout--warn .callout__label{color:var(--amber-ink)}
.proscons{max-width:var(--measure);margin:var(--s-6) auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.proscons__col{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-4) var(--s-5);background:var(--bg);box-shadow:var(--shadow-sm)}
.proscons__col h4{margin:0 0 var(--s-3);font-family:var(--font-head);font-size:var(--fs-lg)}
.proscons__pros h4{color:#0d5c3f} .proscons__cons h4{color:var(--accent)}
.proscons ul{list-style:none;margin:0;padding:0}
.proscons li{position:relative;padding-left:26px;margin-bottom:var(--s-2);line-height:1.5;font-size:var(--fs-sm)}
.proscons__pros li::before{content:"\2713";position:absolute;left:0;color:#0d5c3f;font-weight:800}
.proscons__cons li::before{content:"\2715";position:absolute;left:0;color:var(--accent);font-weight:800}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}
.verdict-card{max-width:var(--measure);margin:var(--s-7) auto;display:flex;gap:var(--s-5);align-items:center;border:1px solid var(--line);border-left:5px solid var(--cta);border-radius:var(--radius);padding:var(--s-5);background:linear-gradient(180deg,#fff,#f7fbf9);box-shadow:var(--shadow-sm)}
.verdict-card__score{flex:0 0 auto;width:84px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cta);color:#fff;border-radius:var(--radius);font-family:var(--font-head)}
.verdict-card__score b{font-size:28px;line-height:1} .verdict-card__score span{font-size:11px;opacity:.85;letter-spacing:.04em}
.verdict-card__body h4{margin:0 0 var(--s-1);font-family:var(--font-head);color:var(--teal-900);font-size:var(--fs-lg)}
.verdict-card__body p{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.pullquote{max-width:var(--measure);margin:var(--s-6) auto;font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.3;color:var(--teal-900);border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:var(--s-4) 0;font-style:italic}
.divider{max-width:var(--measure);margin:var(--s-7) auto;border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}

/* ---- Comparison table ---- */
.table-wrap{max-width:var(--container);margin:var(--s-6) auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.table-main{width:100%;border-collapse:collapse}
.table-main caption{caption-side:top;text-align:left;font-family:var(--font-head);font-weight:700;color:var(--teal-900);padding:var(--s-4) var(--s-4) var(--s-2);font-size:var(--fs-lg)}
.table-main thead th,.table-main tr:first-child td{background:var(--teal-900);color:#fff;font-family:var(--font-head);text-align:left;padding:var(--s-3) var(--s-4);font-size:var(--fs-sm);letter-spacing:.02em}
.table-main td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);vertical-align:middle;font-size:var(--fs-sm)}
.table-main tbody tr:nth-child(even){background:var(--surface)}
.table-main tbody tr:hover{background:var(--mint)}
.table-main .row-pick{background:#f3fbf7!important;box-shadow:inset 4px 0 0 var(--cta)}
@media(max-width:600px){.table-wrap{overflow-x:auto}.table-main{min-width:560px}}

/* ---- a11y ---- */
a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---- Brand wordmark ---- */
.header-logo a.brandmark{display:block!important;line-height:1.04;text-transform:none!important;text-align:left;font-family:var(--font-head)}
.brandmark .brand-name{display:block;font-family:var(--font-head);font-weight:700;font-size:23px;color:#fff;letter-spacing:.005em}
.brandmark .brand-tag{display:block;font-family:var(--font-body);font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#a9c6d4;margin-top:3px}
.footer-logo a{font-family:var(--font-head);color:#fff;text-transform:none}

/* ---- FAQ accordion ---- */
.faq{max-width:var(--measure);margin:var(--s-4) auto var(--s-7)}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:var(--s-3);background:var(--bg);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s-4) 44px var(--s-4) var(--s-5);font-family:var(--font-head);font-weight:700;color:var(--teal-900);font-size:var(--fs-lg);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--s-5);top:50%;transform:translateY(-50%);font-size:22px;color:var(--teal-700)}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{margin:0;padding:var(--s-4) var(--s-5);font-size:var(--fs-sm);line-height:1.65;color:var(--ink)}
/* per-offer last-tested */
.editorial-rating .tested{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--muted);font-weight:600;letter-spacing:.02em}
/* affiliate disclosure near table */
.ad-disclosure{max-width:var(--container)!important;margin:0 auto var(--s-3)!important;font-size:var(--fs-xs)!important;color:var(--muted)!important;line-height:1.4}
.ad-disclosure a{color:var(--link)}

/* ============================================================
   v5 — layout coherence (single column) + first-screen product
   Fixes: rogue nested .container -> 3 left edges; prose measure;
   product below fold; heavy author card.
   ============================================================ */
/* single coherent content column */
.main__content{padding-inline:clamp(16px,4vw,40px)}
.main__content > .container{max-width:960px;margin-inline:auto;padding-inline:0;display:block}
.main__content .container > p,
.main__content .container > ul,
.main__content .container > ol,
.main__content .container > h2,
.main__content .container > h3,
.main__content .container > .ad-disclosure,
.main__content .container > .lede{max-width:68ch;margin-inline:0}
.tldr,.callout,.proscons,.verdict-card,.pullquote,.divider,.faq{max-width:68ch;margin-inline:0 !important}
.card__items,.editorial-rating,.table-wrap{max-width:100% !important;margin-inline:0 !important}
.editorial-rating{margin-top:calc(-1*var(--s-3));margin-bottom:var(--s-5)}

/* compact one-line byline (was a heavy sand card) */
.author__block{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 0 var(--s-3);display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);color:var(--muted);width:auto !important}
.author__block__img img{width:32px;height:32px;border-radius:50%}
.author__block__text{display:inline}
.author__block__name{font-weight:600;color:var(--ink)}
.author__block__name a{color:var(--link)}
.author__block__date::before{content:"\00b7";margin:0 6px;color:var(--line)}

/* lede line under H1 */
.lede{font-size:var(--fs-lg);color:#2b3a43;line-height:1.55;margin:0 0 var(--s-4)}

/* tighten so the product reaches the fold */
.main__content h2{margin-top:var(--s-6)}
.ad-disclosure{font-size:var(--fs-xs) !important;color:var(--muted) !important;margin:0 0 var(--s-3) !important}
.tldr{margin-top:var(--s-6)}

/* tap targets + top-pick badge breathing room */
.content__popular-bk-main__link a{display:inline-block;padding:8px 0}
.card__item:first-child .content__popular-bk-main__item{margin-top:16px}