/* ==========================================================================
   Rilato Autoresponder — main.css
   Palette logic:  ink = cost & risk   |   paper = explanation & proof
                   amber = money leaving   |   verdigris = owned, paid once
   ========================================================================== */

:root{
  --ink:#0C1420;
  --ink-2:#152030;
  --ink-3:#1E2C3D;
  --paper:#FAF8F4;
  --white:#FFFFFF;
  --rule:#E4DFD5;
  --rule-dark:#293A4E;

  --text:#14212E;
  --text-soft:#55636F;
  --invert:#EDF1F5;
  --invert-soft:#94A4B4;

  --amber:#E8963C;
  --amber-ink:#7A4A0E;
  --amber-soft:#FBEAD3;

  --verdigris:#1F7C69;
  --verdigris-soft:#DDEFEB;

  --alarm:#C2452D;
  --alarm-soft:#FADFD9;

  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --measure:34rem;      /* ~66 characters — long copy has to stay readable */
  --wide:72rem;
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:1.125rem;
  line-height:1.7;
  font-optical-sizing:auto;
  overflow-wrap:break-word;      /* long tokens wrap instead of widening the page */
}

/* Nothing may ever exceed the viewport. Catches anything added later. */
html,body{max-width:100%;overflow-x:clip}

img{max-width:100%;height:auto;display:block}
a{color:var(--verdigris);text-underline-offset:.18em}

:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--white);padding:.6rem 1rem;border-radius:var(--r)}

/* --- Layout scaffolding --------------------------------------------------- */

.band{padding:clamp(3rem,7vw,5.5rem) 1.25rem}
.band--ink{background:var(--ink);color:var(--invert)}
.band--ink a:not(.btn){color:var(--amber)}   /* :not(.btn) — buttons keep their own colour */
.band--tight{padding-top:clamp(2rem,4vw,3rem)}
.wrap{max-width:var(--wide);margin-inline:auto}
.col{max-width:var(--measure);margin-inline:auto}

/* --- Type ----------------------------------------------------------------- */

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,5.6vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem);letter-spacing:-.01em}
h4{font-size:1.02rem;letter-spacing:0}
p{margin:0 0 1.1em}
strong{font-weight:650}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin:0 0 1.1rem;
}
.band--ink .eyebrow{color:var(--amber)}
.eyebrow--dark{color:var(--verdigris)}

.lede{font-size:clamp(1.18rem,2.1vw,1.4rem);line-height:1.55;color:var(--text-soft)}
.band--ink .lede{color:var(--invert-soft)}

.kicker{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.small{font-size:.9rem;line-height:1.6;color:var(--text-soft)}
.band--ink .small{color:var(--invert-soft)}
.mono{font-family:var(--mono)}

/* --- Buttons -------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  padding:.95rem 1.7rem;border-radius:var(--r);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.btn--go{background:var(--amber);color:#2B1904;box-shadow:0 2px 0 var(--amber-ink)}
.btn--go:hover{box-shadow:0 4px 0 var(--amber-ink)}
.btn.btn--ghost{background:transparent;color:var(--invert);border-color:var(--rule-dark)}
.btn--ghost:hover{border-color:var(--invert-soft)}
.btn.btn--solid{background:var(--verdigris);color:#fff}
.btn--block{display:flex;width:100%}
.btn--lg{font-size:1.12rem;padding:1.15rem 2rem}

.cta-note{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--text-soft);margin-top:.75rem}
.band--ink .cta-note{color:var(--invert-soft)}

/* --- Header / sticky bar --------------------------------------------------- */

.top{
  background:var(--ink);color:var(--invert);
  padding:1rem 1.25rem;border-bottom:1px solid var(--rule-dark);
}
.top__in{max-width:var(--wide);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.03em;color:var(--invert);text-decoration:none}
.logo span{color:var(--amber)}
.top__meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--invert-soft)}

