:root {
  --bg: #0A0E1A;
  --surface: #141A2A;
  --surface-elevated: #1C2438;
  --border: #262E44;
  --text-primary: #F4F6FB;
  --text-secondary: #9AA3BC;
  --text-tertiary: #5C6480;
  --accent: #F2A93B;
  --accent-dim: #B9832A;
  --accent-muted: #3A2E18;
  --teal: #4FD8C4;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}
body { line-height: 1.6; }
a { color: inherit; }

.board {
  font-family: "SF Mono", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Nav ---------- */
.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img, .nav-logo { height: 26px; width: auto; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: 14px; }
.nav-links a { color: var(--text-secondary); text-decoration: none; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 48px 24px 56px;
  text-align: center;
  background:
    radial-gradient(ellipse 900px 400px at 50% -10%, rgba(242,169,59,0.10), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 12px;
  padding: 6px 14px;
  border: 1px solid var(--accent-muted);
  border-radius: 999px;
  background: rgba(242,169,59,0.06);
}
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 2px rgba(242,169,59,0.6);
}
.hero h1 {
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.15;
  margin: 22px auto 14px;
  max-width: 720px;
  text-wrap: balance;
  color: var(--text-primary);
  font-weight: 800;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.sub {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 17px;
}

.web-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 28px auto 0;
  color: #04231E;
  font-size: clamp(14px, 2.4vw, 17px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #9CF0E2, var(--teal) 55%, #2FAE9C);
  box-shadow: 0 0 0 1px rgba(79,216,196,0.5), 0 12px 40px -8px rgba(79,216,196,0.55);
  animation: coming-soon-pulse 2.6s ease-in-out infinite;
}
.web-live-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #04231E;
  flex: none;
}
.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px auto 0;
  color: #1A1206;
  font-size: clamp(15px, 2.6vw, 19px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFD27A, var(--accent) 55%, var(--accent-dim));
  box-shadow: 0 0 0 1px rgba(242,169,59,0.5), 0 12px 40px -8px rgba(242,169,59,0.55);
  animation: coming-soon-pulse 2.6s ease-in-out infinite;
}
.coming-soon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1A1206;
  flex: none;
}
@keyframes coming-soon-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(242,169,59,0.5), 0 12px 40px -8px rgba(242,169,59,0.55); }
  50% { box-shadow: 0 0 0 1px rgba(242,169,59,0.7), 0 16px 52px -6px rgba(242,169,59,0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .coming-soon { animation: none; }
}

.waitlist-section {
  padding: 56px 24px 64px;
  display: flex;
  justify-content: center;
}
.waitlist-card {
  width: 100%;
  max-width: 560px;
  text-align: center;
  padding: 44px 32px 40px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 520px 260px at 50% 0%, rgba(242,169,59,0.14), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(242,169,59,0.14), 0 40px 90px -36px rgba(242,169,59,0.4);
}
.waitlist-heading {
  font-size: clamp(23px, 4.2vw, 29px);
  font-weight: 800;
  line-height: 1.2;
  margin: 22px 0 10px;
  text-wrap: balance;
}
.waitlist-lead {
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 42ch;
  margin: 0 auto 6px;
}
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 440px;
  margin: 22px auto 0;
}
.waitlist-airline-wrap { position: relative; }
.waitlist-email-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.waitlist-input {
  width: 100%;
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
}
.waitlist-input::placeholder { color: var(--text-tertiary); }
.waitlist-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.waitlist-helper {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}
.waitlist-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.5);
  text-align: left;
}
.waitlist-suggestion-item {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}
.waitlist-suggestion-item:hover,
.waitlist-suggestion-item.active {
  background: var(--surface-elevated, rgba(242,169,59,0.08));
  color: var(--accent);
}
.waitlist-button {
  flex: 0 0 auto;
  padding: 13px 22px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #1A1206;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.waitlist-button:hover { background: #FFC266; }
.waitlist-button:disabled { opacity: 0.6; cursor: default; }
.waitlist-message {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 13px;
}
.waitlist-message.success { color: var(--teal); }
.waitlist-message.error { color: #F2555A; }
.waitlist-count {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-tertiary);
  min-height: 18px;
}
.waitlist-count strong { color: var(--accent); font-weight: 700; }
.waitlist-web-cta {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(79,216,196,0.28);
  background: rgba(79,216,196,0.06);
}
.waitlist-web-cta-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.waitlist-web-cta-button {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid var(--teal);
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.waitlist-web-cta-button:hover { background: rgba(79,216,196,0.12); }

/* ---------- Departure board strip ---------- */
.flight-strip {
  max-width: 620px;
  margin: 36px auto 0;
  background: #05070E;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
}
.flight-strip-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 10px;
  color: var(--accent);
  background: #0A0E1A;
  border-bottom: 1px solid var(--border);
}
.flight-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid #171d30;
  align-items: center;
}
.flight-row:last-child { border-bottom: none; }
.flight-row span:first-child { color: var(--text-primary); text-transform: none; letter-spacing: 0.02em; font-family: -apple-system, sans-serif; text-align: left; }
.flight-row .status { color: var(--teal); }

