/* Microsite Blueprint — affiliate-comparison archetype stylesheet.
   Implements wiki/components/comparison-components.md, extending the base
   design tokens in wiki/components/component-library.md. Sibling to
   style.css (the local-service archetype's stylesheet) — this one drops the
   phone-CTA/service-dropdown/area-grid machinery that archetype doesn't need
   and adds ranking-table/review/glossary/PAA/author-box components instead. */

:root{
  --brand:#C0392B; --brand-dark:#a93226;
  --navy:#152244; --navy-dark:#0e1830;
  --teal:#2980B9; --teal-dark:#2172a4;
  --gold:#C8A040; --gold-dark:#a8863a;
  --ink:#1a1a2e; --ink-soft:#4a5a6a;
  --line:#e3e8ee; --bg:#fff; --bg-alt:#f5f7fa;
  --max:1160px; --radius:6px;
  --font-head: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);line-height:1.7;background:var(--bg)}
h1,h2,h3{font-family:var(--font-head);line-height:1.2;margin:1.4em 0 .5em}
h1{font-size:clamp(1.9rem,4vw,2.8rem);margin-top:0}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--brand)}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Buttons */
.btn{display:inline-flex;align-items:center;padding:.75em 1.4em;border-radius:var(--radius);font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:.95rem}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{background:var(--gold-dark)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-dark)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn--sm{padding:.5em 1em;font-size:.85rem}
.btn--lg{padding:1em 1.8em;font-size:1.05rem}

/* Header — single row, no phone/services dropdown */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.nav__logo{color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.25rem;text-decoration:none;display:flex;align-items:center}
.nav__logo-img{height:40px;width:auto;display:block}
.footer-logo-img{height:36px;width:auto;display:block;margin-bottom:12px}
.nav__toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;padding:0;cursor:pointer}
.nav__links{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.nav__links a{display:block;color:#fff;text-decoration:none;padding:8px 14px;font-weight:600;font-size:.92rem;border-radius:var(--radius)}
.nav__links a:hover{background:rgba(255,255,255,.12)}
.nav__links a.is-active{background:rgba(255,255,255,.18)}

/* Byline strip */
.byline-strip{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:14px 0;font-size:.92rem;color:var(--ink-soft)}

/* Disclosure banner — above the fold, distinct from phone-strip's bottom-of-page role */
.disclosure-banner{background:#fdf6ea;border:1px solid var(--gold);border-radius:var(--radius);padding:14px 18px;font-size:.88rem;color:var(--ink-soft);margin:0 0 32px}
.disclosure-banner a{color:var(--navy);font-weight:600}

/* Quick-answer / key-takeaways callout */
.callout{background:var(--bg-alt);border-left:4px solid var(--navy);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.callout h2,.callout h3{margin-top:0}

/* Table of contents */
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:0 0 32px}
.toc h2{font-size:1.05rem;margin:0 0 .5em}
.toc ol{margin:0;padding-left:1.2em}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--brand)}

/* Ranking table */
.rank-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95rem}
.rank-table th,.rank-table td{text-align:left;padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.rank-table th{background:var(--navy);color:#fff;font-family:var(--font-head)}
.rank-table__row:nth-child(even){background:var(--bg-alt)}
.rank-badge{display:inline-block;background:var(--gold);color:var(--navy);font-weight:800;border-radius:999px;width:28px;height:28px;line-height:28px;text-align:center}
.rank-table__cta{white-space:nowrap}

/* Star rating */
.stars{display:inline-flex;align-items:center;gap:2px}
.stars svg{width:16px;height:16px}
.star--full{fill:var(--gold)}
.star--half{fill:var(--gold);opacity:.5}
.star--empty{fill:var(--line)}
.stars__value{margin-left:6px;font-weight:700;font-size:.88rem;color:var(--ink-soft)}

/* Affiliate CTA */
.affiliate-cta{white-space:nowrap}

/* Company review card */
.company-review{border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 24px;background:#fff}
.company-review header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.company-review header h3{margin:0}
.review-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0;padding:14px;background:var(--bg-alt);border-radius:var(--radius)}
.review-facts dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin:0}
.review-facts dd{margin:2px 0 0;font-weight:700}

/* Fee/feature comparison table */
.compare-table{width:100%;border-collapse:collapse;margin:20px 0}
.compare-table th,.compare-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.compare-table th{background:var(--bg-alt);font-family:var(--font-head)}

/* Red flags */
.red-flags{list-style:none;margin:20px 0;padding:0}
.red-flags li{position:relative;padding:10px 0 10px 34px;border-left:3px solid var(--brand);margin-bottom:6px;background:var(--bg-alt)}
.red-flags li svg{position:absolute;left:8px;top:12px;width:18px;height:18px;stroke:var(--brand)}

/* Glossary */
.glossary{margin:20px 0}
.glossary dt{font-weight:700;font-family:var(--font-head);margin-top:16px}
.glossary dd{margin:4px 0 0;color:var(--ink-soft)}

/* PAA block */
.paa{margin:20px 0}
.paa__item{margin-bottom:20px}
.paa__item h3{margin-bottom:.3em;font-size:1.05rem}
.paa__item p{color:var(--ink-soft);margin:0}

/* Update history */
.update-history{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem}
.update-history th,.update-history td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.update-history th{background:var(--bg-alt)}

/* Author box */
.author-box{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:20px 0;background:var(--bg-alt)}
.author-box__avatar{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.author-box__body h3{margin:0 0 4px;font-size:1rem}
.author-box__body p{margin:0;color:var(--ink-soft);font-size:.92rem}

/* FAQ accordion (shared pattern with the base engine) */
.faq{max-width:800px;margin:20px 0}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:0;font-size:1.3rem;color:var(--brand)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink-soft)}

