/* Shared stylesheet for the 26 static research articles (public/research/*.html).
   Each article used to carry about 800 lines of its own copy of these styles;
   they now all link here, so a style change happens in one place.

   --------------------------------------------------------------------------
   1. Page chrome the articles rely on: tokens, base type, links, the 950px
   header shell, the phone menu, the quiz band and the footer. Moved here
   unchanged from the inline style block each article used to carry. The
   shared header and footer rules live in /nappedia-nav-footer.css and in
   each page's nappedia-universal-chrome block.
   -------------------------------------------------------------------------- */

:root {
  /* Brand Palettes */
  --ink: #0d2530;
  --text: #2c444e;
  --text-dark: #1e353f;
  --muted: #58727d;
  --faint: #8fa5ad;
  --teal: #1f657a;
  --teal-dark: #123e4c;
  --teal-soft: #e8f3f6;
  --coral: #cd4b2f;
  --coral-mid: #cd4b2f;
  --coral-light: #faece9;
  --line: #d2dfe3;
  --line-subtle: #e8eef0;
  --surface: #f4f8f9;
  --bg: #ffffff;

  /* Universal 1: Apple Blue Hyperlink Standard */
  --link-blue: #0066cc;
  --link-blue-hover: #004499;

  /* Universal 2: Action Coral Gradient & Standard Radii */
  --coral-gradient: linear-gradient(135deg, #cd4b2f 0%, #cd4b2f 50%, #b83318 100%);
  --coral-hover-gradient: linear-gradient(135deg, #cd4b2f 0%, #b83318 50%, #b83318 100%);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Universal 3: Two-Font Typography Law (ZERO 3rd fonts) */
  --serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --sans: 'Inter', InterFallback, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Universal 9: Strict 950px Shell */
  --shell-max: 950px;

  /* Physically Grounded Shadows (Zero Neon Halos) */
  --shadow-sm: 0 1px 3px rgba(13, 37, 48, 0.05);
  --shadow-md: 0 4px 12px rgba(13, 37, 48, 0.07);
  --shadow-lg: 0 8px 24px rgba(13, 37, 48, 0.09);

  /* Normalized Typography Scale */
  --fs-xs: 11.5px;
  --fs-sm: 13px;
  --fs-ui: 14px;
  --fs-body: 15px;
  --fs-h3: 18px;
  --fs-h2: 22px;
  --fs-h1: 28px;
  --fs-metric: 26px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.25;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
}

/* Universal 1: Content Hyperlinks */
a {
  color: var(--link-blue);
  text-decoration: underline;
  text-underline-offset: 2.5px;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--link-blue-hover);
  text-decoration: underline;
}

/* Chrome resets for un-underlined navigation and buttons */
.np-nav-link, .m-nav-link, .np-brand, .m-brand, .np-top-strip-link, .m-deal-link, .np-nav-cta, .m-nav-cta, .m-cta-btn-coral, .np-footer-link, .m-footer-link {
  text-decoration: none !important;
}
.np-footer-link:hover, .m-footer-link:hover {
  text-decoration: underline !important;
}

/* Universal 9: 950px Max Shell Invariant */
.m-shell {
  max-width: 950px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
}

/* Universal 4: Zero Section Margin */
.np-top-strip, .np-header, .prefooter-cta-section, .np-footer {
  margin: 0 !important;
}

.mobile-navigation summary {
  list-style: none;
  cursor: pointer;
  font-weight: var(--fw-bold);
  font-size: var(--fs-ui);
  color: var(--ink);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}
.mobile-navigation summary::-webkit-details-marker {
  display: none;
}
.mobile-navigation nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 14px 20px;
  z-index: 99;
}
.mobile-navigation nav a {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  padding: 7px 0;
  border-bottom: 1px solid var(--line-subtle);
  text-decoration: none !important;
}
.mobile-navigation nav a.active {
  color: var(--coral);
}

