/* ============================================================
   home-v4.css — Zodi Animal homepage, v4 canvas port
   ------------------------------------------------------------
   Ports the "Zodi Animal Home" design-canvas layout onto the
   production homepage. Loaded AFTER home.css and overrides the
   three-zone layout with the canvas geometry:

     [ left identity rail 300px ][ main column ]  inside a
     1280px shell, plus a sticky breadcrumb sub-bar under the
     injected pn-bar, full-bleed ink-2 bands, the unlock/keys
     band, the moon chip + popover, and the footer moonrise.

   Mobile-first: base = single column; min-width: 900px adds the
   desktop rail + shell. Every color reads tokens.css (v4 skin
   layer); dark celestial is the ONLY theme.
   Canvas-only values that no token covers are declared as
   --v4-* variables below.
   ============================================================ */

:root {
  /* canvas radial hero sky: --sky in the canvas (--glow hue family) */
  --v4-sky: var(--glow);
  /* canvas moon ball highlight (radial 35% 30%) */
  --v4-moonface: #fffaf0;
}

/* ------------------------------------------------------------
   0. Page base — canvas #om-root background + rhythm
   ------------------------------------------------------------ */
body.home-v4 {
  background:
    radial-gradient(1100px 640px at 50% -8%, var(--v4-sky) 0%, var(--ink) 62%) no-repeat,
    var(--ink);
  color: var(--ivory);
  line-height: 1.65;
  transition: background .45s ease, color .45s ease;
  /* alignment guard: nothing on this page may create a horizontal scrollbar
     (the old right rail clipped off-viewport at ~2000px wide) */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  body.home-v4 { overflow-x: hidden; }
}

/* ------------------------------------------------------------
   1. Sticky sub-bar (canvas "Breadcrumb sub-bar")
   Sits under the injected pn-bar; holds the Home crumb, the hub
   links, and the moon chip + popover.
   ------------------------------------------------------------ */
