@font-face { font-family: "Cinzel"; src: url("/assets/fonts/cinzel-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunito-sans-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

/* Layout: the marble hall of Heaven Made Manifest, in daylight. The hall opens at the top (the golden circle
   in the beam), a gold rod runs down the page with the three days hanging from it as glowing orbs, the
   practices sit on glass panels, the declarations unroll as small parchment scrolls, the badge waits at the end.
   One bright day look on purpose, like the hall: no dark version. */
:root {
  --marble: #f6f2ea;
  --ink: #23284f;
  --muted: #4f5576;
  --line: rgba(168, 120, 31, 0.2);
  --gold: #9a6c16;
  --gold-bright: #dbad4f;
  --gold-pale: #f6e7bd;
  --gold-wash: rgba(219, 173, 79, 0.14);
  --sky: #dcecf8;
  --glass: rgba(255, 252, 244, 0.8);
  --glass-strong: rgba(255, 253, 248, 0.92);
  --ok: #2f7d5b;
  --warn: #a8432a;
  --rod: linear-gradient(180deg, #fff3cf 0%, #e8bd5c 38%, #a8781f 72%, #f1d58a 100%);
  --orb: radial-gradient(circle at 35% 30%, #fff8dc 0%, #f0c867 35%, #b07f1c 75%, #7d5810 100%);
  --f-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-label: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-sign: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --radius: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--marble); }
body { margin: 0; color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  background: var(--marble) url("/assets/light-activation/marble.webp") repeat; background-size: 1520px auto; }
.wrap { max-width: 780px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); padding-block: 0 72px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 6px; }
.label { font-family: var(--f-label); font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.prose { display: grid; gap: 14px; max-width: 64ch; }
.muted { color: var(--muted); }

/* glass panels, like the two screens in the hall */
.card, .checks, .story, .day-lock {
  background: var(--glass);
  border: 1px solid rgba(219, 173, 79, 0.55);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 10px 32px rgba(122, 92, 30, 0.09), 0 0 28px rgba(255, 226, 150, 0.22);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05);
}

/* Hero: the hall opens, the beam passes through the golden circle */
.hero { position: relative; }
.hero-art { position: relative; margin: 0; height: clamp(340px, 54vw, 600px); overflow: hidden; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
/* The opening shows what is about to happen: the crusted one, the light flowing from his own heart, the one fully lit. */
.hero-art img.hero-art__crust { object-position: 50% 42%; }
.hero-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(180deg, rgba(246, 242, 234, 0) 0%, rgba(246, 242, 234, 0.75) 60%, var(--marble) 100%); pointer-events: none; }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero-plaque { position: relative; z-index: 2; max-width: 780px; margin: calc(-1 * clamp(80px, 13vw, 150px)) auto 0; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.hero-plaque .card { padding: clamp(24px, 5vw, 40px); text-align: center; justify-items: center; gap: 16px; background: var(--glass-strong); }
.hero h1 { font-size: clamp(50px, 10.5vw, 88px); letter-spacing: -0.005em; line-height: 1; }
.hero .lede { font-family: var(--f-display); font-size: clamp(21px, 3.6vw, 26px); line-height: 1.35; max-width: 32ch; color: var(--ink); }
.arc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-family: var(--f-label); font-size: 13px; letter-spacing: 0.16em; color: var(--muted); }
.arc b { color: var(--gold); font-weight: 600; }
.rod { display: block; width: min(320px, 70%); height: 10px; border-radius: 6px; background: var(--rod); box-shadow: 0 3px 8px rgba(120, 84, 20, 0.3); position: relative; }
.rod::before, .rod::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translateY(-50%); background: var(--orb); box-shadow: 0 2px 5px rgba(110, 76, 14, 0.4); }
.rod::before { left: -9px; }
.rod::after { right: -9px; }

/* Sticky nav: a glass bar */
nav.days { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; margin-top: 28px; background: rgba(250, 247, 240, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(219, 173, 79, 0.45); margin-inline: -20px; padding: 10px 20px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
nav.days a { flex: 0 0 auto; text-decoration: none; color: var(--ink); font-family: var(--f-label); font-size: 12.5px; letter-spacing: 0.12em; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(219, 173, 79, 0.55); background: rgba(255, 253, 248, 0.9); display: inline-flex; align-items: center; gap: 8px; }
nav.days a .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--gold-bright); }
nav.days a.done .dot { background: var(--orb); border-color: #b07f1c; }

/* Intro blocks */
.block { margin-top: 36px; display: grid; gap: 16px; }
.card { padding: 24px; display: grid; gap: 14px; }
ul.plain { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
ul.plain li::marker { color: var(--gold-bright); }

/* Timeline check */
.ratings { display: grid; gap: 14px; }
.rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; }
.rate label { font-weight: 600; font-size: 15.5px; }
.rate output { font-family: var(--f-label); font-variant-numeric: tabular-nums lining-nums; color: var(--gold); min-width: 2.2ch; text-align: right; }
.rate input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--gold-bright); }
.compare { display: grid; gap: 12px; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 3.2em; gap: 10px; align-items: center; font-size: 14.5px; }
.bars { display: grid; gap: 3px; }
.bar { height: 8px; border-radius: 4px; background: rgba(168, 120, 31, 0.12); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.bar.before i { background: #b9bdd2; }
.bar.after i { background: linear-gradient(90deg, #e8bd5c, #dbad4f); }
.delta { font-family: var(--f-label); font-variant-numeric: tabular-nums lining-nums; text-align: right; color: var(--gold); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; background: #b9bdd2; }
.legend span.a::before { background: var(--gold-bright); }

/* The three days hang from a gold rod, each a glowing orb */
.thread { position: relative; margin-top: 60px; display: grid; gap: 68px; padding-left: 38px; }
.thread::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #f1d58a 0%, #fff3cf 30%, #e8bd5c 60%, #a8781f 100%); box-shadow: 0 0 14px rgba(255, 226, 150, 0.6); }
.day { position: relative; display: grid; gap: 22px; scroll-margin-top: 70px; min-width: 0; }
.day::before { content: ""; position: absolute; left: -40px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--orb); box-shadow: 0 2px 6px rgba(110, 76, 14, 0.4), 0 0 0 6px rgba(255, 236, 180, 0.55), 0 0 26px rgba(255, 214, 120, 0.7); }
.day.complete::before { box-shadow: 0 2px 6px rgba(110, 76, 14, 0.4), 0 0 0 7px rgba(255, 236, 180, 0.8), 0 0 40px rgba(255, 210, 100, 0.95); }
.day h2 { font-size: clamp(36px, 7vw, 52px); }
.day .theme { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.35; color: var(--muted); max-width: 40ch; }
.part { display: grid; gap: 12px; }
.part h3 { font-family: var(--f-label); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.part h3 small { font-family: var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 400; font-size: 14px; }
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
ol.steps > li { counter-increment: s; display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: 6px; }
ol.steps > li::before { content: counter(s); font-family: var(--f-label); color: var(--gold); font-size: 15px; padding-top: 2px; font-variant-numeric: lining-nums; }
ol.steps b { font-weight: 700; }
.flow { font-family: var(--f-body); color: var(--ink); }
.arrow { font-family: var(--f-label); letter-spacing: 0.06em; font-size: 14.5px; color: var(--ink); background: linear-gradient(90deg, rgba(246, 231, 189, 0.7), rgba(255, 250, 238, 0.85)); border: 1px solid rgba(219, 173, 79, 0.45); border-radius: 10px; padding: 10px 14px; }
/* Declarations unroll like the hall's scroll: parchment between two gold rods */
.decl { position: relative; margin: 10px 8px; padding: 30px clamp(18px, 4vw, 34px) 26px; text-align: center; font-family: var(--f-sign); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.6; color: var(--ink);
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 250, 0.95) 0%, rgba(255, 250, 235, 0) 70%), linear-gradient(90deg, #ecd9a8 0%, #fbf3dc 7%, #fffaee 50%, #fbf3dc 93%, #ecd9a8 100%);
  box-shadow: inset 0 0 34px rgba(196, 160, 82, 0.26), 0 14px 34px rgba(116, 92, 40, 0.14); }
.decl::before, .decl::after { content: ""; position: absolute; left: -10px; right: -10px; height: 12px; border-radius: 7px; background: var(--rod); box-shadow: 0 3px 8px rgba(120, 84, 20, 0.32); }
.decl::before { top: -6px; }
.decl::after { bottom: -6px; }
.decl .who { display: block; margin-top: 12px; font-family: var(--f-label); font-style: normal; font-size: 12px; letter-spacing: 0.22em; color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { border: 1px solid rgba(219, 173, 79, 0.6); background: rgba(255, 253, 248, 0.9); border-radius: 999px; padding: 5px 12px; font-size: 14.5px; }
.story { background: rgba(232, 242, 250, 0.78); border-color: rgba(150, 190, 225, 0.6); padding: 18px 20px; font-size: 16px; display: grid; gap: 10px; }

/* Light question */
.echo { background: linear-gradient(90deg, rgba(246, 231, 189, 0.75), rgba(255, 250, 238, 0.85)); border: 1px solid rgba(219, 173, 79, 0.45); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.echo q { font-family: var(--f-sign); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.5; overflow-wrap: anywhere; }
.privacy { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.linkbtn { font: inherit; color: var(--gold); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Checklists */
.checks { padding: 18px 20px; display: grid; gap: 4px; }
.checks .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.checks .count { font-family: var(--f-label); font-variant-numeric: tabular-nums lining-nums; color: var(--gold); font-size: 14px; }
.check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
.check:first-of-type { border-top: 0; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--gold-bright); cursor: pointer; }
.check span { font-size: 15.5px; }
.check input:checked + span { color: var(--muted); }

/* Beginning + the midnight rhythm */
.card.start { border-color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 12px 36px rgba(122, 92, 30, 0.12), 0 0 0 5px rgba(255, 236, 180, 0.45), 0 0 34px rgba(255, 214, 120, 0.35); }
.start-q { font-size: clamp(26px, 5vw, 32px); }
.schedule { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.schedule li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.schedule li:first-child { border-top: 0; }
.schedule .sd-day { font-family: var(--f-label); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.schedule .sd-date { font-size: 15.5px; grid-column: 1; }
.schedule .sd-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; max-width: 9.5em; }
.schedule li.open .sd-state { color: var(--ok); font-weight: 600; }
.preview-note { font-size: 13.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; }
.day-lock { background: rgba(232, 242, 250, 0.72); border: 1px dashed rgba(168, 120, 31, 0.6); padding: 20px 22px; display: grid; gap: 8px; }
.day-lock .lock-when { font-family: var(--f-display); font-weight: 600; font-size: clamp(23px, 4.4vw, 27px); line-height: 1.25; }
.day-lock .btn { margin-top: 6px; }
.day.locked::before { background: rgba(255, 253, 248, 0.95); border: 2px dashed var(--gold-bright); box-shadow: 0 0 0 6px rgba(255, 236, 180, 0.35); }
nav.days a.locked { color: var(--muted); }
nav.days a.locked .dot { border-style: dashed; }

/* Badge */
.finale { margin-top: 76px; display: grid; gap: 22px; scroll-margin-top: 70px; }
.finale h2 { font-size: clamp(36px, 7vw, 52px); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; }
.field .hint { font-size: 13.5px; color: var(--muted); }
input[type=text], input[type=email], textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(168, 120, 31, 0.35); border-radius: 10px; padding: 11px 13px; box-shadow: inset 0 1px 2px rgba(122, 92, 30, 0.06); }
input[type=text]:focus, input[type=email]:focus, textarea:focus { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(255, 226, 150, 0.5); outline: none; }
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
textarea.short { min-height: 92px; }
.btn { font-family: var(--f-label); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border: 0; border-radius: 999px; padding: 13px 22px; color: #3a2808; cursor: pointer; justify-self: start; white-space: nowrap;
  background: linear-gradient(180deg, #fff3cf 0%, #f0cd78 40%, #d9a84a 78%, #e9c46c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 10px rgba(120, 84, 20, 0.28), 0 0 18px rgba(255, 214, 120, 0.35); transition: filter 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 14px rgba(120, 84, 20, 0.32), 0 0 26px rgba(255, 214, 120, 0.55); }
.btn.ghost { background: rgba(255, 253, 248, 0.9); color: var(--gold); border: 1px solid var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; filter: saturate(0.6); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.remaining { display: grid; gap: 6px; font-size: 14.5px; color: var(--muted); }
.remaining li.ok { color: var(--ok); }
.remaining ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.badge-stage { display: grid; justify-items: center; gap: 16px; padding-top: 8px; }
.badge-stage img, .badge-stage canvas { width: min(100%, 440px); max-width: 100%; aspect-ratio: 1; height: auto; border-radius: 50%; background: rgba(255, 253, 248, 0.6);
  box-shadow: 0 0 0 1px rgba(219, 173, 79, 0.5), 0 24px 60px rgba(122, 92, 30, 0.26), 0 0 90px rgba(255, 220, 140, 0.55); }
.badge-stage .locked { filter: saturate(0.25) brightness(1.04); opacity: 0.72; }
.badge-stage canvas.movable { touch-action: none; cursor: grab; }
.badge-stage canvas.movable:active { cursor: grabbing; }
.badge-stage img.reveal { animation: reveal 1.8s ease-out both; }
@keyframes reveal { from { filter: saturate(0.25) brightness(1.04); opacity: 0.72; } to { filter: none; opacity: 1; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#photo:focus-visible + label { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
label.btn { display: inline-block; }
.field .flabel { font-weight: 600; font-size: 15px; }
input[type=range] { accent-color: var(--gold-bright); width: 100%; }
.note { font-size: 13.5px; color: var(--muted); text-align: center; max-width: 46ch; }
.copybox { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sign { font-family: var(--f-display); font-size: 26px; font-style: italic; font-weight: 500; }
.card.door { border-color: var(--gold-bright); background: var(--glass-strong); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 12px 36px rgba(122, 92, 30, 0.12), 0 0 0 5px rgba(255, 236, 180, 0.45), 0 0 40px rgba(255, 214, 120, 0.4); scroll-margin-top: 70px; }
.card.door h3 { font-size: clamp(30px, 6vw, 40px); }
a.btn { text-decoration: none; display: inline-block; }
footer { margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(219, 173, 79, 0.5); font-size: 13.5px; color: var(--muted); display: grid; gap: 8px; justify-items: center; text-align: center; }
footer > span:last-child { max-width: 60ch; }

/* Signing in at the start */
.signin { display: grid; gap: 14px; }
.signin-form { display: grid; gap: 12px; }
.signin-status { font-size: 14.5px; color: var(--muted); min-height: 1.2em; }
.signin-status[data-error="true"] { color: var(--warn); }
.small { font-size: 14.5px; }
.account-line { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }

@media (max-width: 520px) {
  body { font-size: 16.5px; background-size: 1040px auto; }
  .thread { padding-left: 32px; }
  .day::before { left: -33px; width: 22px; height: 22px; }
  .thread::before { left: 7px; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) 3em; }
  .cmp-row .bars { grid-column: 1 / -1; grid-row: 2; }
  .decl { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .badge-stage img.reveal { animation: none; } .btn { transition: none; } }

/* while the page asks the account for their progress, nothing jumps */
.booting .day > :not(.label):not(h2):not(.theme) { display: none !important; }
.booting #start-ask, .booting #start-set { visibility: hidden; }

/* The movement: why your light matters, for you and for all of us */
.for-line { font-family: var(--f-label); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.why-card { gap: 20px; padding: clamp(22px, 4.5vw, 34px); background: var(--glass-strong); }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; }
.why-side { display: grid; gap: 8px; align-content: start; min-width: 0; }
.why-side h3 { font-family: var(--f-label); font-size: 13.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.why-side p { font-family: var(--f-display); font-size: 20.5px; font-weight: 500; line-height: 1.42; color: var(--ink); }
.why-orb { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--orb); box-shadow: 0 0 0 4px rgba(255, 236, 180, 0.6), 0 0 18px rgba(255, 210, 110, 0.8); }
.why-orb--many { box-shadow: 0 0 0 4px rgba(255, 236, 180, 0.6), 0 0 18px rgba(255, 210, 110, 0.8), 22px 4px 0 -4px #e8bd5c, 40px -3px 0 -6px #f0c867, 54px 5px 0 -7px #e8bd5c; }
.goal { display: grid; justify-items: center; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.goal .rod { margin-bottom: 8px; width: min(220px, 60%); }
.goal-num { font-family: var(--f-label); font-weight: 700; font-size: clamp(42px, 8.5vw, 60px); line-height: 1; letter-spacing: 0.04em; font-variant-numeric: lining-nums;
  background: linear-gradient(180deg, #f3d68c 0%, #c4922e 55%, #9a6c16 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(255, 210, 110, 0.45)); }
.goal-label { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 20px; color: var(--muted); }
.goal-live { font-size: 14.5px; color: var(--gold); display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.goal-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e8bd5c; box-shadow: 0 0 0 0 rgba(232, 189, 92, 0.6); animation: beacon 2.4s ease-out infinite; }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(232, 189, 92, 0.6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(232, 189, 92, 0); } }
.beacon-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(246, 231, 189, 0.75), rgba(255, 252, 244, 0.85)); border: 1px solid rgba(219, 173, 79, 0.55); box-shadow: 0 0 26px rgba(255, 226, 150, 0.3); }
.beacon-note p { font-family: var(--f-display); font-size: 20px; font-weight: 500; line-height: 1.42; color: var(--ink); }
@media (max-width: 620px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .goal-live::before { animation: none; } }

/* The Day III moment (light-moment.js): every word on the screen becomes light, spirals into one point of light, and the
   light becomes a glowing human. While it plays the canvas draws the page's words, so the page's own text is hidden. */
html.la-moment body :not(.moment):not(.moment *),
html.la-moment body :not(.moment):not(.moment *)::before,
html.la-moment body :not(.moment):not(.moment *)::after { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; caret-color: transparent !important; }
html.la-moment body :not(.moment):not(.moment *)::placeholder { color: transparent !important; }
/* Every fade here follows the moment's own clock (light-moment.js sets the opacity each frame), so nothing runs ahead of the light. */
.moment { position: fixed; inset: 0; z-index: 100; overscroll-behavior: contain; touch-action: none; color: #fff8e6; }
.moment-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.moment-words { position: absolute; top: 0; left: 0; right: 0; height: var(--fig-top, 22vh); display: grid; align-content: end; justify-items: center; gap: 10px; text-align: center; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) clamp(12px, 2.6vh, 28px) max(20px, env(safe-area-inset-left, 0px)); }
.moment-label { font-family: var(--f-label); font-size: 12.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: #f3d68c; opacity: 0; }
.moment-line { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(25px, 6.2vw, 40px); line-height: 1.2; color: #fff8e6; max-width: 22ch; text-wrap: balance;
  text-shadow: 0 0 18px rgba(255, 214, 140, 0.55), 0 1px 2px rgba(20, 18, 50, 0.5); opacity: 0; }
.moment-foot { position: absolute; left: 0; right: 0; top: var(--fig-bottom, 82vh); bottom: 0; display: grid; place-items: center; padding: 0 16px env(safe-area-inset-bottom, 0px); }
.moment .moment-go { justify-self: center; opacity: 0; pointer-events: none; }
.moment.is-words .moment-go { pointer-events: auto; }
.moment-skip { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); font: 600 12px/1 var(--f-label); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(246, 231, 189, 0.85); background: rgba(20, 22, 56, 0.35); border: 1px solid rgba(219, 173, 79, 0.45); border-radius: 999px; padding: 11px 16px; cursor: pointer; opacity: 0; }
.moment.is-words .moment-skip, .moment.is-leaving { pointer-events: none; }