/* --- v4 component styles (ported from v4-dark, scoped to .grv) --- */


@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.grv a {color:var(--teal);text-underline-offset:3px}
.grv a:hover {color:#5EEAD4}
.grv main {max-width:740px;margin:0 auto;padding:36px 20px 64px}
.grv .kicker {color:var(--muted);font-size:15px;margin:0 0 6px}
.grv h1 {font:700 clamp(30px,5vw,44px)/1.15 var(--serif);margin:0 0 14px;letter-spacing:-.01em;color:#F5F3EE}
.grv h2 {font:700 28px/1.25 var(--serif);margin:52px 0 12px;scroll-margin-top:16px;color:#F5F3EE}
.grv h3 {font:700 20px/1.3 var(--sans);margin:28px 0 8px;color:#F0EEEA}
.grv p {margin:0 0 16px}
.grv .lede {font-size:20px;color:#C5CBD4}
.grv .byline {color:var(--muted);font-size:15px;margin:0 0 22px}
.grv .disclosure {background:var(--amber-bg);border-left:5px solid var(--amber);padding:14px 16px;border-radius:0 8px 8px 0;font-size:16px;margin:0 0 24px;color:#F5E6C8}
.grv .disclosure strong {color:var(--amber)}
.grv .disclosure a {color:#F2A900}
.grv .answer {background:var(--card);border:1px solid var(--line);border-top:6px solid var(--teal);border-radius:10px;padding:22px 22px 20px;margin:0 0 26px}
.grv .answer h2 {margin:0 0 10px;font-size:22px;color:#F5F3EE}
.grv .answer ul {margin:0 0 18px;padding-left:20px}
.grv .answer li {margin:0 0 8px;color:#D5DBE3}
.grv .btn {display:inline-block;background:var(--teal-dark);color:#042F2E!important;font-weight:700;font-size:18px;text-decoration:none;padding:14px 24px;border-radius:8px;border:2px solid var(--teal-dark);transition:background .15s,border-color .15s}
.grv .btn:hover {background:var(--teal);border-color:var(--teal);color:#042F2E!important}
.grv .btn-note {display:block;margin-top:10px;font-size:14px;color:var(--muted)}
.grv .btn-note a {color:var(--muted)}
.grv .toc {background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:0 0 8px}
.grv .toc strong {display:block;margin-bottom:6px;color:#E8E6E1}
.grv .toc ol {margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:16px}
.grv .toc li {break-inside:avoid;margin:0 0 4px}
.grv .toc a {color:var(--teal)}
@media(max-width:640px){.toc ol{columns:1}}
.grv figure.img {margin:20px 0 22px}
.grv figure.img img {width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);background:#0B0F1A}
.grv figure.img figcaption {font-size:14px;color:var(--muted);margin-top:6px}
.grv .tablewrap {overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.grv table {border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
.grv th,  .grv td {text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line);color:#D5DBE3}
.grv th {background:#1E2738;font-weight:700;color:#E8E6E1}
.grv tr:last-child td {border-bottom:0}
.grv ul.plain,  .grv ol.plain {padding-left:22px;margin:0 0 18px}
.grv ul.plain li,  .grv ol.plain li {margin:0 0 8px}
.grv .timeline {list-style:none;margin:20px 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.grv .timeline li {background:var(--card);border:1px solid var(--line);padding:16px 16px 18px;font-size:16px;color:#D5DBE3}
.grv .timeline li+li {border-left:0}
.grv .timeline li:first-child {border-radius:10px 0 0 10px}
.grv .timeline li:last-child {border-radius:0 10px 10px 0}
.grv .timeline b {display:block;font:700 15px var(--sans);color:var(--teal);margin-bottom:4px}
.grv .timeline li:nth-child(2) {background:var(--amber-bg);border-color:var(--amber-line)}
.grv .timeline li:nth-child(2) b {color:var(--amber)}
.grv .timeline li.warn {background:var(--coral-bg);border-color:rgba(248,113,113,.35)}
.grv .timeline li.warn b {color:var(--coral)}
@media(max-width:700px){
.grv .timeline {grid-template-columns:1fr}
.grv .timeline li,  .grv .timeline li:first-child,  .grv .timeline li:last-child {border-radius:0;border-left:1px solid var(--line)}
.grv .timeline li+li {border-top:0}
.grv .timeline li:first-child {border-radius:10px 10px 0 0}
.grv .timeline li:last-child {border-radius:0 0 10px 10px}
}
.grv .callout {background:var(--card);border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 20px;color:#D5DBE3}
.grv .callout.caution {border-left-color:var(--amber);background:var(--amber-bg);color:#F5E6C8}
.grv .callout p:last-child {margin-bottom:0}
.grv .chart {background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin:0 0 14px;overflow-x:auto}
.grv .chart svg {min-width:640px}
.grv .legend {list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;font-size:15px;color:#D5DBE3}
.grv .legend li {display:flex;gap:10px;align-items:flex-start}
.grv .dot {flex:0 0 auto;width:24px;height:24px;border-radius:50%;color:#042F2E;font:700 13px/24px var(--sans);text-align:center}
.grv .dot.A {background:#2DD4BF}.dot.B{background:#F2A900}.dot.C{background:#7B8A9A}.dot.D{background:#F87171}
.grv .case {background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:0 0 14px}
.grv .case h3 {margin:0 0 6px;font-size:18px;color:#F0EEEA}
.grv .case p {margin:0 0 10px;font-size:16px;color:#D5DBE3}
.grv .case p:last-child {margin-bottom:0}
.grv .video {margin:20px 0 24px}
.grv .video iframe {width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#000}
.grv .video figcaption {font-size:14px;color:var(--muted);margin-top:6px}
.grv details {background:var(--card);border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:0}
.grv summary {cursor:pointer;font-weight:700;padding:14px 18px;list-style:none;color:#E8E6E1}
.grv summary::-webkit-details-marker {display:none}
.grv summary::after {content:"+";float:right;font-weight:700;color:var(--teal)}
.grv details[open] summary::after {content:"\2212"}
.grv details div {padding:0 18px 6px;color:#D5DBE3}
.grv pre.log {background:#0B0F1A;color:#E7F4F7;padding:16px 18px;border-radius:10px;overflow-x:auto;font:15px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:0 0 20px;border:1px solid var(--line)}
.grv .verdict {background:#0B0F1A;color:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px;margin:34px 0 18px}
.grv .verdict h2 {color:#F5F3EE;margin:0 0 10px}
.grv .verdict p {color:#C5CBD4}
.grv .verdict .btn-note,  .grv .verdict .btn-note a {color:#9AA4B2}
.grv .sources {font-size:15px;color:var(--muted)}
.grv .sources li {margin:0 0 6px;word-break:break-word}
.grv .sources a {color:var(--teal)}

/* Case study visual system – dark */
.grv .tiles {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.grv .tile {background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;border-top:6px solid var(--teal)}
.grv .tile.warn {border-top-color:var(--amber)}
.grv .tile strong {display:block;font:700 34px/1.1 var(--serif);color:#F5F3EE;margin-bottom:6px}
.grv .tile span {font-size:15px;color:var(--muted);display:block}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.grv .group {margin:30px 0 4px;font:700 18px/1.3 var(--sans);display:flex;gap:10px;align-items:center;color:#E8E6E1}
.grv .group-note {font-size:15px;color:var(--muted);margin:0 0 12px}
.grv .chips {list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.grv .chips li {background:#1E2738;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:14px;color:#C5CBD4}
.grv .cards {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 8px}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.grv .stat {background:var(--card);border:1px solid var(--line);border-top:6px solid var(--slate);border-radius:10px;padding:14px 16px 16px}
.grv .stat.A {border-top-color:#2DD4BF}.stat.B{border-top-color:#F2A900}.stat.C{border-top-color:#7B8A9A}.stat.D{border-top-color:#F87171}
.grv .stat header {display:flex;gap:10px;align-items:center;margin-bottom:8px}
.grv .stat h4 {margin:0;font:700 17px/1.2 var(--sans);color:#F0EEEA}
.grv .stat .where {margin:0;font-size:13px;color:var(--muted)}
.grv .nums {display:flex;align-items:flex-end;gap:12px;margin:6px 0 10px}
.grv .nums small {display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.grv .nums strong {font:700 34px/1 var(--serif);color:#E8E6E1}
.grv .nums strong em {font:600 14px var(--sans);font-style:normal;color:var(--muted);margin-left:4px}
.grv .nums .good {color:#2DD4BF}
.grv .nums .arr {font-size:26px;color:var(--muted);padding-bottom:2px}
.grv .nums .solo {font:700 34px/1 var(--serif)}
.grv .bars {display:grid;gap:5px;margin:0 0 10px}
.grv .bar {height:10px;background:#1E2738;border-radius:5px;overflow:hidden;display:flex}
.grv .bar i {display:block;height:100%}
.grv .bar.before i {background:#5A6A7A}
.grv .bar.after i {background:#2DD4BF}
.grv .bar i.fade {opacity:.4}
.grv .delta {display:inline-block;background:var(--teal-dim);color:#2DD4BF;font-weight:700;font-size:14px;border-radius:6px;padding:2px 10px;margin:0 0 8px}
.grv .delta.none {background:#1E2738;color:var(--muted)}
.grv .stat .note {font-size:14px;color:var(--muted);margin:0}
.grv .scale-note {font-size:13px;color:var(--muted);margin:0 0 18px}
@media(max-width:640px){.chart,.scale-note{display:none}}

/* Responsive explanation cards – no overflow */
.grv .explain-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 10px}
.grv .explain-card {background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 16px 16px;border-top:4px solid var(--teal)}
.grv .explain-card.red {border-top-color:#F87171}
.grv .explain-card.yellow {border-top-color:#F2A900}
.grv .explain-card h3 {margin:0 0 10px;font:700 18px/1.2 var(--sans);letter-spacing:.02em}
.grv .explain-card.red h3 {color:#F87171}
.grv .explain-card.yellow h3 {color:#F2A900}
.grv .explain-card h3.cyan {color:#2DD4BF}
.grv .explain-card p {margin:0 0 8px;font-size:15px;color:#D5DBE3}
.grv .explain-card .hint {font-size:13px;color:var(--muted);margin:0}
.grv .fix-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 10px}
.grv .fix-card {background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 16px 16px;text-align:center}
.grv .fix-card .num {display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#2DD4BF;color:#0B0F1A;font:800 22px/1 var(--sans);margin-bottom:12px}
.grv .fix-card h3 {margin:0 0 8px;font:700 16px/1.25 var(--sans);color:#F5F3EE;text-transform:uppercase;letter-spacing:.03em}
.grv .fix-card p {margin:0;font-size:14px;color:var(--muted)}
.grv .panel-note {text-align:center;font-size:14px;color:var(--muted);margin:12px 0 0}
@media(max-width:700px){
.grv .explain-grid,  .grv .fix-grid {grid-template-columns:1fr}
}


/* GearUP Booster review components - dark surfaces.
   Scoped: this file loads only when slug === 'gearup-booster-review'. */

.grv {
  --paper: #0f1420;
  --card: #1e2838;
  --card-2: #1a2233;
  --ink: #e8e6e1;
  --muted: #a0a8b8;
  --line: #2a3550;
  --teal: #2dd4bf;
  --teal-dark: #5eead4;
  --btn: #0e7c86;
  --btn-hover: #0a6470;
  --amber: #f2c14e;
  --amber-bg: #241c0a;
  --amber-line: #c8922f;
  --coral: #ff8a75;
  --coral-bg: #2a1512;
  --bg: #0f1420;
  --bg-elev: #151b2b;
  --teal-dim: rgba(45, 212, 191, 0.12);
  --slate: #7b8a9a;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  font: 18px/1.65 var(--sans);
}
.grv p { margin: 0 0 16px; }
.grv a { color: var(--teal-dark); text-underline-offset: 3px; }
.grv h2 { font: 700 28px/1.25 var(--serif); margin: 52px 0 12px; scroll-margin-top: 16px; color: var(--ink); }
.grv h3 { font: 700 20px/1.3 var(--sans); margin: 28px 0 8px; color: var(--ink); }
.grv .lede { font-size: 20px; color: #b8c2d8; }
.grv .byline { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.grv .disclosure { background: #fff4e0; border-left: 5px solid var(--amber-line); padding: 14px 16px; border-radius: 0 8px 8px 0; font-size: 16px; margin: 0 0 24px; color: #3b2a06; }
.grv .disclosure strong { color: #8a5300; }

/* One surface standard: dark cards, not white. */
.grv :is(.answer, .toc, .timeline, .callout, .tablewrap, .info-card) {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
}
/* Force children to inherit so prose/strong/heading rules cannot re-colour them. */
.grv :is(.answer, .toc, .timeline, .callout, .tablewrap, .info-card)
  :is(h2, h3, h4, p, li, strong, b, td, th, dt, dd, summary, span) {
  color: inherit;
}
.grv :is(.answer, .toc, .timeline, .callout, .tablewrap, .info-card) a {
  color: var(--teal-dark);
}

.grv .answer { border-top: 6px solid var(--teal); padding: 22px 22px 20px; margin: 0 0 26px; }
.grv .answer h2 { margin: 0 0 10px; font-size: 22px; }
.grv .answer ul { margin: 0 0 18px; padding-left: 20px; }
.grv .answer li { margin: 0 0 8px; }
.grv .toc { padding: 16px 20px; margin: 0 0 8px; }
.grv .toc strong { display: block; margin-bottom: 6px; }
.grv .toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; font-size: 16px; }
.grv .toc li { break-inside: avoid; margin: 0 0 4px; }
.grv figure.img { margin: 20px 0 22px; }
.grv figure.img img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); background: #0b0f1a; }
.grv figure.img figcaption, .grv .video figcaption { font-size: 14px; color: #9aa7c2; margin-top: 6px; }
.grv .btn { display: inline-block; background: var(--btn); color: #fff !important; font-weight: 700; font-size: 18px; text-decoration: none; padding: 14px 24px; border-radius: 8px; border: 2px solid var(--btn); transition: background .15s; }
.grv .btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.grv .btn-note { display: block; margin-top: 10px; font-size: 14px; color: #9aa7c2; }
.grv .btn-note a { color: #9aa7c2; }

.grv .timeline { list-style: none; margin: 20px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: t; }
.grv .timeline li { position: relative; background: var(--card); border: 1px solid var(--line); padding: 16px 16px 18px; font-size: 16px; color: var(--ink); }
.grv .timeline li + li { border-left: 0; }
.grv .timeline li:first-child { border-radius: 12px 0 0 12px; }
.grv .timeline li:last-child { border-radius: 0 12px 12px 0; }
.grv .timeline b { display: block; font: 700 15px var(--sans); color: var(--teal-dark); margin-bottom: 4px; }
.grv .timeline li.warn { background: var(--coral-bg); border-color: #6b2a22; }
.grv .timeline li.warn b { color: var(--coral); }
.grv .timeline li:nth-child(2) { background: var(--amber-bg); border-color: var(--amber-line); }
.grv .timeline li:nth-child(2) b { color: var(--amber); }
.grv .callout { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 0 0 20px; }
.grv .callout.caution { border-left-color: var(--amber-line); background: var(--amber-bg); }
.grv .callout.caution strong { color: var(--amber); }

.grv .tablewrap { overflow-x: auto; margin: 0 0 20px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.grv table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 16px; }
.grv th, .grv td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.grv th { background: var(--card-2); font-weight: 700; }
.grv td:first-child { font-weight: 600; }
.grv tr:last-child td { border-bottom: 0; }

.grv .info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 20px 0 22px; }
.grv .info-card { padding: 1rem 1.1rem; }
.grv .info-card h3 { margin: 0 0 .5rem; font: 700 clamp(1rem, 2.4vw, 1.25rem)/1.25 var(--sans); color: var(--teal-dark); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.grv .info-card p { margin: 0 0 .4rem; font-size: .95rem; color: var(--ink); }
.grv .info-card p.tag { color: var(--muted); font-size: .85rem; margin-bottom: 0; }
.grv ul.plain, .grv ol.plain { padding-left: 22px; margin: 0 0 18px; }
.grv ul.plain li, .grv ol.plain li { margin: 0 0 8px; }
.grv .video { margin: 20px 0 24px; }
.grv .video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; background: #000; }

.grv details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; padding: 0; }
.grv details > summary { color: var(--ink); font-weight: 600; padding: 1rem 1.25rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; list-style: none; }
.grv details > summary::-webkit-details-marker { display: none; }
.grv details > summary::after { content: "+"; font-weight: 700; color: var(--teal-dark); }
.grv details[open] > summary { border-bottom: 1px solid var(--line); }
.grv details[open] > summary::after { content: "\2212"; }
.grv details > :not(summary) { color: var(--muted); padding: 0 1.25rem 1rem; margin: 0; }

.grv .verdict { background: #0b0f1a; color: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; margin: 34px 0 18px; }
.grv .verdict h2 { color: #fff; margin: 0 0 10px; }
.grv .verdict p { color: #dce8ee; }
.grv .verdict .btn-note, .grv .verdict .btn-note a { color: #9aa7c2; }

.grv .sources { font-size: 15px; color: #9aa7c2; }
.grv .sources a { color: var(--teal-dark); }
.grv .sources li { margin: 0 0 6px; word-break: break-word; }
@media (max-width: 640px) {
  .grv .toc ol { columns: 1; }
  .grv .timeline { grid-template-columns: 1fr; }
  .grv .timeline li,
  .grv .timeline li:first-child,
  .grv .timeline li:last-child { border-radius: 0; border-left: 1px solid var(--line); }
  .grv .timeline li + li { border-top: 0; }
  .grv .timeline li:first-child { border-radius: 12px 12px 0 0; }
  .grv .timeline li:last-child { border-radius: 0 0 12px 12px; }
}

/* This page has no hero image: skip the gold gradient placeholder strip. */
main article .article-banner { display: none; }
/* Only one Reviews article exists, so "More Reviews guides" would fall back
   to unrelated posts. Hide the block on this page. */
main article .related-guides { display: none; }
.grv .disclosure a { color: #0a5f67; }

/* Mobile safety for v4 case-study components (stat cards, tiles). */
.grv .cards, .grv .tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grv .stat, .grv .cards > *, .grv .tiles > * { min-width: 0; }
.grv .nums { flex-wrap: wrap; }
.grv .stat header { flex-wrap: wrap; }
.grv .delta, .grv .stat .note, .grv .where { overflow-wrap: anywhere; }