:root{
    color-scheme: light;
    --red:#0F6B5C;
    --red-dark:#0B5347;
    --red-tint:#E6F2EF;
    --ink:#1F2A28;
    --ink-soft:#2F3B39;
    --amber:#E3A337;
    --paper:#F7F6F3;
    --white:#FFFFFF;
    --muted:#6B6B68;
    --hairline:#E4E1DA;
    --hairline-dark:#3A3A38;
    --display: 'Poppins', sans-serif;
    --body: 'Inter', sans-serif;
    --maxw: 1180px;
  }

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
    margin:0;
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }

img{max-width:100%;display:block;}

a{color:inherit;text-decoration:none;}

ul{margin:0;padding:0;list-style:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

.eyebrow{
    font-family:var(--body);
    font-weight:700;
    font-size:12.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--red);
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

.eyebrow .dot{color:var(--red);}

.eyebrow.on-dark{color:#4ECDC0;}

.eyebrow.ink{color:var(--ink);}

/* ---------- visually-hidden ---------- */
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:3px solid var(--red);
    outline-offset:3px;
    border-radius:2px;
  }

/* ================= NAV ================= */
  header.site-nav{
    position:sticky;top:0;z-index:50;
    background:var(--paper);
    border-bottom:1px solid var(--hairline);
  }

.nav-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 32px;
  }

.nav-logo img{height:58px;width:auto;}

.nav-links{display:flex;align-items:center;gap:34px;}

.nav-links a{
    font-size:14.5px;font-weight:600;color:var(--ink-soft);
    position:relative;padding:4px 0;
  }

.nav-links a::after{
    content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);
    transition:width .2s ease;
  }

.nav-links a:hover::after{width:100%;}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--body);font-weight:700;font-size:14.5px;
    padding:12px 22px;border-radius:3px;border:2px solid transparent;
    cursor:pointer;transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    white-space:nowrap;
  }

.btn-primary{background:var(--ink);color:var(--white);}

.btn-primary:hover{background:var(--red);transform:translateY(-1px);}

.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent;}

.btn-outline:hover{border-color:var(--red);color:var(--red);}

.btn-nav{padding:11px 20px;font-size:14px;background:var(--red);color:var(--white);}

.nav-links .btn-nav{color:var(--white);}

.btn-nav:hover{background:var(--red-dark);}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}

.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;}

/* ================= HERO ================= */
  .hero{
    padding:76px 0 0;
    overflow:hidden;
  }

.hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    column-gap:40px;
    align-items:center;
    grid-template-areas:
      "eyebrow art"
      "h1 art"
      "lede art"
      "ctas art";
  }

.hero-grid > .eyebrow{grid-area:eyebrow;}

.hero-grid > h1{grid-area:h1;}

.hero-grid > .hero-art{grid-area:art;}

.hero-grid > .lede{grid-area:lede;}

.hero-grid > .hero-ctas{grid-area:ctas;}

.hero h1{
    font-family:var(--display);
    font-weight:900;
    font-size:clamp(40px, 5.4vw, 68px);
    line-height:1.02;
    letter-spacing:-.01em;
    margin:16px 0 20px;
  }

.hero h1 .accent{color:var(--red);}

.hero p.lede{
    font-size:18px;line-height:1.6;color:var(--ink-soft);
    max-width:46ch;margin:0 0 32px;
  }

.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px;}

.hero-note{font-size:13px;color:var(--muted);margin-top:18px;}

.hero-art{position:relative;}

.chart-card{
    background:var(--white);
    border:1px solid var(--hairline);
    border-radius:10px;
    padding:28px 26px 24px;
    box-shadow:0 24px 60px -30px rgba(19,19,19,.35);
  }

.chart-eyebrow{
    font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--red);display:block;margin-bottom:9px;
  }

.chart-title{font-family:var(--display);font-weight:800;font-size:17px;margin:0 0 4px;color:var(--ink);}

