/* No web-font import — this page matches the app's own typographic rule
   exactly: system sans for UI text, system serif for anything standing in
   for "spoken" content (see Apps/MacApp/Sources/Design/VoiceDesignTokens.swift
   TypeScale.speech / .body), system monospace for commands and data. Every
   one of those is a native OS font on the Mac this page is trying to get
   you to install something on, so nothing needs to be fetched. */

/* ---------------------------------------------------------------- */
/* Tokens — copied 1:1 from Tone in VoiceDesignTokens.swift /         */
/* Apps/iOSApp/Sources/Design/Tokens.swift. Do not eyeball these.     */
/* "Amber is you, aqua is Claude" is the one hue rule the whole app   */
/* runs on; this page inherits it rather than inventing a third hue.  */
/* ---------------------------------------------------------------- */
:root{
  --bg: #0E1013;
  --bg-raised: #121519;
  --bg-card: #15181C;
  --border: #2E343B;
  --border-strong: #3C444D;
  --fg: #F2F4F7;
  --fg-muted: #A7B0BA;
  --fg-dim: #6B7480;

  /* The two-hue system: amber for the user / your action, aqua for Claude. */
  --amber: #FFB23F;
  --amber-ink: #241605;
  --aqua: #63E6E2;
  --aqua-ink: #04201F;

  --danger: #FF5A5A;
  --danger-dim: #3A1414;
  --ok: #4ADE80;
  --caution: #E8A33D;
  --caution-dim: #332107;

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: ui-serif, 'New York', Charter, Georgia, serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius: 10px;
  --radius-lg: 16px;

  --max: 1120px;
}

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

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

html, body{
  /* Belt-and-suspenders against the exact class of bug this page shipped
     with: any single element (a wide <pre>, a long unbroken token) forcing
     intrinsic width past the viewport is clipped here rather than pushing
     the whole page into horizontal scroll. The real fix is min-width:0 on
     every grid/flex child below — this is the backstop, not the fix. */
  overflow-x: hidden;
  width: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 12% -5%, rgba(255,178,63,0.10), transparent 40%),
    radial-gradient(circle at 92% 10%, rgba(99,230,226,0.08), transparent 42%),
    linear-gradient(var(--bg), var(--bg));
  background-attachment: fixed;
}