.omv4-sub {
  position: sticky;
  top: var(--pn-bar-h, 64px); /* same fallback as every other consumer */
  z-index: 40;
  background: color-mix(in oklab, var(--ink-2) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
@supports not (background: color-mix(in oklab, red, blue)) {
  .omv4-sub { background: var(--ink-2); }
}
.omv4-sub-inner {
  max-width: 1280px;
  margin: 0 auto;
  min-height: 48px;
  padding: 7px clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}
.omv4-crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.omv4-crumbs::-webkit-scrollbar { display: none; }
.omv4-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex: 0 0 auto;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font: 600 .76rem/1 var(--sans);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.omv4-crumb:hover { transform: translateY(-1px); border-color: var(--accent); }
.omv4-crumb[aria-current="page"] {
  background: linear-gradient(135deg, var(--cta-g1), var(--cta-g2));
  border-color: transparent;
  color: var(--cta-text);
  box-shadow: 0 3px 12px var(--accent-soft);
}
.omv4-crumb .g { font-size: .82rem; line-height: 1; }
.omv4-sep { color: var(--faint); font-size: .6rem; }

.omv4-hub {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.omv4-hub a {
  font: 500 .78rem/1 var(--sans);
  color: var(--muted);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 99px;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.omv4-hub a:hover { color: var(--moon); background: var(--accent-soft); }
.omv4-hub a[aria-current="page"] {
  font-weight: 600;
  color: var(--moon);
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* moon chip + popover: moved into the pn-bar tools for every page
   (canvas bar; see nav-core.css .pn-moon / .pn-moonpop). The old
   sub-bar chip markup is gone; home-v4.js's chip wiring no-ops. */

@keyframes omv4-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes omv4-rise {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes omv4-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   2. Shell — mobile-first single column; ≥900px = canvas
      [rail 300px][main 1fr] inside a 1280px frame.
   ------------------------------------------------------------ */
.home-v4 .home-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
  column-gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}
.home-v4 .home-main { grid-column: 1; min-width: 0; }
.home-v4 #identity-rail {
  grid-column: 1;
  position: static;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 8px 32px;
  margin-top: 0;
}

@media (min-width: 900px) {
  /* the identity rail sits flush against the LEFT viewport edge (24px
     gutter), not centered inside a 1280px shell; the content column
     starts immediately after the rail + ONE consistent 48px gutter and
     stays capped for measure — anchored LEFT, never centered. */
  .home-v4 .home-shell {
    --v4-rail-top: clamp(48px, 7vh, 80px); /* = hero padding-top, so the
                                              rail's first card starts
                                              level with the hero eyebrow */
    grid-template-columns: [rail] 300px [main] minmax(0, 1fr);
    max-width: none;
    padding-inline: 24px clamp(16px, 3vw, 32px);
    column-gap: 48px;
  }
  .home-v4 .home-main {
    grid-column: main;
    grid-row: 1;
    max-width: 1080px;
    justify-self: start; /* left edge locks to rail + gutter, always */
  }
  /* keep the sticky sub-bar on the same left gutter so the rhythm holds */
  .omv4-sub-inner {
    max-width: none;
    padding-inline: 24px clamp(16px, 3vw, 32px);
  }
  /* the rail is a PLAIN sticky flex column: no max-height, no inner
     scroller (the old hidden-scrollbar clip read as cards stacking on
     one another in screenshots). Its top padding exists ONLY so the
     first card sits level with the hero eyebrow at rest; the sticky
     top subtracts that same padding, so when stuck the first CARD (not
     the dead padding) sits 12px under the bar + sub-bar. Shared knobs
     only: --pn-bar-h (nav) and --v4-sub-h (measured from .omv4-sub by
     home-v4.js; 48px is its min-height fallback). */
  .home-v4 #identity-rail {
    grid-column: rail;
    grid-row: 1;
    position: sticky;
    top: calc(var(--pn-bar-h, 64px) + var(--v4-sub-h, 48px) + 12px - var(--v4-rail-top, 48px));
    align-self: start;
    max-height: none;
    overflow: visible;
    padding-block: var(--v4-rail-top, 48px) 32px;
    order: 0;
  }
  .home-v4 .rail-jump { display: block; }
  .home-v4 .home-dock { display: none; }
  .home-v4.pn-has-bar { padding-bottom: 0; }
}

/* ---- one shared LEFT column edge for everything in the main column.
   home.css zig-zags even-numbered bands (`margin-inline-start: auto`
   on their .prose) toward the middle/right; on the v4 homepage every
   eyebrow, H2, paragraph, FAQ block, and the reader card hang from
   the SAME left edge. Measure stays comfortable but left-anchored. */
.home-v4 .home-main > .band:nth-of-type(even) .prose,
.home-v4 .home-main > .band.band--right,
.home-v4 .home-main .prose {
  margin-inline: 0;
}
.home-v4 .home-main .prose { max-width: 70ch; }

/* ------------------------------------------------------------
   3. Rail cards (canvas left rail)
   ------------------------------------------------------------ */
/* Rail flow contract: the rail is a plain flex column and every
   module in it is a normal-flow block that occupies real height.
   No module may absolutely position itself out of the column,
   shrink below its content, or pull siblings over itself — this
   is the invariant that keeps the meter / moon / on-this-page
   cards from ever stacking on one another. */
.home-v4 #identity-rail > * {
  position: relative;
  flex: 0 0 auto;
  min-height: auto;   /* never shrink below content */
  margin: 0;
  transform: none;    /* no effect layer may slide a rail module */
}
.home-v4 .rail-card,
.home-v4 #identity-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--e-1);
}
.home-v4 #identity-card { padding: 24px; }
.home-v4 .rail-kicker,
.home-v4 #identity-card .rail-kicker {
  margin: 0;
  font: 600 .68rem/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-v4 .rail-kicker--sec { color: var(--season); }

.home-v4 #identity-sigil {
  width: 72px;
  height: 72px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border: 1px solid var(--line-soft);
  color: var(--accent);
  /* alive: a slow breathing glow + an occasional shimmer sweep.
     CSS only; both are stilled under prefers-reduced-motion. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 14px var(--accent-soft);
  animation: v4-sigil-glow 6.5s ease-in-out infinite;
}
.home-v4 #identity-sigil::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%) no-repeat;
  background-size: 240% 100%;
  background-position: 190% 0;
  animation: v4-sigil-shimmer 7.5s ease-in-out infinite;
}
@keyframes v4-sigil-glow {
  0%, 100% { box-shadow: 0 0 12px var(--accent-soft); }
  50%      { box-shadow: 0 0 26px var(--accent-soft), 0 0 52px var(--season-soft); }
}
@keyframes v4-sigil-shimmer {
  0%, 72%   { background-position: 190% 0; }
  92%, 100% { background-position: -90% 0; }
}
.home-v4 .identity-sigil-wait { font-family: var(--serif); font-size: 2rem; color: var(--accent); }
.home-v4 #identity-name {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: 1.55rem;
  line-height: 1.08;
  color: var(--moon);
  margin: 0;
  text-wrap: balance;
}
.home-v4 #identity-name .id-pairing,
.home-v4 .identity-pairing {
  display: block;
  font: 400 .75rem/1.5 var(--mono);
  letter-spacing: .03em;
  color: var(--muted);
  margin: 6px 0 0;
}
.home-v4 .identity-invite {
  font: italic 400 .9rem/1.5 var(--serif);
  color: var(--body-text);
  margin: 0;
}
.home-v4 #identity-card[data-state="revealed"] .identity-invite { display: none; }

/* the identity CTA takes the canvas gradient sheen contract */
.home-v4 #identity-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  margin-top: 4px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--r-pill);
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 58%) no-repeat,
    linear-gradient(135deg, var(--cta-g1), var(--cta-g2));
  background-size: 220% 100%, 180% 180%;
  background-position: -160% 50%, 0% 50%;
  color: var(--cta-text);
  font: 700 .85rem/1 var(--sans);
  cursor: pointer;
  box-shadow: 0 4px 16px var(--accent-soft);
  transition: transform .25s var(--ease-io), box-shadow .25s var(--ease-io);
}
.home-v4 #identity-share:hover,
.home-v4 #identity-share:focus-visible {
  animation: om-sheen .7s ease forwards;
  background: /* re-assert layers so the hover in home.css can't flatten them */
    linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 58%) no-repeat,
    linear-gradient(135deg, var(--cta-g1), var(--cta-g2));
  background-size: 220% 100%, 180% 180%;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-soft), 0 0 0 3px var(--sec-soft);
}
.home-v4 #identity-share:active { transform: scale(.97); }