/* ---------- Screenshot gallery (auto-scrolling marquee) ---------- */
/* Always natively scrollable (drag/wheel/touch/scrollbar), not just under
   prefers-reduced-motion below — the marquee is a CSS animation, and a CSS
   animation can hang (a stuck tab, a GPU hiccup) with no way to recover on
   its own. Manual scroll is the fallback that always works regardless of
   whether the animation is behaving, and the arrow buttons make that
   fallback discoverable instead of relying on someone guessing to drag it. */
.gallery-wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.gallery {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 56px 0 24px;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
}
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-track { background: transparent; }
.gallery::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; }
.gallery::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.gallery-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding: 0 24px;
  animation: gallery-marquee 34s linear infinite;
}
.gallery:hover .gallery-track,
.gallery-track.paused {
  animation-play-state: paused;
}
@keyframes gallery-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.gallery-wrap:hover .gallery-arrow,
.gallery-arrow:focus-visible {
  opacity: 1;
}
.gallery-arrow:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.gallery-arrow-left { left: 4px; }
.gallery-arrow-right { right: 4px; }
/* Touch devices can't hover to reveal the arrows — keep them faintly
   visible always instead of hidden behind an interaction that can't happen. */
@media (hover: none) {
  .gallery-arrow { opacity: 0.55; }
}
.phone {
  flex: 0 0 auto;
  width: 220px;
  border-radius: 30px;
  border: 6px solid #05070E;
  background: #05070E;
  overflow: hidden;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,0.7), 0 0 0 1px var(--border);
  transition: transform 0.25s ease;
}
.phone:hover { transform: translateY(-6px); }
.phone img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .phone { transition: none; }
  .gallery { -webkit-mask-image: none; mask-image: none; }
  .gallery-track { animation: none; padding: 0 24px; }
  .gallery-track .dup { display: none; }
}

/* ---------- Motion: scroll-triggered reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Manifest / feature list ---------- */
.manifest { max-width: 760px; margin: 64px auto 0; padding: 0 24px; }
.manifest-title { font-size: 12px; color: var(--accent); text-align: center; margin-bottom: 28px; }
.manifest-title::before, .manifest-title::after { content: '—— '; color: var(--border); }
.row { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: none; }
.row-gate {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.row h3 { margin: 0 0 6px; font-size: 17px; color: var(--text-primary); }
.row p { margin: 0; color: var(--text-secondary); font-size: 14.5px; }

/* ---------- Home teaser (condensed feature preview) ---------- */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin: 0 0 28px;
}
.teaser-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
}
.teaser-card .row-gate { margin: 0 auto 14px; }
.teaser-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--text-primary); }
.teaser-card p { margin: 0; font-size: 13.5px; color: var(--text-secondary); }
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
}
.cta-link:hover { text-decoration: underline; }