.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--ink-2);border-top:1px solid var(--rule-dark);
  padding:.7rem 1.25rem;
  transform:translateY(110%);transition:transform .25s ease;
}
.stickybar.is-on{transform:translateY(0)}
.stickybar__in{
  max-width:var(--wide);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.stickybar__txt{font-family:var(--display);font-weight:600;color:var(--invert);font-size:.95rem;line-height:1.3}
.stickybar__txt em{font-style:normal;color:var(--amber)}
@media (max-width:640px){
  .stickybar__txt{font-size:.82rem}
  .stickybar .btn{padding:.7rem 1rem;font-size:.9rem}
}

/* --- Hero ------------------------------------------------------------------ */

.hero{background:var(--ink);color:var(--invert);padding:clamp(3rem,7vw,5.5rem) 1.25rem clamp(2.5rem,5vw,4rem)}
.hero__grid{max-width:var(--wide);margin-inline:auto;display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.hero h1{color:var(--invert);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lede{max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

.trustrow{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.8rem;padding-top:1.4rem;
  border-top:1px solid var(--rule-dark);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--invert-soft);
}
.trustrow span{display:inline-flex;align-items:center;gap:.4rem}
.trustrow span::before{content:'';width:5px;height:5px;background:var(--verdigris);border-radius:50%}

/* --- Signature: the cost meter --------------------------------------------- */

.meter{
  background:var(--ink-2);border:1px solid var(--rule-dark);border-radius:var(--r);
  padding:clamp(1.3rem,3vw,1.9rem);
}
.meter__head{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--invert-soft);margin:0 0 1.2rem;
}
.meter__label{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:.4rem 1rem;flex-wrap:wrap;min-width:0;
  font-family:var(--mono);font-size:.8rem;color:var(--invert-soft);margin-bottom:.5rem;
}
.meter__label > *{min-width:0}
.meter__label b{font-size:1.15rem;color:var(--invert);font-weight:600}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;margin:0 0 1.4rem;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--rule-dark);border-radius:2px}
input[type=range]::-moz-range-track{height:4px;background:var(--rule-dark);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;margin-top:-9px;
  background:var(--amber);border:3px solid var(--ink-2);border-radius:50%;
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;background:var(--amber);border:3px solid var(--ink-2);border-radius:50%;
}

.readout{display:grid;gap:.55rem;margin-bottom:1.3rem}
.readout__row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.15rem .9rem;flex-wrap:wrap;min-width:0;
  padding:.6rem .8rem;background:var(--ink);border-radius:var(--r);
  border-left:3px solid var(--amber);
}
.readout__row > *{min-width:0}
/* was white-space:nowrap — that is what forced the page wider than the screen */
.readout__row b{font-family:var(--mono);font-size:1.02rem;color:var(--amber);font-weight:600}
.readout__name{font-family:var(--display);font-size:.92rem;font-weight:500;color:var(--invert)}

.verdict{
  border-top:1px solid var(--rule-dark);padding-top:1.2rem;
  display:grid;gap:.9rem;
}
.verdict__pair{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:.15rem 1rem;flex-wrap:wrap;min-width:0;
}
.verdict__pair > *{min-width:0}
.verdict__k{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--invert-soft)}
.verdict__v{font-family:var(--mono);font-weight:600;font-size:1.5rem;letter-spacing:-.02em}
.verdict__v--bad{color:var(--amber)}
.verdict__v--good{color:#5FD3B4}
.verdict__foot{font-family:var(--mono);font-size:.72rem;color:var(--invert-soft);line-height:1.55;margin:0}

/* --- Generic cards / grids ------------------------------------------------- */

.grid{display:grid;gap:1.1rem}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
@media (min-width:700px){.grid--2{grid-template-columns:1fr 1fr}}
@media (min-width:880px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.4rem 1.5rem;
}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}
.card--ink{background:var(--ink-2);border-color:var(--rule-dark);color:var(--invert)}
.card--ink h3{color:var(--invert)}
.card--ink p{color:var(--invert-soft)}

.card__tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--verdigris);display:block;margin-bottom:.5rem;
}
.card--ink .card__tag{color:var(--amber)}

/* --- Risk panel (loss aversion) -------------------------------------------- */

.risk{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:760px){.risk{grid-template-columns:1fr 1fr}}
.risk__item{
  background:var(--ink-2);border:1px solid var(--rule-dark);
  border-left:3px solid var(--alarm);border-radius:var(--r);padding:1.4rem 1.5rem;
}
.risk__item h3{color:var(--invert);font-size:1.15rem}
.risk__item p{color:var(--invert-soft);margin-bottom:0}
.risk__n{font-family:var(--mono);font-size:.72rem;color:var(--alarm);letter-spacing:.12em;display:block;margin-bottom:.6rem}

/* --- Feature groups --------------------------------------------------------- */

