/* AnimationTech — light theme tokens. Contrast-verified against WCAG 2.1 AA. */
:root{
  --ground:#FBFAF9;      /* page */
  --surface:#FFFFFF;     /* cards */
  --raised:#F5F3F1;      /* alternating bands */
  --rule:#E6E2DD;        /* hairlines */
  --rule2:#D2CCC4;       /* stronger dividers */
  --control:#969088;     /* form-control borders — 3.03:1, meets non-text AA */
  --ink:#16130F;         /* 17.8:1 */
  --ink2:#57514A;        /* 7.5:1 */
  --ink3:#766E65;      /* 4.53:1 worst case — checked on ground, surface AND raised */
  --o:#FF6B00;           /* brand fill ONLY — never as text */
  --o-text:#B84A00;      /* orange as text — 5.0:1 */
  --o-hover:#E85D00;
  --good:#1E7A3E; --warn:#8A5A00; --bad:#B3341A;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 2px rgba(22,19,15,.04),0 4px 14px rgba(22,19,15,.05);
  --shadow-lg:0 2px 4px rgba(22,19,15,.04),0 12px 34px rgba(22,19,15,.07);
  /* legacy aliases so existing tool markup keeps working */
  --void:#FBFAF9; --panel:#F5F3F1; --card:#FFFFFF; --live:#1E7A3E; --ohi:#E85D00;
}
*,*::before,*::after{box-sizing:border-box}
/* No overflow-x:hidden here: it hides real layout bugs from both users and tests.
   Wide content must scroll inside its own container (see .scroller). */
html,body{max-width:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--o-text);text-decoration:none}
a:hover{color:var(--o-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--o-text);outline-offset:2px}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.032em;line-height:1.09;text-wrap:balance;color:var(--ink)}
p{margin:0}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,3.6vw,34px)}
.lab{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--o-text)}
.tnum{font-variant-numeric:tabular-nums}
/* buttons — dark text on orange, because white on orange is 2.86:1 and fails */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:6px;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);transition:.15s;text-align:center}
.btn-p{background:var(--o);color:#16130F;border-color:#E85D00}
.btn-p:hover{background:var(--o-hover);color:#16130F}
.btn-s{border-color:var(--rule2);color:var(--ink);background:var(--surface)}
.btn-s:hover{border-color:var(--o-text);color:var(--o-text)}
input[type=number],input[type=text],input[type=email],input[type=tel],select,input[type=search]{
  width:100%;background:var(--surface);border:1px solid var(--control);border-radius:6px;color:var(--ink);
  font-family:var(--mono);font-size:14.5px;padding:10px 12px;font-variant-numeric:tabular-nums}
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
/* shared site chrome */
.sitenav{position:sticky;top:0;z-index:80;background:rgba(251,250,249,.88);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rule)}
.sitenav-in{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18.5px;letter-spacing:-.03em;color:var(--ink)}
.brand svg{width:26px;height:26px;flex:none}
.brand .o{color:var(--o-text)}
.navlinks{display:flex;gap:22px;font-size:14.5px;font-weight:500;margin-left:8px}
.navlinks a{color:var(--ink2)}
.navlinks a:hover,.navlinks a[aria-current=page]{color:var(--ink)}
.navlinks a[aria-current=page]{font-weight:700}
.navright{margin-left:auto;display:flex;align-items:center;gap:16px}
.tel{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink)}
.tel:hover{color:var(--o-text)}
@media(max-width:880px){.navlinks{display:none}}
/* Below 560px the phone number and the CTA cannot both sit beside the wordmark.
   Drop the tel (it is repeated in the footer and the hero CTA) and tighten the button. */
@media(max-width:560px){
  .sitenav-in{gap:12px}
  .tel{display:none}
  .brand{font-size:16.5px;gap:8px}
  .brand svg{width:23px;height:23px}
  .navright{gap:10px}
  .navright .btn{padding:10px 14px;font-size:13.5px}
}
@media(max-width:360px){.brand span{font-size:15.5px}.navright .btn{padding:9px 11px;font-size:12.5px}}
.sitefoot{border-top:1px solid var(--rule);background:var(--raised);padding:40px 0;
  font-size:13.5px;color:var(--ink3);line-height:1.7;margin-top:0}
.sitefoot a{color:var(--ink2);text-decoration:underline}
.sitefoot a:hover{color:var(--o-text)}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:26px 28px}
.sitefoot h4{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin:0 0 9px}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{margin-bottom:6px}
@media(max-width:720px){.footgrid{grid-template-columns:1fr}}
.footgrid h4{font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:10px;font-weight:600}
.footgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- hardware generation badges -------------------------------------- */
.gbadge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:4px;
  border:1px solid;white-space:nowrap}