/* quiet "Start over" reset: hidden until home.js flips the card to
   data-state="revealed"; a two-step confirm before anything clears */
.home-v4 .identity-reset { display: none; }
.home-v4 #identity-card[data-state="revealed"] .identity-reset {
  display: block;
  margin-top: 2px;
}
.home-v4 #identity-reset {
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font: 400 .72rem/1 var(--sans);
  color: var(--faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.home-v4 #identity-reset:hover,
.home-v4 #identity-reset:focus-visible { color: var(--rose); }
.home-v4 .identity-reset-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font: 400 .72rem/1.5 var(--sans);
  color: var(--muted);
}
.home-v4 .identity-reset-confirm[hidden] { display: none; }
.home-v4 .identity-reset-confirm .q { flex: 1 1 100%; }
.home-v4 .identity-reset-confirm button {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ivory);
  font: 600 .68rem/1 var(--sans);
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.home-v4 .identity-reset-confirm button:hover,
.home-v4 .identity-reset-confirm button:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-soft);
}
.home-v4 #identity-reset-yes { border-color: var(--rose); color: var(--rose); }
.home-v4 #identity-reset-yes:hover,
.home-v4 #identity-reset-yes:focus-visible {
  border-color: var(--rose);
  box-shadow: 0 0 10px var(--rose);
}

/* share icon row (canvas sharing widget) — now lives INSIDE the
   merged identity card, separated by a hairline; no panel-in-a-panel */
.home-v4 #rail-share[hidden] { display: none; }
.home-v4 #rail-share {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  background: none;
  border-inline: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
  padding-bottom: 0;
}
.home-v4 .shareRow { display: flex; justify-content: space-between; gap: 4px; }
.home-v4 .shareRow > a,
.home-v4 .shareRow > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--ivory);
  font-family: var(--sans);
}
.home-v4 .shareRow .ic {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.home-v4 .shareRow > a:hover .ic,
.home-v4 .shareRow > button:hover .ic {
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-soft);
  transform: translateY(-2px);
}
.home-v4 .shareRow .lbl { font-size: .62rem; color: var(--muted); }

/* unlocks card (canvas rail unlocks) */
.home-v4 .unlockList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.home-v4 .unlockList li { display: flex; align-items: center; gap: 9px; }
.home-v4 .unlockList .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .4s ease, box-shadow .4s ease;
}
.home-v4 .unlockList .u-label { font-size: .82rem; color: var(--faint); transition: color .4s ease; }
.home-v4 #rail-unlocks[data-revealed="1"] .dot {
  background: linear-gradient(135deg, var(--accent), var(--season));
  box-shadow: 0 0 8px var(--accent-soft);
}
.home-v4 #rail-unlocks[data-revealed="1"] .u-label { color: var(--ivory); }
.home-v4 .unlockMeter {
  height: 6px;
  border-radius: 99px;
  background: var(--field);
  overflow: hidden;
  margin-top: 2px;
}
.home-v4 .unlockMeter i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--season));
  border-radius: 99px;
  transition: width .6s ease;
}
.home-v4 .unlockLine { margin: 0; font: 400 .7rem/1.4 var(--mono); color: var(--faint); }

/* moon rail card (canvas #moon-rail) */
.home-v4 #moon-rail {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}
.home-v4 #moon-rail[hidden] { display: none; }
.home-v4 #moon-rail .moon-rail-glyph { font-size: 1.6rem; line-height: 1; }
.home-v4 #moon-rail .moon-rail-body { min-width: 0; }
.home-v4 #moon-rail .moon-rail-label { margin: 0; font: 500 .85rem/1.5 var(--sans); color: var(--moon); }
.home-v4 #moon-rail .moon-rail-meaning { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--muted); }