.waitlist-cta {
  max-width: 480px;
  margin: 0 auto 48px;
  padding: 22px 24px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.waitlist-cta p { margin: 0 0 10px; color: var(--text-secondary); font-size: 14px; }
.waitlist-cta .cta-link { font-size: 15px; }

/* ---------- Guide (how-to page) ---------- */
/* Each category is a native <details> — click/tap toggles it open on any
   device (works with no JS, keyboard-accessible for free), and a hover rule
   layered on top additionally opens it on mouse-driven devices without
   needing a click first. The shared name="guide-toc-cat" makes them an
   exclusive group (opening one closes any other that's open), a plain HTML
   attribute with no JS behind it. */
.guide-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
  margin: 40px auto 0;
  padding: 0 24px;
}
.guide-toc-cat { position: relative; }
.guide-toc-cat summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.guide-toc-cat summary::-webkit-details-marker { display: none; }
.guide-toc-cat summary::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.guide-toc-cat:hover summary,
.guide-toc-cat[open] summary {
  color: var(--accent);
  border-color: var(--accent-muted);
  background: var(--accent-muted);
}
.guide-toc-cat:hover summary::after,
.guide-toc-cat[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}
.guide-toc-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: 280px;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.6);
}
.guide-toc-cat[open] .guide-toc-panel {
  display: flex;
}
@media (hover: hover) {
  .guide-toc-cat:hover .guide-toc-panel {
    display: flex;
  }
}
.guide-toc-panel a {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
  background: var(--bg);
}
.guide-toc-panel a:hover { color: var(--accent); border-color: var(--accent-muted); }

