/* ==========================================================================
   DG Design Tokens — FINAL LOCKED v3.1 (2026-10-04)
   The single source of truth for every visual value on thedrivergear.com.
   All values are CSS custom properties. No hardcoded values may appear
   in compiler output — the compiler validates this at build time.

   STATUS: LOCKED. Rafael approved the final design system 2026-10-04.
   Do not add, remove, or change tokens without Rafael's explicit approval.
   The visual contract lives at ~/workspace/your_files/dg-final-design.html.

   RAFAEL'S RULES (enforced by the compiler):
   - No gradients (solid colors only)
   - No off-palette colors (only tokens below)
   - No generated imagery (real product photos only)
   - Metric first, imperial in parentheses (content rule, not CSS)
   - /all-products/ is the visual standard: full-width container, 20px gutters
     (per Rafael 2026-10-03: no empty sides in desktop mode)
   - Light/cream theme is the site default (data-theme="light")
   - 44px minimum tap targets on all interactive elements
   - ORANGE DISCIPLINE (world-class review fix, 2026-10-04):
     --safety (orange) = CTA buttons ONLY. --safety-bright = kickers,
     logo accent, and the #1 overall ribbon ONLY. Everything else neutral.
     The CTA must be the most orange thing on the page.
   ========================================================================== */

:root {
  /* ==================== LAYOUT ==================== */
  --container-max: 1120px;    /* centered content column on desktop (side margins back, 2026-10-04) */
  --container-pad: 20px;     /* side gutters inside the container */
  --text-max: 68ch;          /* readable prose width inside containers */
  --content-w: 100%;         /* alias for legacy compatibility */
  --gutter: 20px;            /* alias for legacy compatibility */
  --dgv2-maxw: 720px;        /* narrow article container (legacy) */

  /* ==================== SPACING SCALE ==================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ==================== COLORS — DARK (default) ==================== */
  --bg: #0C0C0E;             /* page background */
  --bg2: #111114;            /* alt section background */
  --dark: #0C0C0E;           /* chrome dark — header, footer, trust band, score chips */
  --dark-2: #1a1a1c;         /* quick picks band background */
  --on-dark: #FFFFFF;        /* primary text on dark surfaces */
  --dark-muted: #AAAAAA;      /* secondary text on dark surfaces */
  --dark-faint: #CCCCCC;      /* tertiary text on dark surfaces */
  --surface: #151518;        /* card/component surface */
  --surface-2: #1C1C21;      /* raised surface (inputs, wells) */
  --surface-3: #242429;      /* highest surface */
  --card: #16161B;           /* product card background */
  --card2: #1D1D24;          /* product card alt */
  --text: #F4EFE6;           /* primary text */
  --muted: #B9B3A5;          /* secondary text */
  --faint: #8E8878;          /* tertiary/hint text */
  --line: #2A2A32;           /* strong borders */
  --line-soft: #222228;      /* subtle borders */
  --border: #26262C;         /* default border color */

  /* ---- Brand accent ---- */
  --amber-dark: #b45309;
  --amber: #F59E0B;          /* primary accent (CTAs, scores, highlights) */
  --on-amber: #140F05;       /* text on amber backgrounds */
  --cta-bg: #F59E0B;         /* CTA button background */
  --cta-text: #140F05;       /* CTA button text */
  --score: #F59E0B;          /* product score color */
  --kicker: #F59E0B;         /* section kicker/eyebrow text */
  --kicker-grey: #A8A39B;    /* kicker in muted contexts */

  /* ---- v3.1 aliases (drawer/pass additions, 2026-10-04) ---- */
  --cta: #C2410C;            /* CTA orange per v3.1 spec */
  --cream: #F5F0DF;          /* v3.1 cream */
  --paper: #FDFBF3;          /* light card surface for thumbnails/wells */

  /* ---- Redesign v2 accents (Rafael-approved 2026-10-03) ----
     v3.1 contrast fixes (world-class review, 2026-10-04):
     --safety darkened to hit WCAG AA (5.18:1 white / 4.54:1 cream).
     --safety-bright keeps the vivid orange for display use ONLY
     (kickers, logo accent, #1 overall ribbon). */
  --safety: #C2410C;         /* safety orange — CTA BUTTONS ONLY */
  --safety-bright: #E8590C;  /* vivid orange — kickers, logo, #1 ribbon ONLY */
  --safety-dark: #A03408;    /* safety hover (7.02:1 on white) */
  --on-safety: #FFFFFF;      /* text on safety orange */
  --deal: #146B33;           /* deal/success green (5.79:1 on cream) */
  --deal-dark: #0E5A2B;      /* deal green hover (8.34:1 on white) */
  --deal-bg: #E8F7ED;        /* deal alert background */
  --deal-border: #BFE6C9;    /* deal alert border */
  --danger: #DC2626;         /* avoid/error red */
  --star: #F59E0B;           /* star rating gold */

  /* ---- Chrome ---- */
  --header-bg: rgba(12,12,14,.9);  /* sticky header (with backdrop blur) */

  /* ==================== TYPOGRAPHY ==================== */
  --body-font: Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --h-font: Georgia,"Times New Roman",Times,serif;
  --font-stack: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* ---- Final v3.0 type system (Archivo/Inter — locked 2026-10-04) ---- */
  --font-head: "Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --font-body: "Inter","Helvetica Neue",Arial,sans-serif;

  /* ---- Font sizes ---- */
  --fs-micro: 11px;          /* ribbons, kickers, eyebrows */
  --fs-xs: 12px;             /* price notes, footer meta */
  --fs-kicker: 0.75rem;      /* eyebrow/kicker labels (legacy alias = 12px) */
  --fs-crumb: 0.8125rem;       /* breadcrumb wayfinding (13px) */
  --fs-meta: 0.875rem;       /* captions, metadata */
  --fs-sm: 0.875rem;         /* captions, metadata, nav (alias) */
  --fs-body: 1rem;           /* body text, buttons */
  --fs-card: 1.125rem;       /* card titles, lede */
  --fs-h3: 19px;             /* H3 headings */
  --fs-toc: 1.125rem;        /* table of contents */
  --fs-title: 1.25rem;       /* section titles, logo */
  --fs-h2: 26px;             /* H2 headings */
  --fs-section: 1.75rem;     /* large section headings (28px) */
  --fs-h1: 32px;             /* page H1 (non-hero) */
  --fs-hero: 40px;           /* hero headline */
  --fs-display: 1.875rem;    /* hero/display headings (legacy = 30px) */

  /* ---- Line heights ---- */
  --lh-body: 1.65;           /* body text */
  --lh-tight: 1.2;           /* headings, compact */
  --lh-title: 1.35;          /* titles */

  /* ---- Font weights ---- */
  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ==================== BORDERS & RADII ==================== */
  --border-width: 1px;
  --radius: 18px;            /* default component radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;      /* pills, circular buttons */

  /* ---- Final v3.0 radius aliases (locked 2026-10-04) ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;           /* pills, chips */

  /* ==================== INTERACTION ==================== */
  --tap-min: 44px;           /* minimum tap target (WCAG + mobile-first) */

  /* ==================== SHADOWS ==================== */
  --shadow: 0 16px 40px rgba(0,0,0,.5);
  --shadow-hover: 0 4px 8px rgba(0,0,0,.10), 0 12px 28px rgba(0,0,0,.10);
  --card-shadow: 0 10px 28px rgba(0,0,0,.38);
  --shadow-sm: 0 4px 12px rgba(0,0,0,.25);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);

  /* ==================== BREAKPOINTS ==================== */
  --bp-xs: 480px;            /* small phones */
  --bp-sm: 640px;            /* large phones */
  --bp-md: 768px;            /* tablets */
  --bp-lg: 900px;            /* small laptops */
  --bp-xl: 1024px;           /* desktops */
  --bp-2xl: 1200px;          /* wide desktops */

  /* ==================== Z-INDEX SCALE ==================== */
  --z-base: 1;
  --z-sticky: 50;            /* sticky nav elements */
  --z-header: 60;            /* site header */
  --z-drawer: 200;           /* mobile drawer, search panel */
  --z-modal: 2000;           /* modals, dialogs */
  --z-consent: 2147483000;   /* cookie consent (must be topmost) */
}

/* Mobile keeps full-width with gutters; desktop gets the centered 1120px column */
@media (max-width: 899px) {
  :root { --container-max: 100%; }
}

/* ==================== LIGHT THEME (site default) ==================== */
html[data-theme="light"] {
  --bg: #F5F0DF;             /* cream page background */
  --bg2: #EFE8D2;            /* alt/disclosure backgrounds */
  --surface: #FDFBF3;        /* card surfaces */
  --surface-2: #F0EAD6;      /* image wells, alt surfaces */
  --surface-3: #EFE8D2;
  --card: #FDFBF3;
  --card2: #FDFBF3;
  --text: #1A1A1A;           /* primary text */
  --muted: #6B6B6B;          /* secondary text */
  --faint: #9A938A;          /* tertiary text, chevrons */
  --line: #DED3B4;           /* strong borders */
  --line-soft: #E9E0C6;
  --border: #E5E0D0;         /* default borders */
  --header-bg: rgba(245,240,223,.92);
  --shadow: 0 16px 40px rgba(122,95,26,.14);
  --card-shadow: 0 10px 28px rgba(122,95,26,.1);
  --shadow-sm: 0 4px 12px rgba(122,95,26,.08);
  --shadow-lg: 0 24px 60px rgba(122,95,26,.18);
  /* amber, on-amber, cta colors unchanged — work on both themes */
}

/* ==========================================================================
   COMPILER BLOCK PRIMITIVES
   Token-driven styles for the 12 compiler block types. No hardcoded values.
   ========================================================================== */

/* ---- Text / prose ---- */
.dg-prose { max-width: var(--text-max); }
.dg-prose > p { margin: 0 0 var(--space-md); line-height: var(--lh-body); }