/* awakening slot: meter.js injects a FULL .spirit-meter card in here,
   so the slot itself must be a transparent flow container — the old
   card-in-a-card chrome plus the display-scale .spirit-tier is what
   read as the giant "Waking" colliding with the cards below it. The
   meter is retuned to rail scale; every part stays in normal flow. */
.home-v4 #awakening-slot {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 96px;
  border-radius: 20px;
}
.home-v4 #awakening-slot:empty {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 20px;
}
.home-v4 #awakening-slot .spirit-meter {
  border-radius: 20px;
  padding: 18px 16px;
  gap: var(--s-2);
}
.home-v4 #awakening-slot .spirit-orb { width: min(120px, 52%); }
.home-v4 #awakening-slot .spirit-tier {
  font-size: 1.15rem;
  line-height: 1.2;
}
.home-v4 #awakening-slot .spirit-count,
.home-v4 #awakening-slot .spirit-next { font-size: .75rem; }

/* "On this page" (canvas rail nav) */
.home-v4 .rail-jump {
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 18px 20px;
}
.home-v4 .rail-jump p {
  font: 600 .66rem/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
}
.home-v4 .rail-jump ul { gap: 8px; }
.home-v4 .rail-jump a { color: var(--body-text); font-size: .82rem; }
.home-v4 .rail-jump a:hover { color: var(--accent-bright); }

/* ------------------------------------------------------------
   4. Hero + reader (canvas #read)
   ------------------------------------------------------------ */
.home-v4 .hero {
  display: block;
  position: relative;
  text-align: left;
  padding: clamp(48px, 7vh, 80px) 0 clamp(40px, 6vh, 64px);
}
.home-v4 .hero .eyebrow {
  margin: 0 0 14px;
  font: 600 .72rem/1.4 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-v4 .hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: clamp(2.6rem, 4.5vw + 1rem, 4.75rem);
  line-height: 1.05;
  color: var(--moon);
  max-width: 17ch;
  text-wrap: balance;
  text-shadow: none;
}
.home-v4 .hero h1 em {
  font-style: italic;
  background: linear-gradient(120deg, var(--accent), var(--season));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-v4 .hero .lede {
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: clamp(1.05rem, .5vw + .95rem, 1.25rem);
  line-height: 1.55;
  color: var(--body-text);
  max-width: 52ch;
  text-wrap: pretty;
}

/* the small orbit ornament (canvas hero ornament, replaces the big wheel) */
.home-v4 .om-orbit {
  position: absolute;
  top: 24px;
  right: 0;
  width: 180px;
  height: 180px;
  opacity: .55;
  pointer-events: none;
  display: none;
}
@media (min-width: 720px) { .home-v4 .om-orbit { display: block; } }
.home-v4 .om-orbit .o-ring { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50%; }
.home-v4 .om-orbit .o-dash {
  position: absolute;
  inset: 22px;
  border: 1px dashed var(--line);
  border-radius: 50%;
  animation: omv4-spin 90s linear infinite;
}
.home-v4 .om-orbit .o-core { position: absolute; inset: 0; display: grid; place-items: center; }
.home-v4 .om-orbit .o-moon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--v4-moonface), var(--accent) 60%, var(--season) 100%);
  box-shadow: 0 0 40px var(--accent-soft);
}

/* the reader card (canvas "Read the wheel").
   ALIGNMENT CONTRACT: its LEFT edge sits on the content column's
   shared left edge — same edge as the H2s/paragraphs, one gutter
   from the rail. margin-inline is pinned to 0 (and justify-self to
   start, for any grid ancestor) so no legacy centering rule from
   home.css/oracle.css can ever float it again. */
.home-v4 .hero .reader,
.home-v4 .home-main .reader {
  margin-top: 28px;
  margin-inline: 0;
  justify-self: start;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 46%),
    linear-gradient(165deg, var(--panel-2), var(--panel) 55%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 30px);
  max-width: 600px;
  box-shadow: var(--e-1);
  text-align: left;
}
.home-v4 .hero .reader h3 {
  margin: 0 0 4px;
  font: 600 1.25rem/1.3 var(--serif);
  color: var(--moon);
}
.home-v4 .hero .reader .dim { margin: 0 0 12px; font-size: .82rem; color: var(--muted); }
.home-v4 .hero .field { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 0; }