.chart-card-sub{font-size:12.5px;color:var(--muted);margin:0 0 18px;}

.chart-visual{position:relative;}

.chart-svg{width:100%;height:auto;display:block;}

.chart-area{opacity:0;animation:areaIn .6s 1.7s ease forwards;}

.chart-path{
    fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:900;stroke-dashoffset:900;
    animation:draw 1.8s .3s cubic-bezier(.65,0,.35,1) forwards;
  }

.chart-dot{fill:var(--ink);opacity:0; animation:pop .3s ease forwards;}

.chart-callout{
    position:absolute;top:2%;right:13%;
    background:var(--ink);color:var(--white);
    font-family:var(--display);font-weight:800;font-size:12.5px;
    padding:6px 12px;border-radius:20px;white-space:nowrap;
    box-shadow:0 8px 18px -6px rgba(19,19,19,.45);
    opacity:0;
    animation:calloutIn .4s 2.15s ease forwards;
  }

.chart-axis{
    display:flex;justify-content:space-between;
    margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);
  }

.axis-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}

.axis-label.muted{color:var(--muted);}

.axis-label.accent{color:var(--red);}

@keyframes draw{to{stroke-dashoffset:0;}}

@keyframes pop{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}

@keyframes areaIn{to{opacity:1;}}

@keyframes calloutIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

@media (prefers-reduced-motion: reduce){
    .chart-path{animation:none;stroke-dashoffset:0;}
    .chart-head,.chart-dot,.chart-area,.chart-callout{animation:none;opacity:1;}
  }

/* ================= TICKER ================= */
  .ticker{
    background:var(--ink);
    color:var(--white);
    overflow:hidden;
    margin-top:64px;
    border-top:1px solid var(--hairline-dark);
    border-bottom:1px solid var(--hairline-dark);
  }

.ticker-track{
    display:flex;width:max-content;
    animation:scroll 58s linear infinite;
  }

@media (prefers-reduced-motion: reduce){ .ticker-track{animation-duration:120s;} }

.ticker-track span{
    display:flex;align-items:center;gap:14px;
    font-family:var(--display);font-weight:700;font-size:14px;
    letter-spacing:.06em;text-transform:uppercase;
    padding:14px 28px;white-space:nowrap;
  }

.ticker-track span b{color:var(--red);font-weight:800;}

.ticker-track .sep{color:var(--red);}

@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ================= SECTION HEADS ================= */
  section{padding:104px 0;}

.sec-head{max-width:640px;margin-bottom:56px;}

.sec-head h2{
    font-family:var(--display);font-weight:800;
    font-size:clamp(28px,3.2vw,40px);
    line-height:1.12;margin:14px 0 0;
    letter-spacing:-.01em;
  }

.sec-head p{font-size:16.5px;color:var(--muted);margin-top:14px;line-height:1.6;}

/* ================= PROMISE PANELS ================= */
  .promise{padding-top:0;padding-bottom:0;}

.panels{display:grid;grid-template-columns:1fr 1fr;}

.panel{padding:76px 56px;position:relative;min-height:360px;}

.panel-red{background:var(--red);color:var(--white);}

.panel-ink{background:var(--ink);color:var(--white);}

.panel .num{
    font-family:var(--display);font-weight:900;font-size:13px;
    letter-spacing:.14em;opacity:.7;margin-bottom:22px;display:block;
  }

.panel h3{
    font-family:var(--display);font-weight:900;font-size:clamp(30px,3vw,42px);
    margin:0 0 20px;letter-spacing:-.01em;
  }

.panel p{font-size:16px;line-height:1.65;max-width:38ch;opacity:.92;}

/* ================= EXPLAINER CARDS ================= */
  .explainers-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--hairline);
    border-left:1px solid var(--hairline);
  }

.x-card{
    background:var(--paper);
    padding:38px 32px 32px;
    border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    display:flex;flex-direction:column;
    transition:background .18s ease;
  }

.x-card:hover{background:var(--white);}