.guide { max-width: 760px; margin: 56px auto 0; padding: 0 24px; }
.guide-section {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 24px;
}
.guide-section:last-child { border-bottom: none; }
.guide-section h2 { margin: 0 0 6px; font-size: 19px; color: var(--text-primary); }
.guide-section > div > p.deck { margin: 0 0 16px; color: var(--text-secondary); font-size: 14.5px; }
.guide-media { margin: 4px 0 18px; }
.guide-shot {
  display: block;
  max-width: 260px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.6);
}
.guide-placeholder {
  max-width: 260px;
  padding: 22px 16px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--text-tertiary);
  font-size: 12.5px;
  text-align: center;
  background: var(--surface);
}
.guide-placeholder .row-gate { margin: 0 auto 10px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 34px;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 14.5px;
}
.steps li:last-child { margin-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps li strong { color: var(--text-primary); }
.guide-note {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Expandable in-page walkthrough — a multi-step visual demo (several small
   phone frames showing a flow, not just one static screenshot) tucked under
   a native <details> disclosure so it costs nothing until opened. Reusable
   across any guide-section; not every feature needs one, only ones where a
   single screenshot doesn't capture a multi-step interaction. */
.guide-demo { margin-top: 16px; }
.guide-demo summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  list-style: none;
}
.guide-demo summary::-webkit-details-marker { display: none; }
.guide-demo summary .chev {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.guide-demo[open] summary .chev { transform: rotate(45deg); }
.guide-demo-strip {
  margin-top: 16px;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 4px 14px;
}
.demo-phone {
  flex-shrink: 0;
  width: 190px;
  background: var(--surface);
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.demo-phone .dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.demo-phone .dp-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.demo-phone .dp-caption {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 190px;
}
.dp-qa-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.dp-qa {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
}
.dp-qa.new { border-color: var(--accent); background: var(--accent-muted); color: var(--accent); }
.dp-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dp-badge-row { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-badge {
  font-size: 8.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-muted);
  color: var(--accent);
}
.dp-badge.general { background: var(--border); color: var(--text-secondary); }
.dp-badge.length { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.dp-badge.unverified { background: transparent; color: var(--text-tertiary); font-weight: 600; padding: 2px 0; }
.dp-location { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--text-primary); }
.dp-location .pin { color: var(--accent); font-size: 9px; }
.dp-body-text { font-size: 10px; color: var(--text-primary); line-height: 1.4; }
.dp-author { font-size: 9px; color: var(--text-tertiary); }
.dp-field-label { font-size: 10px; font-weight: 700; color: var(--text-primary); }
.dp-field-helper { font-size: 8.5px; color: var(--text-tertiary); margin: 2px 0 6px; line-height: 1.4; }
.dp-length-row { display: flex; gap: 4px; }
.dp-length-opt {
  flex: 1;
  text-align: center;
  font-size: 8.5px;
  font-weight: 700;
  padding: 6px 0;
  border-radius: 7px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.dp-length-opt.sel { border-color: var(--accent); background: var(--accent-muted); color: var(--accent); }
.dp-switch-row { display: flex; align-items: flex-start; gap: 6px; }
.dp-switch-mock { width: 26px; height: 15px; border-radius: 999px; background: var(--border); position: relative; flex-shrink: 0; margin-top: 1px; }
.dp-switch-mock.on { background: var(--accent-muted); }
.dp-switch-mock::after { content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-tertiary); }
.dp-switch-mock.on::after { left: auto; right: 1.5px; background: var(--accent); }
.dp-input {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px;
  font-size: 9.5px;
  color: var(--text-secondary);
  min-height: 34px;
}
.dp-cta {
  text-align: center;
  font-weight: 700;
  font-size: 9.5px;
  padding: 7px;
  border-radius: 7px;
  color: var(--text-secondary);
}
.dp-cta.dashed { border: 1px dashed var(--border); color: var(--accent); }

/* One guide-group per app tab (plus a catch-all "Account & Settings" one) —
   each is a landing target for that tab's in-app info icon, so it needs its
   own scroll-margin the same way individual .guide-section rows already do. */
.guide-group { scroll-margin-top: 24px; }
.guide-group + .guide-group { border-top: 1px solid var(--border); }
.guide-group-header {
  padding-top: 44px;
  padding-bottom: 4px;
}
.guide-group:first-child .guide-group-header { padding-top: 0; }
.guide-group-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.guide-group-header h1 {
  margin: 0 0 6px;
  font-size: 26px;
  color: var(--text-primary);
}
.guide-group-header p {
  margin: 0;
  max-width: 520px;
  color: var(--text-secondary);
  font-size: 14.5px;
}

/* ---------- Article (About page) ---------- */
.article {
  max-width: 640px;
  margin: 56px auto;
  padding: 0 24px 40px;
}
.article h2 {
  font-size: clamp(24px, 4vw, 32px);
  margin: 40px 0 12px;
  color: var(--text-primary);
}
.article h2:first-child { margin-top: 0; }
.article p { color: var(--text-secondary); font-size: 16px; margin: 0 0 16px; }
.article strong { color: var(--text-primary); }
.pull-quote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin: 32px 0;
  color: var(--text-primary);
  font-size: 19px;
  font-style: normal;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 24px 0 8px;
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.value-card .board { font-size: 11px; color: var(--accent); display: block; margin-bottom: 8px; }
.value-card p { margin: 0; font-size: 14px; color: var(--text-secondary); }

/* ---------- Closing ---------- */
.closer {
  text-align: center;
  padding: 80px 24px 64px;
  margin-top: 40px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(242,169,59,0.04));
}
.closer h2 { font-size: clamp(22px, 4vw, 30px); margin: 0 0 10px; }
.closer p { color: var(--text-secondary); max-width: 460px; margin: 0 auto; }
.stamp {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 22px;
  border: 1px solid var(--accent-muted);
  color: var(--accent);
  border-radius: 8px;
  font-size: 12px;
}

footer {
  text-align: center;
  padding: 28px 24px;
  color: var(--text-tertiary);
  font-size: 12px;
  border-top: 1px solid var(--border);
}
footer a { color: var(--text-tertiary); text-decoration: underline; }
footer .foot-links { margin-top: 8px; display: flex; gap: 16px; justify-content: center; }

@media (prefers-color-scheme: light) {
  :root { --border: #33405e; }
}