/* ==========================================================================
   RTD BRAND SYSTEM - shared by every page.
   Showroom dark: near-black ground, photography forward, red as the accent.
   Edit the dials at the top; every page picks the change up.
   ========================================================================== */

:root {
  /* ---- BRAND DIALS: edit these first ---- */
  --heat:       #F40009;   /* brand red for accents on the dark ground */
  --heat-soft:  #ff5257;   /* lifted red for small text links on dark */
  --heat-deep:  #B0000B;   /* darker red, safe for text on light surfaces */
  --ember:      #D6000F;   /* button red: passes white text */
  --bg:         #0b0b0c;   /* page ground */
  --bg-2:       #121214;   /* alternate section ground */
  --surface:    #141416;   /* cards and panels on the dark ground */
  --line-d:     #232326;   /* hairline on dark */
  --line-d2:    #2a2a2e;   /* stronger hairline on dark */
  --text:       #e6e6e6;   /* body text on dark */
  --text-2:     #a5a5a5;   /* muted text on dark */
  --text-3:     #8a8a8a;   /* fine print on dark */
  --ink:        #131313;   /* text on light surfaces (the form card) */
  --paper:      #ffffff;   /* the one light surface: the form card */
  --line:       #e5e5e5;   /* hairline on light surfaces */

  /* Temperature ramp, 0F -> 50F (validated: lightness rises with temp) */
  --t0:#0a3350; --t1:#10486d; --t2:#1a628f; --t3:#2b83b3; --t4:#57a8cf; --t5:#a9d8ea;

  /* ---- TYPE DIALS ---- */
  --body:  "Barlow", Arial, sans-serif;                    /* headings and text */
  --label: "Barlow Condensed", "Arial Narrow", sans-serif; /* small caps labels */

  /* ---- MOTION DIALS ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);  /* entrances, presses: fast start */
}

* { box-sizing: border-box; margin: 0; }
/* The hidden attribute must always win, even over display rules like .card form */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.shell { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 48px); }
section { padding: clamp(72px, 9vw, 120px) 0; }
section.hero, section.page-hero { padding-top: clamp(36px, 4.5vw, 64px); }
img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--body); font-weight: 700; color: #fff;
  letter-spacing: -0.015em; line-height: 1.08; text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 16px; }
h3 { font-size: 1.15rem; }

.kicker {
  font-family: var(--label); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--heat);
  margin-bottom: 16px;
}
.sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: #b3b3b3; max-width: 54ch; }
.sub b, p b { color: #fff; }
.sub, .lead, .prose p, .chip p, .model p { text-wrap: pretty; }
.note { font-size: 0.85rem; color: var(--text-3); }

a { color: var(--text); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--heat); outline-offset: 2px; border-radius: 4px;
}
.card :focus-visible { outline-color: var(--heat-deep); }