/* segmented MM / DD / YYYY inputs (JS enhancement over #birthDate) */
.home-v4 .om-seg { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.home-v4 .om-seg[hidden] { display: none; }
.home-v4 .om-seg label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 400 .66rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-v4 .om-seg input {
  width: 74px;
  height: 52px;
  text-align: center;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ivory);
  font: 400 1.15rem/1 var(--mono);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.home-v4 .om-seg input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.home-v4 .om-seg input::placeholder { color: var(--faint); opacity: .8; }
.home-v4 .om-seg .om-seg-y { width: 104px; }
.home-v4 .om-seg .sep { padding-bottom: 14px; color: var(--faint); }
.home-v4.js-seg .reader .om-seg-go { margin-left: auto; }

/* the native date field keeps the same treatment (visible with JS off) */
.home-v4 #birthDate {
  height: 52px;
  padding: 0 14px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ivory);
  font: 400 1rem/1 var(--mono);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.home-v4 #birthDate:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.home-v4.js-seg #birthDate,
.home-v4.js-seg #clearDate { display: none; }

/* reader CTA: canvas 52px / radius 14 over the sitewide sheen contract */
.home-v4 .reader .btn:not(.ghost) {
  height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  font-weight: 700;
  font-size: .95rem;
}
.home-v4 .reader .btn.ghost { height: 52px; border-radius: 12px; }

/* hint / status line (canvas hint) */
.home-v4 .reader .msg {
  min-height: 1.4em;
  margin: 12px 0 0;
  font: 400 .78rem/1.5 var(--mono);
  letter-spacing: .02em;
  color: var(--muted);
}
.home-v4 .reader .msg.is-err { color: var(--rose); }

/* ------------------------------------------------------------
   5. Today strip
   ------------------------------------------------------------ */
.home-v4 .today {
  margin: 0 0 8px;
  max-width: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
}

/* ------------------------------------------------------------
   6. The reveal (canvas #reveal) — left-aligned, huge Fraunces
   ------------------------------------------------------------ */
.home-v4 .descent { padding-block: 0; }
.home-v4 #resultWrap.show { margin-top: 0; }
.home-v4 .reveal {
  text-align: left;
  padding: clamp(40px, 6vh, 72px) 0 6px;
  border-top: 1px solid var(--line-soft);
}
.home-v4 .cross {
  display: inline-flex;
  margin: 0 0 6px;
  font: 400 .75rem/1.5 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  animation: omv4-rise .6s ease both;
}
.home-v4 .reveal h2.big {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: clamp(2.8rem, 5vw + 1rem, 5.5rem);
  line-height: 1.02;
  color: var(--moon);
  text-shadow: 0 0 50px var(--accent-soft);
  animation: omv4-rise .9s ease both;
}
.home-v4 .reveal .essence {
  margin: 14px 0 0;
  font: italic 400 1.35rem/1.4 var(--serif);
  color: var(--accent-bright);
  max-width: 34ch;
  animation: omv4-rise 1.1s ease both;
}
.home-v4 .reveal .mt { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.home-v4 .reveal .btn { border-radius: var(--r-pill); }

.home-v4 .gates {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 32px 0;
}
.home-v4 .gate {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 46%),
    linear-gradient(165deg, var(--panel-2), var(--panel) 55%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  animation: omv4-rise .8s ease both;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.home-v4 .gate:hover,
.home-v4 .gate:focus-within {
  border-color: var(--accent);
  box-shadow: inset 0 0 20px var(--accent-soft);
}
.home-v4 .gate h4 {
  margin: 0 0 8px;
  font: 600 1.15rem/1.3 var(--serif);
  color: var(--accent-bright);
}
.home-v4 .gate p { font-size: .95rem; color: var(--body-text); }

.home-v4 .duo .card,
.home-v4 #shareSection {
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}

/* descent doors pick up the canvas card hover */
.home-v4 .door { border-radius: 16px; }

/* ------------------------------------------------------------
   7. Bands — canvas section rhythm. .band--bleed = full-bleed
      ink-2 room (canvas #unlocking / #menagerie / #match).
   ------------------------------------------------------------ */
.home-v4 .home-main > .band,
.home-v4 .home-main > #proverb-day {
  padding-block: clamp(48px, 7vh, 80px);
}
.home-v4 .home-main > .band + .band { border-top: 0; }
.home-v4 .band--bleed {
  margin-inline: calc(clamp(16px, 3vw, 32px) * -1);
  padding-inline: clamp(16px, 3vw, 32px);
  background: var(--ink-2);
  border-block: 1px solid var(--line-soft);
}
.home-v4 .band > .eyebrow,
.home-v4 #proverb-day > .eyebrow {
  margin: 0 0 12px;
  font: 600 .72rem/1.4 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-v4 .band > h2,
.home-v4 #proverb-day > h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: clamp(2rem, 2.6vw + .8rem, 3rem);
  line-height: 1.1;
  color: var(--moon);
  max-width: 24ch;
  text-wrap: balance;
}
.home-v4 .band > .lede {
  margin: 0 0 24px;
  font-size: 1.05rem;
  color: var(--body-text);
  max-width: 54ch;
}
.home-v4 .band .prose { margin-inline-start: 0; }