/* Universal 6: Pre-Footer Sleep Quiz CTA */
.prefooter-cta-section {
  padding: 40px 0 0 0;
}
.sleep-quiz-card {
  background: linear-gradient(135deg, #0e2732 0%, #173f51 100%);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  color: #ffffff;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.quiz-kicker {
  font-size: 11.5px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2cd5c4;
  margin-bottom: 6px;
  display: inline-block;
}
.quiz-headline {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin-bottom: 8px;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.quiz-body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: #dce9ec;
  max-width: 620px;
  margin: 0 auto 18px;
}
.quiz-action-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* Universal 2: Action Coral Button (6px Radius) */
.m-cta-btn-coral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  background: var(--coral-gradient);
  color: #ffffff !important;
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(205, 75, 47, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none !important;
}
.m-cta-btn-coral:hover {
  background: var(--coral-hover-gradient);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(205, 75, 47, 0.45);
}
.quiz-ghost-link {
  color: #dce9ec !important;
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.quiz-ghost-link:hover {
  color: #ffffff !important;
}
.quiz-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #9cb5be;
}
.quiz-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Footer */
.m-footer {
  background: #0d2530;
  color: #cbd5e1;
  padding: 40px 0 24px;
  margin-top: 40px !important;
  border-top: 1px solid #1e3a47;
  font-size: 13px;
}
/* Footer top row and text, matching the home page and the brand review footer */
.m-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.m-footer-tagline {
  max-width: 480px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #728f9d;
}
.m-footer-bottom {
  font-size: 12px;
  line-height: 1.6;
  color: #617a86;
}
.m-footer-bottom-copy {
  color: #88a2ae;
  font-weight: 600;
}
.m-footer-bottom-tagline { color: #88a2ae; }

/* --------------------------------------------------------------------------
   2. Study layout. The brand review layout from the Nappedia design system
   (StandardCommand templates/brand-review): 1050px grid with a 240px icon
   table of contents and reading-progress ring, blue chevron breadcrumb,
   small Georgia title, byline, six-box fact strip, a verdict card with four
   key-number tiles, then one white card per section. Values are copied from
   the compiled brand review so the two families match. Built by
   scripts/retemplate-research-studies.mjs; the scroll script is
   /research-study.js. Spacing has one owner per gap: flex gaps and container
   padding, never a margin on a child (checked by scripts/spacing-gate.mjs).
   -------------------------------------------------------------------------- */

/* Sand page surface (decision D16). The universal chrome block sets html
   and body to white with !important, so this override needs it too. */
html body { background-color: #f7f5f0 !important; }

/* Design system tokens, scoped so the older chrome palette above keeps its
   own values for the header, quiz band and footer. */
.rs-page {
  --ink: #202b28;
  --ink-deep: #141f1b;
  --heading: #173f51;
  --body-slate: #2c424d;
  --muted: #58625b;
  --sub-text: #556b63;
  --white: #ffffff;
  --surface-muted: #fafaf8;
  --line: #ded8cb;
  --line-subtle: #e8e3d8;
  --sage-border: #e5ece8;
  --green: #245c4f;
  --green-dark: #19483d;
  --toc-active: #e8f2ec;
  --toc-hover: #f0f5f2;
  --strengths-tint: #f2f8f5;
  --link-blue: #0066cc;
  --link-blue-hover: #004499;
  --serif: Georgia, "Times New Roman", serif;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-card: 10px;
  --radius-lg: 12px;
  color: var(--ink);
}
.rs-page [id] { scroll-margin-top: 86px; }

.page-layout {
  max-width: 1050px;
  width: calc(100% - 48px);
  margin: 0 auto;
  padding: 0 0 32px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* Table of contents: sticky left box with icons and a reading-progress ring */
.toc-sidebar {
  position: sticky;
  top: 80px;
  padding-top: 12px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  scroll-padding-top: 72px;
  scrollbar-width: thin;
  scrollbar-color: #d8ded9 transparent;
}
.toc-details summary { display: none; }
.toc-details:not([open]) > *:not(summary) { display: none !important; }
.toc-box {
  display: block;
  background: var(--white);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  box-shadow: 0 1px 4px rgba(32, 43, 40, 0.03);
}
.toc-header-wrap {
  padding: 4px 4px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #edf1ef;
}
.toc-brand-follower { display: flex; align-items: center; gap: 10px; }
.toc-logo-icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green);
}
.nappedia-mini-logo { width: 16px; height: 16px; }
.toc-progress-ring {
  position: absolute;
  inset: 0;
  width: 28px;
  height: 28px;
  transform: rotate(-90deg);
}
.toc-progress-ring .ring-bg { fill: none; stroke: #e4ebe7; stroke-width: 2.5; }
.toc-progress-ring .ring-fill {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.15s ease, stroke 0.15s ease;
}
.toc-brand-follower.completed .ring-fill { stroke: #cd4b2f; }
.toc-header-text { display: flex; flex-direction: column; }
.toc-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-dark);
}
.toc-scroll-pct { font-size: 11px; color: var(--muted); }
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.toc-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.52;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.toc-list a svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--muted);
  stroke-width: 1.75;
  transition: color 0.12s ease;
}
.toc-list a:hover {
  background: var(--toc-hover);
  color: var(--green-dark);
  transform: translateX(2px);
}
.toc-list a:hover svg { color: var(--green); }
.toc-list a.active {
  background: var(--toc-active);
  color: var(--green-dark);
  font-weight: 700;
  transform: none;
}
.toc-list a.active svg { color: var(--green); stroke-width: 2.2; }
.toc-list a:focus-visible,
.toc-details summary:focus-visible {
  outline: 2px solid var(--link-blue);
  outline-offset: 1px;
}