/* ---- Breadcrumb ---- */
.dg-crumbs {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-md) var(--container-pad);
  box-sizing: border-box;
}
.dg-crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3);
  margin: 0; padding: 0;
  font-size: var(--fs-crumb); letter-spacing: 0.02em; color: var(--muted);
}
.dg-crumbs li { display: flex; align-items: center; gap: var(--space-3); }
.dg-crumbs li + li::before {
  content: "›"; color: var(--faint); font-size: 1.15em; line-height: 1;
}
.dg-crumbs a {
  color: var(--muted); text-decoration: none;
  position: relative; padding-bottom: 2px;
  transition: color 200ms ease;
}
.dg-crumbs a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--safety);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms ease;
}
.dg-crumbs a:hover { color: var(--safety); }
.dg-crumbs a:hover::after { transform: scaleX(1); }
.dg-crumbs [aria-current="page"] { color: var(--text); font-weight: var(--fw-medium); }

/* ---- Hero ---- */
.dg-hero {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-2xl) var(--container-pad) var(--space-md);
  box-sizing: border-box;
}
.dg-hero-kicker {
  font-size: var(--fs-micro); font-weight: var(--fw-extrabold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--safety-bright); margin: 0 0 var(--space-3);
}
.dg-hero h1 {
  font-family: var(--font-head); font-size: var(--fs-hero); font-weight: var(--fw-extrabold);
  line-height: 1.12; letter-spacing: -0.01em;
  margin: 0 0 var(--space-3); color: var(--text); max-width: 20ch;
}
.dg-hero-sub {
  font-size: var(--fs-card); line-height: var(--lh-body);
  color: var(--muted); max-width: 62ch; margin: 0 0 var(--space-4);
}
.dg-hero-meta {
  display: flex; gap: var(--space-4); font-size: var(--fs-sm);
  color: var(--muted); align-items: center; flex-wrap: wrap;
}
.dg-disclosure {
  background: var(--bg2); border-left: 3px solid var(--safety);
  padding: var(--space-3) var(--space-4); font-size: var(--fs-sm);
  color: var(--muted); margin-top: var(--space-4); max-width: 70ch;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ---- Product grid ---- */
.dg-topshelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}
.dg-topshelf-single { grid-template-columns: minmax(240px, 380px); }

/* ---- Product card ---- */
.dg-topcard {
  background: var(--card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--card-shadow);
}
.dg-topcard-media { display: block; aspect-ratio: 1; background: var(--bg); }
.dg-topcard-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dg-topcard-noimg {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--muted);
  font-size: 3rem; font-weight: var(--fw-bold);
}
.dg-topcard-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); flex: 1;
}
.dg-topcard-name { margin: 0; font-weight: var(--fw-bold); line-height: var(--lh-title); font-size: var(--fs-card); }
.dg-topcard-name a { color: var(--text); text-decoration: none; }
.dg-topcard-meta {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--fs-meta); color: var(--muted);
}
.dg-score { color: var(--score); font-weight: var(--fw-extrabold); font-size: 1.1rem; }
.dg-checkprice { color: var(--amber); font-weight: var(--fw-bold); text-decoration: none; }
.dg-checkprice:hover { text-decoration: underline; }

/* ---- Hub sections ---- */
.dg-hub-sec {
  max-width: var(--container-max); margin: var(--space-2xl) auto 0;
  padding: 0 var(--container-pad); box-sizing: border-box;
}
.dg-hub-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin: 0 0 var(--space-3);
}
.dg-hub-head h2 { margin: 0; font-size: var(--fs-section); font-family: var(--h-font); }
.dg-hub-head a { color: var(--amber); font-weight: var(--fw-bold); font-size: var(--fs-meta); text-decoration: none; white-space: nowrap; }

/* ---- FAQ (final v3.0 — native details, plus/minus, focus states) ---- */
.dg-faq { max-width: 80ch; }
.dg-faq details {
  border: var(--border-width) solid var(--border);
  border-radius: var(--r-md); margin-bottom: var(--space-2);
  background: var(--surface); transition: border-color .15s ease;
}
.dg-faq details[open] { border-color: var(--safety); }
.dg-faq summary {
  padding: var(--space-3) var(--space-4); cursor: pointer;
  font-weight: var(--fw-bold); color: var(--text); list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); min-height: var(--tap-min);
}
.dg-faq summary::-webkit-details-marker { display: none; }
.dg-faq summary::after {
  content: "+"; font-size: 24px; font-weight: 400; color: var(--safety);
  flex-shrink: 0; transition: transform .2s ease;
}
.dg-faq details[open] summary::after { transform: rotate(45deg); }
.dg-faq summary:hover { color: var(--safety); }
.dg-faq summary:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; border-radius: var(--r-md); }
.dg-faq details p {
  padding: 0 var(--space-4) var(--space-4); margin: 0;
  color: var(--muted); line-height: var(--lh-body);
}

/* ---- CTA banner (final v3.0 — dark conversion strip) ---- */
.dg-cta-banner {
  max-width: var(--container-max); margin: var(--space-7) auto;
  padding: var(--space-7) var(--space-6); background: var(--dark);
  border-radius: var(--r-xl); text-align: center; color: var(--on-dark);
  box-sizing: border-box;
}
.dg-cta-banner h2 { margin: 0 0 var(--space-2); font-family: var(--font-head); font-size: var(--fs-h2); font-weight: var(--fw-extrabold); color: var(--on-dark); }
.dg-cta-banner h2 span { color: var(--on-dark); }
.dg-cta-banner p { color: var(--dark-muted); margin: 0 auto var(--space-5); max-width: 60ch; }
.dg-cta-banner .dg-btn-safety { max-width: 420px; margin: 0 auto; }

/* ---- Comparison table (final v3.0) ---- */
.dg-table-wrap { overflow-x: auto; margin: var(--space-4) 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.dg-compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); min-width: 640px; }
.dg-compare-table th, .dg-compare-table td {
  padding: var(--space-3) var(--space-4); text-align: left;
  border-bottom: var(--border-width) solid var(--border);
}
.dg-compare-table thead th {
  font-family: var(--font-head); font-weight: var(--fw-extrabold); color: var(--text);
  border-bottom: 2px solid var(--line); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .06em; background: var(--bg2);
}
.dg-compare-table tbody th { font-weight: var(--fw-bold); color: var(--text); }
.dg-compare-table td { color: var(--muted); }
.dg-compare-table tbody tr:last-child th, .dg-compare-table tbody tr:last-child td { border-bottom: none; }
.dg-compare-table tbody tr:hover { background: var(--bg2); }
.dg-winner { color: var(--deal); font-weight: var(--fw-extrabold); }
.dg-table-cta { color: var(--safety); font-weight: var(--fw-bold); white-space: nowrap; text-decoration: none; }
.dg-table-cta:hover { text-decoration: underline; }

/* ---- Image / figure ---- */
.dg-figure {
  max-width: var(--container-max); margin: var(--space-lg) auto;
  padding: 0 var(--container-pad); box-sizing: border-box;
}
.dg-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.dg-figure figcaption { color: var(--muted); font-size: var(--fs-meta); margin-top: var(--space-2); }

/* ---- Video embed ---- */
.dg-video {
  max-width: var(--container-max); margin: var(--space-lg) auto;
  padding: 0 var(--container-pad); box-sizing: border-box;
}
.dg-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius-lg); }
.dg-video figcaption { color: var(--muted); font-size: var(--fs-meta); margin-top: var(--space-2); }

/* ---- Newsletter (final v3.0) ---- */
.dg-newsletter {
  max-width: var(--container-max); margin: var(--space-7) auto;
  padding: var(--space-6); background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--r-xl); box-sizing: border-box;
}
.dg-newsletter h2 { margin: 0 0 var(--space-2); font-family: var(--font-head); font-size: var(--fs-title); font-weight: var(--fw-extrabold); color: var(--text); }
.dg-newsletter p { color: var(--muted); margin: 0; font-size: var(--fs-sm); }
.dg-newsletter form { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.dg-newsletter input[type="email"] {
  flex: 1 1 240px; padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg); color: var(--text);
  font-size: var(--fs-body); min-height: var(--tap-min); box-sizing: border-box;
}
.dg-newsletter input[type="email"]:focus { outline: 3px solid var(--safety); outline-offset: 1px; border-color: var(--safety); }
.dg-newsletter .dg-btn-safety { width: auto; flex: 0 0 auto; padding: var(--space-3) var(--space-6); }

/* ---- Calculator embed placeholder ---- */
.dg-calc-embed {
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center;
  color: var(--muted); max-width: var(--container-max);
  margin: var(--space-lg) auto; box-sizing: border-box;
}

/* ==========================================================================
   COMPONENT STYLES — extracted from live /all-products/ (2026-10-03)
   All values use design tokens. Zero hardcoded values.
   ========================================================================== */