/* Buttons: rounded, sentence case, white on the deep red */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0; text-decoration: none;
  padding: 15px 30px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--ember); color: #fff;
  transition: transform 150ms var(--ease-out), background-color 150ms ease;
}
.btn:active { transform: scale(0.97); }
@media (hover:hover) and (pointer:fine) {
  .btn:hover { background: #B0000B; }
}

/* ==========================================================================
   SECTION: ADVISORY STRIP + HEADER
   ========================================================================== */
.advisory {
  background: #000; color: var(--text-2);
  font-family: var(--label); font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-align: center; padding: 9px 16px;
}
.advisory a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .adv-mail { display: none; } }

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 12, 0.92); backdrop-filter: blur(10px);
}
/* Scroll edge effect: the divider appears only once content passes underneath */
header.site::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: var(--line-d); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  opacity: 0; transition: opacity 200ms ease;
}
header.site.scrolled::after { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  header.site { background: var(--bg); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  header.site { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--text); }
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: #fff; color: var(--ink); padding: 12px 20px;
  font-family: var(--label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }
header.site .shell { display: flex; align-items: center; gap: 28px; height: 74px; }
.mark { margin-right: auto; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.mark .logo { height: 26px; width: auto; display: block; }
.mark span { font-family: var(--label); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
header.site nav[aria-label="Main"] { display: flex; gap: 26px; }
header.site nav a {
  font-family: var(--label); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); text-decoration: none;
  transition: color 150ms ease;
}
@media (hover:hover) and (pointer:fine) { header.site nav a:hover { color: var(--heat-soft); } }
header.site .btn { padding: 11px 22px; font-size: 0.95rem; }
@media (max-width: 860px) { header.site nav[aria-label="Main"], .mark span { display: none; } }

/* Mobile menu: a plain disclosure, works with no JS */
.mnav { display: none; position: relative; }
@media (max-width: 860px) { .mnav { display: block; } }
.mnav summary {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px; cursor: pointer; color: var(--text);
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.mnav summary:active { transform: scale(0.92); }
.mnav summary::-webkit-details-marker { display: none; }
/* Hamburger drawn from three real bars so open can morph it into a close mark */
.mnav .bars { position: relative; width: 22px; height: 2px; background: currentColor; transition: background-color 120ms ease; }
.mnav .bars::before, .mnav .bars::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px;
  background: currentColor; transition: transform 200ms var(--ease-out);
}
.mnav .bars::before { transform: translateY(-7px); }
.mnav .bars::after { transform: translateY(7px); }
.mnav[open] summary { background: #1c1c1f; }
.mnav[open] .bars { background: transparent; }
.mnav[open] .bars::before { transform: rotate(45deg); }
.mnav[open] .bars::after { transform: rotate(-45deg); }
.mnav-panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 70;
  background: var(--surface); border: 1px solid var(--line-d2); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); padding: 6px; min-width: 240px;
  transform-origin: top right;
}
.mnav[open] .mnav-panel { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
@starting-style {
  .mnav[open] .mnav-panel { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
.mnav-panel a {
  display: block; padding: 13px 16px; border-radius: 8px;
  font-family: var(--body); font-weight: 500; font-size: 1.02rem;
  color: var(--text); text-decoration: none;
  transition: background-color 100ms ease;
}
@media (hover:hover) and (pointer:fine) { .mnav-panel a:hover { background: #1e1e21; } }

/* ==========================================================================
   SECTION: HERO - the product photo does the talking
   ========================================================================== */
.hero { background: var(--bg); }
.hero .grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: clamp(36px,5vw,70px); align-items: center; }
@media (max-width: 900px) { .hero .grid { grid-template-columns: 1fr; } }
h1 .hot { color: var(--heat); }
.hero .sub { margin-top: 24px; }
.hero .acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.alt-contact { margin-top: 16px; font-size: 0.95rem; color: var(--text-3); }
.alt-contact a { color: var(--text); }
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; height: auto; border-radius: 16px; display: block; }
.hero-photo figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--text-3); }

/* ==========================================================================
   SECTION: PHOTOS - the actual box
   ========================================================================== */
.photos { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.photos .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 30px; }
@media (max-width: 820px) { .photos .grid { grid-template-columns: 1fr 1fr; } .photos .grid figure:first-child { grid-column: 1 / -1; } }
.photos figure { margin: 0; }
.photos .ph {
  width: 100%; height: 340px; object-fit: cover; display: block;
  border-radius: 16px; border: 1px solid var(--line-d);
}
@media (max-width: 560px) { .photos .ph { height: 240px; } }
.photos figcaption { margin-top: 10px; font-size: 0.88rem; font-weight: 500; color: var(--text-3); }

/* ==========================================================================
   SECTION: RANGE - pick a number, it holds
   ========================================================================== */
.range { background: var(--bg-2); color: var(--text-2); }
.range .head { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; margin-bottom: 44px; }
@media (max-width: 820px) { .range .head { grid-template-columns: 1fr; gap: 14px; } }
.range .head p { color: var(--text-2); max-width: 52ch; }
.meter { position: relative; }
.meter .bar { position: relative; height: 26px; border-radius: 8px;
  background: linear-gradient(90deg, var(--t0) 0%, var(--t1) 20%, var(--t2) 40%, var(--t3) 64%, var(--t4) 80%, var(--t5) 100%); }
.meter .mark32 { position: absolute; top: -6px; bottom: -6px; left: 64%; width: 2px; background: var(--heat); transform: translateX(-50%); }
.meter .ticks { position: relative; height: 52px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.meter .tick { position: absolute; top: 0; width: max-content; transform: translateX(-50%); text-align: center; }
.meter .tick.s { transform: none; text-align: left; }
.meter .tick.e { transform: translateX(-100%); text-align: right; }
.meter .tick b { display: block; font-family: var(--body); font-weight: 700; font-size: 1rem; color: #fff; }
.meter .tick i { font-style: normal; font-family: var(--label); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 560px) {
  .meter .tick i { display: none; }
  .meter .ticks { height: 30px; }
}
.meter .zones { display: flex; justify-content: space-between; border-top: 1px solid var(--line-d2); padding-top: 14px; font-size: 0.95rem; color: var(--text-2); }
.meter .zones b { color: #fff; }

/* ==========================================================================
   SECTION: MODELS - two sizes, real dimensions
   ========================================================================== */
.models .lead { max-width: 62ch; color: var(--text-2); margin-bottom: 36px; }
.models .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .models .grid { grid-template-columns: 1fr; } }
.model { border: 1px solid var(--line-d2); border-radius: 16px; padding: 26px 28px; background: var(--surface); }
.model .top { display: flex; justify-content: space-between; align-items: baseline; }
.model .top b { font-family: var(--body); font-weight: 700; font-size: 1.35rem; color: #fff; }
.model .top span { font-family: var(--label); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--heat); }
.model p { color: var(--text-2); font-size: 0.95rem; margin: 10px 0 16px; }
.model dl { border-top: 1px solid #3a3a3e; }
.model dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-d); font-size: 0.95rem; }
.model dt { color: var(--text-3); }
.model dd { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.models .fine { margin-top: 18px; font-size: 0.82rem; color: var(--text-3); }

/* Model card link to its page; also the options highlights link */
.model .more, .options .more {
  display: inline-block; margin-top: 16px;
  font-family: var(--label); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--heat-soft); text-decoration: none;
  border-bottom: 2px solid var(--heat);
  padding-bottom: 2px;
  transition: color 150ms ease;
}
@media (hover:hover) and (pointer:fine) { .model .more:hover, .options .more:hover { color: #fff; } }
.options .optgroup.solo { max-width: 660px; margin-top: 30px; }
.options .more { margin-top: 24px; }

/* ==========================================================================
   SECTION: WHAT COMES STANDARD - a spec sheet, not a card grid
   ========================================================================== */
.build { background: var(--bg); }
.speclist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 16px; }
@media (max-width: 820px) { .speclist { grid-template-columns: 1fr; } }
.speclist div { padding: 18px 0; border-bottom: 1px solid var(--line-d); }
.speclist b { display: block; font-size: 1rem; color: #fff; }
.speclist span { color: var(--text-2); font-size: 0.95rem; }

/* ==========================================================================
   SECTION: QUOTE - the one thing this page is for
   ========================================================================== */
.quote { background: var(--bg-2); }
.quote .grid { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: clamp(32px,5vw,64px); align-items: start; }
@media (max-width: 900px) { .quote .grid { grid-template-columns: 1fr; } }
.quote .sub { color: #b3b3b3; }
.quote .visit { margin-top: 30px; }
.quote .visit div { padding: 13px 0; border-top: 1px solid var(--line-d2); }
.quote .visit dt { font-family: var(--label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.quote .visit dd { margin: 0; font-weight: 500; color: var(--text); }
.quote .visit a { color: #fff; }

/* The form card: the one light surface on the page */
.card { background: var(--paper); border-radius: 16px; padding: clamp(22px,3vw,32px); color: var(--ink); }
.card form { display: grid; gap: 14px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .frow { grid-template-columns: 1fr; } }
.card label { display: grid; gap: 6px; font-family: var(--label); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6f6f6f; }
.card label i { font-style: normal; text-transform: none; letter-spacing: 0.02em; }
.card input, .card select, .card textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 13px; width: 100%;
}
.card input:focus, .card select:focus, .card textarea:focus { border-color: var(--heat-deep); outline: 3px solid var(--heat-deep); outline-offset: 1px; }
.card textarea { resize: vertical; min-height: 74px; }
.card .btn { width: 100%; }
.card .note { margin-top: 10px; color: var(--text-3); }
.quote .card .note { color: #6f6f6f; }
.card + .note, .quote .note { color: var(--text-3); }

/* Quote form success state: eases in when the JS inserts it */
.card .done { display: grid; gap: 10px; padding: 6px 0; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
@starting-style {
  .card .done { opacity: 0; transform: translateY(6px); }
}
.card .done b { font-family: var(--body); font-weight: 700; font-size: 1.4rem; color: var(--heat-deep); }
.card .done b:focus { outline: none; }
.card .done p { color: #565656; font-size: 0.97rem; }

/* Honeypot: invisible to people, tempting to bots */
.hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; margin: 0; }

/* ==========================================================================
   SECTION: FOOTER
   ========================================================================== */
footer.site { background: #000; color: var(--text-3); padding: 34px 0 44px; font-size: 0.9rem; }
footer.site .shell { display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: center; justify-content: space-between; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 22px; }
footer.site a { color: #cfcfcf; text-decoration: none; font-family: var(--label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; transition: color 150ms ease; }
@media (hover:hover) and (pointer:fine) { footer.site a:hover { color: var(--heat-soft); } }
footer.site .fine { width: 100%; font-size: 0.78rem; color: var(--text-3); }

/* ==========================================================================
   MODEL PAGES
   ========================================================================== */
.page-hero { background: var(--bg); }
.page-hero .grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: clamp(36px,5vw,70px); align-items: center; }
@media (max-width: 900px) { .page-hero .grid { grid-template-columns: 1fr; } }
.page-hero .sub { margin-top: 24px; }
.page-hero .acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* Dimensions card in the model hero */
.dims { background: var(--surface); border: 1px solid var(--line-d2); border-radius: 16px; padding: 26px 28px; }
.dims h3 { margin-bottom: 6px; }
.dims .hint { font-size: 0.88rem; color: var(--text-3); margin-bottom: 14px; }
.dims dl { border-top: 1px solid #3a3a3e; }
.dims dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-d); font-size: 0.98rem; }
.dims dt { color: var(--text-3); }
.dims dd { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }

/* Drawn-to-scale comparison */
.scale { background: var(--bg-2); color: var(--text-2); }
.scale .lead { color: var(--text-2); max-width: 56ch; margin-bottom: 38px; }
.scale .row { display: grid; gap: 26px; }
.scale .item small {
  display: block; font-family: var(--label); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px;
}
.scale .item small b { color: #fff; }
.scale .bar {
  height: 54px; border-radius: 8px; position: relative;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 14px;
  font-family: var(--body); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem;
}
.scale .bar.self { background: var(--ember); color: #fff; }
.scale .bar.other { background: #26262a; color: var(--text); text-decoration: none; transition: background-color 150ms ease; }
@media (hover:hover) and (pointer:fine) { a.bar.other:hover { background: #313136; } }
.scale .foot { margin-top: 26px; font-size: 0.9rem; color: var(--text-3); }

/* Included, two columns */
.included { background: var(--bg-2); }
.included ul { margin: 26px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; }
@media (max-width: 640px) { .included ul { grid-template-columns: 1fr; } }
.included li { padding-left: 22px; position: relative; font-size: 0.98rem; color: var(--text); }
.included li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 12px; height: 3px; background: var(--heat); }

/* Options with published prices */
.options .groups { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; margin-top: 34px; }
@media (max-width: 860px) { .options .groups { grid-template-columns: 1fr; } }
.optgroup h3 { margin-bottom: 12px; }
.optgroup dl { margin: 0; border-top: 1px solid #3a3a3e; }
.optgroup dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line-d); font-size: 0.95rem; }
.optgroup dt { color: var(--text-2); }
.optgroup dd { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.options .sub { margin-bottom: 6px; }
.options .fine { margin-top: 22px; font-size: 0.82rem; color: var(--text-3); max-width: 70ch; }

/* Cross-link to the other model */
.xlink { padding-top: 0; }
.xlink a {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line-d2); border-radius: 16px; padding: 26px 30px;
  text-decoration: none; color: var(--text); background: var(--surface);
  transition: transform 150ms var(--ease-out), border-color 150ms ease;
}
.xlink a:active { transform: scale(0.99); }
.xlink b { font-family: var(--body); font-weight: 700; font-size: 1.25rem; color: #fff; }
.xlink span { font-family: var(--label); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--heat-soft); }
@media (hover:hover) and (pointer:fine) { .xlink a:hover { border-color: #4a4a4f; } }

/* ==========================================================================
   NAV DROPDOWN
   ========================================================================== */
.dd { position: relative; }
.dd .dd-top { display: inline-flex; align-items: center; gap: 6px; }
.dd .dd-top span { display: inline-block; transition: transform 160ms var(--ease-out); }
.dd:hover .dd-top span, .dd:focus-within .dd-top span { transform: rotate(-180deg); }
.dd-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 14px; z-index: 60;
  /* Exit: quick fade, then visibility flips so the closed menu is untabbable */
  visibility: hidden; opacity: 0;
  transition: opacity 100ms ease, visibility 0s linear 100ms;
}
.dd-menu-in {
  background: var(--surface); border: 1px solid var(--line-d2); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); padding: 6px; min-width: 172px;
  transform-origin: 50% 0;
  transform: translateY(-5px) scale(0.98);
  transition: transform 100ms ease;
}
.dd:hover .dd-menu, .dd:focus-within .dd-menu {
  visibility: visible; opacity: 1;
  transition: opacity 160ms var(--ease-out), visibility 0s;
}
.dd:hover .dd-menu-in, .dd:focus-within .dd-menu-in {
  transform: none;
  transition: transform 160ms var(--ease-out);
}
.dd-menu-in a { display: block; padding: 11px 16px; border-radius: 8px; white-space: nowrap; transition: background-color 100ms ease; }
@media (hover:hover) and (pointer:fine) { .dd-menu-in a:hover { background: #1e1e21; } }

.quick-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px; }
.quick-links a { color: #fff; font-weight: 500; }

/* ==========================================================================
   LONG-FORM UTILITY PAGES (privacy, 404)
   ========================================================================== */
.prose .shell { max-width: 820px; }
.prose h2 { font-size: 1.35rem; margin: 36px 0 10px; }
.prose p, .prose li { color: var(--text-2); }
.prose p { margin: 10px 0; }
.prose ul { padding-left: 22px; margin: 10px 0; }
.prose li b { color: #fff; }
.prose a { color: #fff; }
.prose .fine { font-size: 0.85rem; color: var(--text-3); }

/* ==========================================================================
   REDUCED MOTION: keep the fades that aid comprehension, drop the movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dd .dd-top span { transition: none; }
  .dd-menu-in { transform: none; transition: none; }
  .mnav .bars, .mnav .bars::before, .mnav .bars::after { transition: none; }
  .mnav summary { transition: background-color 150ms ease; }
  .mnav[open] .mnav-panel { transition: opacity 180ms ease; }
  .card .done { transition: opacity 250ms ease; }
  @starting-style {
    .mnav[open] .mnav-panel, .card .done { transform: none; }
  }
}