/* MailFixly — Kairos design system (CON-13 'Fault -> Fixed').
   Extracted from the approved reference page by build_run.py. Do not hand-edit:
   change the source page or EXTRA_CSS in build_site.py and rebuild.
   Filename is content-hashed on purpose — see CSS_HREF in build_site.py. */

:root{
  --paper:#fcfcfd; --paper-raised:#f9f9fb; --rule:#e8e8ec; --rule-strong:#d9d9e0;
  --ink:#1c2024; --ink-soft:#60646c; --ink-faint:#8b8d98;
  --fixed:#208368; --fixed-fill:#29a383; --fixed-wash:#e6f7ed; --fixed-edge:#acdec8;
  --fault:#ce2c31; --fault-wash:#feebec; --caution:#ab6400; --caution-wash:#fff7c2;
  --night:#0d1114;
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem; --s-5:2rem; --s-6:3rem; --s-7:4.5rem;
  --font-display:'Bricolage Grotesque',Georgia,serif;
  --font-text:'Public Sans','Segoe UI',Arial,sans-serif;
  --dur:.55s; --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-text);
  font-size:17px;line-height:1.7;font-optical-sizing:auto}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0}
h3{font-size:1.12rem;margin:var(--s-4) 0 var(--s-2)}
p,ul,ol{margin:0 0 var(--s-3)}
a{color:var(--fixed);text-underline-offset:.16em;text-decoration-thickness:.08em}
a:hover{color:var(--ink)}
code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:var(--paper-raised);
  border:1px solid var(--rule);border-radius:4px;padding:.1em .35em}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:6px}

/* reading progress: scroll-linked, fixed, cannot shift layout */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--fixed-fill),var(--fixed-edge));z-index:60}

/* Sticky only where the vertical space is cheap. On phones the header would
   permanently eat ~57px of a screen the reader needs for the actual fix, and
   there is no TOC rail there to justify it. */
.masthead{border-bottom:1px solid var(--rule);background:rgba(252,252,253,.9);
  backdrop-filter:blur(10px);z-index:40}
@media(min-width:1060px){.masthead{position:sticky;top:0}}
.mast-in{max-width:74rem;margin:0 auto;padding:var(--s-3) var(--s-4);display:flex;
  align-items:center;justify-content:space-between;gap:var(--s-4)}
.brand{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;
  color:var(--ink);text-decoration:none}
.brand span{color:var(--fixed)}
.mast-in nav{display:flex;gap:var(--s-4);font-size:.92rem;font-weight:500}
.mast-in nav a{color:var(--ink-soft);text-decoration:none}
.mast-in nav a:hover{color:var(--fixed)}
@media(max-width:620px){.mast-in nav{display:none}}

/* ---- banner (from option A) -------------------------------------------- */
.hero{position:relative;min-height:clamp(320px,42vw,460px);display:grid;align-items:end;
  background:var(--night);overflow:hidden;isolation:isolate}
/* Settled state is the default, with the zoom running as a one-shot animation.
   If animation never runs the image is simply already in position, so the hero
   can never be left mid-effect. */
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;
  transform:scale(1);z-index:-2}
@media (prefers-reduced-motion: no-preference){
  .hero img{animation:heroSettle 2.4s var(--ease)}
}
@keyframes heroSettle{from{transform:scale(1.07)}}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,17,20,.2) 0%,rgba(13,17,20,.8) 58%,var(--night) 100%)}
.hero-in{max-width:74rem;margin:0 auto;padding:var(--s-7) var(--s-4) var(--s-5);width:100%}
.hero .crumb,.hero .crumb a{color:rgba(255,255,255,.6);font-size:.85rem;text-decoration:none}
.hero .eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fixed-edge);margin:var(--s-4) 0 0}
.hero h1{color:#fff;font-size:clamp(2.1rem,1.3rem + 3vw,3.6rem);max-width:19ch;margin:var(--s-3) 0 0}
.hero .lede{color:rgba(255,255,255,.82);font-size:1.12rem;max-width:54ch;margin-top:var(--s-3)}
.byline{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;font-size:.85rem;
  color:rgba(255,255,255,.62);margin-top:var(--s-4)}
.byline a{color:rgba(255,255,255,.92)}
.verified{color:var(--fixed-edge);font-weight:600}

/* ---- triage cards (from option C), richer ------------------------------ */
.triage{max-width:74rem;margin:0 auto;padding:var(--s-6) var(--s-4) 0}
.triage h2{font-size:1.3rem;margin:0 0 var(--s-1)}
.triage .sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:var(--s-4)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s-3)}
.card{position:relative;display:block;border:1px solid var(--rule);border-radius:16px;
  padding:var(--s-4);background:var(--paper);text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card::before{content:'';position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--fixed-fill),var(--fixed-edge));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(15,23,42,.10);border-color:var(--fixed-edge)}
.card:hover::before{transform:scaleX(1)}
/* NOTE: must out-specify `.card span{display:block}` below (class+type beats a
   bare class), otherwise the tile falls back to block and the icon pins
   top-left instead of centring. */