.dg-hub-head a{color:var(--amber);font-weight:700;font-size:var(--fs-meta);text-decoration:none;white-space:nowrap}
.dg-hub-head h2{margin:0;font-size:var(--fs-section)}
.dg-hub-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-3)}
.dg-hub-sec{max-width:var(--container-max);margin:var(--space-6) auto 0;padding-left:var(--container-pad);padding-right:var(--container-pad);box-sizing:border-box}
html[data-theme="light"] a.dg-checkprice{color:var(--amber-dark)}
/* v3.1: kit-card CTA is dark text — orange on hover ONLY (orange discipline) */
.dg-kcta{color:var(--text);font-weight:700;text-decoration:none;font-size:var(--fs-card);display:inline-flex;align-items:center;min-height:var(--space-8);transition:color .15s ease}
.dg-kcta:hover{color:var(--safety-bright);text-decoration:underline}
.dg-kcta:focus-visible{outline:2px solid var(--safety);outline-offset:2px}
.dg-kitcard h3{margin:0 0 var(--space-1);font-size:var(--fs-title)}
.dg-kitcard>p{margin:0 0 var(--space-3);color:var(--muted);font-size:var(--fs-meta)}
.dg-kitcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);scroll-snap-align:start}
.dg-kitcard-img{width:100%;height:160px;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-2);margin-bottom:var(--space-3)}
.dg-kitcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.dg-kitshelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,290px);gap:var(--space-4);overflow-x:auto;padding:var(--space-1) var(--space-1) var(--space-4);scroll-snap-type:x mandatory}
.dg-kthumbs a{display:block;flex:1;max-width:var(--space-8);border-radius:var(--radius-md)}
.dg-kthumbs img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);display:block}
.dg-kthumbs{display:flex;gap:var(--space-2);margin:0 0 var(--space-3)}
.dg-prod-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--border)}
.dg-prod-meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-meta);color:var(--muted)}
.dg-prod-name{display:block;font-size:var(--fs-body);line-height:1.3;margin:0 0 var(--space-1);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-prod-row-link{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-4);text-decoration:none;color:var(--text)}
.dg-prod-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-1);border-bottom:1px solid var(--border)}
.dg-prod-sec-count{color:var(--muted);font-size:var(--fs-meta);font-weight:600}
.dg-prod-sec-head h2{margin:0;font-size:var(--fs-section)}
.dg-prod-sec-head{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin:0 0 var(--space-2)}
.dg-prod-sec-sub{color:var(--muted);margin:0 0 var(--space-3);max-width:var(--text-max)}
.dg-prod-sec[id]{scroll-margin-top:var(--space-8)}
.dg-prod-sec{margin:var(--space-6) auto 0}
.dg-prod-sec{max-width:var(--container-max);padding-left:var(--container-pad);padding-right:var(--container-pad);box-sizing:border-box}
.dg-score small{font-size:.75em;font-weight:700;opacity:.75;margin-left:var(--space-1)}
.dg-score{display:inline-flex;align-items:baseline;background:var(--amber);color:var(--on-amber);font-weight:800;font-size:var(--fs-meta);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);line-height:1;white-space:nowrap}
.dg-topcard-body{padding:var(--space-3) var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.dg-topcard-media img{width:100%;height:100%;object-fit:contain;display:block}
.dg-topcard-media{display:block;aspect-ratio:1;background:var(--bg)}
.dg-topcard-meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;font-size:var(--fs-meta);color:var(--muted)}
.dg-topcard-name a{color:var(--text);text-decoration:none}
.dg-topcard-name{font-weight:700;line-height:1.3;font-size:var(--fs-card);margin:0}
.dg-topcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column}
.idx-arrow{flex:none;width:var(--space-8);height:var(--space-8);border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--amber-ink);font-size:var(--fs-title)}
.idx-arrow{width:var(--space-7);height:var(--space-7)}
.idx-card-main{font-size:var(--fs-card)}
.idx-card-main{font-weight:800;font-size:var(--fs-title);line-height:1.35;color:var(--text);display:block}
.idx-card-sub{display:block;font-weight:400;font-size:var(--fs-body);line-height:1.55;color:var(--muted);margin-top:var(--space-2)}
.idx-card:hover{border-color:var(--amber)}
.idx-card>*{min-width:0}
.idx-card-img{flex:0 0 auto;width:120px;height:90px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2)}
.idx-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.idx-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5) var(--space-5);text-decoration:none;box-shadow:var(--shadow)}
.idx-card{padding:var(--space-4)}
.idx-grid.cols-2{grid-template-columns:1fr 1fr}
.idx-grid{display:grid;gap:var(--space-3)}
.idx-section{padding:var(--space-7) 0 0}

/* ==========================================================================
   REDESIGN v2 COMPONENTS (Rafael-approved 2026-10-03)
   Premium product-review blocks. All values use design tokens.
   ========================================================================== */

/* ---- Safety CTA button ---- */
.dg-btn-safety{
  display:block;text-align:center;background:var(--safety);color:var(--on-safety);
  font-weight:700;font-size:var(--fs-body);padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-sm);border:none;cursor:pointer;width:100%;
  text-decoration:none;box-sizing:border-box;
  transition:background .15s ease,transform .1s ease;
}
.dg-btn-safety:hover{background:var(--safety-dark);color:var(--on-safety)}
.dg-btn-safety:active{transform:scale(.98)}
.dg-btn-safety:focus-visible{outline:3px solid var(--safety-dark);outline-offset:2px}
.dg-price-note{font-size:var(--fs-xs);color:var(--muted);text-align:center;margin:var(--space-2) 0 0}

/* ---- Award ribbon (folded-tail, premium) ----
   v3.1: charcoal by default — words differentiate, not colors.
   .top keeps the single orange ribbon for the #1 overall pick. */
.dg-ribbon{
  position:absolute;top:14px;left:-6px;background:var(--dark);color:var(--on-dark);
  font-size:var(--fs-kicker);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:var(--space-2) var(--space-4);z-index:2;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%);
}
.dg-ribbon::after{
  content:"";position:absolute;left:0;bottom:-8px;
  border:4px solid transparent;border-top-color:rgba(0,0,0,.35);border-right-color:rgba(0,0,0,.35);
}
.dg-ribbon.top{background:var(--safety-bright)}

/* ---- Score chip ---- */
.dg-score-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--dark);color:var(--on-dark);
  font-weight:800;font-size:15px;padding:7px 14px;border-radius:var(--radius-full);
  box-shadow:0 2px 6px rgba(0,0,0,.18);white-space:nowrap;
}
.dg-score-chip b{color:var(--star);font-size:16px}

/* ---- Quick Picks band (dark) ---- */
.dg-quickpicks{background:var(--dark-2);padding:var(--space-8) 0;color:var(--on-dark);margin:var(--space-6) 0}
.dg-qp-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-5);flex-wrap:wrap;gap:var(--space-3)}
.dg-qp-head h2{font-size:var(--fs-section);font-weight:800;letter-spacing:.01em;color:var(--on-dark);margin:0}
.dg-qp-head h2 span{color:var(--on-dark)}
.dg-qp-head p{color:var(--dark-muted);font-size:var(--fs-meta);margin:0}
.dg-qp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media(max-width:820px){.dg-qp-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.dg-qp-card{
  background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;position:relative;
  box-shadow:var(--card-shadow);transition:transform .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;
}
.dg-qp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.dg-qp-img{background:var(--surface-2);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dg-qp-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.dg-qp-card:hover .dg-qp-img img{transform:scale(1.04)}
.dg-qp-body{padding:var(--space-4) var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.dg-qp-name{font-weight:700;font-size:var(--fs-card);line-height:1.25;color:var(--text);margin:0}
.dg-qp-sub{font-size:var(--fs-meta);color:var(--muted);margin:0}
.dg-qp-foot{margin-top:auto;padding-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.dg-qp-row{display:flex;align-items:center;justify-content:space-between}
.dg-qp-price{font-size:26px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---- Premium product card ---- */
.dg-ppc{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;position:relative;box-shadow:var(--card-shadow);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);
}
@media(max-width:820px){.dg-ppc{grid-template-columns:1fr}}
.dg-ppc-media{position:relative;background:var(--surface-2);min-height:300px}
.dg-ppc-media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transition:transform .35s ease}
.dg-ppc:hover .dg-ppc-media img{transform:scale(1.03)}
.dg-ppc-body{padding:var(--space-6)}
.dg-ppc-award{font-size:var(--fs-kicker);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--safety-bright);margin:0 0 var(--space-2)}
.dg-ppc-title{font-size:28px;font-weight:800;margin:0 0 var(--space-2);letter-spacing:-.01em;line-height:1.2;color:var(--text)}
.dg-ppc-stars{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);font-size:var(--fs-meta);color:var(--muted)}
.dg-ppc-stars .glyphs{color:var(--star);font-size:18px;letter-spacing:2px}
.dg-ppc-verdict{
  background:var(--bg);border-left:4px solid var(--safety);
  padding:var(--space-4);font-size:17px;font-style:italic;margin:var(--space-4) 0;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text);
}
.dg-ppc-price-row{display:flex;align-items:baseline;gap:var(--space-3);margin:var(--space-4) 0}
.dg-ppc-price{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
.dg-ppc-was{font-size:18px;color:var(--muted);text-decoration:line-through}

/* ---- Buy / Avoid ---- */
.dg-buy-avoid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:var(--space-5) 0}
@media(max-width:640px){.dg-buy-avoid{grid-template-columns:1fr}}
.dg-ba-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.dg-ba-col h4{font-size:var(--fs-kicker);font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--space-3)}
.dg-ba-col.buy h4{color:var(--deal)}
.dg-ba-col.avoid h4{color:var(--danger)}
.dg-ba-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0}
.dg-ba-col li{font-size:var(--fs-body);display:flex;gap:var(--space-2);align-items:flex-start;line-height:1.5;color:var(--text)}
.dg-ba-col.buy li::before{content:"✓";color:var(--deal);font-weight:800;flex-shrink:0}
.dg-ba-col.avoid li::before{content:"✕";color:var(--danger);font-weight:800;flex-shrink:0}

/* ---- Score bars ---- */
.dg-scorebars{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);margin:var(--space-5) 0}
.dg-scorebars h4{font-size:var(--fs-kicker);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--space-4)}
.dg-sb-row{display:grid;grid-template-columns:180px 1fr 52px;gap:var(--space-3);align-items:center;margin-bottom:var(--space-3)}
@media(max-width:640px){.dg-sb-row{grid-template-columns:130px 1fr 44px}}
.dg-sb-label{font-size:var(--fs-meta);font-weight:600;color:var(--text)}
.dg-sb-track{background:var(--surface-2);border-radius:var(--radius-full);height:10px;overflow:hidden}
.dg-sb-fill{height:100%;background:var(--dark);border-radius:var(--radius-full)}
.dg-sb-val{font-weight:800;font-size:var(--fs-body);text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.dg-sb-note{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px dashed var(--border);font-size:var(--fs-meta);color:var(--muted)}
.dg-sb-note strong{color:var(--text)}
/* Width utilities for score bars (5% steps — no inline styles allowed) */
.sbw-5{width:5%}.sbw-10{width:10%}.sbw-15{width:15%}.sbw-20{width:20%}.sbw-25{width:25%}
.sbw-30{width:30%}.sbw-35{width:35%}.sbw-40{width:40%}.sbw-45{width:45%}.sbw-50{width:50%}
.sbw-55{width:55%}.sbw-60{width:60%}.sbw-65{width:65%}.sbw-70{width:70%}.sbw-75{width:75%}
.sbw-80{width:80%}.sbw-85{width:85%}.sbw-90{width:90%}.sbw-95{width:95%}.sbw-100{width:100%}

/* ---- Deal alert ---- */
.dg-deal-alert{
  background:var(--deal-bg);border:1px solid var(--deal-border);border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);margin:var(--space-5) 0;flex-wrap:wrap;
}
.dg-deal-alert .dt{font-weight:800;color:var(--deal-dark);font-size:var(--fs-kicker);letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--space-1)}
.dg-deal-alert p{font-size:var(--fs-body);color:var(--text);margin:0}
.dg-deal-alert p strong{color:var(--deal-dark)}
.dg-btn-deal{
  background:var(--deal);color:var(--on-dark);font-weight:700;padding:13px 28px;border-radius:var(--radius-sm);
  border:none;cursor:pointer;font-size:var(--fs-body);white-space:nowrap;text-decoration:none;
  transition:background .15s ease,transform .1s ease;display:inline-block;
}
.dg-btn-deal:hover{background:var(--deal-dark);color:var(--on-dark)}
.dg-btn-deal:active{transform:scale(.98)}

