/* New Life Meeting — stylesheet.
   Design system: adapted from the Resend DESIGN.md in VoltAgent/awesome-design-md
   (true-black canvas, off-white ink, editorial serif display, translucent hairlines,
   one atmospheric glow per section, white primary button). Fraunces stands in for
   Domaine Display; Inter carries body and UI. Single accent: a warm lamp (#ffc53d),
   used as glow and inline stroke only, never as a solid surface. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..600,50&family=Inter:wght@400;500;600&display=swap');

:root {
  --canvas: #000000;
  --surface-card: #0a0a0c;
  --surface-elevated: #101012;
  --surface-deep: #06060a;
  --hairline: rgba(255,255,255,0.06);
  --hairline-strong: rgba(255,255,255,0.14);
  --divider-soft: rgba(255,255,255,0.04);
  --ink: #fcfdff;
  --body: rgba(252,253,255,0.86);
  --charcoal: rgba(252,253,255,0.70);
  --mute: #a1a4a5;
  --ash: #888e90;
  --stone: #464a4d;
  --lamp: #ffc53d;
  --lamp-glow: rgba(255,197,61,0.22);
  --lamp-glow-soft: rgba(255,197,61,0.10);
  --ok: #7ed6a2;
  --serif: 'Fraunces', 'Tiempos Headline', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --measure: 64ch;
  --r-md: 8px;
  --r-lg: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--body);
  background: var(--canvas);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0 0 0.5em; font-feature-settings: "ss01", "liga"; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.0; letter-spacing: -0.01em; font-variation-settings: 'SOFT' 50; }
h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.08; letter-spacing: -0.01em; margin-top: 3rem; }
h3 { font-size: 1.3rem; line-height: 1.25; margin-top: 2rem; }
p, ul, ol { margin: 0 0 1.1em; max-width: var(--measure); }
li { margin-bottom: 0.45em; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink); }
main.page p a, main.page li a, main.page dd a { color: var(--lamp); text-decoration-color: var(--lamp-glow); }
main.page p a.btn { color: var(--canvas); text-decoration: none; }
main.page p a.btn.quiet { color: var(--ink); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 4px; }
blockquote { margin: 2em 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--lamp); font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; color: var(--ink); max-width: var(--measure); }
blockquote cite { display: block; margin-top: 0.7em; font-family: var(--sans); font-size: 0.8rem; font-style: normal; color: var(--ash); }
small, .muted { color: var(--mute); font-size: 0.9rem; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 3rem 0; max-width: var(--measure); }

/* ---------- top bar ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1.5rem; height: 64px; max-width: 75rem; margin: 0 auto;
}
.bar .home { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 0.6rem; }
.bar .home .flame { width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 16px 5px var(--lamp-glow); }
.leave {
  font-family: var(--sans); font-size: 0.875rem; font-weight: 500; line-height: 1; cursor: pointer;
  background: var(--surface-elevated); color: var(--ink); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md); padding: 0 14px; height: 36px;
}
.leave:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.helpnow { max-width: 75rem; margin: 0 auto; padding: 0.2rem 1.5rem 0.6rem; font-size: 0.95rem; color: var(--charcoal); }
.helpnow span:first-child { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin-right: 0.4rem; }
.helpnow a { color: var(--lamp); font-weight: 500; text-decoration-color: var(--lamp-glow); }

nav.pages { max-width: 75rem; margin: 0 auto; padding: 0 1.5rem 0.2rem; display: flex; flex-wrap: wrap; gap: 0 0.25rem; font-size: 0.875rem; font-weight: 500; border-bottom: 1px solid var(--hairline); }
nav.pages a { color: var(--charcoal); text-decoration: none; padding: 0.55rem 0.7rem 0.7rem; border-bottom: 1px solid transparent; margin-bottom: -1px; }
nav.pages a:hover { color: var(--ink); }
nav.pages a[aria-current] { color: var(--ink); border-bottom-color: var(--lamp); }

/* ---------- page body ---------- */
main.page { max-width: 46rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
main.page > header { margin-bottom: 3rem; }
main.page > header p.lede { font-family: var(--sans); font-size: 1.25rem; line-height: 1.45; color: var(--charcoal); max-width: 58ch; }

.card {
  background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem; margin: 1.5rem 0; max-width: var(--measure);
}
.card.lit { position: relative; overflow: hidden; }
.card.lit::before { content: ''; position: absolute; inset: -40% 0 auto 0; height: 80%; background: radial-gradient(ellipse at top, var(--lamp-glow) 0, transparent 60%); pointer-events: none; }
.card.lit > * { position: relative; }
.card h3 { margin-top: 0; }

.btn {
  display: inline-flex; align-items: center; font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer; background: var(--ink); color: var(--canvas);
  border: 1px solid var(--ink); border-radius: var(--r-md); padding: 0 18px; height: 40px; margin: 0.3rem 0.5rem 0.3rem 0;
}
.btn:hover { background: #f1f7fe; }
.btn.quiet { background: var(--surface-elevated); color: var(--ink); border-color: var(--hairline-strong); }
.btn.quiet:hover { background: #18181b; border-color: rgba(255,255,255,0.25); }

dl.facts { max-width: var(--measure); display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.25rem; margin: 0 0 1rem; }
dl.facts dt { color: var(--mute); font-size: 0.9rem; padding-top: 0.1rem; }
dl.facts dd { margin: 0; color: var(--ink); }
.phone { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.phone:hover { color: var(--lamp); }
.placeholder { background: var(--lamp-glow-soft); border-bottom: 1px dotted var(--lamp); padding: 0 0.2em; }

footer.site {
  max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem;
  font-size: 0.8rem; line-height: 1.5; color: var(--ash); border-top: 1px solid var(--divider-soft);
}
footer.site p { max-width: none; }
footer.site a { color: var(--mute); }

/* ---------- entrance: the lit path ---------- */
.hero { position: relative; max-width: 46rem; margin: 0 auto; padding: 6rem 1.5rem 3rem; }
.hero::before { content: ''; position: absolute; left: 50%; top: 0; width: 120vw; height: 520px; transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--lamp-glow) 0, transparent 70%); pointer-events: none; }
.hero > * { position: relative; }
.hero h1 { font-size: clamp(2.6rem, 7.5vw, 4.8rem); margin-bottom: 0.6em; }
.hero p { font-size: 1.2rem; line-height: 1.5; color: var(--body); max-width: 44ch; }
.hero p.hero-call { font-size: 1.05rem; color: var(--ink); }
.hero p.hero-call a { color: var(--lamp); font-weight: 500; text-decoration-color: var(--lamp-glow); }
.hero p.small { font-size: 0.9rem; color: var(--ash); max-width: 46ch; }

.path { position: relative; max-width: 46rem; margin: 0 auto; padding: 1rem 1.5rem 5rem; }
.path::before { content: ''; position: absolute; left: calc(1.5rem + 21px); top: 0; bottom: 5rem; width: 1px; background: linear-gradient(to bottom, var(--lamp-glow), var(--hairline)); }
.stone {
  position: relative; display: block; text-decoration: none;
  padding: 1.5rem 1.75rem 1.5rem 4rem; margin: 0 0 0.75rem;
  border-radius: var(--r-lg); background: var(--surface-card); border: 1px solid var(--hairline);
  transition: border-color 150ms ease, background 150ms ease;
}
.stone:hover, .stone:focus-visible { background: var(--surface-elevated); border-color: var(--hairline-strong); }
.stone .lamp { position: absolute; left: 16px; top: 1.9rem; width: 11px; height: 11px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 16px 5px var(--lamp-glow); }
.stone h2 { margin: 0 0 0.35em; font-size: 1.5rem; }
.stone p { margin: 0; color: var(--charcoal); font-size: 1rem; max-width: 56ch; }
.stone .go { display: inline-block; margin-top: 0.8rem; font-size: 0.875rem; font-weight: 500; color: var(--lamp); }
.path .dawn-note { padding: 2.5rem 0 0 4rem; color: var(--ink); max-width: 52ch; font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; }

@media (prefers-reduced-motion: no-preference) {
  .stone .lamp, .bar .home .flame { animation: breathe 5s ease-in-out infinite; }
  .stone:nth-child(2) .lamp { animation-delay: 0.7s; }
  .stone:nth-child(3) .lamp { animation-delay: 1.4s; }
  .stone:nth-child(4) .lamp { animation-delay: 2.1s; }
  .stone:nth-child(5) .lamp { animation-delay: 2.8s; }
  .stone:nth-child(6) .lamp { animation-delay: 3.5s; }
  .stone:nth-child(7) .lamp { animation-delay: 4.2s; }
  .stone:nth-child(8) .lamp { animation-delay: 4.9s; }
  @keyframes breathe { 0%,100% { box-shadow: 0 0 16px 5px var(--lamp-glow); } 50% { box-shadow: 0 0 22px 8px var(--lamp-glow); } }
}

/* ---------- self-assessment ---------- */
.quiz ol { list-style: none; padding: 0; counter-reset: q; max-width: var(--measure); border-top: 1px solid var(--hairline); }
.quiz li { counter-increment: q; margin: 0; border-bottom: 1px solid var(--hairline); }
.quiz label { display: grid; grid-template-columns: 2.2rem 1.4rem 1fr; gap: 0.75rem; align-items: start; padding: 0.95rem 0.5rem; cursor: pointer; color: var(--body); }
.quiz label::before { content: counter(q); font-family: var(--serif); color: var(--ash); font-size: 1.05rem; padding-top: 0.05rem; }
.quiz input { width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--lamp); }
.quiz label:hover { background: var(--surface-card); }
.tally { position: sticky; bottom: 0; background: var(--canvas); border-top: 1px solid var(--hairline-strong); padding: 0.9rem 0; margin-top: 0; }
.tally p { margin: 0; color: var(--ink); }
.reflect { margin-top: 2rem; background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); padding: 1.5rem 1.75rem; max-width: var(--measure); position: relative; overflow: hidden; }
.reflect::before { content: ''; position: absolute; inset: -40% 0 auto 0; height: 80%; background: radial-gradient(ellipse at top, var(--lamp-glow) 0, transparent 60%); pointer-events: none; }
.reflect > * { position: relative; }
.reflect h2 { margin-top: 0; font-size: 1.5rem; }
.reflect[hidden] { display: none; }