.card .card-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--fixed-wash);margin-bottom:var(--s-3);transition:background .35s var(--ease)}
.card .card-ico svg{display:block;width:22px;height:22px;stroke:var(--fixed);stroke-width:1.7;
  fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--ease)}
.card:hover .card-ico{background:var(--fixed-fill)}
.card:hover .card-ico svg{stroke:#fff}
.card b{display:block;font-family:var(--font-display);font-size:1.02rem;margin-bottom:.3rem}
.card span{font-size:.89rem;color:var(--ink-soft);display:block}
.card em{display:inline-flex;align-items:center;gap:.3rem;margin-top:var(--s-3);font-style:normal;
  font-size:.8rem;font-weight:700;color:var(--fixed)}
.card em::after{content:'\2192';transition:transform .3s var(--ease)}
.card:hover em::after{transform:translateX(4px)}

/* ---- body layout ------------------------------------------------------- */
.layout{max-width:74rem;margin:0 auto;padding:var(--s-5) var(--s-4) var(--s-7);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
@media(min-width:1060px){
  /* NOTE: sticky/order must target the grid CHILD (the <aside>), not .toc
     inside it, or the columns silently swap and the article collapses. */
  .layout{grid-template-columns:minmax(0,44rem) 15rem;gap:var(--s-6);justify-content:center}
  .layout > aside{position:sticky;top:5rem;align-self:start}
}
.article{min-width:0}
.toc{font-size:.9rem}
.toc strong{display:block;font-family:var(--font-display);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-2)}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--rule)}
.toc a{display:block;padding:.45rem 0 .45rem var(--s-3);color:var(--ink-soft);text-decoration:none;
  margin-left:-2px;border-left:2px solid transparent;transition:color .25s,border-color .25s}
.toc a:hover,.toc a.active{color:var(--fixed);border-left-color:var(--fixed-fill)}

/* ---- PREMIUM SECTION TREATMENT ----------------------------------------- */
.article section{position:relative;padding-top:var(--s-6);scroll-margin-top:5rem}
.article section h2{font-size:clamp(1.45rem,1.2rem + .9vw,1.95rem);margin:0 0 var(--s-3);
  padding-top:var(--s-3);position:relative}
/* accent rule that draws in when the section reveals */
.article section h2::before{content:'';position:absolute;top:0;left:0;width:52px;height:3px;
  border-radius:2px;background:linear-gradient(90deg,var(--fixed-fill),var(--fixed-edge));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease) .1s}
.article section.in h2::before{transform:scaleX(1)}
/* every other section gets a soft tint band so the page has rhythm */
.article section:nth-of-type(even){background:
  linear-gradient(180deg,rgba(249,249,251,0) 0,var(--paper-raised) 4%,var(--paper-raised) 96%,rgba(249,249,251,0) 100%);
  border-radius:20px;padding-inline:var(--s-4);margin-inline:calc(-1 * var(--s-4))}
@media(max-width:600px){.article section:nth-of-type(even){padding-inline:var(--s-3);margin-inline:calc(-1 * var(--s-3))}}

.answer{background:linear-gradient(180deg,#f1fbf6,var(--fixed-wash));
  border:1px solid var(--fixed-edge);border-radius:16px;padding:var(--s-5);margin:var(--s-5) 0;
  box-shadow:0 10px 30px rgba(32,131,104,.07)}
.answer .label{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--fixed);
  padding:.3rem .7rem;border-radius:999px;margin-bottom:var(--s-3)}
.answer p{margin:0;font-size:1.02rem}
.answer-list{margin:var(--s-3) 0 0;padding:0;list-style:none}
.answer-list li{position:relative;padding-left:1.6rem;margin:.6rem 0;font-size:.98rem}
.answer-list li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;
  border-radius:3px;background:var(--fixed-fill);transform:rotate(45deg)}
.answer-test{margin-top:var(--s-4) !important;padding-top:var(--s-3);
  border-top:1px dashed var(--fixed-edge);font-size:.95rem !important;color:var(--ink-soft)}
.answer-test strong{color:var(--fixed)}
.takeaways{border-left:3px solid var(--fixed-fill);background:var(--paper-raised);
  border-radius:0 12px 12px 0;padding:var(--s-3) var(--s-4);margin:var(--s-4) 0}
.takeaways strong{display:block;font-family:var(--font-display);margin-bottom:var(--s-1)}
.takeaways ul{margin:0;padding-left:1.1rem}
.takeaways li{margin:.25rem 0}

.rail{list-style:none;margin:var(--s-4) 0;padding:0 0 0 var(--s-5);position:relative;--progress:1;counter-reset:step}
.rail.is-animated{--progress:0}
/* z-index matters here: the ol's own pseudo-elements paint AFTER its children,
   so without this the progress line draws straight over the numbered markers. */
.rail::before,.rail::after{content:'';position:absolute;left:12px;top:.55rem;bottom:.55rem;
  width:2px;border-radius:2px;z-index:0}
.rail::before{background:var(--rule-strong)}
.rail::after{background:linear-gradient(180deg,var(--fixed-fill),var(--fixed-edge));
  transform:scaleY(var(--progress));transform-origin:top center;will-change:transform}