/* ---- Trust band ---- */
.dg-trust{background:var(--dark);color:var(--on-dark);border-radius:var(--radius-lg);padding:var(--space-6);margin:var(--space-6) 0}
.dg-trust h3{font-size:var(--fs-card);font-weight:800;margin:0 0 var(--space-3);color:var(--on-dark)}
.dg-trust h3 span{color:var(--on-dark)}
.dg-trust > p{color:var(--dark-faint);font-size:var(--fs-body);max-width:70ch;margin:0 0 var(--space-4)}
.dg-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
@media(max-width:820px){.dg-trust-grid{grid-template-columns:repeat(2,1fr)}}
.dg-trust-stat{text-align:center;padding:var(--space-4);background:rgba(255,255,255,.05);border-radius:var(--radius-md)}
.dg-trust-stat b{display:block;font-size:30px;font-weight:800;color:var(--on-dark);font-variant-numeric:tabular-nums}
.dg-trust-stat span{font-size:var(--fs-kicker);color:var(--dark-muted);text-transform:uppercase;letter-spacing:.08em}

/* ---- Sticky mobile CTA ---- */
.dg-sticky-cta{
  display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface);
  border-top:1px solid var(--border);padding:var(--space-3) var(--space-4);z-index:60;
  align-items:center;gap:var(--space-3);box-shadow:0 -4px 16px rgba(0,0,0,.08);
}
.dg-sticky-cta img{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-sm);display:block}
.dg-sticky-cta .sc-info{flex:1;min-width:0}
.dg-sticky-cta .sc-info b{display:block;font-size:var(--fs-meta);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-sticky-cta .sc-info span{font-size:var(--fs-body);font-weight:800;color:var(--text)}
.dg-sticky-cta .dg-btn-safety{width:auto;margin:0;padding:12px 24px;white-space:nowrap}
@media(max-width:820px){.dg-sticky-cta.on{display:flex}body.dg-has-sticky{padding-bottom:76px}}

/* ============ v3.2 ADDITIONS — region toggle + text-size toggle (additive; no v3.1 values changed) ============ */
/* Text-size A/A+ toggle: scale token-based type for 50+ / sunlight readers */
html[data-textsize="large"]{
  --fs-micro:.8rem; --fs-xs:.9rem; --fs-kicker:.85rem; --fs-crumb:.95rem;
  --fs-meta:1rem; --fs-sm:1rem; --fs-body:1.125rem; --fs-card:1.25rem;
  --fs-toc:1.25rem; --fs-h3:1.35rem; --fs-title:1.4rem; --fs-h2:1.85rem;
  --fs-section:2rem; --fs-h1:2.3rem; --fs-hero:2.8rem; --fs-display:2.1rem;
}
/* US region mode: hide CAD price figures — the CTA carries the price (no invented USD prices) */
html[data-region="us"] .dg-qp-price,
html[data-region="us"] .dg-ppc-price,
html[data-region="us"] .dg-ppc-was{display:none;}
/* Footer utility toggles (dark footer) */
.dgv2-footer-utils{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--dark-2);}
.dgv2-util{display:flex;align-items:center;gap:8px;}
.dgv2-util-label{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-muted);}
.dgv2-utilbtn{background:transparent;border:1px solid var(--dark-muted);color:var(--on-dark);font-size:var(--fs-sm);font-weight:700;padding:10px 16px;border-radius:999px;cursor:pointer;min-height:44px;min-width:52px;}
.dgv2-utilbtn.on{background:var(--safety);border-color:var(--safety);color:#fff;}
.dgv2-utilbtn:hover{border-color:var(--safety);}
.dgv2-utilbtn:focus-visible{outline:2px solid var(--safety);outline-offset:2px;}
/* Drawer seg active state (region + textsize reuse dgv2-segbtn) */
.dgv2-segbtn.on{background:var(--safety);color:#fff;}
/* Medical disclaimer callout (CPAP guide) — amber left border, uses tokens only */
.med-disclaimer{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:12px;padding:18px 20px;margin:0 0 28px;}
.med-disclaimer p{margin:0 0 8px;}
.med-disclaimer p:last-child{margin:0;}
/* ==========================================================================
   DG TOOL APP — interactive tool/quiz/calculator styles (Phase 3, 2026-10-04)
   Scoped under .dg-tool so tool styles never leak into page chrome.
   All values use v3.1 design tokens. No gradients, no hardcoded colors.
   The tool-app block renderer wraps each fragment in <div class="dg-tool">.
   ========================================================================== */

.dg-tool .kicker{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.dg-tool .emb-head h1{font-family:var(--h-font);font-size:1.55rem;line-height:1.2;margin:0 0 6px}
.dg-tool .emb-head p{color:var(--muted);font-size:.94rem;margin:0}
.dg-tool .tool-card{background:var(--card);border:1px solid var(--line-soft);border-radius:20px;padding:22px 16px;box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}
.dg-tool .tool-field{margin:0 0 14px;padding:16px;min-width:0;background:var(--bg);border:1px solid var(--line-soft);border-radius:16px}
.dg-tool .tool-legend{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0}
.dg-tool .tool-val{font-weight:800;color:var(--amber);font-size:.95rem;white-space:nowrap;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.dg-tool .tool-field>label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.dg-tool .tool-field input[type=number], .dg-tool .tool-field input[type=text]{width:100%;min-height:52px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:var(--body-font);font-size:1rem;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
.dg-tool .tool-field input:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 28%, transparent)}
.dg-tool .tool-hint{color:var(--muted);font-size:.85rem;margin:8px 0 0;line-height:1.55}
.dg-tool .tool-choices{display:grid;gap:8px;margin:0}
.dg-tool .tool-choice{position:relative;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;font-weight:700;font-size:.94rem;line-height:1.4;margin:0;min-height:56px;transition:border-color .15s,box-shadow .15s,transform .1s}
.dg-tool .tool-choice:active{transform:scale(.99)}
.dg-tool .tool-choice input{accent-color:var(--amber);width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;cursor:pointer}
.dg-tool .tool-choice small{display:block;font-weight:500;color:var(--muted);font-size:.84rem;margin-top:2px}
.dg-tool .tool-choice:has(input:checked){border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 4px 16px color-mix(in srgb, var(--amber) 16%, transparent)}
.dg-tool .tool-choice:has(input:checked)::after{content:"";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.3 2.9 8l1.4-1.4 1.9 1.9 5.5-5.5L13.1 4.4z' fill='%23140F05'/%3E%3C/svg%3E") center/11px no-repeat}
.dg-tool .tool-field input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;min-height:44px;padding:0;border:0;border-radius:8px;background:transparent;margin:2px 0;cursor:pointer}
.dg-tool .tool-field input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--surface-2)}
.dg-tool .tool-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:var(--amber);border:3px solid var(--card);box-shadow:0 2px 10px rgba(0,0,0,.4);cursor:pointer;margin-top:-11px;transition:transform .12s}
.dg-tool .tool-field input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}
.dg-tool .tool-field input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--surface-2)}
.dg-tool .tool-field input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--amber);border:3px solid var(--card);box-shadow:0 2px 10px rgba(0,0,0,.4);cursor:pointer}
.dg-tool .tool-field input[type=range]:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.dg-tool .tool-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;font-weight:600;margin:0 0 4px;font-variant-numeric:tabular-nums}
.dg-tool .result{margin-top:18px;border:1px solid color-mix(in srgb, var(--amber) 40%, transparent);border-radius:16px;padding:22px 20px;background: 60%),var(--bg);display:none}
.dg-tool .result.show{display:block}
.dg-tool .result-num{font-family:var(--h-font);font-size:2.2rem;font-weight:700;color:var(--amber);line-height:1.05;letter-spacing:-.01em}
html[data-theme="light"] .dg-tool .result-num, html[data-theme="light"] .dg-tool .tool-val, html[data-theme="light"] .dg-tool .dev-w{color:var(--amber-dark)}
.dg-tool .result-verdict{color:var(--text);margin-top:8px;font-size:.95rem;line-height:1.55}
.dg-tool .tool-math{font-size:.92rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:14px 0 0;font-variant-numeric:tabular-nums;line-height:1.55}
.dg-tool .tool-alert{display:none;border:1px solid color-mix(in srgb, var(--amber) 45%, transparent);background:color-mix(in srgb, var(--amber) 8%, transparent);border-radius:12px;padding:14px 16px;margin-top:12px;font-size:.92rem;line-height:1.55}
.dg-tool .tool-alert.show{display:block}
.dg-tool .tool-alert p{margin:0;color:var(--text)}
.dg-tool .tool-fine{color:var(--muted);font-size:.84rem;margin:14px 0 0;line-height:1.55}
.dg-tool .dev-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dg-tool .dev-row{position:relative;display:flex;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;font-weight:600;font-size:.92rem;min-height:56px;transition:border-color .15s,box-shadow .15s,transform .1s}
.dg-tool .dev-row:active{transform:scale(.99)}
.dg-tool .dev-row input{width:20px;height:20px;accent-color:var(--amber);flex:0 0 auto;margin:0;cursor:pointer}
.dg-tool .dev-row:has(input:checked){border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 4px 16px color-mix(in srgb, var(--amber) 16%, transparent)}
.dg-tool .dev-row:has(input:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 35%, transparent)}
.dg-tool .dev-n{flex:1}
.dg-tool .dev-w{font-weight:800;color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums}
.dg-tool .dev-custom{display:grid;grid-template-columns:1fr 104px;gap:8px;margin-top:8px}
.dg-tool .dev-custom input{min-width:0}
.dg-tool .emb-attr a{color:var(--amber);font-weight:700}
@media(min-width:560px){.dg-tool .dev-list{grid-template-columns:1fr 1fr} .dg-tool .tool-card{padding:26px 22px} .dg-tool .tool-field{padding:18px}}
@media(max-width:420px){.dg-tool .result-num{font-size:1.9rem}}