.fgroup{border-top:1px solid var(--rule);padding-top:1.6rem;margin-top:1.6rem}
.fgroup:first-of-type{border-top:0;padding-top:0;margin-top:0}
.fgroup__h{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
.fgroup__h h3{margin:0}
.fgroup__h span{font-family:var(--mono);font-size:.72rem;color:var(--text-soft);letter-spacing:.08em}

.flist{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:760px){.flist{grid-template-columns:1fr 1fr;gap:.75rem 2rem}}
.flist li{position:relative;padding-left:1.6rem;font-size:1rem;line-height:1.55}
.flist li::before{
  content:'';position:absolute;left:0;top:.55em;width:9px;height:9px;
  background:var(--verdigris);border-radius:1px;transform:rotate(45deg);
}
.flist b{font-weight:650}

/* --- Terminal block ---------------------------------------------------------- */

.term{
  background:var(--ink);border:1px solid var(--rule-dark);border-radius:var(--r);
  overflow:hidden;margin:1.4rem 0;
}
.term__bar{
  padding:.5rem .9rem;background:var(--ink-3);border-bottom:1px solid var(--rule-dark);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--invert-soft);
}
.term pre{
  margin:0;padding:1rem 1.1rem;overflow-x:auto;
  font-family:var(--mono);font-size:.8rem;line-height:1.75;color:#BFD4C8;
}
.term .c{color:var(--invert-soft)}
.term .p{color:var(--amber)}

/* --- Comparison table --------------------------------------------------------- */

.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--white)}
table.cmp{width:100%;border-collapse:collapse;font-size:.95rem;min-width:640px}
table.cmp th,table.cmp td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--rule)}
table.cmp thead th{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);font-weight:600;background:var(--paper);
}
table.cmp tbody th{font-family:var(--display);font-weight:600;font-size:.95rem}
table.cmp td.us{background:var(--verdigris-soft);font-weight:600;color:#14453B}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:0}

/* --- Proof / testimonials ------------------------------------------------------ */

.quote{
  background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--verdigris);
  border-radius:var(--r);padding:1.4rem 1.5rem;
}
.quote p{font-size:1.05rem;margin-bottom:.9rem}
.quote footer{font-family:var(--mono);font-size:.76rem;color:var(--text-soft);letter-spacing:.03em}
.placeholder-flag{
  background:var(--alarm-soft);border:1px dashed var(--alarm);border-radius:var(--r);
  padding:.9rem 1.1rem;font-family:var(--mono);font-size:.78rem;line-height:1.6;color:#7A2417;
}

/* --- Pricing --------------------------------------------------------------------- */

.tiers{display:grid;gap:1.1rem;grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{
  background:var(--ink-2);border:1px solid var(--rule-dark);border-radius:var(--r);
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;
}
.tier--pick{border-color:var(--amber);border-width:2px;position:relative;background:var(--ink-3)}
.tier__flag{
  position:absolute;top:-.75rem;left:1.4rem;background:var(--amber);color:#2B1904;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:var(--r);font-weight:700;
}
.tier h3{color:var(--invert);margin:0;font-size:1.15rem}
.tier__price{font-family:var(--mono);font-size:2.5rem;font-weight:700;color:var(--invert);letter-spacing:-.03em;line-height:1}
.tier__price small{font-size:.85rem;font-weight:400;color:var(--invert-soft);letter-spacing:0;display:block;margin-top:.4rem;font-family:var(--body)}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.94rem;color:var(--invert-soft)}
.tier li{padding-left:1.3rem;position:relative;line-height:1.5}
.tier li::before{content:'+';position:absolute;left:0;color:var(--verdigris);font-family:var(--mono);font-weight:700}
.tier .btn{margin-top:auto}

.countdown{
  display:flex;gap:.6rem;justify-content:center;margin:0 0 2rem;flex-wrap:wrap;
}
.cd__cell{
  background:var(--ink-2);border:1px solid var(--rule-dark);border-radius:var(--r);
  padding:.6rem .9rem;min-width:66px;text-align:center;
}
.cd__n{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--amber);line-height:1.1;display:block}
.cd__l{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--invert-soft)}

/* --- Guarantee ---------------------------------------------------------------------- */

.guarantee{
  background:var(--verdigris-soft);border:1px solid var(--verdigris);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.2rem);
}
.guarantee h3{color:#14453B;margin-bottom:.5rem}
.guarantee p{color:#1C4E44;margin-bottom:0}
.guarantee__badge{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verdigris);font-weight:600;display:block;margin-bottom:.7rem;
}

/* --- FAQ ------------------------------------------------------------------------------ */

.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem 2.2rem 1.1rem 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.03rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:.3rem;top:1rem;
  font-family:var(--mono);font-size:1.3rem;color:var(--verdigris);line-height:1;
}
.faq details[open] summary::after{content:'\2212'}
.faq details > div{padding:0 0 1.2rem;max-width:var(--measure)}
.faq details > div p:last-child{margin-bottom:0}

