/* ---------- Research: shared by the hub and every entry. One template, every field comes from the CMS. ---------- */

/* draft banner: only while an entry is unpublished, never on the live page */
.draft-note{margin:0;padding:16px 20px;border-radius:16px;font-size:14px;line-height:1.6;color:#F4E7B0;
  background:rgba(255,196,0,.07);box-shadow:inset 0 0 0 1px rgba(255,196,0,.35)}
.draft-note b{color:#FFE08A}
.draft-note ul{margin:8px 0 0;padding-left:18px}

/* ---------- entry header ---------- */
.r-hero{grid-area:hero;min-width:0;padding:40px 0 8px;text-align:left}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--dim)}
.r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}
.r-type{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.r-type.study{color:#03140A;background:var(--spring)}
.r-type.note{color:var(--spring);background:rgba(0,213,116,.08);box-shadow:inset 0 0 0 1px rgba(0,213,116,.3)}
.r-topic{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.r-hero h1{margin:18px 0 0;font-size:clamp(2.1rem,2.6vw + 1rem,3.3rem);line-height:1.1;text-align:left;text-wrap:balance}
.r-hero h1 em{font-style:normal;color:var(--spring)}
.r-dek{margin:18px 0 0;font-size:1.16rem;line-height:1.65;color:var(--body)}
.byline{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07)}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-2)}
.byline b{display:block;font-weight:600;color:var(--text)}
.byline small{display:block;margin-top:3px;font:500 12.5px/1.4 var(--mono);color:var(--muted)}