.x-card .tag{
    font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    margin-bottom:10px;
  }

.x-card h3{
    font-family:var(--display);font-weight:800;font-size:20px;margin:0 0 10px;letter-spacing:-.005em;
  }

.x-card p{font-size:14.5px;line-height:1.62;color:var(--ink-soft);margin:0 0 24px;flex-grow:1;}

.x-link{
    font-size:14px;font-weight:700;color:var(--red);
    display:inline-flex;align-items:center;gap:6px;
  }

.x-link svg{width:14px;height:14px;transition:transform .15s ease;}

.x-card:hover .x-link svg{transform:translateX(3px);}

/* ================= MANIFESTO ================= */
  .manifesto{background:var(--white);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}

.manifesto-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}

.manifesto blockquote{
    font-family:var(--display);font-weight:700;
    font-size:clamp(24px,2.6vw,34px);
    line-height:1.28;letter-spacing:-.01em;margin:14px 0 0;
  }

.manifesto blockquote .accent{color:var(--red);}

.mlist li{
    display:flex;gap:16px;align-items:flex-start;
    padding:20px 0;border-top:1px solid var(--hairline);
    font-size:16px;line-height:1.55;color:var(--ink-soft);
  }

.mlist li:last-child{border-bottom:1px solid var(--hairline);}

.mlist svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--red);}

/* ================= NEWSLETTER ================= */
  .newsletter{
    background:var(--ink);color:var(--white);
    position:relative;overflow:hidden;
  }

.nl-inner{
    display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  }

.newsletter h2{
    font-family:var(--display);font-weight:800;
    font-size:clamp(28px,3.4vw,42px);line-height:1.12;margin:14px 0 16px;letter-spacing:-.01em;
  }