/* --- Subscribe form (reused on every article) -------------------------------------------- */

.optin{
  background:var(--ink);color:var(--invert);border-radius:var(--r);
  padding:clamp(1.6rem,3.5vw,2.4rem);border:1px solid var(--rule-dark);
}
.optin__grid{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media (min-width:820px){.optin__grid{grid-template-columns:1.1fr .9fr;align-items:center}}
.optin h3{color:var(--invert);font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:.5rem}
.optin p{color:var(--invert-soft);margin-bottom:0;font-size:1rem}
.optin__form{display:grid;gap:.7rem}
.optin__form label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--invert-soft);
}
.optin__form input[type=text],
.optin__form input[type=email]{
  width:100%;padding:.85rem .95rem;font-size:1rem;font-family:var(--body);
  background:var(--ink-2);border:1px solid var(--rule-dark);border-radius:var(--r);color:var(--invert);
}
.optin__form input::placeholder{color:#6B7C8C}
.optin__form input:focus{border-color:var(--amber)}
.optin__privacy{font-family:var(--mono);font-size:.7rem;line-height:1.6;color:var(--invert-soft);margin:0}
.optin__bullets{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.4rem}
.optin__bullets li{position:relative;padding-left:1.4rem;font-size:.95rem;color:var(--invert-soft);line-height:1.5}
.optin__bullets li::before{content:'\2192';position:absolute;left:0;color:var(--amber);font-family:var(--mono)}

/* --- P.S. block ---------------------------------------------------------------------------- */

.ps{border-left:3px solid var(--amber);padding-left:1.2rem;margin-top:2rem}
.ps b{font-family:var(--display)}

/* --- Footer -------------------------------------------------------------------------------- */

.foot{background:var(--ink);color:var(--invert-soft);padding:3rem 1.25rem 5.5rem;border-top:1px solid var(--rule-dark)}
.foot__in{max-width:var(--wide);margin-inline:auto;display:grid;gap:1.6rem}
@media (min-width:760px){.foot__in{grid-template-columns:1.4fr 1fr}}
.foot a:not(.btn){color:var(--invert-soft)}
.foot .small{font-size:.82rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-family:var(--mono);font-size:.78rem}
.legal{font-family:var(--mono);font-size:.7rem;line-height:1.7;color:#6B7C8C;border-top:1px solid var(--rule-dark);padding-top:1.4rem;margin-top:.5rem}

/* --- Utility --------------------------------------------------------------------------------- */

.center{text-align:center}
.mt0{margin-top:0}
.mb0{margin-bottom:0}
.stack > * + *{margin-top:1.1rem}
.hr{height:1px;background:var(--rule);border:0;margin:2.4rem 0}
.band--ink .hr{background:var(--rule-dark)}

/* ==========================================================================
   ARTICLES — long-form content pages
   Separate visual register from the sales page: quieter, more editorial,
   built for 2,000 words of actual reading rather than for conversion.
   ========================================================================== */

/* --- Article masthead ------------------------------------------------------ */

.amast{
  background:var(--white);border-bottom:1px solid var(--rule);
  padding:clamp(2.4rem,5vw,4rem) 1.25rem clamp(2rem,4vw,3rem);
}
.amast__in{max-width:var(--measure);margin-inline:auto}
.amast h1{
  font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:.5em;letter-spacing:-.025em;
  max-width:20ch;
}
.amast .dek{
  font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.5;color:var(--text-soft);
  margin-bottom:1.4rem;
}
.ameta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--text-soft);
  border-top:1px solid var(--rule);padding-top:1rem;
}
.ameta span{display:inline-flex;align-items:center;gap:.4rem}
.ameta span + span::before{content:'';width:3px;height:3px;background:var(--rule);border-radius:50%;margin-right:.5rem}

/* --- Table of contents ------------------------------------------------------ */

.toc{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.1rem 1.3rem;margin:0 auto 2rem;max-width:var(--measure);
}
.toc h2{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);margin:0 0 .7rem;font-weight:600;
}
.toc ol{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.95rem}
.toc a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{border-bottom-color:var(--verdigris);color:var(--verdigris)}

/* --- Prose ------------------------------------------------------------------- */