.gbadge i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.v-cur {color:#14612F;border-color:#A8D6B8;background:#EAF6EE}
.v-mix {color:#7A4E00;border-color:#E2C489;background:#FCF4E4}
.v-prev{color:#7A4E00;border-color:#E2C489;background:#FCF4E4}
.v-two {color:#8F2A12;border-color:#E7B3A4;background:#FCEDE9}
.v-disc{color:#8F2A12;border-color:#E7B3A4;background:#FCEDE9}
.v-unv {color:#4B453D;border-color:#D2CCC4;background:#F2EFEC}
.v-na  {color:#4B453D;border-color:#D2CCC4;background:#F2EFEC}
.gnote{font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--ink2);
  margin-top:9px;padding-top:9px;border-top:1px dashed var(--rule)}
.gnote a{font-weight:600}

/* ---- standby coverage widget ----------------------------------------- */
.sbgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);align-items:start}
@media(max-width:940px){.sbgrid{grid-template-columns:1fr}}
.sbstory h3{font-size:20px;margin-bottom:16px}
.sbsteps{list-style:none;padding:0;margin:0;counter-reset:sb}
.sbsteps li{counter-increment:sb;position:relative;padding:0 0 18px 42px;font-size:14.5px;
  line-height:1.62;color:var(--ink2)}
.sbsteps li::before{content:counter(sb);position:absolute;left:0;top:-1px;width:27px;height:27px;
  border-radius:50%;background:var(--surface);border:1px solid var(--rule2);display:grid;
  place-items:center;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink)}
.sbsteps b{color:var(--ink)}
.sbnote{font-size:13.5px;color:var(--ink3);line-height:1.6;padding-top:14px;
  border-top:1px dashed var(--rule);max-width:52ch}
.sbcalc{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.sbcalc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--o)}
.sbc-h{padding:18px 24px 15px 26px;border-bottom:1px solid var(--rule)}
.sbc-h h3{font-size:19px;margin-top:7px}
.sbc-b{padding:20px 24px 22px 26px}
.sbfield{margin-bottom:17px}
.sbfield label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.sbfield input{width:100%;padding:11px 13px;font-family:var(--mono);font-size:16px;color:var(--ink);
  background:var(--ground);border:1px solid var(--control);border-radius:6px}
.sbhelp{display:block;font-size:12.5px;color:var(--ink3);margin-top:6px;line-height:1.5}
.sbout{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule)}
.sbrow{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:8px 0;
  border-bottom:1px dashed var(--rule);color:var(--ink2)}
.sbrow b{font-family:var(--mono);font-weight:500;color:var(--ink);white-space:nowrap}
.sbrow b.dim{color:var(--ink3);text-decoration:line-through;text-decoration-thickness:1px}
.sbtotal{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--rule2)}
.sbtotal>span{font-size:13.5px;color:var(--ink2);padding-bottom:4px}
.sbtotal div{text-align:right}
.sbtotal b{display:block;font-size:29px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.sbtotal small{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.sbverdict{font-size:13.5px;color:var(--ink2);line-height:1.55;margin-top:13px;
  background:var(--raised);border-radius:6px;padding:11px 13px}
.sbverdict b{color:var(--ink)}
.sbempty{font-size:13.5px;color:var(--ink3)}
.sbfoot{font-size:12.5px;color:var(--ink3);line-height:1.55;margin-top:15px;
  padding-top:13px;border-top:1px dashed var(--rule)}

/* ── Narrow-viewport containment ───────────────────────────────────────────
   Grid items default to min-width:auto, so a single wide descendant (a spec
   table, a long code line) inflates the whole column and pushes the page
   sideways -- the article layout was computing an 800px column inside a 390px
   viewport. minmax(0,…) lets the column shrink; wide content then scrolls
   inside its own box rather than the document scrolling. No overflow mask. */
.article-layout{grid-template-columns:250px minmax(0,1fr)}
.article-layout>*{min-width:0}
@media(max-width:900px){.article-layout{grid-template-columns:minmax(0,1fr)}}
.article-content table,.article-body table,article table{display:block;width:100%;
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-content pre,.article-body pre,article pre{overflow-x:auto;max-width:100%}
.article-content img,.article-body img,article img{max-width:100%;height:auto}