/* the sec-tinted bands (canvas "After the naming" kicker is --sec) */
.home-v4 #unlocking > .eyebrow { color: var(--season); }

/* ------------------------------------------------------------
   8. What-unlocks cards (canvas unlock band)
   ------------------------------------------------------------ */
.home-v4 .unlockGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.home-v4 .unlockCard {
  /* glow over blocks: layered panel→panel-2 surface with an
     accent-tinted corner bloom + a 1px lit crown hairline, so the
     card reads as a lit surface on the dark sky, not a flat slab */
  position: relative;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 46%),
    linear-gradient(165deg, var(--panel-2), var(--panel) 55%);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 20px;
  opacity: .75;
  transition: opacity .3s ease, border-color .3s ease,
              transform .25s var(--ease-io, ease), box-shadow .25s var(--ease-io, ease);
}
.home-v4 .unlockCard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent-soft) 30%, var(--accent-soft) 70%, transparent);
  pointer-events: none;
}
/* hover = SHINE, never dim: even a still-locked card lights up under
   the cursor — full presence, accent border, soft glow, slight lift,
   and the little tag glyph brightens. (Nothing on this page may lower
   opacity or filter on hover; this is the inversion of the old dim.) */
.home-v4 .unlockCard:hover,
.home-v4 .unlockCard:focus-within {
  opacity: 1;
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px var(--accent-soft);
}
.home-v4 .unlockCard:hover .u-tag,
.home-v4 .unlockCard:focus-within .u-tag { color: var(--accent-bright); }
.home-v4 .unlockCard:hover h3,
.home-v4 .unlockCard:focus-within h3 { color: var(--moon); }
.home-v4 .unlockCard .u-tag {
  margin: 0 0 6px;
  font: 400 .62rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.home-v4 .unlockCard h3 {
  margin: 0 0 6px;
  font: 600 1.1rem/1.3 var(--serif);
  color: var(--moon);
}
.home-v4 .unlockCard p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--body-text); }
.home-v4 .unlockGrid[data-revealed="1"] .unlockCard { opacity: 1; border-color: var(--line); }
.home-v4 .unlockGrid[data-revealed="1"] .u-tag { color: var(--season); }

/* ---- ambient shimmer: MARQUEE cards only (the lead "Your five
   gates" card carries .is-marquee in the served markup). A slow,
   mostly-resting sheen sweep layered over the glow surface. ---- */
@keyframes v4-card-shimmer {
  0%, 78%   { background-position: 200% 0, 100% 0%, 0 0; }
  96%, 100% { background-position: -120% 0, 100% 0%, 0 0; }
}
.home-v4 .unlockCard.is-marquee {
  background:
    linear-gradient(115deg, transparent 44%, rgba(255,255,255,.07) 50%, transparent 56%) no-repeat,
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 46%),
    linear-gradient(165deg, var(--panel-2), var(--panel) 55%);
  background-size: 260% 100%, auto, auto;
  background-position: 200% 0, 100% 0%, 0 0;
  animation: v4-card-shimmer 9s ease-in-out infinite;
}

/* ---- click-to-reveal veil (reading variety, subtle + premium).
   The card copy is FULLY SERVED in the markup (SEO: no display:none
   at rest); home-v4.js adds .is-veiled + a Reveal affordance only
   when JS is live, so no-JS users and crawlers always see the text.
   Veiled = the body line is clipped to one line, blurred and dimmed
   behind a soft fade; click (anywhere on the card or the button)
   lifts the veil with a smooth transition. ---- */
.home-v4 .unlockCard.is-veiled { cursor: pointer; }
.home-v4 .unlockCard .u-body {
  transition: filter .5s var(--ease-out, ease), opacity .5s var(--ease-out, ease),
              max-height .5s var(--ease-out, ease);
  max-height: 12em;
  overflow: hidden;
}
.home-v4 .unlockCard.is-veiled .u-body {
  filter: blur(4px);
  opacity: .45;
  max-height: 1.6em;               /* one-line teaser under the veil */
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  user-select: none;
}
.home-v4 .u-reveal {
  display: none;
  margin-top: 10px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--accent-bright);
  font: 600 .64rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.home-v4 .unlockCard.is-veiled .u-reveal { display: inline-block; }
.home-v4 .u-reveal:hover,
.home-v4 .u-reveal:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
  color: var(--moon);
}
@media (prefers-reduced-motion: reduce) {
  .home-v4 .unlockCard.is-marquee { animation: none; }
  .home-v4 .unlockCard .u-body { transition: none; }
}

/* ------------------------------------------------------------
   9. Menagerie peek cards (canvas peek)
   ------------------------------------------------------------ */
