/* ============================================================
   VERSION_A — Midnight Navy × Champagne
   body.theme-a override sheet (tokens, layout, a11y, SVG)
   ============================================================ */

/* ---------- Tokens ---------- */
body.theme-a {
  --ivory: #FAF8F4;
  --ivory-2: #F0EBE1;
  --paper: #FFFEFA;
  --ink: #171C24;
  --ink-soft: #4B5462;
  --green: #101F35;        /* primary */
  --green-deep: #0A1626;
  --green-mid: #506A85;    /* secondary */
  --bronze: #D9B989;       /* champagne */
  --bronze-soft: #E7D4AC;
  --line: #E4DED1;
  --line-dark: rgba(250, 248, 244, 0.16);
  --error: #A03A2E;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(10, 22, 38, 0.16);
  --accent-deep: #8A6B3C;  /* readable champagne-ink on light */
  --accent-mid: #B08D55;

  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  color-scheme: light;
  scrollbar-color: #506A85 #EFE9DE;
}

/* ---------- Type rhythm ---------- */
.theme-a h1, .theme-a h2, .theme-a h3 { letter-spacing: -0.015em; }
.theme-a .display { line-height: 1.04; letter-spacing: -0.02em; }
.theme-a .lede { max-width: 58ch; }
.theme-a .kicker { color: var(--accent-deep); letter-spacing: 0.22em; }
.theme-a .kicker.on-dark { color: var(--bronze-soft); }