.dg-tool .dg-app-kicker{display:inline-block;font-family:Manrope,system-ui,sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--amber) 76%,var(--text));margin:0 0 10px}
.dg-tool .dg-app-sub{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0 0 16px;max-width:40em}
.dg-tool .dg-app-sub strong{color:var(--text)}
.dg-tool .dg-app-stamps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.dg-tool .dg-app-stamps li{font-family:Manrope,system-ui,sans-serif;font-size:.8rem;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--bg2);white-space:nowrap}
.dg-tool .dg-app-body{margin-top:16px}
.dg-tool .dg-field{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 12px;min-width:0}
.dg-tool .dg-field legend{display:contents}
.dg-tool .dg-f-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;box-sizing:border-box;padding-right:14px;margin:0 0 2px}
.dg-tool .dg-f-title{flex:1 1 auto;min-width:0;font-family:Manrope,system-ui,sans-serif;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dg-tool .dg-f-val{flex:none;font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:1rem;color:color-mix(in srgb,var(--amber) 76%,var(--text));white-space:nowrap;font-variant-numeric:tabular-nums}
.dg-tool .dg-f-val.truck-val{white-space:normal;text-align:right;font-size:.85rem;line-height:1.45;max-width:62%}
.dg-tool .dg-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 14px}
.dg-tool .dg-seg-btn{position:relative;min-height:54px;padding:12px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.dg-tool .dg-seg-btn:hover{border-color:color-mix(in srgb,var(--amber) 70%,var(--line))}
.dg-tool .dg-seg-btn[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.dg-tool .dg-seg-btn[aria-pressed="true"]::after{content:"\2713";position:absolute;top:6px;right:9px;font-size:.85rem;font-weight:800;color:var(--on-amber)}
.dg-tool .dg-num{margin:0}
.dg-tool .dg-num>label{display:block;font-family:Manrope,system-ui,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.dg-tool .dg-num-in{display:flex;align-items:center;gap:10px}
.dg-tool .dg-num input{flex:1;min-width:0;min-height:52px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-weight:600;font-size:1.05rem;font-variant-numeric:tabular-nums}
.dg-tool .dg-num input:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 28%,transparent)}
.dg-tool .dg-sel{margin:0 0 12px}
.dg-tool .dg-sel:last-child{margin-bottom:0}
.dg-tool .dg-sel>label{display:block;font-family:Manrope,system-ui,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.dg-tool .dg-sel select{width:100%;min-height:52px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-weight:600;font-size:1.05rem}
.dg-tool .dg-sel select:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 28%,transparent)}
.dg-tool .dg-unit{color:var(--muted);font-weight:700;font-size:.95rem;white-space:nowrap}
.dg-tool .dg-hint{color:var(--muted);font-size:.88rem;margin:10px 0 0;line-height:1.55}
.dg-tool .tool-card.dg-app .result.show{order:0;box-shadow:none}
.dg-tool .dg-app-result{margin-top:2px}
.dg-tool .dg-verdict{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 16px;background:var(--bg2)}
.dg-tool .dg-verdict p{margin:0;color:var(--text);font-size:1.02rem;line-height:1.55;font-weight:600}
.dg-tool .dg-verdict.is-caution{background:color-mix(in srgb,var(--amber) 10%,var(--bg2));border-color:color-mix(in srgb,var(--amber) 60%,var(--line))}
.dg-tool .dg-verdict.is-pass{background:var(--bg2);border-color:color-mix(in srgb,var(--amber) 60%,var(--line))}
.dg-tool .dg-v-ico{flex:0 0 auto;width:26px;height:26px;margin-top:2px;color:color-mix(in srgb,var(--amber) 76%,var(--text))}
.dg-tool .dg-v-ico svg{display:block;width:26px;height:26px}
.dg-tool html .tool-card .dg-hero-num.result-num{font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:clamp(2.15rem,1.85rem + 5vw,2.5rem);line-height:1.05;letter-spacing:-.01em;color:var(--text);margin:0 0 2px;font-variant-numeric:tabular-nums}
.dg-tool html .tool-card .dg-hero-num.result-num small{font-size:.4em;font-weight:600;color:var(--muted);letter-spacing:0}
.dg-tool html:not([data-theme="light"]) .tool-card .dg-hero-num.result-num small{color:var(--text)}
.dg-tool .dg-work{margin:14px 0 0;border:1px solid var(--line);border-radius:14px;background:var(--bg2);overflow:hidden}
.dg-tool .dg-work summary{display:flex;align-items:center;min-height:52px;padding:6px 18px;cursor:pointer;font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:.95rem;color:var(--text);list-style:none}
.dg-tool .dg-work summary::-webkit-details-marker{display:none}
.dg-tool .dg-work summary::after{content:"+";margin-left:auto;color:color-mix(in srgb,var(--amber) 76%,var(--text));font-size:1.25rem;font-weight:800;line-height:1}
.dg-tool .dg-work[open] summary::after{content:"\2013"}
.dg-tool .dg-work .tool-math{margin:0 18px 12px;font-size:.95rem}
.dg-tool .dg-work .tool-rows{margin:0 18px 16px}
.dg-tool .dg-copy{margin-top:14px}
.dg-tool .dg-copy p{margin:0}
.dg-tool .dg-copy-btn{display:block;width:100%;min-height:54px;padding:12px 20px;border-radius:14px;border:1px solid var(--amber);background:transparent;color:var(--text);font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:1rem;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.dg-tool .dg-copy-btn:hover{background:color-mix(in srgb,var(--amber) 12%,transparent)}
.dg-tool .dg-copy-note{color:var(--muted);font-size:.88rem;margin:8px 0 0;min-height:1.3em;line-height:1.4}
.dg-tool .dg-app-actions{margin:18px 0 0}
.dg-tool .dg-app-actions p{margin:0}
.dg-tool .dg-app-next ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media(min-width:640px){.dg-tool .dg-app-next ul{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.dg-tool .dg-seg-btn, .dg-tool .dg-copy-btn, .dg-tool .dg-cta, .dg-tool .dg-app-next a{transition:none}}

.dg-tool .btn-primary{background:var(--amber);color:var(--on-amber);box-shadow:0 10px 26px color-mix(in srgb, var(--amber) 28%, transparent)}
.dg-tool .btn-primary:hover{box-shadow:0 14px 34px color-mix(in srgb, var(--amber) 40%, transparent);transform:translateY(-2px)}
.dg-tool .dg-t-home .btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.dg-tool .dg-t-home .btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.dg-tool .dg-t-browse .btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.dg-tool .dg-t-browse .btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.dg-tool .btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.dg-tool .btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.dg-tool .tool-btns{display:grid;gap:10px;margin:0}
.dg-tool .tool-btn{width:100%;min-height:56px;padding:14px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:var(--body-font);font-weight:700;font-size:.94rem;line-height:1.45;cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s,transform .1s;margin:0}
.dg-tool .tool-btn:hover{border-color:var(--amber)}
.dg-tool .tool-btn:active{transform:scale(.98)}
.dg-tool .tool-btn.on{background:var(--amber);border-color:var(--amber);color:var(--on-amber);box-shadow:0 4px 16px color-mix(in srgb, var(--amber) 35%, transparent)}
.dg-tool .tool-btn.on .tb-sub{color:var(--on-amber);opacity:.72}
.dg-tool .tool-btn .tb-sub{display:block;font-weight:500;color:var(--muted);font-size:.85rem;margin-top:2px}
.dg-tool .tool-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.dg-tool .tool-points li{border-left:3px solid var(--amber);padding:2px 0 2px 14px;color:var(--muted);font-size:.95rem}
.dg-tool .tool-points li strong{color:var(--text)}
.dg-tool .tool-card .quiz-progress{height:10px;border-radius:999px;background:var(--line);overflow:hidden;margin:0 0 16px}
.dg-tool .tool-card .quiz-progress span{display:block;height:100%;width:16.6%;border-radius:999px;background:var(--amber);transition:width .35s ease}
.dg-tool .tool-card .quiz-step{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.dg-tool .tool-card .quiz-q{font-family:var(--h-font);font-size:1.4rem;font-weight:700;line-height:1.3;margin:0 0 18px;color:var(--text)}
.dg-tool .tool-card .quiz-answers{display:grid;gap:10px;margin:0}
.dg-tool .tool-card .quiz-answers .tool-btn{text-align:left;width:100%;min-height:60px}
.dg-tool .tool-card .quiz-nav{margin:18px 0 0;display:flex}
.dg-tool .tool-card .quiz-result-title{font-family:var(--h-font);font-size:1.65rem;font-weight:700;line-height:1.2;margin:0 0 10px;color:var(--text)}
.dg-tool .tool-card .quiz-why{color:var(--muted);margin:0 0 6px;line-height:1.55}
.dg-tool .tool-btns{grid-template-columns:1fr 1fr}
.dg-tool .tool-btns.cols3{grid-template-columns:repeat(3,1fr)}
.dg-tool .tool-card .quiz-answers{grid-template-columns:1fr 1fr}
.dg-tool `
   (both 0, .dg-tool 3, .dg-tool 3) beat `.btn-primary` (0, .dg-tool 2, .dg-tool 0), .dg-tool painting CTA button
   text amber-on-amber — invisible in dark mode, .dg-tool wrong brown in light mode
   (found on migrated post 1029 via mirror QA; the live canary 1194 had the
   same defect). These (0, .dg-tool 5, .dg-tool 3) selectors restore --on-amber on every
   .btn in both themes regardless of source order. */
.dg-tool .tool-choice small, .dg-tool .tool-btn .tb-sub{font-weight:400;font-size:.875rem}
.dg-tool .btn-primary, .dg-tool a.dgv2-cta, .dg-tool a.dg-spot-btn{position:relative;overflow:hidden}
.dg-tool .btn-primary::after, .dg-tool a.dgv2-cta::after, .dg-tool a.dg-spot-btn::after{content:"";
  position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:var(--surface);
  transform:skewX(-18deg);transition:left .55s ease}
.dg-tool .btn-primary:hover::after, .dg-tool a.dgv2-cta:hover::after, .dg-tool a.dg-spot-btn:hover::after{left:140%}
.dg-tool .btn-primary::after, .dg-tool a.dgv2-cta::after, .dg-tool a.dg-spot-btn::after{display:none}
.dg-tool .tool-card .quiz-result-title{scroll-margin-top:140px}
.dg-tool .dg-share-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:36px auto;padding:14px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);max-width:720px}
.dg-tool .dg-share-row .dg-share-label{font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dg-tool .dg-share-copy{min-height:44px;padding:10px 22px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);font-weight:700;font-size:.95rem;cursor:pointer}
.dg-tool .dg-share-copy:hover{border-color:var(--score)}
.dg-tool .dg-share-copy:focus-visible{outline:2px solid var(--score);outline-offset:2px}
.dg-tool .dg-share-msg{font-size:.9rem;color:var(--muted)}
.dg-tool .dgx-btn-ghost{border:2px solid var(--line);color:var(--text)}

.dg-tool .dg-share-cabnum .cn-attr a{color:var(--amber)!important}
html[data-theme="light"] .dg-tool .dg-share-cabnum .cn-attr a{color:var(--amber)!important}
.dg-tool .tool-card .btn, .dg-tool .tool-btn{font-size:1.02rem;padding:16px 24px;border-radius:14px;letter-spacing:.01em}
.dg-tool .tool-card .btn:hover, .dg-tool .tool-btn:hover{filter:brightness(1.06)}
.dg-tool .dg-pick-share .dg-share-btn{flex-shrink:0}
.dg-tool p.dg-share-note:empty{display:none}
.dg-tool .dg-share-note{min-height:0;margin:10px 0 0;font-size:.88em;color:var(--muted)}
.dg-tool .dg-share{margin:28px 0 0;border:1px solid rgba(122,95,26,.38);border-radius:18px;
  padding:26px 22px;background:var(--text);color:var(--bg2)}
html[data-theme="light"] .dg-tool .dg-share{background:var(--surface);border-color:var(--line);color:var(--text)}
.dg-tool .dg-share[hidden]{display:none!important}
.dg-tool .dg-share-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber)}
html[data-theme="light"] .dg-tool .dg-share-eyebrow{color:var(--amber-dark)}
.dg-tool .dg-share-eyebrow::after{content:"";height:2px;flex:1;background:var(--amber);
  opacity:.5;border-radius:2px}
.dg-tool .dg-share-celebrate{font-family:Georgia,"Times New Roman",serif;font-size:1.32rem;
  font-weight:700;line-height:1.3;margin:0 0 18px;color:inherit;max-width:34em;
  text-wrap:balance}
.dg-tool .dg-share-money{display:block;text-decoration:none;text-align:center;
  background:var(--amber);color:var(--on-amber);font-weight:800;font-size:1.02rem;
  padding:16px 22px;border-radius:14px;margin:0 0 22px;min-height:56px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 22px color-mix(in srgb, var(--amber) 28%, transparent)}
.dg-tool .dg-share-money:hover{color:var(--on-amber);filter:brightness(1.06)}
.dg-tool `
.dg-tool .dg-share-money .arr{font-weight:800}
.dg-tool .dg-share-cabnum{background:var(--dark);border:1px solid color-mix(in srgb, var(--amber) 28%, transparent);
  border-left:4px solid var(--amber);border-radius:12px;padding:18px 18px 16px;
  margin:0 0 20px;color:var(--surface)}
.dg-tool .dg-share-cabnum .cn-kicker{margin:0 0 8px;font-size:.7rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.dg-tool .dg-share-cabnum .cn-sentence{margin:0 0 10px;font-size:1.02rem;line-height:1.55;
  color:var(--surface);overflow-wrap:anywhere}
.dg-tool .dg-share-cabnum .cn-sentence .cn-num{color:var(--amber);font-weight:800;
  font-variant-numeric:tabular-nums}
.dg-tool .dg-share-cabnum .cn-attr{margin:0;font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.dg-tool .dg-share-cabnum .cn-attr a{color:var(--amber);font-weight:700;text-decoration:none}
.dg-tool .dg-share-actions{display:grid;gap:10px;margin:0 0 6px}
.dg-tool .dg-share .dg-share-btn{appearance:none;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:var(--surface);font-family:inherit;font-weight:700;
  font-size:.98rem;padding:14px 18px;border-radius:12px;cursor:pointer;
  min-height:54px;text-align:center;line-height:1.4}
html[data-theme="light"] .dg-tool .dg-share .dg-share-btn{border-color:var(--line);color:var(--text)}
.dg-tool .dg-share .dg-share-btn:hover{border-color:var(--amber);color:var(--amber)}
html[data-theme="light"] .dg-tool .dg-share .dg-share-btn:hover{color:var(--amber-dark)}
.dg-tool .dg-share .dg-share-btn.is-primary{background:var(--surface-2);border-color:var(--surface-2);color:var(--surface)}
html[data-theme="light"] .dg-tool .dg-share .dg-share-btn.is-primary{background:var(--text);
  border-color:var(--text);color:var(--bg)}
.dg-tool .dg-share .dg-share-btn.is-primary:hover{border-color:var(--amber);color:var(--amber)}
.dg-tool .dg-share .dg-share-btn:disabled{opacity:.55;cursor:default}
.dg-tool .dg-share .dg-share-note{margin:10px 0 0;font-size:.88rem;color:var(--muted);min-height:1.4em}
html[data-theme="light"] .dg-tool .dg-share .dg-share-note{color:var(--muted)}
.dg-tool .dg-share-news{margin:20px 0 0;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12)}
html[data-theme="light"] .dg-tool .dg-share-news{border-top-color:var(--line-soft)}
.dg-tool .dg-share-news p{margin:0 0 10px;font-size:.96rem;line-height:1.55;color:inherit}
.dg-tool .dg-share-news a{color:var(--amber);font-weight:800;text-decoration:none}
html[data-theme="light"] .dg-tool .dg-share-news a{color:var(--amber-dark)}
.dg-tool .dg-share-news a:hover{text-decoration:underline}
.dg-tool .dg-share-social{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;
  align-items:center}
.dg-tool .dg-share-social .ss-label{font-size:.78rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
html[data-theme="light"] .dg-tool .dg-share-social .ss-label{color:var(--muted)}
.dg-tool .dg-share-social a{font-size:.95rem;font-weight:700;color:inherit;
  text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--amber) 50%, transparent)}
.dg-tool .dg-share-social a:hover{color:var(--amber)}
html[data-theme="light"] .dg-tool .dg-share-social a:hover{color:var(--amber-dark)}
.dg-tool .dg-share{padding:32px 30px}
.dg-tool .dg-share-actions{grid-template-columns:1fr 1fr}
.dg-tool .dg-share .dg-share-actions .dg-share-btn.is-primary{grid-column:1/-1}
.dg-tool .dg-share-celebrate{font-size:1.5rem}
.dg-tool .dg-share *{transition:none!important;animation:none!important}

.dg-tool .tcf{font-family:Manrope,system-ui,sans-serif;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;color:var(--text);max-width:680px;margin:24px auto;box-sizing:border-box}
.dg-tool .tcf *{box-sizing:border-box}
.dg-tool .tcf h2.tcf-title{font-size:22px;font-weight:800;margin:0 0 6px;font-family:var(--h-font)}
.dg-tool .tcf .tcf-sub{color:var(--muted);font-size:15px;margin:0 0 20px;line-height:1.5}
.dg-tool .tcf .tcf-field{margin:0 0 18px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.dg-tool .tcf .tcf-field>label.tcf-lab, .dg-tool .tcf .tcf-field>span.tcf-lab{display:block;font-size:16px;font-weight:800;margin:0 0 10px;color:var(--text);letter-spacing:.02em}
.dg-tool .tcf .tcf-hint{font-size:14px;color:var(--muted);margin:10px 0 0;line-height:1.55}
.dg-tool .tcf .tcf-opts{display:grid;gap:8px}
.dg-tool .tcf .tcf-opt{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;font-size:16px;font-weight:600;line-height:1.4;min-height:52px}
.dg-tool .tcf .tcf-opt input{width:22px;height:22px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--amber)}
.dg-tool .tcf .tcf-opt small{display:block;font-weight:400;color:var(--muted);font-size:13.5px;margin-top:2px}
.dg-tool .tcf select.tcf-sel{width:100%;min-height:52px;font-size:16px;font-family:inherit;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:0 14px}
.dg-tool .tcf .tcf-states{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dg-tool .tcf .tcf-states .tcf-opt{padding:10px 12px;min-height:48px;font-size:16px}
.dg-tool .tcf .tcf-out{border:1px solid color-mix(in srgb, var(--amber) 45%, transparent);border-radius:12px;padding:20px;margin:24px 0 0;background: 70%),var(--bg2)}
.dg-tool .tcf .tcf-kicker{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px}
.dg-tool .tcf .tcf-big{font-size:32px;font-weight:800;margin:0 0 4px;line-height:1.15;color:var(--text)}
.dg-tool .tcf .tcf-big .n{color:var(--amber)}
.dg-tool .tcf .tcf-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:16px;color:var(--text)}
.dg-tool .tcf .tcf-row .k{color:var(--muted)}
.dg-tool .tcf .tcf-row .v{font-weight:800;text-align:right}
.dg-tool .tcf .tcf-diagram{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:16px 0 0;overflow-x:auto;white-space:pre;color:var(--text)}
.dg-tool .tcf .tcf-diagram .ch{color:var(--amber);font-weight:800}
.dg-tool .tcf .tcf-buy{border:1px solid var(--line);border-radius:12px;padding:16px;margin:16px 0 0;background:var(--card)}
.dg-tool .tcf .tcf-buy h3{font-size:17px;margin:0 0 8px;font-family:var(--h-font)}
.dg-tool .tcf .tcf-buy .tcf-price{font-size:15px;color:var(--muted);margin:0 0 12px}
.dg-tool .tcf .tcf-buy .tcf-price strong{color:var(--text)}
.dg-tool .tcf .tcf-stateblock{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.dg-tool .tcf .tcf-stateblock strong{color:var(--text)}
.dg-tool .tcf .tcf-math{font-size:14px;color:var(--muted);margin:16px 0 0;line-height:1.55}
.dg-tool .tcf .tcf-fine{font-size:13.5px;color:var(--muted);margin:14px 0 0;line-height:1.55}
.dg-tool .tcf .tcf-fine strong{color:var(--text)}
.dg-tool .tcf .tcf-share{display:flex;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.dg-tool .tcf .tcf-share button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;font-size:16px;font-weight:800;color:var(--on-amber);background:var(--amber);border:none;border-radius:999px;cursor:pointer}
.dg-tool .tcf .tcf-share .tcf-copied{font-size:14px;color:var(--muted);align-self:center;display:none}
.dg-tool .tcf .tcf-share .tcf-copied.show{display:inline}
.dg-tool .tcf-mini{display:none;position:sticky;top:76px;z-index:5;margin:0 0 8px;padding:10px 16px;background:var(--card);border:1px solid color-mix(in srgb, var(--amber) 45%, transparent);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:17px;font-weight:800;color:var(--text)}
.dg-tool .tcf-mini.show{display:block}
.dg-tool .tcf-mini .n{color:var(--amber)}
@media (max-width:480px){.dg-tool .tcf{padding:16px} .dg-tool .tcf .tcf-big{font-size:27px} .dg-tool .tcf .tcf-states{grid-template-columns:repeat(2,1fr)} .dg-tool .tcf .tcf-diagram{font-size:12px;padding:12px 10px}}

/* Quiz/score progress fill — set via JS className (sbw-*), 5% steps. */
.dg-tool .quiz-progress>span{display:block;height:100%;border-radius:999px;background:var(--amber);transition:width .35s ease}
.dg-tool .quiz-progress>span.sbw-0{width:0%}
.dg-tool .quiz-progress>span.sbw-5{width:5%}
.dg-tool .quiz-progress>span.sbw-10{width:10%}
.dg-tool .quiz-progress>span.sbw-15{width:15%}
.dg-tool .quiz-progress>span.sbw-20{width:20%}
.dg-tool .quiz-progress>span.sbw-25{width:25%}
.dg-tool .quiz-progress>span.sbw-30{width:30%}
.dg-tool .quiz-progress>span.sbw-35{width:35%}
.dg-tool .quiz-progress>span.sbw-40{width:40%}
.dg-tool .quiz-progress>span.sbw-45{width:45%}
.dg-tool .quiz-progress>span.sbw-50{width:50%}
.dg-tool .quiz-progress>span.sbw-55{width:55%}
.dg-tool .quiz-progress>span.sbw-60{width:60%}
.dg-tool .quiz-progress>span.sbw-65{width:65%}
.dg-tool .quiz-progress>span.sbw-70{width:70%}
.dg-tool .quiz-progress>span.sbw-75{width:75%}
.dg-tool .quiz-progress>span.sbw-80{width:80%}
.dg-tool .quiz-progress>span.sbw-85{width:85%}
.dg-tool .quiz-progress>span.sbw-90{width:90%}
.dg-tool .quiz-progress>span.sbw-95{width:95%}
.dg-tool .quiz-progress>span.sbw-100{width:100%}

/* Visibility toggle used by tool JS (replaces inline style.display) */
.dg-tool .is-hidden{display:none!important}

/* ---- Tire pressure cheat sheet (static reference tool) ---- */
.dg-tool .psi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:var(--space-4) 0}
@media(max-width:560px){.dg-tool .psi{grid-template-columns:1fr}}
.dg-tool .psi>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);text-align:center}
.dg-tool .psi .n{font-size:var(--fs-h2);font-weight:var(--fw-extrabold);color:var(--amber-dark);font-variant-numeric:tabular-nums}
html[data-theme="dark"] .dg-tool .psi .n{color:var(--amber)}
.dg-tool .psi .l{font-size:var(--fs-meta);color:var(--muted);margin-top:var(--space-1)}
.dg-tool .lede{font-size:var(--fs-card);line-height:var(--lh-body);color:var(--muted);max-width:62ch}
.dg-tool .card.math{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--amber);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin:var(--space-4) 0;line-height:1.6}
.dg-tool .note{color:var(--muted);font-size:var(--fs-meta)}
.dg-tool h2{font-family:var(--font-head);font-size:var(--fs-h2);margin:var(--space-5) 0 var(--space-2)}
.dg-tool ol{line-height:1.65;color:var(--text)}
.dg-tool ol li{margin-bottom:var(--space-2)}