.home-v4 .peekGrid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.home-v4 .peekCard {
  position: relative;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--accent-soft), transparent 42%),
    linear-gradient(165deg, var(--panel-2), var(--panel) 55%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.home-v4 .peekCard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent-soft) 30%, var(--accent-soft) 70%, transparent);
  pointer-events: none;
}
.home-v4 .peekCard:hover,
.home-v4 .peekCard.is-lifted {
  background: var(--panel-2);
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: inset 0 0 20px var(--accent-soft), 0 10px 24px var(--accent-soft);
}
/* card anatomy: animal name (Fraunces) on its OWN line, then the
   pairing on ITS own line in muted mono, with clear spacing — the
   two spans may never run together inline again */
.home-v4 .peekCard .pn,
.peekCard .pn {
  display: block;
  font: 600 1.05rem/1.3 var(--serif);
  color: var(--moon);
}
.home-v4 .peekCard .ps,
.peekCard .ps {
  display: block;
  margin-top: 7px;
  font: 400 .68rem/1.4 var(--mono);
  color: var(--muted);
  letter-spacing: .02em;
}

/* ------------------------------------------------------------
   10. Paths / compare / match / mail — canvas card + band skin
   ------------------------------------------------------------ */
.home-v4 .pathsGrid { gap: 14px; }
.home-v4 .pathCard {
  position: relative;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 46%),
    linear-gradient(165deg, var(--panel-2), var(--panel) 55%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .25s var(--ease-io, ease);
}
.home-v4 .pathCard:hover,
.home-v4 .pathCard:focus-within {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: inset 0 0 20px var(--accent-soft), 0 10px 24px var(--accent-soft);
}
.home-v4 .pathCard h3 { font: 600 1.1rem/1.3 var(--serif); color: var(--accent-bright); margin: 0 0 6px; }
.home-v4 .pathCard p { font-size: .88rem; line-height: 1.5; color: var(--body-text); }

.home-v4 .btnRow .btn,
.home-v4 #matchSection .btn { border-radius: var(--r-pill); }
/* the match date fields stay functional NATIVE date inputs, skinned
   to the token system. color-scheme keeps the UA's picker icon and
   popup on the page's palette (no white icon box on the dark theme). */
.home-v4 #matchSection input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--moon);
  font: 400 1rem/1.2 var(--mono);
  color-scheme: dark;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.home-v4 #birthDate { color-scheme: dark; }
/* the segments inside the native control read as moon text too */
.home-v4 #matchSection input[type="date"]::-webkit-datetime-edit,
.home-v4 #birthDate::-webkit-datetime-edit { color: var(--moon); }
.home-v4 #matchSection input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .75;
}
.home-v4 #matchSection label {
  display: block;
  margin-bottom: 6px;
  font: 400 .66rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-v4 #matchSection input[type="date"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);   /* accent focus ring */
}
.home-v4 #mailForm input[type="email"] {
  height: 48px;
  padding: 0 14px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ivory);
  font-family: var(--sans);
  flex: 1 1 200px;
  min-width: 0;
}

/* ------------------------------------------------------------
   11. Footer — the canvas footer (moonrise ornament + brand +
   GEO columns) is now injected SITEWIDE by build/apply-footer.mjs
   and styled by css/footer.css; the old homepage-local
   .om-moonrise / .site-footer duplicates were retired.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   12. Third Eye HUD — canvas treatment over the site structure.
   Starts life as a small collapsed chip (never overlapping the
   rail or content); expands to the full card anchored bottom
   right, above everything except modals, with a close button
   that collapses it back to the chip.
   ------------------------------------------------------------ */
.home-v4 .eyeHud {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60; /* above the sticky sub-bar (40) and moon popover (50) */
  width: 252px;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--e-2);
  animation: omv4-rise .6s ease both;
}
.home-v4 .eyeHud[hidden] { display: none; }
.home-v4 .eyeHud-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--faint);
  font-size: .8rem;
  cursor: pointer;
}
.home-v4 .eyeHud-close:hover { background: var(--accent-soft); color: var(--moon); }