/* ---------- Buttons ---------- */
.theme-a .btn-primary { background: var(--green); color: var(--ivory); }
.theme-a .btn-primary:hover { background: var(--green-deep); }
.theme-a .btn-bronze { background: var(--bronze); color: #101F35; }
.theme-a .btn-bronze:hover { background: #C6A36D; }
.theme-a .btn-ghost { color: var(--ink); border-color: var(--ink-soft); }
.theme-a .btn-ghost:hover { border-color: var(--ink); }
.theme-a .btn-ghost.on-dark { color: var(--ivory); border-color: rgba(250, 248, 244, 0.4); }
.theme-a .btn-ghost.on-dark:hover { border-color: var(--ivory); }

/* ---------- Nav ---------- */
.theme-a .nav { background: rgba(10, 22, 38, 0.92); border-bottom: 1px solid var(--line-dark); }
.theme-a .wordmark { color: var(--ivory); }
.theme-a .nav-links a { color: rgba(250, 248, 244, 0.75); }
.theme-a .nav-links a:hover { color: var(--ivory); }

/* ---------- Dark bands / pricing / footer ---------- */
.theme-a .band { background: var(--green); color: var(--ivory); }
.theme-a .band .lede { color: rgba(250, 248, 244, 0.8); }
.theme-a .pricing { background: var(--green-deep); color: var(--ivory); }
.theme-a .price small { color: rgba(250, 248, 244, 0.6); }
.theme-a .includes li { color: rgba(250, 248, 244, 0.85); }
.theme-a .includes li::before { color: var(--bronze-soft); }
.theme-a .fineprint { color: rgba(250, 248, 244, 0.55); }
.theme-a .footer {
  background: var(--green-deep);
  color: rgba(250, 248, 244, 0.6);
  border-top: 1px solid var(--line-dark);
}
.theme-a .footer a { color: rgba(250, 248, 244, 0.6); }
.theme-a .footer a:hover { color: var(--ivory); }

/* ---------- Cards / steps / FAQ ---------- */
.theme-a .q-card { background: var(--paper); border-color: var(--line); }
.theme-a .q-card blockquote { color: var(--green); }
.theme-a .cap-card { background: var(--paper); border-color: var(--line); }
.theme-a .cap-icon { background: var(--ivory-2); color: var(--green); }
.theme-a .step::before { color: var(--accent-mid); }
.theme-a details { border-bottom-color: var(--line); }
.theme-a details summary::after { color: var(--accent-deep); }
.theme-a .dot.active { background: var(--accent-mid); }

/* ---------- Modal / forms ---------- */
.theme-a .overlay { background: rgba(8, 17, 31, 0.58); }
.theme-a .modal { background: var(--paper); }
.theme-a .field input[type="email"],
.theme-a .field input[type="text"] { background: var(--paper); color: var(--ink); border-color: var(--line); }
.theme-a .field input:focus { outline: 2px solid var(--accent-mid); outline-offset: 1px; border-color: var(--accent-deep); }
.theme-a .brand-chips { background: var(--paper); border-color: var(--line); }
.theme-a .chip { background: var(--ivory); border-color: var(--line); color: var(--ink); }
.theme-a .chip:hover { border-color: var(--green); }
.theme-a .chip.selected { background: var(--green); color: var(--ivory); border-color: var(--green); }
.theme-a .summary { background: var(--ivory); border-color: var(--line); }
.theme-a .assurance { background: var(--ivory); border-color: var(--line); }
.theme-a .assurance svg { color: var(--green); }
.theme-a .spinner { border: 2px solid rgba(250, 248, 244, 0.35); border-top-color: var(--ivory); }

/* ---------- Beta ---------- */
.theme-a .beta-wrap {
  background:
    radial-gradient(900px 420px at 50% -60px, rgba(217, 185, 137, 0.16), transparent 65%),
    var(--green-deep);
  color: var(--ivory);
}
.theme-a .beta-summary { background: rgba(250, 248, 244, 0.05); border-color: var(--line-dark); }
.theme-a .beta-summary .k { color: rgba(250, 248, 244, 0.55); }
.theme-a .beta-fine { color: rgba(250, 248, 244, 0.5); }
.theme-a .beta-check { border-color: var(--bronze-soft); color: var(--bronze-soft); }

/* ---------- Inline SVG hardcode remap ---------- */
.theme-a [fill="#1C3527"] { fill: #101F35; }
.theme-a [fill="#122118"] { fill: #0A1626; }
.theme-a [fill="#2A4A36"] { fill: #506A85; }
.theme-a [fill="#B0803E"] { fill: #D9B989; }
.theme-a [fill="#C9A063"] { fill: #E7D4AC; }
.theme-a [fill="#F7F2E8"] { fill: #FAF8F4; }
.theme-a [fill="#FFFDF8"] { fill: #FFFEFA; }
.theme-a [fill="#EFE8D9"] { fill: #F0EBE1; }
.theme-a [stroke="#1C3527"] { stroke: #101F35; }
.theme-a [stroke="#122118"] { stroke: #0A1626; }
.theme-a [stroke="#2A4A36"] { stroke: #506A85; }
.theme-a [stroke="#B0803E"] { stroke: #D9B989; }
.theme-a [stroke="#C9A063"] { stroke: #E7D4AC; }
.theme-a [stroke="#F7F2E8"] { stroke: #FAF8F4; }
.theme-a [stop-color="#1C3527"] { stop-color: #101F35; }
.theme-a [stop-color="#122118"] { stop-color: #0A1626; }
.theme-a [stop-color="#B0803E"] { stop-color: #D9B989; }
.theme-a [stop-color="#C9A063"] { stop-color: #E7D4AC; }

/* ---------- Selection / focus / scrollbars ---------- */
.theme-a ::selection { background: #D9B989; color: #101F35; }
.theme-a :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.theme-a :is(.nav, .hero, .band, .pricing, .footer, .beta-wrap) :focus-visible { outline-color: var(--bronze-soft); }
.theme-a ::-webkit-scrollbar { width: 10px; height: 10px; }
.theme-a ::-webkit-scrollbar-track { background: #EFE9DE; }
.theme-a ::-webkit-scrollbar-thumb { background: #506A85; border-radius: 999px; border: 2px solid #EFE9DE; }
.theme-a ::-webkit-scrollbar-thumb:hover { background: #101F35; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .theme-a .trust-strip { margin-inline: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .theme-a *, .theme-a *::before, .theme-a *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .theme-a .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   VERSION_B — Aubergine Plum × Gold
   body.theme-b override sheet (tokens, layout, a11y, SVG)
   ============================================================ */

/* ---------- Tokens ---------- */
body.theme-b {
  --ivory: #FAF7F5;
  --ivory-2: #F2ECE8;
  --paper: #FFFEFC;
  --ink: #241C2C;
  --ink-soft: #5B5264;
  --green: #30243C;        /* primary */
  --green-deep: #231A2F;
  --green-mid: #9586A6;    /* secondary */
  --bronze: #D5B47D;       /* gold */
  --bronze-soft: #E6CE9E;
  --line: #E6DCD5;
  --line-dark: rgba(250, 247, 245, 0.16);
  --error: #A03A2E;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(35, 26, 47, 0.16);
  --accent-deep: #85663A;  /* readable gold-ink on light */
  --accent-mid: #AD8B58;

  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  color-scheme: light;
  scrollbar-color: #9586A6 #F0E9E4;
}

/* ---------- Type rhythm ---------- */
.theme-b h1, .theme-b h2, .theme-b h3 { letter-spacing: -0.015em; }
.theme-b .display { line-height: 1.04; letter-spacing: -0.02em; }
.theme-b .lede { max-width: 58ch; }
.theme-b .kicker { color: var(--accent-deep); letter-spacing: 0.22em; }
.theme-b .kicker.on-dark { color: var(--bronze-soft); }

/* ---------- Buttons ---------- */
.theme-b .btn-primary { background: var(--green); color: var(--ivory); }
.theme-b .btn-primary:hover { background: var(--green-deep); }
.theme-b .btn-bronze { background: var(--bronze); color: #241C2C; }
.theme-b .btn-bronze:hover { background: #C09A5F; }
.theme-b .btn-ghost { color: var(--ink); border-color: var(--ink-soft); }
.theme-b .btn-ghost:hover { border-color: var(--ink); }
.theme-b .btn-ghost.on-dark { color: var(--ivory); border-color: rgba(250, 247, 245, 0.4); }
.theme-b .btn-ghost.on-dark:hover { border-color: var(--ivory); }

/* ---------- Nav ---------- */
.theme-b .nav { background: rgba(35, 26, 47, 0.92); border-bottom: 1px solid var(--line-dark); }
.theme-b .wordmark { color: var(--ivory); }
.theme-b .nav-links a { color: rgba(250, 247, 245, 0.75); }
.theme-b .nav-links a:hover { color: var(--ivory); }

/* ---------- Dark bands / pricing / footer ---------- */
.theme-b .band { background: var(--green); color: var(--ivory); }
.theme-b .band .lede { color: rgba(250, 247, 245, 0.8); }
.theme-b .pricing { background: var(--green-deep); color: var(--ivory); }
.theme-b .price small { color: rgba(250, 247, 245, 0.6); }
.theme-b .includes li { color: rgba(250, 247, 245, 0.85); }
.theme-b .includes li::before { color: var(--bronze-soft); }
.theme-b .fineprint { color: rgba(250, 247, 245, 0.55); }
.theme-b .footer {
  background: var(--green-deep);
  color: rgba(250, 247, 245, 0.6);
  border-top: 1px solid var(--line-dark);
}
.theme-b .footer a { color: rgba(250, 247, 245, 0.6); }
.theme-b .footer a:hover { color: var(--ivory); }

/* ---------- Cards / steps / FAQ ---------- */
.theme-b .q-card { background: var(--paper); border-color: var(--line); }
.theme-b .q-card blockquote { color: var(--green); }
.theme-b .cap-card { background: var(--paper); border-color: var(--line); }
.theme-b .cap-icon { background: var(--ivory-2); color: var(--green); }
.theme-b .step::before { color: var(--accent-mid); }
.theme-b details { border-bottom-color: var(--line); }
.theme-b details summary::after { color: var(--accent-deep); }
.theme-b .dot.active { background: var(--accent-mid); }

/* ---------- Modal / forms ---------- */
.theme-b .overlay { background: rgba(26, 18, 35, 0.58); }
.theme-b .modal { background: var(--paper); }
.theme-b .field input[type="email"],
.theme-b .field input[type="text"] { background: var(--paper); color: var(--ink); border-color: var(--line); }
.theme-b .field input:focus { outline: 2px solid var(--accent-mid); outline-offset: 1px; border-color: var(--accent-deep); }
.theme-b .brand-chips { background: var(--paper); border-color: var(--line); }
.theme-b .chip { background: var(--ivory); border-color: var(--line); color: var(--ink); }
.theme-b .chip:hover { border-color: var(--green); }
.theme-b .chip.selected { background: var(--green); color: var(--ivory); border-color: var(--green); }
.theme-b .summary { background: var(--ivory); border-color: var(--line); }
.theme-b .assurance { background: var(--ivory); border-color: var(--line); }
.theme-b .assurance svg { color: var(--green); }
.theme-b .spinner { border: 2px solid rgba(250, 247, 245, 0.35); border-top-color: var(--ivory); }

/* ---------- Beta ---------- */
.theme-b .beta-wrap {
  background:
    radial-gradient(900px 420px at 50% -60px, rgba(213, 180, 125, 0.16), transparent 65%),
    var(--green-deep);
  color: var(--ivory);
}
.theme-b .beta-summary { background: rgba(250, 247, 245, 0.05); border-color: var(--line-dark); }
.theme-b .beta-summary .k { color: rgba(250, 247, 245, 0.55); }
.theme-b .beta-fine { color: rgba(250, 247, 245, 0.5); }
.theme-b .beta-check { border-color: var(--bronze-soft); color: var(--bronze-soft); }

/* ---------- Inline SVG hardcode remap ---------- */
.theme-b [fill="#1C3527"] { fill: #30243C; }
.theme-b [fill="#122118"] { fill: #231A2F; }
.theme-b [fill="#2A4A36"] { fill: #9586A6; }
.theme-b [fill="#B0803E"] { fill: #D5B47D; }
.theme-b [fill="#C9A063"] { fill: #E6CE9E; }
.theme-b [fill="#F7F2E8"] { fill: #FAF7F5; }
.theme-b [fill="#FFFDF8"] { fill: #FFFEFC; }
.theme-b [fill="#EFE8D9"] { fill: #F2ECE8; }
.theme-b [stroke="#1C3527"] { stroke: #30243C; }
.theme-b [stroke="#122118"] { stroke: #231A2F; }
.theme-b [stroke="#2A4A36"] { stroke: #9586A6; }
.theme-b [stroke="#B0803E"] { stroke: #D5B47D; }
.theme-b [stroke="#C9A063"] { stroke: #E6CE9E; }
.theme-b [stroke="#F7F2E8"] { stroke: #FAF7F5; }
.theme-b [stop-color="#1C3527"] { stop-color: #30243C; }
.theme-b [stop-color="#122118"] { stop-color: #231A2F; }
.theme-b [stop-color="#B0803E"] { stop-color: #D5B47D; }
.theme-b [stop-color="#C9A063"] { stop-color: #E6CE9E; }

/* ---------- Selection / focus / scrollbars ---------- */
.theme-b ::selection { background: #D5B47D; color: #30243C; }
.theme-b :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.theme-b :is(.nav, .hero, .band, .pricing, .footer, .beta-wrap) :focus-visible { outline-color: var(--bronze-soft); }
.theme-b ::-webkit-scrollbar { width: 10px; height: 10px; }
.theme-b ::-webkit-scrollbar-track { background: #F0E9E4; }
.theme-b ::-webkit-scrollbar-thumb { background: #9586A6; border-radius: 999px; border: 2px solid #F0E9E4; }
.theme-b ::-webkit-scrollbar-thumb:hover { background: #30243C; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .theme-b .trust-strip { margin-inline: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .theme-b *, .theme-b *::before, .theme-b *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .theme-b .reveal { opacity: 1; transform: none; transition: none; }
}
.theme-a #brand-search,.theme-a #brand-other,.theme-b #brand-search,.theme-b #brand-other{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--line)!important}
.theme-a .nav,.theme-b .nav{background:var(--ivory);border-bottom:1px solid var(--line)}
.theme-a .wordmark,.theme-b .wordmark{color:var(--green)}
.theme-a .nav-links a,.theme-b .nav-links a{color:var(--ink-soft)}
.theme-a .nav-links a:hover,.theme-b .nav-links a:hover{color:var(--green)}
.brand-mark-window{position:relative;display:block;flex:0 0 48px;width:48px;height:46px;overflow:hidden;border-radius:50%;background:var(--ivory)}
.brand-mark-window img{position:absolute;left:-25px;top:-29px;width:100px;max-width:none;height:auto}
.theme-b .brand-mark-window img{top:-106px}
.prototype-note{margin:0 0 1rem;padding:.7rem .85rem;background:var(--ivory-2);border:1px solid var(--line);color:var(--ink-soft);font-size:.84rem}
.sample-fill{margin:0 0 .8rem;padding:.55rem .75rem;font-size:.82rem}
.preview-status{min-height:1.4em;margin:.6rem 0;color:var(--ink-soft);font-size:.82rem}
.theme-a .booking-preview,.theme-b .booking-preview{opacity:.62;cursor:not-allowed}

/* ---------- Family-first editorial hero ---------- */
.theme-a { --hero-scrim-rgb: 10, 22, 38; }
.theme-b { --hero-scrim-rgb: 36, 26, 45; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(680px, 76vh, 760px);
  padding: 0;
  color: var(--ivory);
  text-align: left;
  background: var(--green-deep);
}
.hero .container {
  position: relative;
  display: flex;
  align-items: center;
  max-width: none;
  min-height: inherit;
  margin: 0;
  padding: 0;
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: min(43%, 570px);
  margin-left: clamp(28px, 7.2vw, 116px);
  padding-block: 52px;
}
.hero .display {
  max-width: 10ch;
  margin: 0 0 1.2rem;
  font-size: clamp(3.25rem, 5.2vw, 5rem);
  line-height: 0.99;
  letter-spacing: -0.035em;
}
.hero .lede {
  max-width: 43ch;
  margin: 0 0 1.8rem;
  color: color-mix(in srgb, var(--ivory) 83%, transparent);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.65;
}
.hero .hero-ctas { justify-content: flex-start; margin: 0 0 1.5rem; }
.hero .hero-ctas .btn { border-radius: 6px; }
.hero .trust-strip {
  max-width: 48ch;
  margin: 1.1rem 0 0;
  color: color-mix(in srgb, var(--ivory) 66%, transparent);
  font-size: 0.82rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
.hero .trust-strip strong { color: color-mix(in srgb, var(--ivory) 88%, transparent); }
.hero-audience {
  display: block;
  margin-top: 1.1rem;
  color: var(--bronze-soft) !important;
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
}
.theme-a .hero-audience,
.theme-b .hero-audience { letter-spacing: 0.01em; text-transform: none; }
.hero-photo {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 61%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--green-deep);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
  transform: scale(1.035);
  animation: hero-photo-settle 9s cubic-bezier(.22,.61,.36,1) .2s 1 forwards;
  will-change: transform;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--green-deep) 0%, rgba(var(--hero-scrim-rgb),.78) 11%, rgba(var(--hero-scrim-rgb),.22) 36%, transparent 64%);
}
.demo-note {
  position: absolute;
  z-index: 1;
  left: clamp(22px, 3vw, 46px);
  bottom: clamp(22px, 3vw, 44px);
  display: grid;
  gap: 0.25rem;
  max-width: 290px;
  padding: 0.72rem 1rem 0.78rem;
  border: 1px solid rgba(var(--hero-scrim-rgb),.2);
  border-radius: 5px;
  color: #fff;
  background: rgba(var(--hero-scrim-rgb),.76);
  box-shadow: 0 14px 34px rgba(0,0,0,.2);
  animation: hero-note-in 700ms cubic-bezier(.22,.61,.36,1) .6s 1 both;
}
.demo-eyebrow { color: var(--bronze); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.demo-content { color: #fff; font-size: .88rem; letter-spacing: .01em; }
@keyframes hero-photo-settle { to { transform: scale(1); } }
@keyframes hero-note-in { from { opacity: .55; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 920px) {
  .hero { min-height: 0; }
  .hero .container { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-copy { width: auto; max-width: 620px; margin: 0; padding: clamp(44px,8vw,72px) clamp(24px,6vw,56px) 24px; }
  .hero .display { max-width: 13ch; font-size: clamp(3rem,7.5vw,4rem); }
  .hero-photo { position: relative; inset: auto; order: 2; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .hero-photo img { object-position: 50% 60%; }
  .hero-photo::after { background: linear-gradient(0deg, rgba(var(--hero-scrim-rgb),.56), transparent 44%); }
  .demo-note { left: 22px; bottom: 22px; }
}
@media (max-width: 480px) {
  .hero-copy { display: contents; }
  .hero .display { order: 1; max-width: 12ch; margin: 0 22px 1rem; padding-top: 36px; font-size: clamp(2.625rem,11vw,2.75rem); }
  .hero .lede { order: 2; margin: 0 22px 1.2rem; font-size: 1rem; }
  .hero .hero-ctas { order: 3; margin: 0 22px 1.2rem; flex-direction: row; flex-wrap: wrap; gap: .55rem; align-items: stretch; }
  .hero .hero-ctas .btn { min-height: 48px; flex: 1 1 auto; min-width: 0; padding: .55rem .8rem; font-size: 14px; }
  .hero-photo { order: 4; height: auto; aspect-ratio: 4 / 3; }
  .hero-audience { order: 5; margin: 1rem 22px 0; color: var(--ivory) !important; font-size: .95rem; letter-spacing: .01em; text-transform: none; }
  .hero .trust-strip { order: 6; margin: .5rem 22px 28px; font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo img,.demo-note { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* Selected plum direction: user-triggered event-to-alert handoff. */
.theme-b .hero-photo img { animation: none; clip-path: none; transform: none; }
.theme-b .demo-note {
  left: auto;
  right: clamp(22px, 3vw, 46px);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  width: min(360px, calc(100% - 44px));
  max-width: none;
  padding: .85rem 1rem;
}
.theme-b .demo-eyebrow { font-size: .58rem; letter-spacing: .1em; }
.theme-b .demo-flow { display: grid; gap: .22rem; }
.theme-b .demo-source,
.theme-b .demo-alert { display: grid; gap: .12rem; padding: .42rem .55rem; border: 1px solid rgba(250,247,245,.32); border-radius: 3px; }
.theme-b .demo-source { background: rgba(250,247,245,.08); }
.theme-b .demo-source > span,
.theme-b .demo-alert > span { color: var(--bronze-soft); font: 600 .57rem/1.35 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.theme-b .demo-source strong,
.theme-b .demo-alert strong { color: #fff; font: 600 .73rem/1.35 Inter, sans-serif; }
.theme-b .demo-alert { display: none; opacity: 0; transform: translateY(5px); background: rgba(255,255,255,.1); }
.theme-b .demo-alert > p { margin: 0; color: rgba(255,255,255,.86); font: 400 .66rem/1.4 Inter, sans-serif; }
.theme-b .demo-connector { position: relative; width: 2px; height: 24px; margin-left: .85rem; background: rgba(250,247,245,.24); transform-origin: top; }
.theme-b .demo-connector > span { position: absolute; top: 0; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze-soft); opacity: 0; }
.theme-b .demo-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.theme-b .demo-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.theme-b .demo-actions button { width: fit-content; padding: .34rem .58rem; border: 1px solid rgba(250,247,245,.55); border-radius: 2px; background: transparent; color: #fff; font: 600 .68rem/1.3 Inter, sans-serif; cursor: pointer; }
.theme-b .demo-actions button:hover { background: rgba(255,255,255,.12); }
.theme-b .demo-actions button:focus-visible { outline: 2px solid var(--bronze-soft); outline-offset: 3px; }
.theme-b .demo-note[data-demo-state="sending"] .demo-connector > span { animation: event-travels 1.25s cubic-bezier(.22,.61,.36,1) forwards; }
.theme-b .demo-note[data-demo-state="arriving"] .demo-connector > span,
.theme-b .demo-note[data-demo-state="complete"] .demo-connector > span { top: calc(100% - 8px); opacity: 1; }
.theme-b .demo-note[data-demo-state="arriving"] .demo-alert { display: grid; animation: parent-alert-arrives .42s ease-out forwards; }
.theme-b .demo-note[data-demo-state="complete"] .demo-alert { display: grid; opacity: 1; transform: none; }
@keyframes event-travels { to { top: calc(100% - 8px); opacity: 1; } }
@keyframes parent-alert-arrives { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .theme-b .demo-note *, .theme-b .demo-note *::before, .theme-b .demo-note *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 920px) {
  .theme-b .hero-photo { display: flex; flex-direction: column; aspect-ratio: auto; }
  .theme-b .hero-photo img { height: auto; min-height: 0; aspect-ratio: 4 / 3; flex: none; }
  .theme-b .demo-note { position: relative; inset: auto; width: auto; margin: 0; padding: .72rem .8rem; border-radius: 0; }
}