/* ---- Skip link: visually hidden until keyboard-focused ---- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link:focus,.skip-link:active{position:fixed!important;top:8px;left:8px;width:auto;height:auto;padding:12px 18px;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;background:var(--dark);color:#fff;font-weight:700;font-size:14px;border-radius:8px;z-index:1000;text-decoration:none}

/* ---- Legacy inline quick-picks (qp-*) — hand-written raw HTML in guide pages ---- */
.qpicks{margin:var(--space-6) 0;padding:var(--space-5);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg)}
.qp-head{font-family:var(--font-head);font-weight:800;font-size:var(--fs-h3);text-transform:uppercase;letter-spacing:.02em;margin:0 0 var(--space-2)}
.qp-disc{font-size:var(--fs-xs);color:var(--muted);margin:0 0 var(--space-3)}
.qp-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--border)}
.qp-main{min-width:0}
.qp-label{display:inline-block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--safety-bright);margin:0 0 var(--space-1)}
.qp-name{font-weight:800;font-size:1.125rem;margin:0}
.qp-score{display:inline-block;background:var(--amber);color:var(--on-amber);font-weight:800;font-size:var(--fs-xs);padding:2px 10px;border-radius:var(--radius-full);margin-left:var(--space-2);vertical-align:middle;white-space:nowrap}
.qp-why{color:var(--muted);font-size:var(--fs-sm);margin:var(--space-1) 0 0}
.qp-cta{margin:0;flex-shrink:0}
.qp-go{display:inline-block;background:var(--safety);color:#fff;font-weight:800;font-size:var(--fs-sm);padding:12px 20px;border-radius:var(--radius-full);text-decoration:none;white-space:nowrap}
.qp-go:hover{background:var(--safety-dark,var(--safety))}
@media(max-width:640px){.qp-row{flex-direction:column;align-items:flex-start}.qp-cta{width:100%}.qp-go{display:block;text-align:center}}
.qp-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;margin-bottom:var(--space-3)}
.qp-card:hover{border-color:var(--safety)}
.qp-card .qp-info{min-width:0;flex:1}
.qp-card .qp-label,.qp-card .qp-name,.qp-card .qp-why{display:block}
.qp-card .qp-go{background:none;padding:0;font-size:1.5rem;color:var(--safety);flex-shrink:0}
.qp-thumb{display:inline-block;width:72px;flex-shrink:0;border-radius:8px;overflow:hidden}
.qp-thumb img{display:block;width:72px;height:72px;object-fit:cover}