/* ---------- meeting walkthrough ---------- */
.walk { list-style: none; padding: 0; margin: 0 0 2rem; max-width: var(--measure); border-top: 1px solid var(--hairline); }
.walk li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hairline); }
.walk li .when { font-family: var(--serif); color: var(--lamp); font-size: 1rem; padding-top: 0.2rem; }
.walk li h3 { margin: 0 0 0.35em; font-size: 1.2rem; }
.walk li p { margin: 0 0 0.5em; font-size: 1rem; }
.walk li p.you { color: var(--ok); font-weight: 500; }

/* ---------- the truth about lust ---------- */
body.encounter main.page > header h1 { font-size: clamp(3rem, 9vw, 5.5rem); }
body.encounter .slow p { font-size: 1.15rem; line-height: 1.65; margin-bottom: 1.5em; }
body.encounter .slow blockquote { font-size: 1.5rem; margin: 2.2em 0; }
.litany { list-style: none; padding: 0; margin: 1.5rem 0 2.5rem; max-width: var(--measure); }
.litany li { font-family: var(--serif); font-size: clamp(1.3rem, 2.8vw, 1.7rem); line-height: 1.3; color: var(--ink); padding: 1.1rem 0 1.1rem 1.25rem; border-left: 2px solid var(--lamp); margin: 0 0 0.75rem; }
.litany li:last-child { border-left-color: var(--ink); }
.cost { max-width: var(--measure); display: grid; gap: 0; margin: 0 0 1rem; border-top: 1px solid var(--hairline); }
.cost label { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.85rem; align-items: start; padding: 0.8rem 0.6rem; border-bottom: 1px solid var(--hairline); cursor: pointer; color: var(--body); }
.cost label:hover { background: var(--surface-card); }
.cost input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--lamp); }
body.encounter p.tally { position: static; border: 0; padding: 0; font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin-bottom: 1.2rem; }