.prose{max-width:var(--measure);margin-inline:auto;font-size:1.08rem;line-height:1.75}
.prose > * + *{margin-top:1.15em}
.prose h2{
  font-size:clamp(1.4rem,2.8vw,1.85rem);margin-top:2.6em;margin-bottom:.45em;
  padding-top:1.4rem;border-top:2px solid var(--ink);letter-spacing:-.02em;
  scroll-margin-top:1.5rem;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-size:1.16rem;margin-top:2em;margin-bottom:.35em;color:var(--ink);
  scroll-margin-top:1.5rem;
}
.prose h4{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-soft);margin-top:1.8em;margin-bottom:.3em;font-weight:600;
}
.prose p{margin:0}
.prose ul,.prose ol{padding-left:1.4rem;margin-block:0}
.prose li{margin-bottom:.45em}
.prose li > ul,.prose li > ol{margin-top:.45em}
.prose strong{font-weight:650}
.prose a:not(.btn){color:var(--verdigris);text-decoration:underline;text-decoration-thickness:1px}
.prose code{
  font-family:var(--mono);font-size:.86em;background:#EFEBE3;
  padding:.1em .32em;border-radius:2px;
}
.prose hr{border:0;height:1px;background:var(--rule);margin-block:2.4em}

.prose blockquote{
  margin:0;padding:.2rem 0 .2rem 1.3rem;border-left:3px solid var(--amber);
  font-size:1.12rem;line-height:1.6;color:var(--text);
}
.prose blockquote cite{
  display:block;margin-top:.6rem;font-family:var(--mono);font-size:.75rem;
  font-style:normal;color:var(--text-soft);letter-spacing:.03em;
}

/* --- Prose code blocks -------------------------------------------------------- */

.prose pre{
  background:var(--ink);color:#BFD4C8;border-radius:var(--r);
  padding:1rem 1.1rem;overflow-x:auto;font-family:var(--mono);
  font-size:.83rem;line-height:1.7;margin-block:0;
}
.prose pre.light{
  background:var(--paper);color:var(--text);
  border:1px solid var(--rule);border-left:3px solid var(--verdigris);
}
.prose pre code{background:none;padding:0;font-size:inherit}

/* --- Prose callouts ------------------------------------------------------------ */

.note{
  border-left:3px solid var(--verdigris);background:var(--verdigris-soft);
  padding:1rem 1.2rem;border-radius:0 var(--r) var(--r) 0;
}
.note--warn{border-left-color:var(--alarm);background:var(--alarm-soft)}
.note--tip{border-left-color:var(--amber);background:var(--amber-soft)}
.note > * + *{margin-top:.7em}
.note p{margin:0}
.note__l{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;display:block;margin-bottom:.5rem;color:#14453B;
}
.note--warn .note__l{color:#7A2417}
.note--tip .note__l{color:var(--amber-ink)}

/* --- Prose tables ---------------------------------------------------------------- */

.prose .tablewrap{margin-block:0}
.prose table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:0}
.prose table th,.prose table td{
  padding:.7rem .8rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top;
}
.prose table thead th{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);background:var(--paper);font-weight:600;
}

/* --- Key takeaway box -------------------------------------------------------------- */

.takeaway{
  background:var(--ink);color:var(--invert);border-radius:var(--r);
  padding:1.4rem 1.5rem;
}
.takeaway__l{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);display:block;margin-bottom:.6rem;font-weight:700;
}
.takeaway p{margin:0;font-size:1.05rem;line-height:1.6}
.takeaway p + p{margin-top:.7em}
.takeaway strong{color:#fff}

/* --- Related articles ----------------------------------------------------------------- */

.related{border-top:1px solid var(--rule);padding-top:1.6rem;margin-top:3rem}
.related h2{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);margin:0 0 1rem;font-weight:600;
}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.related a{
  display:block;text-decoration:none;color:var(--text);
  border-left:2px solid var(--rule);padding-left:.9rem;
}
.related a:hover{border-left-color:var(--verdigris)}
.related a b{
  display:block;font-family:var(--display);font-weight:600;font-size:1rem;
  line-height:1.35;margin-bottom:.15rem;
}
.related a span{font-size:.9rem;color:var(--text-soft);line-height:1.45;display:block}

/* --- Article hub -------------------------------------------------------------------------- */