.newsletter p{font-size:16.5px;color:#CFCFCC;max-width:44ch;line-height:1.6;}

.nl-form{display:flex;gap:10px;margin-top:8px;}

.nl-form input{
    flex:1;padding:15px 16px;border-radius:3px;border:2px solid #3A3A38;
    background:#1D1D1C;color:var(--white);font-size:15px;font-family:var(--body);
  }

.nl-form input::placeholder{color:#8A8A87;}

.nl-form input:focus{border-color:var(--red);outline:none;}

.nl-fine{font-size:12.5px;color:#8A8A87;margin-top:12px;}

.nl-chart{
    justify-self:end;width:100%;max-width:320px;
    background:#1B1B1A;border:1px solid #2E2E2C;border-radius:12px;
    padding:24px 24px 18px;
  }

.nl-chart-label{
    display:block;font-family:var(--body);font-weight:700;font-size:11px;
    letter-spacing:.12em;text-transform:uppercase;color:#8A8A87;margin-bottom:16px;
  }

.nl-chart-svg{width:100%;height:auto;display:block;}

.nl-chart-axis{
    display:flex;justify-content:space-between;
    margin-top:14px;padding-top:14px;border-top:1px solid #2E2E2C;
  }

.nl-axis-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}

.nl-axis-label.muted{color:#8A8A87;}

.nl-axis-label.accent{color:var(--red);}

/* ================= FOOTER ================= */
  footer{padding:72px 0 34px;}

.foot-social{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    padding:28px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  }

.foot-social-label{
    font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  }

.foot-social-icons{display:flex;gap:10px;}

.foot-social-icons a{
    width:36px;height:36px;border-radius:50%;border:1.5px solid var(--hairline);
    display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
    transition:background .15s,color .15s,border-color .15s;
  }

.foot-social-icons a svg{width:16px;height:16px;}

.foot-social-icons a:hover{background:var(--red);border-color:var(--red);color:var(--white);}

.foot-logo img{height:50px;margin-bottom:16px;}

.foot-top p{font-size:14px;color:var(--muted);max-width:32ch;line-height:1.6;}

.foot-col h4{
    font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    margin:0 0 18px;
  }

.foot-soon{color:var(--red);font-weight:500;text-transform:none;letter-spacing:0;}

.foot-col ul li{margin-bottom:12px;}

.foot-col a{font-size:14.5px;font-weight:500;color:var(--ink-soft);}

.foot-col a:hover{color:var(--red);}

.foot-bottom{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
    padding-top:26px;font-size:13px;color:var(--muted);
  }

.foot-bottom .tag{
    font-family:var(--display);font-weight:700;letter-spacing:.02em;color:var(--ink-soft);
  }

.foot-bottom .tag .dot{color:var(--red);}

/* ================= RESPONSIVE ================= */
  @media (max-width:960px){
    .hero-grid{
      display:block;
    }
    .hero h1{margin:16px 0 0;}
    .hero-art{max-width:460px;margin:32px 0 40px;}
    .panels{grid-template-columns:1fr;}
    .explainers-grid{grid-template-columns:repeat(2,1fr);}
    .manifesto-grid{grid-template-columns:1fr;gap:36px;}
    .nl-inner{grid-template-columns:1fr;}
    .nl-chart{display:none;}
    .foot-top{grid-template-columns:1fr 1fr;row-gap:36px;}
  }

@media (max-width:1000px){
    .nav-links{
      position:fixed;inset:64px 0 0 0;background:var(--paper);
      flex-direction:column;align-items:flex-start;padding:28px 24px;gap:22px;
      transform:translateX(100%);transition:transform .25s ease;
      border-top:1px solid var(--hairline);
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links a{font-size:17px;}
    .nav-toggle{display:block;}
    .btn-nav{display:none;}
  }

@media (max-width:720px){
    .wrap{padding:0 20px;}
    .nav-row{padding:14px 20px;}
    section{padding:64px 0;}
    .explainers-grid{grid-template-columns:1fr;}
    .foot-top{grid-template-columns:1fr;}
    .panel{padding:52px 28px;}
  }

/* ================= INLINE BODY-COPY LINKS ================= */
/* Base link rule above (a{color:inherit;text-decoration:none}) makes links
   invisible inside plain prose unless a context explicitly restyles them.
   This restyles links wherever they appear inside real body copy. */
.article-body a,
.faq-answer a,
.calc-below a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.article-body a:hover,
.faq-answer a:hover,
.calc-below a:hover {
  color: var(--red-dark);
}

/* Whole-card links inside .article-body must NOT inherit the body-copy
   link treatment above — their own child elements (h3, p, .cc-link, etc.)
   already carry their own styling, and the underline/color bled through
   every line of text in the card, making the whole card look like a
   single giant link. */
.article-body a.calc-hub-card,
.article-body a.compare-card,
.article-body a.picker-card,
.article-body a.article-list-card,
.article-body a.issue-card {
  color: inherit;
  text-decoration: none;
}

/* ================= BREADCRUMBS ================= */
.breadcrumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  font-size:13px;color:var(--muted);margin-bottom:14px;
}
.breadcrumbs a{color:var(--muted);text-decoration:none;}
.breadcrumbs a:hover{color:var(--red);text-decoration:underline;}
.breadcrumbs .crumb-sep{color:var(--hairline-dark);}
.breadcrumbs .crumb-current{color:var(--ink-soft);font-weight:600;}

/* ================= MOBILE OVERFLOW GUARD ================= */
/* The slide-in mobile menu sits off-screen to the right. On real phones that
   stretched the page width (~655px) and made browsers shrink the whole page.
   clip (not hidden) on body keeps the sticky header working. */
html{overflow-x:hidden;}
body{overflow-x:clip;}

/* ================= FOOTER RESPONSIVE (beats per-page inline .foot-top) ================= */
@media (max-width:1000px){
  footer .foot-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;}
  footer .foot-top .foot-logo{grid-column:1 / -1;}
}
@media (max-width:640px){
  footer .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;}
  footer .foot-top p{max-width:none;}
}
@media (max-width:340px){
  footer .foot-top{grid-template-columns:1fr;}
}