/* ---------- reading column ---------- */
.r-body{grid-area:body;min-width:0;padding:30px 0 40px}
.r-body>*+*{margin-top:22px}
.short{padding:26px 28px;border-radius:22px;
  background:linear-gradient(135deg,rgba(0,213,116,.1),rgba(0,213,116,.02) 60%),rgba(24,62,64,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(0,213,116,.28)}
.label{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.label i{width:6px;height:6px;border-radius:50%;background:var(--spring);box-shadow:0 0 8px rgba(0,213,116,.8)}
.short .label{color:var(--spring)}
.short p{margin:12px 0 0;font-size:1.1rem;line-height:1.75;color:var(--read)}
.short-line{display:block;margin-bottom:12px;font:600 clamp(1.3rem,.7vw + 1.05rem,1.55rem)/1.35 var(--display);letter-spacing:-.012em;color:var(--text);text-wrap:balance}
.takeaways{padding:24px 28px;border-radius:22px}
.takeaways ul,.checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.takeaways li,.checks li{display:flex;gap:12px;line-height:1.6;color:var(--read)}
/* takeaways as fact cards: bold headline on top, one plain sentence under it */
.takeaways ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.takeaways li{padding:14px 16px;border-radius:14px;font-size:.98rem;line-height:1.55;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.takeaways li b{display:block;margin-bottom:3px;font:600 1.02rem/1.35 var(--display);color:var(--text)}
.ck{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:3px;border-radius:50%;color:var(--spring);background:rgba(0,213,116,.12)}
.ck svg{width:10px;height:10px}

/* ---------- sections ---------- */
.r-sec{padding-top:48px}
.r-sec+.r-sec{margin-top:26px;border-top:1px solid rgba(255,255,255,.07)}
.sec-n{display:block;margin:0 0 12px;font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--spring)}
.r-sec h2{margin:0;font:600 clamp(1.6rem,1.2vw + 1.15rem,2.15rem)/1.2 var(--display);letter-spacing:-.018em;color:var(--text);text-wrap:balance}
.r-sec .lead{max-width:none;margin:16px 0 0;font-size:1.2rem;line-height:1.6;font-weight:500;color:var(--text)}
.r-sec p{margin:18px 0 0;font-size:1.125rem;line-height:1.78;color:var(--read)}
.r-sec p b,.r-sec p strong,.faq-item p b{font-weight:600;color:var(--text)}
.r-sec p a,.faq p a,.short a{color:var(--spring);text-decoration:underline;text-decoration-color:rgba(0,213,116,.35);text-underline-offset:3px}
.mine{margin-top:20px;padding:18px 22px;border-radius:18px;background:rgba(255,255,255,.03);box-shadow:inset 3px 0 0 var(--spring),inset 0 0 0 1px rgba(255,255,255,.06)}
.mine .label{color:var(--spring)}
.r-sec .mine p,.mine p{margin:8px 0 0;color:var(--text)}
.r-quote{margin:22px 0 0;padding:6px 0 6px 22px;border-left:2px solid rgba(0,213,116,.5)}
.r-quote blockquote{margin:0;font:500 1.22rem/1.5 var(--display);letter-spacing:-.005em;color:var(--text)}
.r-quote figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.r-quote figcaption a{color:var(--body)}

/* ---------- figures: real text, never an image of text ---------- */
.fig{margin:24px 0 0;padding:24px 26px 20px;border-radius:22px}
.r-sec .fig-t,.fig-t{margin:0;font:600 1.08rem/1.35 var(--display);color:var(--text)}
.r-sec .fig-sub,.fig-sub{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.bars{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 64px;align-items:center;gap:14px;font-size:14.5px;color:var(--body)}
.bars .track{height:12px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden}
.bars .fill{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,rgba(0,213,116,.55),var(--spring));box-shadow:0 0 16px -4px rgba(0,213,116,.7)}
.bars .fill.a{background:rgba(255,255,255,.28);box-shadow:none}
.bars b{justify-self:end;font:600 14.5px/1 var(--display);color:var(--text)}
.split{display:flex;margin:18px 0 0;height:44px;border-radius:12px;overflow:hidden}
.split span{display:grid;place-items:center;flex:var(--w) 1 0;min-width:0;font:600 13px/1 var(--display);color:#03140A;background:var(--spring)}
.split span:nth-child(2){background:#00A95C;color:#03140A}
.split span:nth-child(3){background:#1E6B48;color:#fff}
.split span:nth-child(4){background:#2F5C59;color:#DCE3E5}
.split span:nth-child(5){background:#4A6E70;color:#fff}
.split-key{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.split-key li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--body)}
.split-key i{flex:none;width:10px;height:10px;margin-top:5px;border-radius:3px;background:var(--c)}
.split-key b{color:var(--text);font-weight:600}
.r-table{width:100%;margin:16px 0 0;border-collapse:collapse;font-size:14.5px}
.r-table th,.r-table td{padding:11px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.r-table th{font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.r-table td{line-height:1.5;color:var(--body)}
.r-table td:first-child{font-weight:600;color:var(--text)}
.r-table .num{text-align:right;font-family:var(--display);font-weight:600;color:var(--text);white-space:nowrap}
.r-sec .fig-src,.fig-src{margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);font:500 12px/1.5 var(--mono);color:var(--muted)}
.fig-src a{color:var(--body)}

/* ---------- checklist, FAQ, sources ---------- */
.checks{margin-top:18px}
.checks b{display:block;color:var(--text);font-weight:600}
.faq{padding-top:34px;border-top:1px solid rgba(255,255,255,.07)}
.faq h2,.sources h2{margin:0;font:600 clamp(1.5rem,1.1vw + 1.1rem,2rem)/1.2 var(--display);letter-spacing:-.018em;color:var(--text)}
.faq-item{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.faq-item h3{margin:0;font:600 1.1rem/1.4 var(--display);color:var(--text)}
.faq-item p{margin:8px 0 0;font-size:1.06rem;line-height:1.75;color:var(--read)}
.sources{padding-top:34px;border-top:1px solid rgba(255,255,255,.07);scroll-margin-top:96px}
.src-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.src-list li{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);font-size:14.5px;line-height:1.5;color:var(--body)}
.src-list a{color:var(--text);font-weight:600;text-decoration:none}
.src-list a:hover{color:var(--spring)}
.src-list small{display:block;margin-top:4px;font:500 12px/1.4 var(--mono);color:var(--muted)}
.method{padding:18px 22px;border-radius:18px;font-size:14px;line-height:1.7;color:var(--body);background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.method b{color:var(--text)}
.author{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:22px}
.author img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-2)}
.author b{display:block;font:600 1.1rem/1.3 var(--display);color:var(--text)}
.author p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--body)}
.author a{color:var(--spring);font-weight:600;font-size:14px;text-decoration:none}

/* ---------- hub ---------- */
.hub-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.hub-filter button{padding:10px 16px;border:0;border-radius:999px;cursor:pointer;font:500 14px/1 var(--sans);color:var(--body);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background-color .2s,color .2s}
.hub-filter button[aria-pressed="true"]{color:#03140A;background:var(--spring);box-shadow:none}
.lead-entry{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px 44px;padding:36px 40px;border-radius:28px}
.lead-entry h2{margin:16px 0 0;font:600 clamp(1.6rem,1.4vw + 1.1rem,2.3rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.lead-entry h2 a,.entry h3 a{color:inherit;text-decoration:none}
.lead-entry h2 a:hover,.entry h3 a:hover{color:var(--spring)}
.lead-entry p{margin:14px 0 0;line-height:1.7;color:var(--body)}
.lead-short{padding:22px 24px;border-radius:18px;background:rgba(0,213,116,.06);box-shadow:inset 0 0 0 1px rgba(0,213,116,.22)}
.lead-short p{margin:10px 0 0;color:var(--text)}
.entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.entry{display:flex;flex-direction:column;padding:28px 30px;border-radius:24px}
.entry h3{margin:14px 0 0;font:600 1.3rem/1.25 var(--display);letter-spacing:-.012em;color:var(--text);text-wrap:balance}
.entry p{margin:10px 0 0;line-height:1.65;color:var(--body)}
.entry-foot,.lead-foot{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:auto;padding-top:18px;font:500 12px/1.4 var(--mono);color:var(--muted)}
.entry[hidden],.lead-entry[hidden]{display:none}

@media (max-width:900px){
  .lead-entry{grid-template-columns:1fr;padding:30px 26px}
  .entries{grid-template-columns:1fr}
}
@media (max-width:640px){
  .r-hero{padding:28px 0 6px}
  .r-body{padding:22px 0 32px}
  .short,.takeaways,.fig{padding:20px 18px}
  .takeaways ul{grid-template-columns:1fr}
  .r-sec p{font-size:1.06rem;line-height:1.75}
  .r-sec .lead{font-size:1.12rem}
  .bars li{grid-template-columns:minmax(0,1fr) 56px;gap:6px 12px}
  .bars .track{grid-column:1/-1;grid-row:2}
  .split-key{grid-template-columns:1fr}
  .r-table{font-size:13.5px}
  .r-table th,.r-table td{padding:10px 8px}
  .author{align-items:flex-start}
  .entry{padding:24px 22px}
}

/* ---------- proof screenshots, table marks, keep reading (added for the CMS build) ---------- */
.proof-shot{margin:18px 0 0}
.proof-shot+.proof-shot{margin-top:14px}
.proof-shot img{display:block;width:100%;height:auto;border-radius:12px;background:#fff}
.proof-shot figcaption{margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted)}
.r-table .yes{color:var(--spring);font-weight:600}
.r-table .no{color:var(--muted)}
.related{padding-top:30px;border-top:1px solid rgba(255,255,255,.07)}
.related .entries{margin-top:16px}
.table-wrap{margin:16px 0 0}
.table-wrap .r-table{margin:0}
@media (max-width:640px){
  .table-wrap thead{display:none}
  .table-wrap tr{display:block;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .table-wrap td{display:flex;justify-content:space-between;gap:16px;padding:4px 0;border:0;text-align:right}
  .table-wrap td:first-child{display:block;padding-bottom:6px;text-align:left}
  .table-wrap td:not(:first-child)::before{content:attr(data-label);flex:none;max-width:48%;text-align:left;font:500 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}

.r-table th.num{font:500 11px/1.3 var(--mono);letter-spacing:.08em;color:var(--muted);white-space:normal}
@media (min-width:641px){.table-wrap{overflow-x:auto}}
.r-table tbody tr:last-child td{border-bottom:0}

/* ---------- reading layout (3 Oct 2026): contents rail + a reading column of about 70 characters ---------- */
.r-page{--read:var(--body);--col:650px;--stick:84px}
.r-grid{display:grid;grid-template-columns:minmax(0,var(--col));grid-template-areas:"hero" "rail" "body";justify-content:center;padding:0 32px}
.r-rail{grid-area:rail;min-width:0}

/* reading progress, a thin line along the top edge */
.r-progress{position:fixed;top:0;left:0;right:0;z-index:60;height:2px;pointer-events:none}
.r-progress span{display:block;height:100%;background:var(--spring);box-shadow:0 0 10px rgba(0,213,116,.7);transform:scaleX(0);transform-origin:0 50%}

/* contents list */
.toc-h{margin:0 0 14px}
.toc-list{list-style:none;margin:0;padding:0;border-left:1px solid rgba(255,255,255,.08)}
.toc-list a{display:flex;gap:10px;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.toc-list a:hover{color:var(--text)}
.toc-list a[aria-current]{color:var(--text);border-left-color:var(--spring)}
.toc-n{flex:none;font:500 11px/1.75 var(--mono);color:var(--dim);transition:color .2s}
.toc-list a[aria-current] .toc-n{color:var(--spring)}
.toc-btn{display:none;color:var(--text)}
.rail-data{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07)}
.rail-data .label{margin:0 0 8px}
.rail-data a{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:13.5px;line-height:1.4;color:var(--body);text-decoration:none;transition:color .2s}
.rail-data a:hover{color:var(--spring)}
.rail-data svg{flex:none;width:16px;height:16px;color:var(--spring)}

@media (min-width:1100px){
  .r-grid{grid-template-columns:210px minmax(0,var(--col));grid-template-areas:"rail hero" "rail body";column-gap:72px}
  .r-rail{position:sticky;top:var(--stick);align-self:start;max-height:calc(100vh - var(--stick) - 20px);overflow-y:auto;padding:46px 0 24px;scrollbar-width:none}
  .r-rail::-webkit-scrollbar{display:none}
}
/* phones and tablets: the contents become a bar that sticks under the menu and opens on tap */
@media (max-width:1099px){
  html{scroll-padding-top:150px}
  .r-rail{position:sticky;top:var(--stick);z-index:30;margin:18px 0 0}
  .toc{border-radius:16px;background:rgba(24,62,64,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 30px -14px rgba(0,0,0,.8)}
  .toc-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
  .toc-btn-k{flex:none;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--spring)}
  .toc-now{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14.5px;font-weight:500}
  .toc-chev{flex:none;width:18px;height:18px;color:var(--muted);transition:transform .2s}
  .toc.open .toc-chev{transform:rotate(180deg)}
  .toc-h,.rail-data{display:none}
  .toc-list{display:none;max-height:min(60vh,420px);overflow-y:auto;padding:6px 16px 12px;border-left:0;border-top:1px solid rgba(255,255,255,.07)}
  .toc.open .toc-list{display:block}
  .toc-list a{margin:0;padding:10px 0 10px 12px;font-size:15px}
  .no-js .r-rail{position:static}
  .no-js .toc-btn{display:none}
  .no-js .toc-h{display:inline-flex;margin:16px 16px 8px}
  .no-js .toc-list{display:block;max-height:none}
}
@media (max-width:640px){
  .r-grid{padding:0 18px}
  .r-page{--stick:72px}
}

/* ---------- the trust box under the byline, and the evidence cards inside a section ---------- */
.proof{margin-top:26px;padding:22px 24px;border-radius:22px}
.proof-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.proof-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--spring);background:rgba(0,213,116,.1);box-shadow:inset 0 0 0 1px rgba(0,213,116,.32)}
.proof-badge svg{width:15px;height:15px}
.proof-head p{flex:1 1 260px;margin:0;font-size:14.5px;line-height:1.55;color:var(--body)}
.proof-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 0}
.proof-stats div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:14px 14px 13px;border-radius:14px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.proof-stats dd{margin:0;font:600 1.65rem/1 var(--display);letter-spacing:-.02em;color:var(--text)}
.proof-stats dt{font-size:12.5px;line-height:1.35;color:var(--muted)}
.proof-links,.ev-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.ev-link,.ev-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:var(--text);text-decoration:none;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:box-shadow .2s,background-color .2s}
.ev-link.dl,.ev-card.dl{background:rgba(0,213,116,.08);box-shadow:inset 0 0 0 1px rgba(0,213,116,.38)}
.ev-link:hover,.ev-card:hover{background:rgba(0,213,116,.1);box-shadow:inset 0 0 0 1px var(--spring)}
.ev-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:var(--spring);background:rgba(0,213,116,.12)}
.ev-ic svg{width:18px;height:18px}
.ev-link b,.ev-card b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.ev-link small,.ev-card small{display:block;margin-top:3px;font:500 12px/1.4 var(--mono);color:var(--muted)}
.ev-block{margin-top:24px}
.ev-block .label{margin:0}
.ev-cards{margin-top:12px;gap:12px}
.ev-card{padding:18px}
@media (max-width:640px){
  .proof{padding:18px}
  .proof-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-stats dd{font-size:1.45rem}
  .proof-links,.ev-cards{grid-template-columns:1fr}
}

/* a small label inside a section (like "Check my work") must stay a label, not take the paragraph size */
.r-sec p.label{margin:0;font:500 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ---------- more CMS blocks: key numbers, callout, before and after, video, image source line ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:16px 0 0}
.stat-row div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:16px;border-radius:14px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.stat-row dd{margin:0;font:600 clamp(1.6rem,1.4vw + 1rem,2.1rem)/1 var(--display);letter-spacing:-.02em;color:var(--spring)}
.stat-row dt{font-size:13.5px;line-height:1.4;color:var(--body)}
.stat-row small{order:-1;font-size:12.5px;line-height:1.4;color:var(--muted)}
.fig:not(:has(figcaption)) .stat-row{margin-top:0}
.callout{display:block;margin:22px 0 0;padding:16px 20px 18px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:inset 3px 0 0 var(--muted),inset 0 0 0 1px rgba(255,255,255,.07)}
.callout-t{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.callout-t svg{width:15px;height:15px}
.callout-p{display:block;margin-top:8px;font-size:1.04rem;line-height:1.7;color:var(--body)}
.callout.tip{background:rgba(0,213,116,.06);box-shadow:inset 3px 0 0 var(--spring),inset 0 0 0 1px rgba(0,213,116,.2)}
.callout.tip .callout-t{color:var(--spring)}
.callout.warning{background:rgba(255,196,77,.06);box-shadow:inset 3px 0 0 #FFC44D,inset 0 0 0 1px rgba(255,196,77,.22)}
.callout.warning .callout-t{color:#FFCF66}
.compare{margin:22px 0 0}
.cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cmp-side{position:relative}
.cmp-side img{display:block;width:100%;height:auto;border-radius:12px;background:#fff}
.cmp-l{position:absolute;left:10px;top:10px;z-index:1;padding:5px 10px;border-radius:999px;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:rgba(17,37,39,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cmp-side+.cmp-side .cmp-l{color:#03140A;background:var(--spring);box-shadow:none}
.compare figcaption,.video figcaption{margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted)}
.video{margin:22px 0 0}
.video-box{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.shot-src{color:var(--muted)}
.shot-src a{color:var(--body)}
@media (max-width:640px){
  .cmp-grid{grid-template-columns:1fr}
}

/* the author name links to About */
.byline b a,.author b a{color:inherit;text-decoration:none}
.byline b a:hover,.author b a:hover{color:var(--spring)}

/* ---------- speed and touch (3 Oct 2026) ---------- */
.js .r-dek.rise{opacity:1}
.crumbs a{display:inline-block;padding:6px 0}
.src-list a{display:inline-block;padding:3px 0}
.byline b a,.author b a{display:inline-block;padding:3px 0}
.author a{display:inline-block;padding:3px 0}
/* long articles: each section is laid out only when you scroll near it; the clip margin keeps card shadows from being cut */
.r-sec,.faq,.sources,.related{content-visibility:auto;contain-intrinsic-size:auto 1100px;overflow-clip-margin:120px}
.cv-off .r-sec,.cv-off .faq,.cv-off .sources,.cv-off .related{content-visibility:visible}