/* dccbox.com: the look shared by every page. */

:root {
  --bg: #0a1220; --panel: rgba(17,27,46,.85); --ink: #f1f5f9; --muted: #a3b1c6; --line: rgba(148,163,184,.18);
  --blue: #2f7cf6; --yellow: #facc15; --red: #e5322d; --green: #22c55e;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}
h1, h2, h3 { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; line-height: 1.15; }
a { color: #8fbaff; }
th { text-align: left; }
.ic { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---- top ---- */
.nav { position: absolute; inset: 0 0 auto; z-index: 2; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.logo img { display: block; width: auto; height: 68px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
@media (max-width: 600px) { .logo img { height: 54px; } }
.nav nav { display: flex; gap: 22px; font-weight: 600; }
.nav nav a { color: var(--ink); text-decoration: none; opacity: .9; }
.nav nav a:hover { opacity: 1; text-decoration: underline; }

.hero {
  position: relative; min-height: min(88vh, 760px); display: flex; align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(10,18,32,.35) 0%, rgba(10,18,32,0) 30%, rgba(10,18,32,.2) 60%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10,18,32,.9) 0%, rgba(10,18,32,.55) 45%, rgba(10,18,32,0) 80%),
    url(img/hero-drive.jpg) center 40% / cover no-repeat, #1c2748;
}
.hero .wrap { padding-top: 140px; padding-bottom: 72px; width: 100%; }
.hero h1 { margin: 0; max-width: 13ch; font-size: clamp(44px, 7vw, 84px); font-weight: 800; letter-spacing: -.02em; text-shadow: 0 3px 24px rgba(0,0,0,.45); }
.hero h1 em { font-style: normal; color: var(--yellow); }
/* The planned release, and the days left until 31 January 2027 (counted by the page each day). */
.release { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 0 22px; padding: 8px 18px; border-radius: 999px; background: rgba(10,18,32,.72); border: 1px solid rgba(250,204,21,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 16px; font-weight: 600; color: #f1f5f9; }
.release-when { color: var(--yellow); font-weight: 800; letter-spacing: .02em; }
.release-count b { font-size: 20px; font-variant-numeric: tabular-nums; color: #fff; }
.intro.release-again { margin-top: 1.45em; } /* a line between it and the words above */
.release-again b { color: #fff; font-variant-numeric: tabular-nums; }
/* Where to buy it, just above the planned release. */
.hero p.shops { max-width: 40em; margin: 0 0 12px; font-size: 17px; font-weight: 600; color: #e2e8f0; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.intro.shops-again { margin-top: 1.45em; }
.hero p.lead { max-width: 36em; margin: 20px 0 0; font-size: clamp(18px, 2.2vw, 22px); color: #e2e8f0; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.badges li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(10,18,32,.7); border: 1px solid var(--line); font-size: 15px; backdrop-filter: blur(8px); }
.badges li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(34,197,94,.7); }
.cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 16px 28px; border-radius: 12px; background: var(--yellow); color: #1a1405; font-weight: 800; font-size: 18px; text-decoration: none; box-shadow: 0 10px 30px rgba(250,204,21,.25); }
.cta:hover { filter: brightness(1.05); }

section { padding: 72px 0; }
.kicker { margin: 0 0 8px; color: var(--yellow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
h2 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 44px); font-weight: 800; }
.intro { max-width: 44em; color: var(--muted); font-size: 19px; margin: 0; }

/* ---- three steps ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 34px; counter-reset: step; }
.step { padding: 26px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%;
  background: linear-gradient(180deg, #3b82f6, #1d5fd8); font-weight: 800; font-size: 20px;
}
.step h3 { margin: 0 0 6px; font-size: 21px; }
.step p { margin: 0; color: var(--muted); }

/* ---- features ---- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 34px; }
.feature { padding: 26px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.feature .head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.feature .badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(47,124,246,.16); color: #93c5fd; }
.feature.yellow .badge { background: rgba(250,204,21,.14); color: var(--yellow); }
.feature.red .badge { background: rgba(229,50,45,.16); color: #fca5a5; }
.feature.green .badge { background: rgba(34,197,94,.14); color: #86efac; }
.feature h3 { margin: 0; font-size: 21px; }
.feature p { margin: 0; color: var(--muted); }

/* The side view (data-view="side", set up by the page's script): the headings down the left, the chosen box on the
   right. The box is placed over the headings' rows and taken out of the flow, so every box is exactly as tall as the
   list, top and bottom in line; its screenshot takes whatever room the words leave. Up to 900 pixels wide, each box opens under
   its heading. The screenshots only show in this view. */
.feat-shot { display: none; }
.features.is-side { position: relative; grid-template-columns: minmax(260px, 320px) 1fr; gap: 10px 36px; align-items: stretch; }
.feat-tab { grid-column: 1; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 16px 12px 12px;
  border: 1px solid transparent; border-radius: 14px; background: none; color: var(--muted); font: inherit; font-size: 17px;
  font-weight: 600; text-align: left; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.feat-tab:hover { background: rgba(148,163,184,.08); color: var(--ink); }
.feat-tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.feat-tab .badge { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(47,124,246,.16); color: #93c5fd; }
.feat-tab .badge .ic { width: 24px; height: 24px; }
.feat-tab.yellow .badge { background: rgba(250,204,21,.14); color: var(--yellow); }
.feat-tab.red .badge { background: rgba(229,50,45,.16); color: #fca5a5; }
.feat-tab.green .badge { background: rgba(34,197,94,.14); color: #86efac; }
.feat-name { flex: 1; line-height: 1.3; }
.feat-chev { flex: none; width: 9px; height: 9px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); opacity: 0; transition: opacity .15s, transform .15s; }
.feat-tab[aria-expanded="true"] { background: var(--panel); border-color: var(--line); color: var(--ink); box-shadow: inset 3px 0 0 var(--yellow); }
.feat-tab[aria-expanded="true"] .feat-chev { opacity: .7; }
.features.is-side .feature { grid-column: 2; position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: 30px 34px 0; animation: feat-in .25s ease-out; }
.features.is-side .feature[hidden] { display: none; }
.features.is-side .feature .head { gap: 16px; margin-bottom: 14px; }
.features.is-side .feature .badge { width: 56px; height: 56px; border-radius: 16px; }
.features.is-side .feature .badge .ic { width: 28px; height: 28px; }
.features.is-side .feature h3 { font-size: 27px; }
.features.is-side .feature > p { font-size: 17px; line-height: 1.6; color: #cbd5e1; }
.features.is-side .feature > p + p { margin-top: 10px; }
.features.is-side .listen { margin-top: 12px; padding-top: 12px; }
/* The screenshot: flush with the box's sides and bottom, cut to fit, its top left corner always in view. */
.features.is-side .feat-shot { display: block; flex: 1 1 0; min-height: 120px; margin: 22px -34px 0; overflow: hidden;
  border-top: 1px solid var(--line); background: #0b1322; }
.feat-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
@keyframes feat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .features.is-side .feature { animation: none; } .feat-tab, .feat-chev { transition: none; } }
@media (max-width: 900px) {
  .features.is-side { display: flex; flex-direction: column; gap: 6px; }
  .feat-tab { min-height: 0; padding: 10px 16px 10px 10px; border-color: var(--line); background: var(--panel); color: var(--ink); }
  .feat-tab .badge { width: 42px; height: 42px; }
  .feat-chev { opacity: .6; transform: rotate(135deg); margin-right: 4px; }
  .feat-tab[aria-expanded="true"] { border-radius: 14px 14px 0 0; border-bottom-color: transparent; box-shadow: none; }
  .feat-tab[aria-expanded="true"] .feat-chev { transform: rotate(-45deg); }
  .features.is-side .feature { position: static; display: block; margin: -6px 0 6px; padding: 4px 18px 0; border-top: 0;
    border-radius: 0 0 14px 14px; animation: none; }
  .features.is-side .feature .head { display: none; } /* its heading is the one just above */
  .features.is-side .feat-shot { margin: 18px -18px 0; height: auto; aspect-ratio: 15 / 8; }
}
.soon { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: rgba(250,204,21,.15); color: var(--yellow); vertical-align: middle; }
/* Station announcements: one to hear. Green play at rest, red stop while it plays, as in DCC Box. */.listen { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }.listen p { margin: 0; font-size: 15px; line-height: 1.5; }.listen p span { color: var(--muted); }.listen-btn { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--green); cursor: pointer; box-shadow: 0 6px 18px rgba(34,197,94,.3); }.listen-btn:hover { filter: brightness(1.08); }.listen-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }.listen-ic { width: 18px; height: 20px; margin-left: 4px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }.listen-btn.playing { background: var(--red); box-shadow: 0 6px 18px rgba(229,50,45,.3); }.listen-btn.playing .listen-ic { width: 16px; height: 16px; margin: 0; border-radius: 2px; clip-path: none; }

/* ---- screenshots carousel ---- */
.carousel { position: relative; margin-top: 34px; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.slide img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0,0,0,.5); background: #0e1829; }
.slide figcaption { max-width: 52em; margin: 18px auto 0; text-align: center; color: var(--muted); font-size: 17px; }
.slide figcaption b { color: var(--ink); }
.car-btn {
  position: absolute; top: 40%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 32px; line-height: 1; color: var(--ink); cursor: pointer;
  background: rgba(10,18,32,.8); border: 1px solid rgba(148,163,184,.35); backdrop-filter: blur(8px);
}
.car-btn:hover { border-color: var(--yellow); }
.car-btn:focus-visible, .dots button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.car-btn.prev { left: -18px; }
.car-btn.next { right: -18px; }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.dots button { width: 12px; height: 12px; padding: 0; border-radius: 999px; border: 0; background: rgba(148,163,184,.4); cursor: pointer; transition: width .3s, background .3s; }
.dots button[aria-current="true"] { width: 32px; background: var(--yellow); }
@media (max-width: 700px) { .car-btn.prev { left: 6px; } .car-btn.next { right: 6px; } .car-btn { width: 44px; height: 44px; font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .slide, .slide.is-active, .dots button { transition: none; } }

/* ---- the box: the product shot ---- */
.product { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; }
.product img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.product p { color: #cbd5e1; margin: 0 0 14px; font-size: 18px; }
.product b { color: var(--ink); }
.product .muted-note { color: var(--muted); font-size: 16px; }
.product-shot { margin: 0; }
.product-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 860px) { .product { grid-template-columns: 1fr; gap: 28px; } }

/* The three configurations: one panel under the product shot, a heading band and a line between rows. Everything
   reads from the left. On a phone each configuration is a card, with each label above its text. */
.configs-wrap { margin-top: 40px; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.configs { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 17px; line-height: 1.5; }
.configs th, .configs td { padding: 18px 22px; text-align: left; vertical-align: top; font-weight: 400; }
.configs thead th { padding: 13px 22px; background: rgba(250,204,21,.08); border-bottom: 1px solid rgba(250,204,21,.35);
  color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.configs thead th:nth-child(1) { width: 27%; }
.configs thead th:nth-child(2) { width: 41%; }
.configs tbody tr + tr > * { border-top: 1px solid var(--line); }
.configs tbody th { color: var(--ink); font-size: 18px; font-weight: 700; }
.configs td { color: #cbd5e1; }
@media (max-width: 700px) {
  .configs-wrap { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .configs, .configs tbody, .configs tr, .configs th, .configs td { display: block; width: auto; }
  .configs thead { display: none; }
  .configs tbody tr { margin-bottom: 12px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
  .configs tbody tr + tr > * { border-top: 0; }
  .configs tbody th, .configs td { padding: 0; }
  .configs tbody th { margin-bottom: 12px; color: var(--yellow); }
  .configs td + td { margin-top: 12px; }
  .configs td::before { content: attr(data-l); display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
}

/* ---- under the bonnet ---- */
.bonnet { max-width: 1040px; }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 14px; }
.ticks li .ic { color: var(--green); width: 24px; height: 24px; margin-top: 3px; }
.ticks b { color: var(--ink); }
.ticks span { color: var(--muted); }
/* Wide screens: the points in two columns. */
@media (min-width: 900px) { .bonnet .ticks { grid-template-columns: 1fr 1fr; gap: 18px 36px; } }

/* ---- station ---- */
.station { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px; border-radius: 20px; border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(10,18,32,.95) 0%, rgba(10,18,32,.85) 50%, rgba(10,18,32,.72) 100%), url(img/hero-roster.jpg) center 60% / cover no-repeat; }
.station p { color: #cbd5e1; margin: 0; }
.station-text { display: grid; gap: 14px; }
.protocols { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: #cbd5e1; }
.protocols li { padding-left: 18px; position: relative; }
.protocols li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.protocols b { color: var(--ink); }
@media (max-width: 860px) { .station { grid-template-columns: 1fr; padding: 28px; } }

/* ---- controllers compared: set out like DCC Box's own lists (small grey column headings over separate,
   rounded, lightly shaded rows, in a panel), everything left-aligned ---- */
.compare-wrap { margin-top: 30px; padding: 20px; overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.compare { width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 0 8px; font-size: 17px; text-align: left; }
.compare th, .compare td { padding: 12px 14px; text-align: left; vertical-align: top; }
.compare thead th { padding: 0 14px 2px; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: normal; text-transform: none; }
.compare thead th:nth-child(2), .compare thead th:nth-child(3) { width: 17%; }
.compare tbody tr:not(.group) > * { background: rgba(8,14,26,.35); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare tbody tr:not(.group) > :first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }
.compare tbody tr:not(.group) > :last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
.compare tbody th { width: 30%; font-weight: 600; color: var(--ink); }
.compare td { color: var(--muted); }
.compare tr.group th { padding: 22px 2px 4px; background: none; border: 0; text-align: left; color: var(--yellow); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.compare tbody tr.group:first-child th { padding-top: 6px; }
.compare td.yes, .compare td.no, .compare td.part { font-weight: 700; }
.compare td.yes { color: #86efac; }
.compare td.no { color: #fca5a5; }
.compare td.part { color: var(--yellow); }
.compare td.yes::before { content: "✓ "; }
.compare td.no::before { content: "✗ "; }
.compare td.part::before { content: "◐ "; }
.compare-note { margin: 16px 0 0; color: var(--muted); font-size: 16px; text-align: left; }

/* ---- sign up for updates ---- */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding: 40px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
#signup { display: grid; gap: 10px; }
#signup label { font-weight: 600; color: #cbd5e1; }
#signup input[type="email"], #signup input[type="text"] {
  width: 100%; min-height: 52px; padding: 10px 16px; font: inherit; font-size: 18px; color: var(--ink);
  background: rgba(8,14,26,.8); border: 1px solid rgba(148,163,184,.35); border-radius: 12px;
}
#su-answer { max-width: 220px; letter-spacing: .2em; text-transform: uppercase; }
#signup input:focus-visible, #signup button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.captcha-row { display: flex; align-items: center; gap: 10px; }
.captcha-row img { border-radius: 10px; border: 1px solid var(--line); background: #0e1829; }
#su-new { width: 52px; height: 52px; font-size: 24px; color: var(--ink); background: rgba(30,41,63,.9); border: 1px solid rgba(148,163,184,.35); border-radius: 12px; cursor: pointer; }
#signup .cta { justify-self: start; margin-top: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 800; }
#signup .cta:disabled { opacity: .6; cursor: default; }
#su-status { margin: 0; min-height: 1.6em; font-weight: 600; }
#su-status.error { color: #fca5a5; }
#su-status.done { color: #86efac; font-size: 19px; }
.privacy { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; padding: 28px; } }

footer { padding: 40px 0 60px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; align-items: center; }
footer .logo img { height: 52px; filter: none; }
footer .trademarks, footer .ai-note { flex-basis: 100%; margin: 0; font-size: 13px; }
footer .ai-note b { color: var(--ink); }

@media (max-width: 600px) {
  .nav nav { display: none; }
  section { padding: 52px 0; }
  .hero .wrap { padding-bottom: 48px; }
}

/* ---- glossary page ---- */
.hero-page {
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(10,18,32,.45) 0%, rgba(10,18,32,.2) 40%, var(--bg) 100%),
    radial-gradient(900px 420px at 80% 0%, rgba(47,124,246,.28), transparent 70%), #1c2748;
}
.hero-page .wrap { padding-top: 150px; padding-bottom: 56px; }
.hero-page h1 { max-width: none; font-size: clamp(40px, 6vw, 68px); }
.nav nav a[aria-current="page"] { color: var(--yellow); opacity: 1; }
.glossary { padding-top: 24px; }
.gloss-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.gloss-jump a {
  padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line);
}
.gloss-jump a:hover { border-color: var(--yellow); color: var(--yellow); }
/* Getting Started: the guides, as pills under the glossary's introduction (each a page styled like the glossary). */
.guides-head { margin: 34px 0 14px; font-size: clamp(22px, 2.6vw, 28px); }
.guide-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.lead + .guide-pills { margin-top: 26px; } /* on a guide page, straight under its introduction */
.guide-pills a { padding: 10px 20px; border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none; color: var(--ink); background: rgba(10,18,32,.72); border: 1px solid rgba(250,204,21,.45); }
.guide-pills a:hover, .guide-pills a[aria-current="page"] { border-color: var(--yellow); color: var(--yellow); }
.guide-soon { font-size: 20px; color: #cbd5e1; margin: 0; }
.gloss-group { margin-bottom: 22px; padding: 30px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); scroll-margin-top: 20px; }
.gloss-group h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 18px; }
.gloss-group dl { display: grid; grid-template-columns: minmax(180px, 16em) 1fr; gap: 0 28px; margin: 0; }
.gloss-group dt, .gloss-group dd { padding: 14px 0; border-top: 1px solid var(--line); }
.gloss-group dt:first-of-type, .gloss-group dt:first-of-type + dd { border-top: 0; }
.gloss-group dt { font-weight: 700; color: var(--ink); scroll-margin-top: 24px; }
.gloss-group dd { margin: 0; color: #cbd5e1; }
/* The term someone arrived at from a rollover. */
.gloss-group dt:target { color: var(--yellow); }
.gloss-group dt:target + dd { color: var(--ink); }
.gloss-back { margin: 30px 0 0; }
@media (max-width: 700px) {
  .gloss-group { padding: 22px; }
  .gloss-group dl { grid-template-columns: 1fr; }
  .gloss-group dt { padding-bottom: 2px; }
  .gloss-group dd { border-top: 0; padding-top: 0; }
}

/* ---- glossary rollovers (glossary-terms.js): a dotted yellow underline, the definition on hover/focus/tap ---- */
.gloss {
  color: inherit; text-decoration: underline dotted rgba(250,204,21,.8); text-decoration-thickness: 2px;
  text-underline-offset: 4px; cursor: help;
}
.gloss:hover, .gloss:focus-visible { color: var(--yellow); }
.gloss:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 2px; }
.gloss-tip {
  position: absolute; z-index: 50; display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px;
  font-size: 15px; line-height: 1.45; color: #cbd5e1; text-align: left;
  background: #111b2e; border: 1px solid rgba(250,204,21,.45); box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.gloss-tip[hidden] { display: none; }
.gloss-tip b { color: var(--yellow); font-size: 16px; }
.gloss-tip small { color: var(--muted); font-size: 13px; }

/* Phones: each row of the comparison is a small card (feature, then YaMoRC and SPROG 3 side by side, then the note),
   so nothing scrolls off the side. */
@media (max-width: 700px) {
  .compare-wrap { overflow: visible; padding: 0; border: 0; background: none; }
  .compare tbody tr:not(.group) > *, .compare tbody tr:not(.group) > :first-child, .compare tbody tr:not(.group) > :last-child { background: none; border: 0; border-radius: 0; }
  .compare td.yes, .compare td.no, .compare td.part { font-size: 16px; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; min-width: 0; width: auto; }
  .compare thead { display: none; }
  .compare tbody tr:not(.group) { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 10px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
  .compare tbody th, .compare td { padding: 0; border: 0; }
  .compare tbody tr:not(.group) th { grid-column: 1 / -1; width: auto; margin-bottom: 4px; }
  .compare td.note { grid-column: 1 / -1; margin-top: 4px; font-size: 16px; }
  .compare td.note:empty { display: none; }
  .compare tr.group th { width: auto; padding: 18px 2px 8px; background: none; }
  .compare td.yes::before { content: attr(data-l) ": ✓ "; }
  .compare td.no::before { content: attr(data-l) ": ✗ "; }
  .compare td.part::before { content: attr(data-l) ": ◐ "; }
}