.rail.is-animated::after{transition:transform var(--dur) var(--ease)}
.rail li{position:relative;margin:0 0 var(--s-4)}
.rail li:last-child{margin-bottom:0}
.rail li::before{content:counter(step);counter-increment:step;position:absolute;left:-2rem;top:0;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;z-index:2;
  font-family:var(--font-display);font-size:.78rem;font-weight:700;line-height:1;
  background:var(--fixed-fill);color:#fff;border:2px solid var(--fixed-fill)}
.rail.is-animated li::before{background:var(--paper);color:var(--ink-soft);border-color:var(--rule-strong);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rail.is-animated li.reached::before{background:var(--fixed-fill);color:#fff;
  border-color:var(--fixed-fill);transform:scale(1.08)}
.rail li strong{display:block;font-family:var(--font-display);font-size:1rem;margin-bottom:.15rem}

.note{border-left:3px solid var(--fixed-fill);background:var(--fixed-wash);border-radius:0 12px 12px 0;padding:var(--s-3) var(--s-4);margin:var(--s-4) 0}
.warn{border-left:3px solid var(--caution);background:var(--caution-wash);border-radius:0 12px 12px 0;padding:var(--s-3) var(--s-4);margin:var(--s-4) 0}
.err{font-family:ui-monospace,Menlo,monospace;font-size:.88rem;color:var(--fault);
  background:var(--fault-wash);border:1px solid #ffdbdc;border-radius:6px;padding:.15em .5em;display:inline-block}
.table-wrap{overflow-x:auto;margin:var(--s-4) 0;border:1px solid var(--rule);border-radius:14px;background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;padding:var(--s-3);border-bottom:1px solid var(--rule);vertical-align:top}
th{background:var(--ink);color:#fff;font-family:var(--font-display);font-size:.82rem;letter-spacing:.03em}
th:first-child{border-top-left-radius:13px}th:last-child{border-top-right-radius:13px}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--fixed-wash)}
tr:last-child td{border-bottom:0}

#faq details{border:1px solid var(--rule);border-radius:12px;margin:var(--s-2) 0;background:var(--paper);
  transition:border-color .25s,box-shadow .25s}
#faq details[open]{border-color:var(--fixed-edge);box-shadow:0 6px 20px rgba(32,131,104,.06)}
#faq summary{cursor:pointer;padding:var(--s-3) var(--s-4);font-weight:600;font-family:var(--font-display);
  font-size:1rem;list-style:none;display:flex;justify-content:space-between;gap:var(--s-3);align-items:center}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:'+';color:var(--fixed);font-size:1.4rem;line-height:1;
  transition:transform .3s var(--ease)}
#faq details[open] summary::after{transform:rotate(45deg)}
#faq .a{padding:0 var(--s-4) var(--s-3);color:var(--ink-soft)}

.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s-3);margin:var(--s-3) 0}
.related a{position:relative;display:block;border:1px solid var(--rule);border-radius:14px;padding:var(--s-4);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.related a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fixed-fill);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .3s var(--ease)}
.related a:hover{transform:translateY(-4px);border-color:var(--fixed-edge);box-shadow:0 12px 28px rgba(15,23,42,.08)}
.related a:hover::before{transform:scaleY(1)}
.related b{font-family:var(--font-display);display:block;margin-bottom:.2rem}
.related span{font-size:.88rem;color:var(--ink-soft)}

.sources{list-style:none;padding:0;margin:var(--s-3) 0}
.sources li{padding:var(--s-3);border:1px solid var(--rule);border-radius:12px;margin-bottom:var(--s-2);
  background:var(--paper);transition:border-color .25s,transform .25s var(--ease)}
.sources li:hover{border-color:var(--fixed-edge);transform:translateX(4px)}
.sources a{font-weight:600;text-decoration:none}
.sources span{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:.15rem}