/* Main column: head, verdict card, section cards */
.main-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rs-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
/* One line at every width: a long topic name ends in an ellipsis instead of
   wrapping, which keeps the title within 70px of the header on phones. The
   top padding sits inside the bar so the bar itself starts at the header
   edge, as the design gate checks. */
.clean-breadcrumbs {
  padding-top: 12px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}
.clean-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  flex-shrink: 0;
  color: var(--link-blue);
  font-weight: 400;
  text-decoration: none;
}
.clean-breadcrumbs a:hover { text-decoration: underline; color: var(--link-blue-hover); }
.clean-breadcrumbs .crumb-sep { display: inline-flex; flex-shrink: 0; color: var(--muted); }
.clean-breadcrumbs [aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--heading);
  text-wrap: balance;
}
.byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.byline a { color: var(--ink-deep); font-weight: 600; text-decoration: none; }
.byline a:hover { text-decoration: underline; }
.byline-photo { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.byline-initials {
  display: inline-grid;
  place-items: center;
  background: var(--green);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.rs-source {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.rs-source strong { color: var(--ink-deep); font-weight: 600; }
.rs-source a { color: var(--link-blue); text-decoration: none; overflow-wrap: anywhere; }
.rs-source a:hover { text-decoration: underline; }

/* Six-box fact strip: 3 x 2, 6 across at 880 to 1023px, 2 across on phones */
.hero-spec-grid.fact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.hero-spec-grid.fact-strip .hero-spec-box {
  background: var(--white);
  border: 1px solid var(--sage-border);
  border-radius: var(--radius);
  padding: 8px 6px;
  text-align: center;
  align-items: center;
  gap: 4px;
}
.hero-spec-grid.fact-strip .hero-spec-box svg { color: var(--green); }
.hero-spec-grid.fact-strip .hero-spec-label { letter-spacing: 0.05em; }
.hero-spec-grid.fact-strip .hero-spec-val { color: var(--ink-deep); }

/* Verdict card: the key takeaway on the left, four key numbers on the right */
.product-hero-card {
  background: var(--white);
  border: 1px solid var(--sage-border);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: 0 1px 4px rgba(23, 63, 81, 0.04);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.hero-data-col,
.hero-visual-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-wrap: anywhere;
}
.rs-kicker,
.rs-tiles-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
}
.rs-tiles-title { color: var(--muted); }
.hero-verdict-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--heading);
  text-wrap: balance;
}
.hero-verdict-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-slate);
}
.hero-verdict-text strong { color: var(--ink-deep); }
.hero-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hero-spec-box {
  background: var(--surface-muted);
  border: 1px solid var(--sage-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hero-spec-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-spec-val {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

/* One white card per section */
.article-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.section-wrap {
  margin: 0 !important;
  padding: 28px 30px;
  background: var(--white);
  border: 1px solid var(--sage-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(23, 63, 81, 0.03);
  overflow-x: clip;
  max-width: 100%;
}
.rs-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.h2-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-subtle);
}
h2.section-heading {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-deep);
  text-wrap: balance;
}
.rs-section h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-deep);
}
.rs-section p,
.rs-section li {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.rs-section ul {
  margin: 0;
  padding-left: 22px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rs-section li { line-height: 1.52; }
.rs-section li::marker { color: var(--muted); }
.rs-section strong,
.rs-section b { color: var(--ink-deep); font-weight: 700; }
.rs-section a {
  color: var(--link-blue);
  text-decoration: underline;
  text-underline-offset: 2.5px;
  overflow-wrap: anywhere;
}
.rs-section a:hover { color: var(--link-blue-hover); }
.rs-section a:focus-visible,
.clean-breadcrumbs a:focus-visible,
.rs-source a:focus-visible,
.byline a:focus-visible {
  outline: 2px solid var(--link-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Quiet callout: comparison, limitations, citation.
   Neutral fill only, with no one-sided coloured bars. */
.ra-callout {
  padding: 20px;
  background: var(--surface-muted);
  border: 1px solid var(--sage-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Any other table a study carries */
.ra-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius);
}
.ra-table-wrap table { width: 100%; border-collapse: collapse; }
.ra-table-wrap th,
.ra-table-wrap td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #edf1ef;
  font-size: 13px;
  line-height: 1.52;
  color: var(--ink);
}
.ra-table-wrap th { width: 34%; background: #f4f7f5; font-weight: 700; color: var(--ink-deep); }
.ra-table-wrap tr:last-child th,
.ra-table-wrap tr:last-child td { border-bottom: 0; }

/* Two-column comparison inside a callout */
.ra-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.ra-compare-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-section .ra-compare-col p { font-size: 15px; line-height: 1.55; }
.rs-section .ra-compare-col .ra-compare-head { font-weight: 700; color: var(--ink-deep); }

/* Citation */
.rs-section .ra-cite-text {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-deep);
  overflow-wrap: anywhere;
}
.ra-cite-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.ra-copy-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #cfd8d4;
  border-radius: var(--radius-sm);
  background: var(--white);
  font: 600 14px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  cursor: pointer;
}
.ra-copy-btn:hover { border-color: var(--green-dark); }
.ra-copy-btn:focus-visible { outline: 2px solid var(--link-blue); outline-offset: 2px; }

/* Related research list */
.rs-section .ra-related { list-style: none; padding: 0; gap: 12px; }
.ra-related li { display: flex; flex-direction: column; gap: 4px; }
.rs-section .ra-related .ra-related-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Frequently asked questions */
.rs-faq { display: flex; flex-direction: column; gap: 14px; }
.rs-faq-item { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1023px) and (min-width: 880px) {
  .hero-spec-grid.fact-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Under 980px the table of contents folds into a disclosure above the content */
@media (max-width: 980px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 32px);
    padding: 0 0 24px;
    gap: 20px;
  }
  .toc-sidebar { position: static; max-height: none; overflow: visible; order: 2; padding-top: 0; }
  .main-column { display: contents; }
  .rs-head { order: 1; }
  .product-hero-card { order: 3; }
  .article-cards-stack { order: 4; }
  .toc-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 16px;
    background: var(--white);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .toc-details summary::-webkit-details-marker { display: none; }
  .toc-summary-left { display: flex; align-items: center; gap: 8px; }
  .toc-summary-left svg { color: var(--green); }
  .toc-summary-chevron { color: var(--muted); transition: transform 0.15s ease; }
  .toc-details[open] .toc-summary-chevron { transform: rotate(180deg); }
  .toc-details[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: #efebe4;
  }
  .toc-details[open] .toc-box {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .toc-header-wrap { display: none; }
  .toc-list a { min-height: 44px; }
}

@media (max-width: 879px) {
  .hero-spec-grid.fact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .clean-breadcrumbs a { min-height: 44px; }
  .article-cards-stack { gap: 20px; }
  .section-wrap { padding: 20px 16px; }
}

@media (max-width: 640px) {
  .hero-spec-grid.fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-callout { padding: 16px; }
  .ra-compare-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .product-hero-card { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .toc-list a,
  .toc-progress-ring .ring-fill,
  .toc-summary-chevron { transition: none; }
}