/* =====================================================================
   RESPONSIVE STANDARD
   Breakpoints (min-width, mobile-first):
     --bp-sm  480px   large phones
     --bp-md  768px   tablets, small laptops
     --bp-lg  1024px  laptops
     --bp-xl  1280px  desktops
   Rules:
     - Base styles are the phone layout. Wider screens only add.
     - Type is fluid with clamp(); no breakpoint changes a font-size.
     - Every tap target is at least 44x44px.
     - Edge padding respects iOS safe areas via env(safe-area-inset-*).
     - Wide content scrolls inside its own container; the body never
       scrolls sideways.
     - Motion and video honour prefers-reduced-motion and
       prefers-reduced-data.
   ===================================================================== */

/* ---- base (phone) ---- */
:root { --edge: max(1.1rem, env(safe-area-inset-left), env(safe-area-inset-right)); }
.bar, .helpnow, nav.pages, main.page, .hero, .hero-in, .path, footer.site { padding-left: var(--edge); padding-right: var(--edge); }
.bar { height: 56px; }
.leave { min-height: 44px; padding: 0 12px; }
.btn { min-height: 44px; }
.helpnow a, nav.pages a, .stone .go, .phone { min-height: 44px; display: inline-flex; align-items: center; }
nav.pages { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; mask-image: linear-gradient(to right, #000 92%, transparent); }
nav.pages::-webkit-scrollbar { display: none; }
nav.pages a { white-space: nowrap; padding: 0.4rem 0.7rem; }
main.page { padding-top: 2.5rem; padding-bottom: 4rem; }
.walk li { grid-template-columns: 1fr; gap: 0.2rem; }
dl.facts { grid-template-columns: 1fr; gap: 0.1rem 0; }
dl.facts dt { margin-top: 0.6rem; }
.stone { padding-left: 3.2rem; }
.path::before { left: calc(var(--edge) + 14px); }
.stone .lamp { left: 9px; }
.path .dawn-note { padding-left: 0; }
.quiz label { grid-template-columns: 1.8rem 1.4rem 1fr; }
.card, .reflect { padding: 1.25rem 1.25rem; }

/* ---- sm: large phones ---- */
@media (min-width: 480px) {
  .card, .reflect { padding: 1.5rem 1.75rem; }
  .quiz label { grid-template-columns: 2.2rem 1.4rem 1fr; }
}

/* ---- md: tablets ---- */
@media (min-width: 768px) {
  :root { --edge: max(1.5rem, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .bar { height: 64px; }
  nav.pages { flex-wrap: wrap; overflow: visible; mask-image: none; gap: 0 0.25rem; }
  nav.pages a { padding: 0.55rem 0.7rem 0.7rem; }
  main.page { padding-top: 4rem; padding-bottom: 6rem; }
  .walk li { grid-template-columns: 6.5rem 1fr; gap: 1rem; }
  dl.facts { grid-template-columns: max-content 1fr; gap: 0.45rem 1.25rem; }
  dl.facts dt { margin-top: 0; }
  .stone { padding-left: 4rem; }
  .path::before { left: calc(var(--edge) + 21px); }
  .stone .lamp { left: 16px; }
  .path .dawn-note { padding-left: 4rem; }
}

/* ---- lg: laptops ---- */
@media (min-width: 1024px) {
  main.page, .hero-in, .path, footer.site { max-width: 46rem; }
}

/* ---- xl: desktops ---- */
@media (min-width: 1280px) {
  .bar, .helpnow, nav.pages { max-width: 80rem; }
}

/* =====================================================================
   ENTRANCE HERO VIDEO
   A muted loop of a man's face lit by his phone at night (Pexels 7942761,
   vertical footage). Phones: full-bleed behind the text. Wide screens: a
   tall column on the right, the headline to its left. Poster frame shows
   instantly and stands in wherever video is off. Decorative: aria-hidden,
   no controls, no sound, disabled under reduced-motion or reduced-data.
   ===================================================================== */
.hero-video { position: relative; overflow: hidden; max-width: none; padding: 0; min-height: 100vh; display: flex; align-items: flex-end; background: #000; }
.hero-video::before { display: none; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 118%; top: -18%; object-fit: cover; object-position: 50% 0%; z-index: 0; }
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 56%, rgba(0,0,0,0.9) 68%, #000 100%); }
.hero-in { position: relative; z-index: 2; width: 100%; max-width: 72rem; margin: 0 auto; padding-top: 1.5rem; padding-bottom: 3rem; }
.hero-in h1 { margin-bottom: 52vh; margin-bottom: 52svh; }
.hero-in > * { width: 100%; max-width: 30rem; }
.hero-in h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; max-width: 18ch; text-shadow: 0 2px 24px rgba(0,0,0,0.8); }
.hero-in p { text-shadow: 0 1px 12px rgba(0,0,0,0.9); }
@media (min-width: 768px) {
  .hero-video { min-height: 92vh; align-items: center; }
  .hero-bg { right: auto; left: 0; top: 0; height: 100%; width: 60%; object-position: 50% 36%; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); }
  .hero-shade { background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 72%, #000 100%); }
  .hero-in { padding-top: 5rem; padding-bottom: 5rem; }
  .hero-in h1 { margin-bottom: 0.6em; }
  .hero-in > * { margin-left: auto; }
  .hero-in h1, .hero-in p, .hero-in p.small, .hero-in p.hero-call { max-width: 30rem; }
}
@media (min-width: 1024px) { .hero-video { min-height: 96vh; } .hero-bg { width: 58%; object-position: 50% 34%; } }
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .hero-bg { display: none; }
  .hero-video { background: #000 url('hero-poster-portrait.jpg') 50% 38% / cover no-repeat; }
}

/* ---------- vector pages: full-bleed video band with the headline over it ---------- */
.vec-hero { position: relative; overflow: hidden; min-height: 62vh; display: flex; align-items: flex-end; background: #000; }
.vec-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: 0; }
.vec-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 35%, rgba(0,0,0,0.75) 70%, #000 100%); }
.vec-in { position: relative; z-index: 2; width: 100%; max-width: 46rem; margin: 0 auto; padding: 8rem var(--edge) 2.5rem; }
.vec-in h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; max-width: 18ch; text-shadow: 0 2px 24px rgba(0,0,0,0.8); }
.vec-in .lede { font-family: var(--sans); font-size: 1.15rem; line-height: 1.45; color: var(--body); max-width: 58ch; text-shadow: 0 1px 12px rgba(0,0,0,0.9); }
.vec-hero + main.page { padding-top: 1.5rem; }
@media (max-width: 767px) and (orientation: portrait) {
  .vec-hero { min-height: 100svh; }
  .vec-bg { height: 64%; object-position: 50% 30%; }
  .vec-shade { background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.15) 48%, #000 64%); }
  .vec-in { padding-top: 62svh; padding-bottom: 2rem; }
}
@media (min-width: 1024px) { .vec-hero { min-height: 72vh; } .vec-in { padding-top: 10rem; padding-bottom: 3rem; } }
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) { .vec-bg { display: none; } .vec-hero { background: #000 center / cover no-repeat; } }

/* Message box */
.msgbox { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hairline); }
.msgbox h2 { margin-top: 0; }
.msgform { display: grid; gap: 0.6rem; max-width: 34rem; }
.msgform label { font-family: var(--sans); font-size: 0.95rem; color: var(--body); margin-top: 0.6rem; }
.msgform textarea, .msgform input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; font-family: var(--sans); font-size: 1rem; color: var(--ink); background: rgba(255,255,255,0.04); border: 1px solid var(--hairline); border-radius: 8px; padding: 0.75rem 0.9rem; }
.msgform textarea:focus, .msgform input[type="text"]:focus { outline: 2px solid var(--lamp); outline-offset: 2px; border-color: transparent; }
.msgform textarea { resize: vertical; min-height: 7rem; }
.msgform .btn { justify-self: start; margin-top: 0.5rem; }
.msgform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.msg-status { font-family: var(--sans); color: var(--body); min-height: 1.4em; margin: 0; }
.msg-status.ok { color: var(--lamp); }
.voice { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.voice-label { font-family: var(--sans); font-size: 0.95rem; color: var(--body); }
.voice-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.voice-row .btn { margin: 0; }
.voice-rec.on { border-color: #e5484d; color: #ff8589; }
.voice-rec.on::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; margin-right: 8px; animation: voicepulse 1s infinite; }
@keyframes voicepulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .voice-rec.on::before { animation: none; } }
.voice-time { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--mute); }
.voice-play { width: 100%; max-width: 34rem; }
.voice-clear { background: none; border: 0; color: var(--mute); font: inherit; font-family: var(--sans); font-size: 0.9rem; text-decoration: underline; cursor: pointer; justify-self: start; padding: 0; }

/* Logo mark in the top bar */
.bar .home .mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 10px var(--lamp-glow)); }