/* Sections */
.section{padding:36px 0}
.section--alt{background:var(--bg-alt)}
.article-wrap{max-width:800px;margin:0 auto;padding:32px 24px}
.article-wrap section{padding:28px 0;border-bottom:1px solid var(--line)}
.article-wrap section:last-of-type{border-bottom:none}

/* Link list (Official Resources) */
.linklist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0}
.linklist li a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:600;background:#fff}
.linklist li a:hover{border-color:var(--brand);color:var(--brand)}

/* Footer */
.site-footer{background:var(--navy);color:#cdd6e5;padding:40px 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;padding-bottom:28px}
.footer-grid h4{color:#fff;font-family:var(--font-head);margin-bottom:12px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:8px}
.footer-grid a{color:#cdd6e5;text-decoration:none}
.footer-grid a:hover{color:#fff}
.footer-disclaimer{max-width:760px;font-size:.82rem;line-height:1.5;color:#aab4c6;margin:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 24px;font-size:.82rem;text-align:center;color:#8f9db3}

/* Utility */
.text-center{text-align:center}

/* Responsive */
@media (max-width:900px){
  .nav__toggle{display:block}
  .nav__links{display:none;flex-direction:column;width:100%;position:absolute;left:0;top:100%;background:var(--navy);padding:8px 24px 16px}
  .nav__links.is-open{display:flex}
  .site-header .wrap{position:relative}
  .review-facts{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .linklist{grid-template-columns:1fr}
}
@media (max-width:600px){
  .compare-table{display:block;overflow-x:auto}
}
/* Rank table: stack into cards below 760px rather than horizontal-scroll —
   the table has 6 columns including a multi-line "Key Features" column, so
   scroll-to-reach-the-CTA is a real usability problem on phones (confirmed
   via real-device report, 2026-08-16), not just a cosmetic one. Each <td>'s
   data-label (set in generate_comparison_site.py's rank_table()) becomes a
   small caption via ::before since the <thead> is hidden in this mode. */
@media (max-width:760px){
  .rank-table,.rank-table tbody{display:block;width:100%}
  .rank-table thead{display:none}
  .rank-table__row{display:block;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;padding:16px;background:#fff}
  .rank-table__row:nth-child(even){background:#fff}
  .rank-table td{display:block;border-bottom:none;padding:6px 0}
  .rank-table td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);font-weight:700;margin-bottom:2px}
  .rank-table td:first-child{padding-top:0}
  .rank-table__cta{padding-top:10px}
  .rank-table__cta .affiliate-cta{width:100%;justify-content:center}
}