/* collapsed chip state (default; home-v4.js toggles it) */
.home-v4 .eyeHud .eyeHud-chip-lbl { display: none; }
.home-v4 .eyeHud.is-collapsed {
  width: auto;
  max-height: none;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  animation: none;
}
.home-v4 .eyeHud.is-collapsed:hover { border-color: var(--accent); box-shadow: 0 0 14px var(--accent-soft); }
.home-v4 .eyeHud.is-collapsed:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.home-v4 .eyeHud.is-collapsed .meta,
.home-v4 .eyeHud.is-collapsed .rites,
.home-v4 .eyeHud.is-collapsed .streakRow,
.home-v4 .eyeHud.is-collapsed .eyeHud-close { display: none; }
.home-v4 .eyeHud.is-collapsed .eye {
  width: 34px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
}
.home-v4 .eyeHud.is-collapsed .eyeHud-chip-lbl {
  display: inline;
  font: 600 .66rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   12b. Challenge share modal (home-v4.js builds + wires it).
   Token-styled panel over a blurred backdrop; Esc / backdrop /
   close button all dismiss; focus is trapped while open.
   ------------------------------------------------------------ */
body.v4-modal-open { overflow: hidden; }
.v4-modal {
  position: fixed;
  inset: 0;
  z-index: 200; /* above pn-bar (120) and the eye HUD (60) */
  display: grid;
  place-items: center;
  padding: 20px;
}
.v4-modal[hidden] { display: none; }
.v4-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--ink) 64%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
@supports not (background: color-mix(in oklab, red, blue)) {
  .v4-modal-backdrop { background: var(--ink); opacity: .84; }
}
.v4-modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 30px);
  box-shadow: var(--e-2);
  animation: omv4-rise .35s var(--ease-io, ease) both;
}
.v4-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--muted);
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.v4-modal-close:hover,
.v4-modal-close:focus-visible {
  border-color: var(--accent);
  color: var(--moon);
  box-shadow: 0 0 12px var(--accent-soft);
}
.v4-modal-kicker {
  margin: 0 0 8px;
  font: 600 .66rem/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--season);
}
.v4-modal-title {
  margin: 0 0 6px;
  font: 560 1.65rem/1.15 var(--serif);
  font-optical-sizing: auto;
  color: var(--moon);
}
.v4-modal-sub {
  margin: 0 0 18px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--body-text);
}
.v4-copyrow { display: flex; gap: 8px; flex-wrap: wrap; }
.v4-copyrow input {
  flex: 1 1 200px;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--moon);
  font: 400 .84rem/1 var(--mono);
}
.v4-copyrow input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* the big Copy: same gradient + sheen contract as the identity CTA */
#challengeCopy {
  flex: 0 0 auto;
  height: 50px;
  padding: 0 24px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 58%) no-repeat,
    linear-gradient(135deg, var(--cta-g1), var(--cta-g2));
  background-size: 220% 100%, 180% 180%;
  background-position: -160% 50%, 0% 50%;
  color: var(--cta-text);
  font: 700 .88rem/1 var(--sans);
  box-shadow: 0 4px 16px var(--accent-soft);
  transition: transform .25s var(--ease-io, ease), box-shadow .25s var(--ease-io, ease);
}
#challengeCopy:hover,
#challengeCopy:focus-visible {
  animation: om-sheen .7s ease forwards;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-soft), 0 0 0 3px var(--sec-soft);
}
#challengeCopy:active { transform: scale(.97); }
#challengeCopy.is-copied {
  background: var(--accent-soft);
  color: var(--moon);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.v4-modal-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.v4-modal-actions a,
.v4-modal-actions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ivory);
  text-decoration: none;
  cursor: pointer;
  font: 500 .7rem/1 var(--sans);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.v4-modal-actions a:hover,
.v4-modal-actions a:focus-visible,
.v4-modal-actions button:hover,
.v4-modal-actions button:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-soft);
  transform: translateY(-2px);
}
.v4-modal-actions .ic { line-height: 0; color: var(--accent); }
.v4-modal-note {
  margin: 14px 0 0;
  font: 400 .72rem/1.5 var(--mono);
  color: var(--faint);
}
@media (max-width: 420px) {
  .v4-modal-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------
   13. Motion guard
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .home-v4 .om-orbit .o-dash { animation: none; }
  .home-v4 .cross,
  .home-v4 .reveal h2.big,
  .home-v4 .reveal .essence,
  .home-v4 .gate,
  .home-v4 #rail-share,
  .home-v4 .eyeHud { animation: none !important; }
  .home-v4 #identity-share:hover { animation: none; transform: none; }
  /* the sigil rests at its quiet glow; no breathing, no shimmer sweep */
  .home-v4 #identity-sigil { animation: none; }
  .home-v4 #identity-sigil::after { animation: none; }
  .home-v4 .unlockCard:hover,
  .home-v4 .unlockCard:focus-within { transform: none; }
  .v4-modal-panel { animation: none; }
  #challengeCopy:hover,
  #challengeCopy:focus-visible { animation: none; transform: none; }
  .v4-modal-actions a:hover,
  .v4-modal-actions button:hover { transform: none; }
}

/* ------------------------------------------------------------
   14. Small-screen guards (no horizontal overflow at 390px)
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .omv4-hub { display: none; } /* crumb + moon chip stay */
  .home-v4 .om-seg input { width: 64px; }
  .home-v4 .om-seg .om-seg-y { width: 92px; }
  .home-v4.js-seg .reader .om-seg-go { margin-left: 0; width: 100%; }
  .home-v4 .reveal h2.big { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}