/* ==========================================================================
   MOBILE NAV DRAWER — v3.1 chrome (2026-10-04)
   The drawer markup (dgv2-drawer-*) is emitted by render_drawer() in
   dg-compile.py. These styles complete it: dark charcoal panel sliding from
   the left, pill toggle segments, styled search, kicker section headers and
   cream nav rows. tokens.css loads after the legacy bundle, so these win.
   ========================================================================== */

/* ---- Panel: left slide-in, 380px max, dark chrome in both themes ---- */
.dgv2-drawer{
  position:fixed;z-index:var(--z-drawer);
  top:0;left:0;bottom:0;right:auto;
  width:min(380px,92vw);
  background:var(--dark);
  color:var(--on-dark);
  box-shadow:24px 0 60px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  padding:0;
  transform:translateX(-103%);
  transition:transform .3s ease;
  visibility:hidden;
}
html.dgv2-drawer-open .dgv2-drawer{transform:translateX(0);visibility:visible;}

/* ---- Top bar: brand + close ---- */
.dgv2-drawer-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 12px 12px 16px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--dark);z-index:2;flex-shrink:0;
}
.dgv2-drawer .dgv2-brand{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--on-dark);text-decoration:none;
  font-weight:800;font-size:1.05rem;letter-spacing:.01em;
}
.dgv2-brand-mark{display:inline-flex;}
.dgv2-brand-img{display:block;width:26px;height:26px;}
.dgv2-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);background:transparent;color:var(--on-dark);
  cursor:pointer;flex-shrink:0;
}
.dgv2-iconbtn:hover{border-color:var(--safety);color:var(--amber);}
.dgv2-iconbtn:focus-visible{outline:2px solid var(--safety);outline-offset:2px;}

/* ---- Toggle segments: theme / region / text size ---- */
.dgv2-drawer-theme{padding:14px 16px 0;flex-shrink:0;}
.dgv2-seg{
  display:flex;gap:4px;padding:4px;
  background:var(--dark-2);border:1px solid var(--line);border-radius:999px;
}
.dgv2-segbtn{
  flex:1;min-height:44px;padding:10px 8px;
  border:0;border-radius:999px;background:transparent;
  color:var(--dark-muted);font-weight:800;font-size:.92rem;cursor:pointer;
}
.dgv2-segbtn:hover{color:var(--on-dark);}
.dgv2-segbtn.on,
.dgv2-segbtn[aria-pressed="true"]{background:var(--safety);color:#fff;}
.dgv2-segbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

/* ---- Search ---- */
.dgv2-drawer-search{padding:14px 16px 4px;flex-shrink:0;}
.dgv2-drawer-search form{margin:0;}
.dgv2-drawer-search input[type="search"]{
  width:100%;min-height:48px;padding:12px 18px;
  border-radius:999px;border:1px solid var(--line);
  background:var(--dark-2);color:var(--on-dark);font-size:1rem;
  -webkit-appearance:none;appearance:none;
}
.dgv2-drawer-search input[type="search"]::placeholder{color:var(--dark-muted);opacity:1;}
.dgv2-drawer-search input[type="search"]:focus{
  outline:2px solid var(--safety);outline-offset:1px;border-color:var(--safety);
}

/* ---- Nav sections ---- */
.dgv2-drawer-nav{padding:6px 16px 40px;overflow-y:auto;}
.dgv2-drawer-sec{margin:0;}
.dgv2-drawer-h{
  font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin:22px 0 2px;
}
.dgv2-drawer-sec ul{list-style:none;margin:0;padding:0;}
.dgv2-drawer-sec li{margin:0;padding:0;}
.dgv2-drawer-sec li::marker{content:"";}
.dgv2-drawer-sec a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:12px 4px;
  color:var(--on-dark);text-decoration:none;
  font-size:1.02rem;font-weight:600;
  border-bottom:1px solid var(--line-soft);
}
.dgv2-drawer-sec a::after{
  content:"›";color:var(--dark-muted);font-size:1.5rem;line-height:1;flex-shrink:0;
}
.dgv2-drawer-sec a:hover{color:var(--amber);}
.dgv2-drawer-sec a:hover::after{color:var(--amber);}
.dgv2-drawer-sec a:focus-visible{outline:2px solid var(--safety);outline-offset:2px;border-radius:8px;}