a{ color: var(--amber); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

code{
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(255,178,63,0.12);
  color: #FFD48A;
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* System sans for headings, not mono — matches TypeScale.title in the app
   itself (a plain system-weight font, not a monospace display face). Mono
   is reserved for the roles it actually has in the app: labels, commands,
   data (TypeScale.mono / .command). */
h1,h2,h3{
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

p{ margin: 0; }

/* Stands in for "spoken" content the way TypeScale.speech does in the app —
   a system serif (New York on Apple platforms) used nowhere else on this
   page, so it reads as a deliberate quote/voice rather than body text. */
.speech{ font-family: var(--font-serif); font-style: normal; }

/* subtle film-grain texture for depth, not decoration overload */
.grain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- */
/* Topbar                                                            */
/* ---------------------------------------------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(2,6,23,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brand{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fg);
}
.brand:hover{ text-decoration: none; }
.brand-glyph{ color: var(--amber); }
.brand-accent{ color: var(--amber); }

.topnav{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9rem;
}
.topnav a{ color: var(--fg-muted); white-space: nowrap; }
.topnav a:hover{ color: var(--fg); text-decoration: none; }
.topnav-cta{
  color: var(--amber-ink) !important;
  background: var(--amber);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-family: var(--font-mono);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.topnav-cta:hover{
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255,178,63,0.35);
}

@media (max-width: 720px){
  .topnav a:not(.topnav-cta){ display: none; }
}

/* ---------------------------------------------------------------- */
/* Hero                                                               */
/* ---------------------------------------------------------------- */
.hero{
  position: relative;
  z-index: 2;
  padding: var(--space-6) var(--space-3) var(--space-5);
}
.hero-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  align-items: center;
}
/* The actual fix for the mobile width bug: a CSS grid item defaults to
   min-width:auto, so a wide-content child (the old ASCII diagram, still
   true of anything with white-space:pre) can force its whole column past
   the viewport regardless of how the diagram's own overflow is set. Without
   this, overflow-x:auto on a descendant does nothing — the grid track
   itself already grew. */
.hero-copy, .hero-visual{ min-width: 0; }
@media (max-width: 960px){
  .hero-inner{ grid-template-columns: 1fr; gap: var(--space-4); }
  .hero{ padding-top: var(--space-4); }
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

h1{
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  color: var(--fg);
  margin-bottom: var(--space-3);
}

.lede{
  font-size: 1.15rem;
  color: var(--fg-muted);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}
.lede code{ font-size: 0.82em; }

.cta-row{ margin-bottom: var(--space-3); }

.btn-download{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--amber);
  color: var(--amber-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1rem 1.6rem;
  border-radius: var(--radius);
  min-height: 44px;
  box-shadow: 0 8px 30px rgba(255,178,63,0.25);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.btn-download:hover{
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(255,178,63,0.4);
  background: #FFC463;
}
.btn-download:active{ transform: translateY(0); }

.cta-meta{
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-footnote{
  font-size: 0.88rem;
  color: var(--fg-dim);
  max-width: 48ch;
}
.hero-footnote a{ color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }

/* --- terminal mockup --- */
.hero-visual{ position: relative; }
.terminal{
  background: #060b18;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.terminal-bar{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: #0b1220;
  border-bottom: 1px solid var(--border);
}
.tdot{ width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.tdot-r{ background: #ff5f57; }
.tdot-y{ background: #febc2e; }
.tdot-g{ background: #28c840; }
.terminal-title{
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-16px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-dim);
}
.terminal-body{
  margin: 0;
  padding: 1.6rem 1.4rem 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--fg-muted);
  white-space: pre;
  overflow-x: auto;
}
.tmuted{ color: var(--fg-dim); }
/* Two-hue split within the diagram itself, not decorative: the leg carrying
   your voice in is amber, the leg carrying Claude's reply back is aqua —
   literally the app's own "amber is you, aqua is Claude" rule applied to
   its own data-flow diagram. */
.taccent-user{ color: var(--amber); }
.taccent-claude{ color: var(--aqua); }
.tcursor{
  color: var(--amber);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }
.terminal-compact{ max-width: 560px; }
.terminal-compact .terminal-body{ font-size: 0.78rem; }

/* --- Halo: the app's actual hero, not a metaphor for it ---
   Mirrors Apps/iOSApp/Sources/Views/Halo.swift — "Idle Halo as the hero: it
   introduces the object the whole app is about before it means anything."
   Same move here: a page selling a voice app should open on the one shape
   that *is* the product, cycling the same three states the app itself
   cycles through (idle → listening (amber) → speaking (aqua)), not a
   generic terminal-window screenshot standing in for it. */
.halo-stage{
  position: relative;
  aspect-ratio: 1;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* No flat filled "dot" at the centre — the real Halo's core is a soft
   radial-gradient glow (a lit object, not a disc), and the ring itself
   carries a travelling ripple. Fixed in the "speaking" (aqua) state rather
   than cycling: this page only ever shows one still moment, so it should be
   the one that reads as alive at a glance, not idle. */
.halo-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--aqua);
  opacity: 0.7;
}
.halo-glow{
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,230,226,0.55) 0%, rgba(99,230,226,0.12) 45%, transparent 72%);
  filter: blur(6px);
  animation: halo-breathe 2.6s ease-in-out infinite;
}
.halo-pulse{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--aqua);
  animation: halo-ripple 2.6s ease-out infinite;
}
.halo-pulse.p2{ animation-delay: 1.3s; }
@keyframes halo-breathe{
  0%, 100%{ opacity: 0.7; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.06); }
}
@keyframes halo-ripple{
  0%{ transform: scale(0.82); opacity: 0.9; }
  100%{ transform: scale(1.28); opacity: 0; }
}
.halo-label{
  position: absolute;
  bottom: -2.4rem;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aqua);
}
@media (prefers-reduced-motion: reduce){
  .halo-glow, .halo-pulse{ animation: none; }
  .halo-pulse{ opacity: 0.25; }
}

/* ---------------------------------------------------------------- */
/* Sections                                                           */
/* ---------------------------------------------------------------- */
.section{
  position: relative;
  z-index: 2;
  padding: var(--space-6) var(--space-3);
  border-top: 1px solid var(--border);
}
.section-inner{ max-width: var(--max); margin: 0 auto; }
.section-alt{ background: linear-gradient(180deg, rgba(15,23,42,0.4), transparent); }
.section-danger{ background: linear-gradient(180deg, rgba(74,36,22,0.12), transparent); }

.kicker{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-dim);
  margin-right: 0.6rem;
  vertical-align: middle;
}
h2{
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--fg);
  margin-bottom: var(--space-2);
}
.section-lede{
  color: var(--fg-muted);
  max-width: 68ch;
  font-size: 1.02rem;
  margin-bottom: var(--space-4);
}
.section-lede strong{ color: var(--fg); }

