/* ============================================================
   rdbg — site styles
   Modern, commercial-Delphi-tool flavour:
   navy chrome, red accent, generous whitespace, Inter + JetBrains Mono.
   ============================================================ */

:root {
  --c-bg:        #ffffff;
  --c-bg-alt:    #f5f7fb;
  --c-bg-deep:   #0b1f3a;       /* hero / footer navy */
  --c-bg-deeper: #08172c;
  --c-ink:       #0f1a2b;
  --c-ink-soft:  #475467;
  --c-line:      #e3e8f0;
  --c-line-dark: #1c3358;
  --c-accent:    #ee2737;       /* Delphi red */
  --c-accent-dk: #c41a28;
  --c-cyan:      #18b6c4;       /* secondary highlight */
  --c-amber:     #f0a830;
  --c-good:      #2bb673;

  --shadow-sm: 0 1px 2px rgba(15,26,43,.06);
  --shadow-md: 0 4px 16px rgba(15,26,43,.08);
  --shadow-lg: 0 12px 40px rgba(15,26,43,.12);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --maxw: 1180px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-dk); text-decoration: underline; }

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0 0 .6em 0;
  line-height: 1.2;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em 0; color: var(--c-ink-soft); }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--c-ink);
}

pre {
  background: var(--c-bg-deeper);
  color: #d8e2f1;
  padding: 18px 20px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 0 0 1.2em 0;
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid var(--c-line-dark);
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

/* simple syntax tinting (apply via class to nested spans if desired) */
pre .k  { color: #ff8b94; }   /* keyword/red */
pre .s  { color: #b8e986; }   /* string/green */
pre .c  { color: #6c7a93; font-style: italic; } /* comment */
pre .n  { color: #f0a830; }   /* number */
pre .p  { color: #18b6c4; }   /* prompt/path */

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- top nav ----------
   Dark navy nav that's visually continuous with the hero/page-head
   on every page. iOS Safari extends the nav background up into the
   status-bar area; matching the hero's deeper navy means no jarring
   white-bar seam at the top of the page on mobile. White nav text.
   safe-area-inset-top respects iPhone notch / Dynamic Island. */
.nav {
  background: var(--c-bg-deeper);
  border-bottom: 1px solid var(--c-line-dark);
  position: sticky;
  top: 0;
  /* Higher than .modal-backdrop's 1000? No — modals must overlay
     the nav. But everything ELSE in the page (in particular the
     mobile collapsed dropdown when its transform isn't quite enough
     to hide it) must be below. 500 gives generous headroom over
     the page content (z-index defaults to 0/auto). */
  z-index: 500;
  padding-top: env(safe-area-inset-top);
}
.nav-inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand:hover { color: #fff; text-decoration: none; }
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
}
.brand-tag {
  font-size: 11px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 500;
  color: #b8c5d9;
  margin-left: 4px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.nav-links a {
  color: #d8e2f1;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}
.nav-links a:hover { color: var(--c-accent); text-decoration: none; }
.nav-links a.active { color: var(--c-accent); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 2px;
  background: var(--c-accent);
}
.nav-cta {
  background: var(--c-ink);
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: var(--radius-sm);
  font-size: .9rem !important;
}
.nav-cta:hover { background: var(--c-accent); text-decoration: none !important; }

.nav-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 4px 0;
  transition: transform .2s ease;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all .15s ease;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--c-accent-dk);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn-ghost:hover {
  background: var(--c-bg-alt);
  color: var(--c-ink);
  text-decoration: none;
  border-color: #c8d2e1;
}
.btn-dark {
  background: var(--c-ink);
  color: #fff;
}
.btn-dark:hover {
  background: var(--c-bg-deep);
  color: #fff;
  text-decoration: none;
}

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(238,39,55,0.15), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(24,182,196,0.10), transparent 60%),
    linear-gradient(180deg, var(--c-bg-deep) 0%, var(--c-bg-deeper) 100%);
  color: #e6ecf5;
  padding: 88px 0 96px;
  border-bottom: 1px solid var(--c-line-dark);
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* faint grid */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  /* Top-align the two columns so the logo + headline don't get
     pushed down by the (taller) terminal animation on the right. */
  align-items: start;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  margin-bottom: 18px;
}
.hero h1 .accent { color: var(--c-accent); }
.hero p.lead {
  font-size: 1.15rem;
  color: #b8c5d9;
  margin-bottom: 32px;
  max-width: 540px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.hero-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--c-accent);
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #92a3bd;
}
.hero-meta b { color: #e6ecf5; font-weight: 600; }

/* terminal mockup */
.terminal {
  background: #0a1322;
  border-radius: var(--radius-lg);
  border: 1px solid #1f3358;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  transform: rotate(-0.5deg);
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #0e1a30;
  border-bottom: 1px solid #1f3358;
}
.terminal-bar .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #3a4a64;
}
.terminal-bar .dot.r { background: #ee5a55; }
.terminal-bar .dot.y { background: #f0a830; }
.terminal-bar .dot.g { background: #2bb673; }
.terminal-bar .title {
  margin-left: 8px;
  color: #6f8093;
  font-size: 11.5px;
}
.terminal-body {
  padding: 16px 18px 20px;
  color: #cdd9ed;
  white-space: pre;
  overflow-x: auto;
}
.terminal-body .prompt { color: var(--c-cyan); }
.terminal-body .cmd    { color: #ffffff; }
.terminal-body .ev     { color: var(--c-amber); }
.terminal-body .ok     { color: var(--c-good); }
.terminal-body .err    { color: var(--c-accent); }
.terminal-body .dim    { color: #6f8093; }

/* ---------- animated terminal (landing page) ---------- */
.terminal-anim { height: 520px; }
.terminal-anim .terminal-body {
  height: calc(100% - 38px);
  padding: 14px 18px 18px;
  white-space: normal;
  overflow-y: auto;
  scroll-behavior: smooth;
  position: relative;
}
.terminal-anim .terminal-body::-webkit-scrollbar { width: 6px; }
.terminal-anim .terminal-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08); border-radius: 3px;
}

.term-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  line-height: 1.55;
}
.t-evt {
  opacity: 0;
  transform: translateY(4px);
  animation: t-fade .35s ease-out forwards;
}
@keyframes t-fade { to { opacity: 1; transform: translateY(0); } }

.t-user {
  color: #ffffff;
  padding: 4px 0;
  font-weight: 500;
}
.t-user::before { content: '> '; color: var(--c-cyan); font-weight: 700; }

.t-asst {
  color: #f3deb1;
  padding: 4px 0 4px 22px;
  position: relative;
  line-height: 1.55;
}
.t-asst::before {
  content: '✻';
  position: absolute;
  left: 2px; top: 4px;
  color: var(--c-accent);
  font-size: 13px;
}

.t-tool-call {
  background: rgba(24,182,196,0.06);
  border-left: 2px solid var(--c-cyan);
  padding: 7px 12px;
  font-size: 11.5px;
  border-radius: 0 5px 5px 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.t-tool-call .head {
  color: var(--c-cyan);
  font-weight: 700;
  margin-right: 6px;
}
.t-tool-call .args { color: #cdd9ed; }

.t-tool-result {
  color: #a0e0a0;
  font-size: 11.5px;
  padding: 2px 12px 2px 28px;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
}
.t-tool-result::before {
  content: '↳';
  position: absolute;
  left: 12px; top: 2px;
  color: var(--c-good);
  font-weight: 700;
}

.t-comment {
  color: #6f8093;
  font-style: italic;
  padding: 4px 0;
  font-size: 11.5px;
}

.t-event {
  color: #f0c374;
  white-space: pre-wrap;
  font-size: 11.5px;
  background: rgba(240,168,48,0.07);
  border-left: 2px solid #f0a830;
  padding: 7px 12px;
  border-radius: 0 5px 5px 0;
}
.t-event .label {
  color: var(--c-amber);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  margin-right: 8px;
}

.t-edit {
  background: rgba(238,39,55,0.06);
  border-left: 2px solid var(--c-accent);
  padding: 7px 12px;
  font-size: 11.5px;
  border-radius: 0 5px 5px 0;
  white-space: pre-wrap;
}
.t-edit .head {
  color: var(--c-accent);
  font-weight: 700;
  margin-right: 6px;
}
.t-edit .add { color: #b8e986; }
.t-edit .del { color: #ff8b94; }

.t-compact {
  color: #6f8093;
  font-style: italic;
  text-align: center;
  font-size: 10.5px;
  padding: 14px 0 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.t-compact::before, .t-compact::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #3a4a64, transparent);
}
.t-compact .marker {
  color: var(--c-accent);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
}

.t-cursor {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--c-cyan);
  vertical-align: middle;
  margin-left: 2px;
  animation: t-blink 1s step-end infinite;
}
@keyframes t-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-evt { animation: none; opacity: 1; transform: none; }
  .terminal-anim .terminal-body { scroll-behavior: auto; }
}

/* ---------- generic sections ---------- */
section { padding: 80px 0; }
section.alt { background: var(--c-bg-alt); }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 52px;
}
.section-head .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.section-head h2 { margin-bottom: 14px; }
.section-head p { font-size: 1.1rem; }

/* feature grid */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.feature {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}
.feature:hover {
  border-color: #c8d2e1;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.feature .icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(238,39,55,.10), rgba(238,39,55,.18));
  color: var(--c-accent);
}
.feature .icon svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: 8px; font-size: 1.08rem; }
.feature p { margin: 0; font-size: 0.95rem; }
.feature .tag {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--c-bg-alt);
  color: var(--c-ink-soft);
}
.feature .tag.new   { background: #fee2e4; color: var(--c-accent-dk); }
.feature .tag.beta  { background: #fff4dd; color: #8a5a00; }
.feature .tag.alpha { background: #e2f0ff; color: #1d4f8a; }

/* feature list (alternative compact rows) */
.feature-rows { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.feature-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--c-line);
  align-items: start;
}
.feature-row .icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(238,39,55,.10), rgba(238,39,55,.18));
  color: var(--c-accent);
  flex-shrink: 0;
}
.feature-row .icon svg { width: 22px; height: 22px; }
.feature-row h3 { margin-bottom: 6px; }
.feature-row p  { margin-bottom: 8px; }
.feature-row .meta {
  font-size: 0.82rem;
  color: var(--c-ink-soft);
}
.feature-row .meta code { font-size: 0.78rem; }

/* ---------- callouts / strip ---------- */
.callout {
  background: linear-gradient(135deg, var(--c-bg-deep), var(--c-bg-deeper));
  color: #e6ecf5;
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.callout h2 { color: #fff; margin-bottom: 8px; }
.callout p  { color: #b8c5d9; margin: 0; }

/* ---------- roadmap ---------- */
.roadmap {
  position: relative;
  padding: 0 0 0 0;
}
.roadmap-track {
  position: relative;
  margin-left: 14px;
  padding-left: 36px;
  border-left: 2px solid var(--c-line);
}
.roadmap-item {
  position: relative;
  padding: 0 0 36px;
}
.roadmap-item::before {
  content: '';
  position: absolute;
  left: -45px;
  top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c-line);
}
.roadmap-item.done::before {
  background: var(--c-good);
  border-color: var(--c-good);
}
.roadmap-item.now::before {
  background: var(--c-accent);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 6px rgba(238,39,55,.15);
}
.roadmap-item.next::before {
  background: var(--c-amber);
  border-color: var(--c-amber);
}
.roadmap-item.future::before {
  background: #fff;
  border-color: var(--c-line);
}
.roadmap-item h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 1.1rem;
}
.roadmap-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--c-bg-alt);
  color: var(--c-ink-soft);
}
.roadmap-pill.done { background: #d6f1e3; color: #1a7a4d; }
.roadmap-pill.now  { background: #fee2e4; color: var(--c-accent-dk); }
.roadmap-pill.next { background: #fff4dd; color: #8a5a00; }
.roadmap-pill.future { background: #e6ecf5; color: #475467; }
.roadmap-item ul { padding-left: 18px; margin: 8px 0 0 0; }
.roadmap-item ul li { margin: 3px 0; color: var(--c-ink-soft); font-size: 0.95rem; }

/* ---------- step list (getting started) ---------- */
.steps { counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--c-line);
  align-items: start;
}
.step:last-child { border-bottom: 0; }
.step-num {
  counter-increment: step;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 1rem;
  flex-shrink: 0;
}
.step-num::before { content: counter(step); }
.step h3 { margin-bottom: 8px; }

/* ---------- downloads ---------- */
.dl-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 16px;
}
.dl-card .icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  flex-shrink: 0;
}
.dl-card .icon svg { width: 26px; height: 26px; }
.dl-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.dl-card p  { margin: 0; font-size: 0.9rem; }
.dl-card .meta { display: flex; gap: 14px; font-size: 0.82rem; color: var(--c-ink-soft); margin-top: 6px; }
.dl-card .meta b { color: var(--c-ink); }
.dl-pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--c-bg-alt);
  color: var(--c-ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px dashed #c8d2e1;
}
.dl-pending::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-amber);
  box-shadow: 0 0 0 4px rgba(240,168,48,.15);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: .6; }
}

.notice {
  border-radius: var(--radius);
  padding: 20px 24px;
  border-left: 4px solid var(--c-accent);
  background: #fff7f8;
  margin: 0 0 36px 0;
}
.notice h3 { margin: 0 0 6px; font-size: 1rem; color: var(--c-accent-dk); }
.notice p  { margin: 0; }

/* ---------- footer ---------- */
.footer {
  background: var(--c-bg-deeper);
  color: #92a3bd;
  padding: 56px 0 36px;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: 8px 0; }
.footer a { color: #b8c5d9; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer .brand { color: #fff; }
.footer p { color: #92a3bd; font-size: 0.9rem; }
.footer-bottom {
  border-top: 1px solid #1f3358;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
}

/* ---------- page header (non-hero pages) ---------- */
.page-head {
  background:
    radial-gradient(800px 300px at 100% 0%, rgba(238,39,55,0.10), transparent 60%),
    linear-gradient(180deg, var(--c-bg-deep) 0%, var(--c-bg-deeper) 100%);
  color: #fff;
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--c-line-dark);
}
.page-head h1 { color: #fff; margin-bottom: 12px; }
.page-head p  { color: #b8c5d9; font-size: 1.1rem; max-width: 660px; margin: 0; }
.page-head .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
  margin-bottom: 12px;
}

/* ---------- table ---------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.92rem;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.tbl thead th {
  background: var(--c-bg-alt);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-line);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--c-bg-alt); }
.tbl td code {
  font-size: 0.85em;
  white-space: nowrap;
}
.tbl-group {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--c-bg-alt);
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
}
.tbl-group.life  { background: #e2f0ff; color: #1d4f8a; border-color: #c5dcf2; }
.tbl-group.flow  { background: #fff4dd; color: #8a5a00; border-color: #f3e1bd; }
.tbl-group.bp    { background: #fee2e4; color: var(--c-accent-dk); border-color: #f5c6cb; }
.tbl-group.state { background: #d6f1e3; color: #1a7a4d; border-color: #b8e3cb; }
.tbl-group.ui    { background: #ede2ff; color: #4d2a8a; border-color: #d8c5f3; }

/* ---------- TOC ---------- */
.toc {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 0 0 48px 0;
}
.toc h4 {
  margin: 0 0 14px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 700;
}
.toc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 32px;
}
.toc a {
  display: block;
  padding: 4px 0;
  font-size: 0.93rem;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.toc a:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-line);
  text-decoration: none;
}
.toc-num {
  color: var(--c-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin-right: 8px;
  font-weight: 600;
}

/* tweaked code blocks for body text */
.section-body h3 {
  scroll-margin-top: 80px;
  font-size: 1.25rem;
  margin-top: 48px;
  margin-bottom: 14px;
  padding-top: 8px;
}
.section-body h3:first-child { margin-top: 0; }
.section-body h2 {
  scroll-margin-top: 80px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.section-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* recipe cards (anchored, slim) */
.recipe {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 0 0 20px 0;
  background: #fff;
  scroll-margin-top: 80px;
}
.recipe h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.recipe h3 .rid {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--c-accent);
  font-weight: 700;
  background: #fee2e4;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.recipe pre { margin-bottom: 12px; }
.recipe pre:last-child { margin-bottom: 0; }
.recipe > p:last-child { margin-bottom: 0; }

/* tip/warning boxes */
.box {
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0 0 18px 0;
  border-left: 4px solid var(--c-line);
  background: var(--c-bg-alt);
}
.box.tip   { border-color: var(--c-cyan); background: #e6f8fa; }
.box.warn  { border-color: var(--c-amber); background: #fff7e6; }
.box.note  { border-color: var(--c-ink-soft); }
.box h4    { margin: 0 0 4px; font-size: 0.95rem; }
.box p     { margin: 0; font-size: 0.93rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero { padding: 64px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .terminal { transform: none; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .callout { grid-template-columns: 1fr; padding: 36px; }
}
@media (max-width: 980px) {
  .toc-cols { grid-template-columns: 1fr; }
  .tbl thead { display: none; }
  .tbl tbody tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-line);
  }
  .tbl tbody tr:last-child { border-bottom: 0; }
  .tbl td {
    display: block;
    border-bottom: 0;
    padding: 4px 16px;
  }
  .tbl td:first-child { padding-top: 12px; }
  .tbl td:last-child  { padding-bottom: 12px; color: var(--c-ink-soft); font-size: 0.88rem; }
}
@media (max-width: 700px) {
  .nav-links {
    position: fixed;
    /* Top of the dropdown sits flush with the bottom of the nav,
       which itself is shifted down by the iOS safe-area inset.
       Without env() here the dropdown floats over the status bar. */
    top: calc(64px + env(safe-area-inset-top));
    left: 0; right: 0;
    background: var(--c-bg-deeper);
    border-bottom: 1px solid var(--c-line-dark);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    gap: 4px;
    box-shadow: var(--shadow-md);
    /* Defence in depth: transform alone has been observed to leave
       short content (e.g. the user-menu pill before nav-links is
       fully populated) peeking just below the nav. visibility +
       pointer-events guarantee the closed dropdown is interactive-
       and visually-hidden no matter what. opacity gives a soft
       fade-out alongside the transform-driven slide.
       Keep the dropdown's stacking BELOW the nav's so the nav's
       background covers any tail-end of the slide animation. */
    z-index: 200;
    transform: translateY(-110%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      transform   .2s ease,
      visibility  0s linear .2s,
      opacity     .15s ease;
  }
  .nav-links.open {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition:
      transform   .2s ease,
      visibility  0s linear,
      opacity     .15s ease;
  }
  .nav-links a { padding: 10px 0; font-size: 1rem; color: #d8e2f1; }
  .nav-links a.active::after { display: none; }
  .nav-links a.active { color: var(--c-accent); }
  .nav-cta { text-align: center; margin-top: 8px; }
  .nav-burger { display: block; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .dl-card { grid-template-columns: 1fr; text-align: left; }
  section { padding: 56px 0; }
}

/* ---------- modal + user menu (auth.js) ---------- */

/* Backdrop fills the viewport with flexbox-centered content. The
   backdrop itself scrolls if content overflows — flexbox + overflow:auto
   is the only universally portable way to centre a dialog that may
   exceed viewport height (transform: translate(-50%) breaks here). */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 22, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  overflow-y: auto;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: modal-fade 120ms ease-out;
}
@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop { animation: none; }
}
.modal-content {
  background: var(--c-bg);
  border-radius: 16px;
  border: 1px solid var(--c-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  max-width: 520px;
  width: 100%;
  padding: 28px 28px 24px;
  position: relative;
  margin: auto;        /* extra defence on browsers that mishandle flex centring */
}
.modal-content h2 {
  font-size: 1.4rem;
  margin: 0 0 12px;
  color: var(--c-ink);
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--c-ink-soft);
  padding: 4px 8px;
  border-radius: 6px;
}
.modal-close:hover { color: var(--c-ink); background: rgba(0,0,0,.04); }
.modal[hidden], .modal-backdrop[hidden] { display: none !important; }

/* Profile-modal field rows */
.profile-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .94rem;
}
.profile-row:last-child { border-bottom: 0; }
.profile-row .label { color: var(--c-ink-soft); flex: 0 0 auto; }
.profile-row .value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .85rem;
  word-break: break-all;
  text-align: right;
  flex: 1 1 auto;
}
.profile-row .copy-btn {
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  font-size: .75rem;
  padding: 2px 8px;
  margin-left: 8px;
  cursor: pointer;
  color: var(--c-ink-soft);
}
.profile-row .copy-btn:hover { color: var(--c-ink); border-color: var(--c-ink-soft); }
.admin-badge {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  font-size: .7rem;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  text-transform: uppercase;
  font-weight: 700;
}
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Nav-mounted user menu */
.user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  cursor: pointer;
  font-size: .9rem;
  color: #fff;
  font-family: inherit;
}
.user-menu-trigger:hover {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.10);
}
.user-menu-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.user-menu-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.user-menu-email {
  /* Widened on desktop now that the nav-cta "Get rdbg" button has
     been removed — the email no longer competes for nav real estate.
     Mobile still ellipsis-clips via the responsive override below. */
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .user-menu-email { max-width: 180px; }
}
@media (max-width: 700px) {
  .user-menu-email { max-width: 140px; }
}

/* Downloads-gate panel (when not logged in) */
.downloads-gate-panel {
  max-width: 520px;
  margin: 56px auto;
  text-align: center;
  padding: 36px 28px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-bg-soft, var(--c-bg));
}
.downloads-gate-panel h2 { margin: 0 0 12px; }
.downloads-gate-panel p { color: var(--c-ink-soft); margin: 0 0 20px; }