.hubgroup{margin-top:2.6rem}
.hubgroup__h{
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:.6rem;margin-bottom:1.2rem;
}
.hubgroup__h h2{margin:0;font-size:1.35rem}
.hubgroup__h p{
  margin:0;font-family:var(--mono);font-size:.72rem;color:var(--text-soft);letter-spacing:.04em;
}

.hublist{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:780px){.hublist{grid-template-columns:1fr 1fr}}
.hubcard{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;
  text-decoration:none;color:var(--text);transition:border-color .12s ease;
}
.hubcard:hover{border-color:var(--verdigris)}
.hubcard__t{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--verdigris);font-weight:600;
}
.hubcard h3{margin:0;font-size:1.08rem;line-height:1.35}
.hubcard p{margin:0;font-size:.94rem;color:var(--text-soft);line-height:1.5}
.hubcard__m{
  font-family:var(--mono);font-size:.68rem;color:var(--text-soft);
  margin-top:auto;padding-top:.5rem;letter-spacing:.04em;
}
.hubcard--soon{opacity:.55;pointer-events:none;border-style:dashed}

/* ==========================================================================
   SMALL SCREENS — tighten the scale.
   The desktop type scale reads oversized on a ~400pt phone viewport, and the
   dense mono numbers in the meter are the worst offenders. Everything below
   is a reduction; no new layout.
   ========================================================================== */

@media (max-width:560px){

  body{font-size:1.04rem;line-height:1.65}

  .band{padding:2.4rem 1.1rem}
  .band--tight{padding-top:1.8rem}
  .hero{padding:2.2rem 1.1rem 2rem}

  h1{font-size:1.95rem;line-height:1.12}
  h2{font-size:1.5rem}
  .lede{font-size:1.06rem}
  .eyebrow{font-size:.66rem;letter-spacing:.13em;margin-bottom:.8rem}

  /* --- the cost meter, where the overflow was worst --- */
  .meter{padding:1.05rem}
  .meter__head{font-size:.66rem;margin-bottom:.9rem}
  .meter__label{font-size:.74rem}
  .meter__label b{font-size:1rem}
  .meter select{max-width:100%;font-size:.9rem}

  .readout__row{padding:.5rem .65rem}
  .readout__name{font-size:.86rem}
  .readout__row b{font-size:.92rem;line-height:1.45}

  .verdict{padding-top:1rem;gap:.75rem}
  .verdict__k{font-size:.88rem}
  .verdict__v{font-size:1.3rem}
  .verdict__foot{font-size:.67rem}

  /* --- everything else --- */
  .trustrow{font-size:.68rem;gap:.4rem .7rem;margin-top:1.4rem;padding-top:1.1rem}
  .btn{font-size:.96rem;padding:.85rem 1.3rem}
  .btn--lg{font-size:1.02rem;padding:1rem 1.4rem}
  .hero__cta{gap:.6rem}
  .hero__cta .btn{flex:1 1 100%}

  .card,.risk__item,.tier{padding:1.15rem 1.2rem}
  .tier__price{font-size:2.1rem}
  .cd__cell{min-width:56px;padding:.5rem .6rem}
  .cd__n{font-size:1.25rem}

  .term pre{font-size:.72rem;padding:.8rem .85rem}
  .flist li{font-size:.96rem}
  .faq summary{font-size:.98rem;padding-right:1.9rem}

  .optin{padding:1.3rem 1.15rem}
  .stickybar{padding:.6rem .9rem}

  /* --- articles --- */
  .amast{padding:2rem 1.1rem 1.6rem}
  .amast h1{font-size:1.85rem}
  .amast .dek{font-size:1.02rem}
  .prose{font-size:1.02rem;line-height:1.68}
  .prose h2{font-size:1.42rem}
  .prose h3{font-size:1.08rem}
  .prose pre{font-size:.75rem;padding:.8rem .85rem}
  .toc{padding:.9rem 1rem}
  .takeaway{padding:1.15rem 1.2rem}
  .takeaway p{font-size:1rem}
  .note{padding:.9rem 1rem}
}

/* Very narrow phones */
@media (max-width:380px){
  h1{font-size:1.75rem}
  .meter{padding:.9rem}
  .readout__row b{font-size:.86rem}
  .verdict__v{font-size:1.18rem}
  .tier__price{font-size:1.9rem}
}

/* --- Print ------------------------------------------------------------------------------------ */
@media print{
  .stickybar,.optin,.related,.toc{display:none!important}
  body{background:#fff;font-size:11pt}
  .prose pre{background:#f4f4f4;color:#000;border:1px solid #ccc}
}