.trust{position:relative;border:1px solid var(--fixed-edge);
  background:linear-gradient(180deg,#f4fbf7,var(--paper));border-radius:18px;
  padding:var(--s-5);margin:var(--s-6) 0 0;box-shadow:0 10px 30px rgba(32,131,104,.06)}
.trust::before{content:'\2713';position:absolute;top:-18px;left:var(--s-5);width:36px;height:36px;
  border-radius:50%;background:var(--fixed-fill);color:#fff;display:grid;place-items:center;
  font-size:1.05rem;font-weight:700;box-shadow:0 6px 16px rgba(32,131,104,.28)}
.trust h2{margin:var(--s-2) 0 var(--s-2) !important;font-size:1.15rem;padding-top:0 !important}
.trust h2::before{display:none}
.trust ul{margin:var(--s-2) 0 0;padding-left:1.1rem}
.trust li{margin:.35rem 0}

.tool{border:1px solid var(--rule);border-radius:16px;padding:var(--s-4);margin:var(--s-4) 0;
  background:linear-gradient(180deg,var(--paper),var(--paper-raised))}
.tool h3{margin-top:0}
.tool .muted{font-size:.9rem;color:var(--ink-soft);margin-bottom:var(--s-3)}
.tool-row{display:flex;gap:var(--s-2);flex-wrap:wrap}
.tool input{flex:1;min-width:200px;padding:.75rem .9rem;border:1.5px solid var(--rule-strong);
  border-radius:10px;font:inherit;font-size:.95rem;background:var(--paper);color:var(--ink)}
.tool input:focus{outline:none;border-color:var(--fixed);box-shadow:0 0 0 3px var(--fixed-wash)}
.tool button{border:0;border-radius:10px;padding:0 1.2rem;font:inherit;font-weight:600;
  background:var(--fixed);color:#fff;cursor:pointer;transition:background .25s,transform .2s}
.tool button:hover{background:var(--ink);transform:translateY(-1px)}
.verdict{margin-top:var(--s-3);padding:.8rem 1rem;border-radius:10px;font-size:.94rem;font-weight:600;display:none}
.verdict.ok{display:block;background:var(--fixed-wash);color:var(--fixed);border:1px solid var(--fixed-edge)}
.verdict.no{display:block;background:var(--fault-wash);color:var(--fault);border:1px solid #f4a9aa}
.verdict.hm{display:block;background:var(--caution-wash);color:var(--caution);border:1px solid #e9c162}

figure{margin:var(--s-5) 0}
figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:var(--s-2)}
.diagram{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:16px;
  background:var(--paper);padding:var(--s-4);box-shadow:0 6px 20px rgba(15,23,42,.04)}
.d-fault-box{fill:var(--fault-wash);stroke:#f4a9aa}
.d-fault-label{font-family:var(--font-display);font-size:14px;font-weight:700;fill:var(--fault)}
.d-line{stroke:var(--rule-strong);stroke-width:1.5;fill:none}
.d-rule{stroke:var(--rule);stroke-width:1}
.d-axis{stroke:var(--rule-strong);stroke-width:1.2}
.d-track{fill:var(--paper-raised);stroke:var(--rule)}
.d-fill-ok{fill:var(--fixed-wash);stroke:var(--fixed-edge)}
.d-fill-bad{fill:var(--fault-wash);stroke:#f4a9aa}
.d-loop{stroke:var(--fault);stroke-width:1.8;fill:none;stroke-dasharray:4 3}
.d-cause-box{fill:var(--paper);stroke:var(--rule-strong)}
.d-cause-t{font-family:var(--font-display);font-size:11.5px;font-weight:700;fill:var(--ink)}
.d-cause-s{font-family:var(--font-text);font-size:10.5px;fill:var(--ink-soft)}
.d-fix-box{fill:var(--fixed-wash);stroke:var(--fixed-edge)}
.d-fix-t{font-family:var(--font-display);font-size:11.5px;font-weight:700;fill:var(--fixed)}
.d-note{font-family:var(--font-display);font-size:11px;font-weight:700;fill:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase}
.d-test-box{fill:var(--paper);stroke:var(--fixed-edge);stroke-dasharray:4 3}
.d-test-t{font-family:var(--font-display);font-size:12px;font-weight:700;fill:var(--ink)}
.d-test-s{font-family:var(--font-text);font-size:10px;fill:var(--ink-soft)}
.d-foot{font-family:var(--font-text);font-size:10.5px;fill:var(--ink-soft)}
.d-broken{stroke:var(--fault);stroke-dasharray:5 4}
.d-fault-small{font-family:var(--font-text);font-size:11px;font-weight:600;fill:var(--fault)}
.d-lock-bar{fill:var(--fault-wash);stroke:#f4a9aa}
.d-retry-t{font-family:var(--font-text);font-size:10px;fill:var(--fault)}
.d-branch{transition:opacity var(--dur) var(--ease)}
.diagram:hover .d-branch{opacity:.35}
.diagram:hover .d-branch:hover{opacity:1}
.d-branch:hover .d-cause-box{fill:#fff;stroke:var(--fixed)}
.d-branch:hover .d-drop{stroke:var(--fixed-fill);stroke-width:2.5}
.d-branch:hover .d-fix-box{fill:var(--fixed-fill);stroke:var(--fixed-fill)}
.d-branch:hover .d-fix-t{fill:#fff}
@media(hover:none){.diagram:hover .d-branch{opacity:1}}

.ad{margin:var(--s-6) 0;min-height:280px;display:grid;place-items:center;gap:.35rem;
  border:1px dashed var(--rule-strong);border-radius:16px;background:var(--paper-raised);
  text-align:center;padding:var(--s-3)}
.ad::before{content:'Advertisement';font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ad::after{content:'Slot reserved. Awaiting MailFixly AdSense unit IDs.';font-size:.78rem;color:var(--ink-soft);max-width:26ch}

.site-foot{border-top:1px solid var(--rule);background:var(--night);color:rgba(255,255,255,.72);margin-top:var(--s-7)}
.site-foot .mast-in{display:block;padding-block:var(--s-5);font-size:.88rem}
.site-foot .brand{color:#fff}
.site-foot a{color:rgba(255,255,255,.86)}
.foot-note{margin-top:var(--s-3);color:rgba(255,255,255,.55);font-size:.82rem}

/* Entrance reveal is for BELOW-the-fold content only. The hero deliberately
   carries no .rv: it holds the LCP element, and anything above the fold must
   never depend on an animation completing in order to become visible. */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.hero{opacity:1}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
  .article section h2::before{transform:scaleX(1) !important;transition:none !important}
  .progress{display:none}
  .rail,.rail.is-animated{--progress:1}
  .rail::after,.rail.is-animated::after{transition:none !important}
  .rail.is-animated li::before{transition:none !important;background:var(--fixed-fill);color:#fff;
    border-color:var(--fixed-fill);transform:none}
  .diagram:hover .d-branch{opacity:1}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* Numbered procedure steps. This is the half of "step markup" that earns
   anything: list-type featured snippets are extracted from visible <ol> markup,
   not from schema, and a reader following a fix needs to see where they are.
   The counter sits outside the text column so long steps stay aligned. */
.steps{list-style:none;counter-reset:step;margin:0 0 var(--s-4,1.5rem);padding:0}
.steps>li{counter-increment:step;position:relative;padding:0 0 0 2.9rem;
  margin:0 0 1.05rem;line-height:1.6}
.steps>li::before{content:counter(step);position:absolute;left:0;top:-.1rem;
  width:2rem;height:2rem;border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--fixed,#1c2024);color:#fff}
.steps>li>strong:first-child{display:block;margin-bottom:.15rem}
.steps>li:last-child{margin-bottom:0}
/* The rail joins the numbers into a sequence. Hidden on the last item so the
   line does not dangle past the final step. */
.steps>li:not(:last-child)::after{content:"";position:absolute;left:.97rem;top:2rem;
  bottom:-1.05rem;width:2px;background:var(--rule,#e3e6ea)}
@media (prefers-color-scheme:dark){
  .steps>li:not(:last-child)::after{background:var(--rule,#2a3038)}
}

/* AD RESERVE -- ships with the loader, never after it.

   Auto ads inject <ins class="adsbygoogle adsbygoogle-noablate"> straight into
   the document flow with no height. The element occupies nothing until the ad
   lands, then shoves every element below it down by the ad's full height. That
   is layout shift, Google scores it, and anything above 0.100 fails.

   Measured on Project A 2026-09-27: origin 0.110, ad pages 0.160 / 0.180 /
   0.180. It went unnoticed for weeks because a lab test loads the page in an
   empty browser and never fills an ad slot, so it reports a perfect score for a
   page that shifts on every real visit. Only field data shows it.

   250px is the height of a 300x250, the most common in-page unit. A taller ad
   still shifts, but by the difference rather than by its whole height.

   ANCHOR ADS ARE EXCLUDED DELIBERATELY. They are position:fixed overlays, out
   of flow, and contribute no shift at all -- while earning the best CPM of any
   format. Giving one a min-height would hang a panel over the page.

   The unfilled case collapses, which is a smaller shift in the other
   direction. On Project A that risk measured 5 unfilled impressions out of
   7,841 -- a 99.94% fill rate. Re-check that here once this domain is actually
   serving; until then it is an assumption carried over, not a measurement. */
ins.adsbygoogle.adsbygoogle-noablate,
.google-auto-placed > ins.adsbygoogle,
.google-auto-placed{min-height:250px}
ins.adsbygoogle[data-anchor-status],
ins.adsbygoogle[data-ad-format="link"]{min-height:0 !important}
ins.adsbygoogle[data-ad-status="unfilled"],
.google-auto-placed:empty{min-height:0 !important}

/* /tools/account-recovery-checker/ option list.
   NOTE: `.tool input` is sized for the URL checker's TEXT field - min-width:200px and
   min-height:44px. Checkboxes and radios inside .tool inherit that and render 200x44px,
   and `min-*` beats `width`, so every property below must be reset explicitly. */
.tool input[type="checkbox"],.tool input[type="radio"]{
  flex:0 0 auto;min-width:0;min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;
  accent-color:var(--fixed,#1c2024)}
.tool input[type="checkbox"]:focus,.tool input[type="radio"]:focus{
  outline:2px solid var(--fixed,#1c2024);outline-offset:2px;box-shadow:none}

.rc-prov{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--s-3)}
.rc-prov label{position:relative;display:inline-flex;align-items:center;padding:.5rem .95rem;
  border:1.5px solid var(--rule-strong,#d6d9dd);border-radius:999px;cursor:pointer;
  font-size:.9rem;font-weight:600;line-height:1;transition:background .15s,color .15s,border-color .15s}
/* The native radio is hidden, not shrunk: the pill itself is the control. */
.rc-prov input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.rc-prov label:hover{border-color:var(--fixed,#1c2024)}
.rc-prov label:has(input:checked){background:var(--ink,#1c2024);color:var(--paper,#fff);
  border-color:var(--ink,#1c2024)}
.rc-prov label:has(input:focus-visible){outline:2px solid var(--fixed,#1c2024);outline-offset:2px}

.rc-opt{display:flex;align-items:flex-start;gap:.7rem;padding:.65rem .1rem;cursor:pointer;
  border-bottom:1px solid var(--line,#e6e8ea);font-size:.95rem;line-height:1.5}
.rc-opt:last-of-type{border-bottom:0}
.rc-opt input[type="checkbox"]{width:1.15rem;height:1.15rem;margin:.15rem 0 0}
.rc-opt span{flex:1 1 auto}
.rc-opt:hover span{text-decoration:underline;text-underline-offset:3px}
#rcwhy ol{margin:.2rem 0 0;padding-left:1.2rem}
#rcwhy li{margin:.45rem 0;line-height:1.5}


/* ======================================================================
   SITE SHELL — components beyond the article template
   ====================================================================== */

/* Masthead nav needs a mobile fallback. The article template simply hid the
   nav under 620px because it had a TOC rail; a content page has no such
   escape hatch, so hiding it would strand the reader with no navigation. */
@media(max-width:620px){
  .mast-in{flex-wrap:wrap;gap:var(--s-2)}
  .mast-in nav{display:flex;width:100%;gap:var(--s-3);font-size:.85rem;
    overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .mast-in nav::-webkit-scrollbar{display:none}
  .mast-in nav a{white-space:nowrap}
}

/* ---- page hero: lighter than the article's full-bleed image band -------- */
.phero{position:relative;background:var(--night);overflow:hidden;isolation:isolate}
.phero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60rem 30rem at 12% -10%,rgba(41,163,131,.20),transparent 60%),
    radial-gradient(40rem 24rem at 88% 0%,rgba(32,131,104,.14),transparent 62%)}
.phero-in{max-width:74rem;margin:0 auto;padding:var(--s-7) var(--s-4) var(--s-6);width:100%}
.phero .crumb,.phero .crumb a{color:rgba(255,255,255,.6);font-size:.85rem;text-decoration:none}
.phero .crumb a:hover{color:#fff}
.phero .eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fixed-edge);margin:var(--s-4) 0 0}
.phero h1{color:#fff;font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem);max-width:22ch;margin:var(--s-3) 0 0}
.phero .lede{color:rgba(255,255,255,.82);font-size:1.1rem;max-width:58ch;margin-top:var(--s-3)}
.phero .meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;
  font-size:.85rem;color:rgba(255,255,255,.6);margin-top:var(--s-4)}

/* ---- HOME: hero is the LCP surface, so it animates via keyframes only --- */
.hhero{position:relative;background:var(--night);overflow:hidden;isolation:isolate}
.hhero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70rem 34rem at 8% -14%,rgba(41,163,131,.26),transparent 58%),
    radial-gradient(46rem 26rem at 92% 4%,rgba(32,131,104,.16),transparent 60%)}
/* Hairline grid. Pure CSS, no request, and it reads as "engineered" rather
   than decorative — appropriate for a diagnostics site. */
.hhero::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(60rem 30rem at 30% 0%,#000,transparent 75%);
  mask-image:radial-gradient(60rem 30rem at 30% 0%,#000,transparent 75%)}
.hhero-in{max-width:74rem;margin:0 auto;padding:clamp(3.5rem,7vw,6rem) var(--s-4) clamp(3rem,6vw,5rem)}
.hhero .tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fixed-edge);
  border:1px solid rgba(172,222,200,.28);background:rgba(41,163,131,.10);
  padding:.42rem .85rem;border-radius:999px}
.hhero .tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--fixed-fill);
  box-shadow:0 0 0 0 rgba(41,163,131,.6)}
@media (prefers-reduced-motion: no-preference){
  .hhero .tag::before{animation:pulse 2.6s var(--ease) infinite}
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(41,163,131,.55)}70%{box-shadow:0 0 0 9px rgba(41,163,131,0)}100%{box-shadow:0 0 0 0 rgba(41,163,131,0)}}
.hhero h1{color:#fff;font-size:clamp(2.4rem,1.4rem + 4vw,4.2rem);max-width:17ch;
  margin:var(--s-4) 0 0;letter-spacing:-.035em}
.hhero h1 .hl{position:relative;color:var(--fixed-edge);white-space:nowrap}
.hhero h1 .hl::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.10em;
  border-radius:2px;background:linear-gradient(90deg,var(--fixed-fill),transparent);
  transform:scaleX(0);transform-origin:0 50%}
@media (prefers-reduced-motion: no-preference){
  .hhero h1 .hl::after{animation:swipe .9s var(--ease) .45s forwards}
}
@media (prefers-reduced-motion: reduce){.hhero h1 .hl::after{transform:scaleX(1)}}
@keyframes swipe{to{transform:scaleX(1)}}
.hhero .lede{color:rgba(255,255,255,.80);font-size:clamp(1.05rem,1rem + .3vw,1.22rem);
  max-width:56ch;margin-top:var(--s-4)}
.hcta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.98rem;
  text-decoration:none;border-radius:12px;padding:.85rem 1.4rem;
  transition:transform .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease)}
.btn-p{background:var(--fixed-fill);color:#062;color:#04281f;box-shadow:0 10px 26px rgba(41,163,131,.28)}
.btn-p:hover{background:#fff;color:var(--night);transform:translateY(-2px)}
.btn-s{border:1px solid rgba(255,255,255,.24);color:#fff}
.btn-s:hover{border-color:var(--fixed-edge);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* stat strip under the hero */
.hstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s-3);
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.10)}
.hstat b{display:block;font-family:var(--font-display);font-size:1.5rem;color:#fff;letter-spacing:-.02em}
.hstat span{display:block;font-size:.85rem;color:rgba(255,255,255,.55);margin-top:.15rem}

/* ---- generic section wrapper for content pages ------------------------- */
.band{max-width:74rem;margin:0 auto;padding:clamp(3rem,6vw,4.5rem) var(--s-4) 0}
.band.tight{padding-top:clamp(2rem,4vw,3rem)}
.band-head{max-width:52ch;margin-bottom:var(--s-5)}
.band-head .eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fixed);margin:0 0 var(--s-2)}
.band-head h2{font-size:clamp(1.6rem,1.25rem + 1.2vw,2.3rem);margin:0 0 var(--s-2)}
.band-head p{color:var(--ink-soft);margin:0}

/* ---- guide index cards ------------------------------------------------- */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:var(--s-4)}
.guide{position:relative;display:flex;flex-direction:column;border:1px solid var(--rule);
  border-radius:18px;overflow:hidden;background:var(--paper);text-decoration:none;color:inherit;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.guide:hover{transform:translateY(-6px);border-color:var(--fixed-edge);
  box-shadow:0 18px 40px rgba(15,23,42,.10)}
.guide-img{position:relative;aspect-ratio:1200/630;background:var(--night);overflow:hidden}
.guide-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.guide:hover .guide-img img{transform:scale(1.04)}
.guide-body{padding:var(--s-4);display:flex;flex-direction:column;flex:1}
.guide .kicker{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fixed);margin-bottom:var(--s-2)}
.guide b{font-family:var(--font-display);font-size:1.18rem;line-height:1.25;display:block;
  margin-bottom:var(--s-2);letter-spacing:-.01em}
.guide p{font-size:.92rem;color:var(--ink-soft);margin:0 0 var(--s-3)}
.guide .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-2);font-size:.8rem;color:var(--ink-faint);
  padding-top:var(--s-3);border-top:1px solid var(--rule)}
.guide .go{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--fixed)}
.guide .go::after{content:'\2192';transition:transform .3s var(--ease)}
.guide:hover .go::after{transform:translateX(4px)}

/* ---- "how we work" value props ----------------------------------------- */
.props{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s-4)}
.prop{border:1px solid var(--rule);border-radius:16px;padding:var(--s-4);background:var(--paper);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.prop:hover{border-color:var(--fixed-edge);transform:translateY(-4px)}
.prop-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--fixed-wash);margin-bottom:var(--s-3)}
.prop-ico svg{width:21px;height:21px;stroke:var(--fixed);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.prop b{display:block;font-family:var(--font-display);font-size:1.02rem;margin-bottom:.3rem}
.prop p{font-size:.9rem;color:var(--ink-soft);margin:0}

/* Tool controls must be tappable. The base rule is `.tool button{padding:0 1.2rem}` with no
   vertical padding, so the button only got its height by stretching next to the input in a
   flex row. Once .tool-row wraps on a narrow screen it collapsed to 29px — under the 44px
   minimum touch target, on the primary control of a tool page. Fixes the article's embedded
   tool too, since they share this sheet. */
.tool input,.tool button{min-height:44px}
@media(max-width:520px){
  .tool-row{flex-direction:column;align-items:stretch}
  .tool input,.tool button{width:100%}
}

/* explanation list under a tool verdict */
.tool-why{margin-top:var(--s-2)}
.tool-why ul{margin:0;padding-left:1.1rem;font-size:.9rem;color:var(--ink-soft)}
.tool-why li{margin:.3rem 0}
.prose details{border:1px solid var(--rule);border-radius:12px;margin:var(--s-2) 0;background:var(--paper);
  transition:border-color .25s,box-shadow .25s}
.prose details[open]{border-color:var(--fixed-edge);box-shadow:0 6px 20px rgba(32,131,104,.06)}
.prose summary{cursor:pointer;padding:var(--s-3) var(--s-4);font-weight:600;font-family:var(--font-display);
  font-size:1rem;list-style:none;display:flex;justify-content:space-between;gap:var(--s-3);align-items:center}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:'+';color:var(--fixed);font-size:1.4rem;line-height:1;
  transition:transform .3s var(--ease)}
.prose details[open] summary::after{transform:rotate(45deg)}
.prose .a{padding:0 var(--s-4) var(--s-3);color:var(--ink-soft)}

/* ---- prose pages (legal, about, editorial) ----------------------------- */
.prose{max-width:44rem;margin:0 auto;padding:var(--s-6) var(--s-4) var(--s-7)}
.prose h2{font-size:clamp(1.35rem,1.15rem + .7vw,1.7rem);margin:var(--s-6) 0 var(--s-3);
  padding-top:var(--s-3);position:relative}
.prose h2::before{content:'';position:absolute;top:0;left:0;width:46px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--fixed-fill),var(--fixed-edge))}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:1.05rem;margin:var(--s-4) 0 var(--s-2)}
.prose ul,.prose ol{padding-left:1.2rem}
.prose li{margin:.35rem 0}

/* SPECIFICITY TRAP. `.prose ul,.prose ol` is (0,1,1) and beats `.rail` at (0,1,0), so a step
   rail inside .prose silently loses its 2rem padding and gets 1.2rem. The numbered markers are
   positioned at left:-2rem relative to the li, so they slide 12.8px left while the progress
   line stays put — numbers on the left, line on the right, visibly uncentred.
   `.prose ol.rail` is (0,2,1) and wins back. */
.prose ol.rail{padding:0 0 0 var(--s-5)}

/* Prose headings animate their accent rule the way article sections do. Without this the
   ::before is drawn at full width from first paint, so it reads as a static decoration rather
   than part of the scroll motion. Gated behind .js and .rv so a page without the driver simply
   shows the finished rule instead of an invisible one. */
.js .prose h2.rv::before{transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease) .1s}
.js .prose h2.rv.in::before{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
  .js .prose h2.rv::before{transform:scaleX(1) !important;transition:none !important}
}
.prose dl{margin:var(--s-3) 0}
.prose dt{font-weight:700;font-family:var(--font-display);margin-top:var(--s-3)}
.prose dd{margin:.2rem 0 0;color:var(--ink-soft)}
.prose .updated{font-size:.88rem;color:var(--ink-soft);padding:var(--s-3) var(--s-4);
  background:var(--paper-raised);border:1px solid var(--rule);border-radius:12px;margin-bottom:var(--s-5)}

/* legal contents box */
.contents{border:1px solid var(--rule);border-radius:14px;padding:var(--s-4);background:var(--paper-raised);
  margin-bottom:var(--s-5)}
.contents strong{display:block;font-family:var(--font-display);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s-2)}
.contents ol{margin:0;padding-left:1.2rem;font-size:.94rem;columns:2;column-gap:var(--s-4)}
@media(max-width:560px){.contents ol{columns:1}}
.contents a{text-decoration:none}
.contents a:hover{text-decoration:underline}

/* ---- contact ----------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--s-4);
  margin:var(--s-5) 0}
.ccard{border:1px solid var(--rule);border-radius:16px;padding:var(--s-4);background:var(--paper);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.ccard:hover{border-color:var(--fixed-edge);transform:translateY(-4px)}
.ccard b{display:block;font-family:var(--font-display);font-size:1.02rem;margin-bottom:.3rem}
.ccard p{font-size:.92rem;color:var(--ink-soft);margin:0 0 var(--s-3)}
.ccard a.mail{display:inline-block;font-weight:600;word-break:break-all}
.ccard .when{font-size:.82rem;color:var(--ink-faint);margin-top:var(--s-2)}

/* ---- CTA band ---------------------------------------------------------- */
.cta{max-width:74rem;margin:clamp(3rem,6vw,4.5rem) auto 0;padding:0 var(--s-4)}
.cta-in{position:relative;overflow:hidden;border-radius:22px;background:var(--night);
  padding:clamp(2.2rem,5vw,3.4rem);text-align:center;isolation:isolate}
.cta-in::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(40rem 20rem at 50% 0%,rgba(41,163,131,.22),transparent 65%)}
.cta-in h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin:0 0 var(--s-2)}
.cta-in p{color:rgba(255,255,255,.74);max-width:48ch;margin:0 auto var(--s-4)}

/* ---- dark-surface link hover fix --------------------------------------
   The base sheet has `a:hover{color:var(--ink)}` (0,1,1). That is a LIGHT-surface rule:
   --ink is #1c2024, which on the --night bands is black text on a black background, so the
   label vanishes on hover. It outranks `.btn-s{color:#fff}` (0,1,0) because a pseudo-class
   counts toward specificity, which is why the button loses its text and not its border.

   Every link sitting on --night therefore needs an explicit hover colour at (0,2,0) or above.
   Fixing them individually rather than weakening the global rule: the article page shares this
   stylesheet and relies on the light-surface behaviour everywhere else.

   Deliberately NOT written as `.hhero a:hover` — that is (0,2,1) and would also capture
   .btn-p, whose hover inverts to a white fill and genuinely needs dark text. */
.btn-s:hover{color:#fff}
.site-foot a:hover{color:var(--fixed-edge)}
.hero .crumb a:hover,.phero .crumb a:hover{color:#fff}
.byline a:hover{color:#fff}

/* footer needs real columns once there are policy pages to link */
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--s-5);
  margin-top:var(--s-5)}
.foot-col strong{display:block;font-family:var(--font-display);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:var(--s-2)}
.foot-col a{display:block;padding:.22rem 0;text-decoration:none;font-size:.9rem}
.foot-col a:hover{color:var(--fixed-edge)}
.foot-bar{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid rgba(255,255,255,.10)}