/* ---- Scrim + scroll lock ---- */
.dgv2-scrim{
  position:fixed;inset:0;z-index:79;
  background:rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:opacity .28s ease;
}
html.dgv2-drawer-open .dgv2-scrim{opacity:1;visibility:visible;}
html.dgv2-drawer-open{overflow:hidden;}

/* ==========================================================================
   CENTERED CONTAINER SYSTEM (Rafael directive 2026-10-04)
   Every content section on every page aligns to the same centered 1120px
   column on desktop. Block renderers in dg-compile.py wrap their content
   with _container() which emits <div class="dg-container">. Full-bleed band
   backgrounds stay on the outer section element; content goes inside.
   ========================================================================== */
.dg-container{
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
  box-sizing:border-box;
}

/* ---- Index hero (homepage kicker + H1 + lede) ---- */
.idx-hero{padding:var(--space-2xl) 0 var(--space-md);}
.idx-kicker{
  font-size:var(--fs-micro);font-weight:var(--fw-extrabold);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--safety-bright);margin:0 0 var(--space-3);
}
.idx-hero h1{
  font-family:var(--font-head);font-size:var(--fs-h1);line-height:1.08;
  margin:0 0 var(--space-3);color:var(--text);letter-spacing:-.01em;
}
.idx-lede{font-size:var(--fs-body);line-height:1.55;color:var(--muted);margin:0;max-width:var(--text-max);}

/* ---- Text blocks: center the readable column inside the container ---- */
.dg-prose{margin:0 auto;}

/* ---- Link-row cards (article-grid): left-aligned titles, square thumbs ---- */
.idx-card{justify-content:flex-start;}
.idx-card-main{flex:1 1 auto;text-align:left;}
.idx-card-img{width:112px;height:112px;border-radius:var(--radius-sm);}
@media(max-width:640px){
  .idx-card-img{width:72px;height:72px;}
}

/* ============================================================
   v3.1 — Category thumbnail strips (all-products)
   ============================================================ */
.dg-cat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 20px;padding:0;list-style:none}
.dg-cat-thumb{display:block;min-height:44px;border-radius:14px;overflow:hidden;background:var(--paper);aspect-ratio:1/1}
.dg-cat-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dg-cat-thumb:hover img,.dg-cat-thumb:focus-visible img{transform:scale(1.03)}
.dg-cat-thumb img{transition:transform .25s ease}
.dg-cat-thumb:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
@media (max-width:640px){.dg-cat-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ============================================================
   v3.1 — Print button (quiet secondary; hides in print)
   ============================================================ */
.dg-print-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:2px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:600 var(--fs-body)/1.2 var(--font-body);cursor:pointer}
.dg-print-btn:hover{border-color:var(--cta);color:var(--cta)}
.dg-print-btn:focus-visible{outline:3px solid var(--cta);outline-offset:2px}

/* ============================================================
   v3.1 — Print stylesheet (all pages)
   Hide chrome, keep content, never split cards.
   ============================================================ */
@media print{
  @page{margin:18mm 16mm}
  /* Chrome that must not print */
  .dgv2-header,.dgv2-drawer,.dgv2-scrim,.dgv2-footer,.dgv2-search,.no-print,
  .dg-newsletter,.dg-email-capture,.dg-print-btn,
  .dgv2-seg,.dgv2-drawer-search,.site-search,
  .dg-sticky-cta,.related-grid,.rel-card,.dg-cta-banner,
  .dgv2-disclosure,.skip-link,.dg-breadcrumb,
  form{display:none!important}
  /* Content-only page */
  html,body{background:#fff!important;color:#111!important}
  body{font-size:11pt;line-height:1.5}
  .site-main{padding:0!important;margin:0!important;max-width:none!important}
  .dg-container,.idx-hero,.dg-prod-sec{max-width:none!important;padding-left:0!important;padding-right:0!important;margin:0 0 14pt!important}
  h1{font-size:20pt;margin:0 0 8pt}
  h2{font-size:14pt;margin:14pt 0 6pt;break-after:avoid}
  h3{font-size:12pt;break-after:avoid}
  p,li{break-inside:avoid}
  /* Never split cards / sections mid-content */
  section,.dg-prod-card,.dg-cat-strip,.dg-dl-card,.dg-hook,
  .takeaways,.product,.idx-card,table,figure{break-inside:avoid;page-break-inside:avoid}
  /* Links: keep text, drop decorations and raw URLs */
  a{color:#111!important;text-decoration:none!important}
  a[href]:after{content:none!important}
  /* Images: keep but cap size so they don't swallow pages */
  img{max-width:100%!important;max-height:220pt!important}
  .idx-card-img,.dg-cat-thumb{max-width:80pt;max-height:80pt}
}

/* ============================================================
   v3.1 — Gear finder result cards (thumbnails + empty slots)
   ============================================================ */
.dg-tool .gf-card{display:grid;grid-template-columns:1fr;gap:8px;background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:18px 16px;margin:0 0 14px}
.dg-tool .gf-card:has(.gf-thumb){grid-template-columns:120px 1fr;column-gap:16px;align-items:start}
.dg-tool .gf-card .kicker{grid-column:1/-1;margin:0}
.dg-tool .gf-thumb{grid-column:1;grid-row:2/span 4;width:120px;height:120px;object-fit:cover;border-radius:12px;background:var(--paper)}
.dg-tool .gf-card:has(.gf-thumb) .gf-name,.dg-tool .gf-card:has(.gf-thumb) .gf-why,.dg-tool .gf-card:has(.gf-thumb) .gf-price,.dg-tool .gf-card:has(.gf-thumb) .quiz-cta{grid-column:2}
.dg-tool .gf-name{font-family:var(--h-font);font-size:1.12rem;font-weight:700;line-height:1.3;margin:0;color:var(--text)}
.dg-tool .gf-why{font-size:.92rem;line-height:1.55;color:var(--muted);margin:0}
.dg-tool .gf-price{font-size:1.05rem;font-weight:800;color:var(--text);margin:0}
.dg-tool .gf-price .tool-fine{font-weight:500;font-size:.8rem;color:var(--muted)}
.dg-tool .gf-card .quiz-cta{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0}
.dg-tool .gf-card-empty{border-style:dashed;background:transparent}
.dg-tool .gf-archetype{background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;padding:16px;margin:0 0 16px}
.dg-tool .gf-archetype-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 6px}
.dg-tool .gf-archetype-title{font-family:var(--h-font);font-size:1.25rem;font-weight:700;margin:0 0 6px;color:var(--text)}
.dg-tool .gf-archetype-desc{font-size:.92rem;line-height:1.55;color:var(--muted);margin:0}
.dg-tool .gf-honesty{font-size:.8rem;color:var(--muted);margin:14px 0 0;line-height:1.5}
@media (max-width:480px){.dg-tool .gf-card:has(.gf-thumb){grid-template-columns:88px 1fr}.dg-tool .gf-thumb{width:88px;height:88px}}

/* ============================================================
   v3.1 — Deal badges + empty states (deal-of-the-week, deal-watch)
   ============================================================ */
.dgv2-deal-top{margin:0 0 10px}
.dgv2-deal-flag{display:inline-block;background:var(--cta);color:#fff;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.dgv2-drops-empty{background:var(--paper);border:1px dashed var(--line);border-radius:16px;padding:20px 18px;margin:14px 0}
.dgv2-drops-empty p{margin:0 0 8px;color:var(--text)}
.dgv2-drops-empty p:last-child{margin-bottom:0}

/* ============================================================
   v3.1 — Legacy drawer variant (template/hidden pages)
   ============================================================ */
.dgv2-drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90}
.dgv2-drawer-glabel{list-style:none;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cta);padding:14px 20px 6px;margin:0}
.dgv2-drawer-sec-link{display:flex;align-items:center;min-height:44px;padding:8px 20px;color:var(--cream);text-decoration:none;font-weight:600}
.dgv2-drawer-sec-link:hover{background:rgba(255,255,255,.06);color:#fff}
.dgv2-drawer-sec-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--cream);cursor:pointer}

/* ============================================================
   v3.1 — Tool apps: focused 760px centered column on desktop.
   All 16 tools + Gear Finder share .dg-tool via the tool-app
   renderer. Mobile stays full-width with gutters.
   ============================================================ */
.dg-tool{width:100%;max-width:760px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.dg-tool input[type="range"]{width:100%;max-width:100%}
.dg-tool .tool-field input,.dg-tool .tool-field select{max-width:100%}

/* ---- Header search overlay ---- */
.dgv2-search{
  position:fixed;z-index:var(--z-drawer);top:0;left:0;right:0;
  background:var(--dark);border-bottom:1px solid var(--line);
  padding:14px 16px;
  transform:translateY(-103%);transition:transform .28s ease;
  visibility:hidden;
}
html.dgv2-search-open .dgv2-search{transform:translateY(0);visibility:visible;}
.dgv2-search-top{display:flex;align-items:center;gap:10px;max-width:760px;margin:0 auto;}
.dgv2-search-top form{flex:1;margin:0;}
.dgv2-search-top input[type="search"]{
  width:100%;min-height:48px;padding:12px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--dark-2);
  color:var(--on-dark);font-size:1rem;-webkit-appearance:none;appearance:none;
}
.dgv2-search-top input[type="search"]::placeholder{color:var(--dark-muted);opacity:1;}
.dgv2-search-top input[type="search"]:focus{outline:2px solid var(--safety);outline-offset:1px;}