/* --- feature cards --- */
.card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.card-grid > *, .steps > *{ min-width: 0; }
@media (max-width: 860px){ .card-grid{ grid-template-columns: 1fr; } }
.card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: border-color 200ms ease, transform 200ms ease;
}
.card:hover{ border-color: var(--border-strong); transform: translateY(-3px); }
.card-num{
  display: block;
  font-family: var(--font-mono);
  color: var(--amber);
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}
.card h3{ color: var(--fg); font-size: 1.1rem; margin-bottom: 0.6rem; }
.card p{ color: var(--fg-muted); font-size: 0.95rem; }
/* "Voice in" is your side of the pipe (amber, the default above); "voice
   out" is Claude's (aqua) — same split as the diagram, applied consistently
   rather than invented twice. */
.card--claude .card-num{ color: var(--aqua); }

/* --- feature rows (the "new on the phone" section) ---
   Deliberately a ledger, no card grid: four entries of unequal weight read
   better as ruled rows than as a row of identical boxes. Same construction
   as .security-block (border-top ruled prose), plus a mono tag column that
   does the job a decorative icon would otherwise fake. */
.feature-rows{ margin-bottom: var(--space-4); }
.feature-row{
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.feature-row:first-child{ border-top: none; padding-top: 0; }
.feature-row > *{ min-width: 0; }
.feature-tag{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  padding-top: 0.25rem;
  white-space: nowrap;
}
.feature-body h3{ color: var(--fg); font-size: 1.1rem; margin-bottom: 0.6rem; }
.feature-body p{ color: var(--fg-muted); font-size: 0.98rem; max-width: 68ch; }
.feature-body strong{ color: var(--fg); }
@media (max-width: 720px){
  .feature-row{ grid-template-columns: 1fr; gap: 0.4rem; }
  .feature-tag{ padding-top: 0; }
}
.terminal-phone{ margin-top: var(--space-2); }

/* --- checklist --- */
.checklist{
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.checklist li{
  display: flex;
  gap: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.checklist-mark{
  font-family: var(--font-mono);
  color: var(--amber);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  padding-top: 0.1rem;
}
.checklist-body{ min-width: 0; }
.checklist-body h3{ color: var(--fg); font-size: 1.05rem; margin-bottom: 0.4rem; }
.checklist-body p{ color: var(--fg-muted); font-size: 0.95rem; margin-bottom: 0.6rem; }
.checklist-body p:last-child{ margin-bottom: 0; }
.code-line{
  margin: 0;
  background: #060b18;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
}
.code-line code{ background: none; padding: 0; color: var(--amber); }

.callout{
  border-radius: var(--radius);
  padding: var(--space-3);
  font-size: 0.95rem;
  border: 1px solid;
}
.callout-warn{
  background: rgba(245,185,66,0.08);
  border-color: rgba(245,185,66,0.35);
  color: #f5dca3;
}
.callout-warn strong{ color: var(--caution); }

/* --- security --- */
.security-block{
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.security-block:first-of-type{ border-top: none; padding-top: 0; }
.security-block h3{
  color: #ffb199;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}
.security-block p, .security-block li{
  color: var(--fg-muted);
  font-size: 0.98rem;
}
.security-block ul{ margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.security-block-good h3{ color: var(--amber); }
.security-block em{ color: var(--fg); font-style: normal; border-bottom: 1px dashed var(--border-strong); }

/* --- install steps --- */
.steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 720px){ .steps{ grid-template-columns: 1fr; } }
.steps li{
  display: flex;
  gap: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.step-num{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--amber-ink);
  background: var(--amber);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.steps h3{ color: var(--fg); font-size: 1.02rem; margin-bottom: 0.4rem; }
.steps p{ color: var(--fg-muted); font-size: 0.92rem; }

/* ---------------------------------------------------------------- */
/* Doc pages (/privacy, /support) — long-form prose on the same      */
/* tokens. Narrower measure than the marketing sections: these are   */
/* read top to bottom, not scanned, so the line length rule wins     */
/* over the 1120px marketing max.                                    */
/* ---------------------------------------------------------------- */
.doc{
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
}
.doc-header{ margin-bottom: var(--space-4); }
.doc-header h1{
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-bottom: var(--space-2);
}
.doc-meta{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-dim);
}
.doc-lede{
  color: var(--fg-muted);
  font-size: 1.08rem;
  max-width: 62ch;
  margin-top: var(--space-2);
}
.doc h2{
  font-size: 1.35rem;
  margin: var(--space-5) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.doc h3{
  font-size: 1.05rem;
  color: var(--fg);
  margin: var(--space-3) 0 var(--space-1);
}
.doc p{ color: var(--fg-muted); margin-bottom: var(--space-2); max-width: 68ch; }
.doc p strong{ color: var(--fg); }
.doc ul{
  margin: 0 0 var(--space-2);
  padding-left: 1.3rem;
  color: var(--fg-muted);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.doc li{ max-width: 64ch; }
.doc li strong{ color: var(--fg); }

/* Fact box: the one-glance summary at the top of the privacy page. */
.doc-facts{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}
.doc-facts ul{ margin: 0; padding-left: 1.3rem; }
.doc-facts .kicker{ display: block; margin-bottom: var(--space-1); }

/* FAQ: native <details>, no JS. Summary rows meet the 44px touch rule. */
.faq{ display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.faq details{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq details[open]{ border-color: var(--border-strong); }
.faq summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--fg);
  font-weight: 600;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::before{
  content: ">";
  font-family: var(--font-mono);
  color: var(--amber);
  flex-shrink: 0;
  transition: transform 150ms ease;
}
.faq details[open] summary::before{ transform: rotate(90deg); }
.faq .faq-body{ padding: 0 var(--space-3) var(--space-3); }
.faq .faq-body p{ color: var(--fg-muted); font-size: 0.96rem; margin-bottom: var(--space-1); max-width: 62ch; }
.faq .faq-body p:last-child{ margin-bottom: 0; }
.faq .faq-body ul{ font-size: 0.96rem; }

/* Contact card on /support */
.contact-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
}
.contact-card p{ margin: 0; color: var(--fg-muted); max-width: 40ch; }
.btn-mail{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--amber);
  color: var(--amber-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  min-height: 44px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn-mail:hover{
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255,178,63,0.35);
}

.footer-links{
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.footer-links a{ color: var(--fg-muted); font-size: 0.85rem; }

/* ---------------------------------------------------------------- */
/* Footer                                                             */
/* ---------------------------------------------------------------- */
.footer{
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--space-3);
}
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-dim);
  font-size: 0.85rem;
}
.footer-inner .brand-glyph{ font-family: var(--font-mono); flex-shrink: 0; }