:root {
  color-scheme: dark;
  --night: #030817;
  --night2: #071329;
  --panel: #0a1931;
  --panel2: #0f2140;
  --ink: #f6f8ff;
  --muted: #bac8df;
  --teal: #62e6ff;
  --teal2: #398cff;
  --mint: #a5efff;
  --gold: #a996ff;
  --line: #273d64;
  --cream: #f7f5ef;
  --dark: #030817;
}

html { background: var(--night); }
body {
  background:
    radial-gradient(ellipse at 83% 10%, #10296655 0, transparent 28rem),
    radial-gradient(ellipse at 5% 48%, #10214944 0, transparent 38rem),
    var(--night);
}
.topbar {
  background: #030817d9;
  border-bottom-color: #91baff20;
  box-shadow: 0 10px 32px #0003;
}
.brand img { box-shadow: 0 0 24px #84cfff32; }
.brand small { color: #a7b8d8; }
.nav-links a { color: #c3d0e9; }
.menu-toggle { border-color: #98c8ff50; background: #07152caa; }

.button {
  color: #051126;
  background: linear-gradient(112deg, #83efff 0%, #56aeff 52%, #a78cff 100%);
  box-shadow: 0 8px 32px #448fff3b, inset 0 1px #ffffff9c;
}
.button:hover { box-shadow: 0 13px 42px #4c8cff70, inset 0 1px #ffffffbd; }
.button.outline, .button.ghost {
  color: #eef5ff;
  border-color: #9cc9ff48;
  background: linear-gradient(135deg, #0a1a34c9, #101a37b3);
  box-shadow: inset 0 1px #ffffff12, 0 8px 28px #0002;
}
.button.outline:hover, .button.ghost:hover {
  border-color: #7ddfff9c;
  background: #10284ac9;
}

.hero {
  min-height: min(820px, calc(100svh - 76px));
  background:
    radial-gradient(ellipse at 73% 45%, #176dff3b 0, transparent 33rem),
    radial-gradient(ellipse at 87% 22%, #8d6cff28 0, transparent 24rem),
    linear-gradient(115deg, #020613 0%, #061127 54%, #081936 100%);
  border-bottom-color: #4b85ff35;
}
.hero:before {
  background: linear-gradient(90deg, #030817 0%, #030817f5 39%, #030817ce 53%, #03081736 76%, #0308170b 100%);
}
.hero:after {
  background: linear-gradient(0deg, #030817 0%, #03081712 21%, transparent 67%, #03081733 100%);
}
.hero-photo {
  z-index: -2;
  top: -22%;
  right: -2%;
  width: min(63vw, 850px);
  height: 145%;
  object-fit: cover;
  object-position: 50% 72%;
  opacity: .96;
  filter: saturate(1.16) contrast(1.04);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 88%, transparent 100%);
  animation: campaign-drift 24s ease-in-out infinite alternate;
}
.hero-orbit { border-color: #78baff62; box-shadow: 0 0 75px #2c75ff29, inset 0 0 65px #6e72ff12; }
.hero-orbit:before, .hero-orbit:after { border-color: #78cfff58; }
.orbit-light { background: #8ff6ff; box-shadow: 0 0 34px 12px #54baff9c; }
.hero-content { width: min(650px, 58%); }
.hero-content .eyebrow { animation: hero-enter .75s .08s both; }
.hero h1 { animation: hero-enter .8s .16s both; }
.hero-copy { animation: hero-enter .8s .25s both; }
.hero-ctas { animation: hero-enter .8s .34s both; }
.hero-proof, .hero-note { animation: hero-enter .8s .44s both; }
.hero .eyebrow, .section .eyebrow, .film-section .eyebrow { color: #85e8ff; }
.hero h1 { text-shadow: 0 8px 42px #0008; }
.hero h1 .shine {
  background: linear-gradient(110deg, #85f0ff 8%, #5caaff 56%, #b391ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px #53a8ff44);
}
.hero-copy { color: #d1def4; }
.hero-proof { color: #c1d2eb; }
.proof-dots i { border-color: #95eaff; background: #5ec7ff; box-shadow: 0 0 12px #5caaff99; }
.hero-note, .hero-foot { color: #a9bad8; }
.hero-float {
  border-color: #84ceff5e;
  background: linear-gradient(145deg, #0b1d39e8, #091328e8);
  box-shadow: 0 22px 80px #0009, 0 0 38px #3788ff27, inset 0 1px #ffffff24;
}
.status-pill { background: #477cff35; color: #c3eaff; }
.status-pill:before { background: #6bf3ff; box-shadow: 0 0 9px #6bf3ff; }
.float-rule { border-color: #91bfff32; background: #ffffff08; color: #e4ecff; }
.scroll-cue b { border-color: #8ddfff77; color: #a2f3ff; }

.ticker {
  color: #e8f5ff;
  background: linear-gradient(105deg, #101b48, #155bd0 48%, #6541b8 100%);
  border-bottom-color: #9fcaff29;
}
.ticker b { color: #a1f6ff; }
.section.dark {
  background:
    radial-gradient(ellipse at 90% 8%, #1949a022, transparent 36rem),
    linear-gradient(150deg, #050c1d, #061127 55%, #07162c);
}
.section.alt {
  background:
    radial-gradient(ellipse at 12% 62%, #184fbd25, transparent 34rem),
    linear-gradient(135deg, #07142a 0%, #0a1a35 55%, #091127 100%);
}
.section-head h2, .pause-copy h2, .reflect-copy h2, .faq-intro h2 { color: #f5f8ff; }
.section-head h2 em, .pause-copy h2 em, .reflect-copy h2 em, .faq-intro h2 em,
.final-copy h2 em { color: #73ddff; }
.section-head p, .pause-copy > p, .reflect-copy > p, .faq-intro > p { color: #b8c9e2; }
.section-link { border-top-color: #9abfff20; }
.section-link p { color: #bdcce3; }
.text-link, .footer-links a:hover { color: #7fe7ff; }
.story-step { color: #eff5ff; cursor: pointer; }
.story-instruction { margin: 0 0 2px; color: #b7c8e4; font-size: 12px; line-height: 1.5; }
.story-status { display: inline-flex; align-self: start; margin: 0 0 6px; padding: 7px 10px; border: 1px solid #66d8ff48; border-radius: 999px; background: #102b4a; color: #92eaff; font-size: 10px; font-weight: 740; letter-spacing: .02em; }
.story-step:focus-visible { outline: 3px solid #83efff; outline-offset: 3px; }
.story-step small { color: #b5c8e4; }
.story-step:hover { background: #82baff0c; }
.story-step[aria-pressed=true] {
  border-color: #62d8ff68;
  background: linear-gradient(112deg, #104b88a8, #3127649c);
  box-shadow: inset 0 1px #ffffff18, 0 14px 34px #0002;
}
.story-num { border-color: #79b6ed90; color: #8deaff; }
.story-step[aria-pressed=true] .story-num { background: linear-gradient(140deg, #83efff, #7189ff); color: #061127; border-color: transparent; }
.story-stage {
  min-height: 580px;
  border-color: #75bfff42;
  background:
    radial-gradient(circle at 51% 45%, #1648a05c 0, #111c4540 33%, #061127 72%),
    linear-gradient(145deg, #07152d, #050b1b);
  box-shadow: 0 28px 85px #0008, inset 0 1px #ffffff14;
}
.story-stage:before, .story-stage:after { border-color: #66d8ff37; box-shadow: 0 0 48px #428dff1a; }
.story-stage:after { border-color: #9a7bff3c; }
.poster-frame {
  width: auto;
  height: min(69svh, 500px);
  max-width: 70%;
  border-color: #9cd4ff8a;
  border-radius: 28px;
  background: #030817;
  box-shadow: 0 25px 75px #000c, 0 0 50px #318bff3c;
  transform: rotate(-2deg) perspective(900px) rotateY(-3deg);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s;
}
.story-panel.active .poster-frame { transform: rotate(0) perspective(900px) rotateY(0); box-shadow: 0 25px 75px #000c, 0 0 60px #318bff55; }
.poster-frame img { width: auto; height: 100%; max-height: none; object-fit: contain; }
.panel-label {
  left: 7%; bottom: 12%;
  border-color: #81dfff61;
  background: #07132de8;
  color: #e9f8ff;
  box-shadow: 0 10px 34px #0009, 0 0 24px #4d85ff2d;
}
.story-progress i { background: #99caff68; }
.story-progress i.active { background: #79eaff; box-shadow: 0 0 14px #5db7ff; }
.campaign-note { margin: 18px 0 0; color: #9eafce; font-size: 10px; line-height: 1.6; }

.film-section {
  background:
    radial-gradient(ellipse 58% 82% at 83% 48%, #174aff30, transparent 72%),
    linear-gradient(125deg, #030817, #091a36 60%, #101b43);
}
.film-copy h2 em { color: #7fdcff; }
.film-cta { background: linear-gradient(110deg, #83efff, #5395ff 62%, #9b83ff); box-shadow: 0 10px 36px #367dff45; }
.film-secondary { color: #92e8ff; }
.film-frame video { border-color: #82caff74; box-shadow: 0 28px 80px #0009, 0 0 50px #428dff25; }

.choice-controls, .schedule-console, .reflect-card {
  border-color: #86baff43;
  background: linear-gradient(145deg, #0b1d3aee, #081329f2);
  box-shadow: 0 25px 75px #0004, inset 0 1px #ffffff16;
}
.choice-label, .schedule-group label { color: #bdd0ed; }
.mode {
  border-color: #80abda35;
  background: #06132bbf;
  color: #d8e8ff;
}
.mode:hover { border-color: #79dfff9c; background: #102b55; }
.mode[aria-pressed=true] {
  border-color: #7be8ffb8;
  background: linear-gradient(120deg, #135394, #3b357b);
  color: #f4fbff;
  box-shadow: inset 0 0 0 1px #9feaff25, 0 0 24px #3c98ff33;
}
.mode-icon { background: #579dff20; color: #8eecff; }
.privacy-hint { border-top-color: #a1c3fa20; color: #bbcae1; }
.privacy-hint b { color: #86eaff; }
.plan-card {
  border-color: #81c9ff63;
  background: linear-gradient(145deg, #101e3a, #081329 76%);
  color: #f5f8ff;
  box-shadow: 0 22px 70px #0005, inset 0 1px #ffffff1b, 0 0 40px #317eff17;
}
.plan-card-top { color: #a8bddc; }
.plan-card-top .category { background: #153b67; color: #9cecff; }
.plan-card h3 { color: #f5f8ff; }
.plan-field { border-top-color: #b3c7e326; }
.plan-field small { color: #7ce4ff; }
.plan-field p { color: #d2dff1; }
.plan-card-aside {
  border-left: 1px solid #a5cfff1c;
  background: radial-gradient(ellipse at 55% 22%, #263f80aa, #0d1a36 65%);
}
.aside-orbit, .aside-orbit:before { border-color: #82deff80; }
.aside-orbit:after { background: #1e4780; border-color: #92bdff9c; }
.aside-orbit b { color: #e1f8ff; }
.aside-caption, .plan-card-aside small { color: #bacce8; }

.schedule-console { background: linear-gradient(145deg, #0c1f3d, #08142a); }
.console-live { color: #a9eaff; }
.console-live:before { background: #66e8ff; box-shadow: 0 0 0 4px #66e8ff2d; }
.schedule-group { border-top-color: #9abbe326; }
.schedule-group label { color: #b8cbe8; }
.pill {
  border-color: #83aee13d;
  background: #07142c;
  color: #d9e7ff;
}
.pill:hover { border-color: #79dfff9c; }
.pill[aria-pressed=true] { background: linear-gradient(110deg, #81eaff, #7ca9ff); color: #061228; border-color: #8feeff; }
.schedule-review {
  border-color: #79cfff53;
  background: linear-gradient(135deg, #12365f, #202258);
  color: #f1f7ff;
  box-shadow: inset 0 1px #ffffff1b, 0 0 24px #327dff1c;
}
.schedule-review small { color: #a4eaff; }
.schedule-review p, .schedule-console .disclaimer { color: #b3c6e1; }
.schedule-art:before { background: #308cff49; }
.schedule-art img { border-color: #76c8ff78; box-shadow: 0 35px 80px #000a, 0 0 44px #448aff28; }
.schedule-stamp { border-color: #72dfff6e; background: #0b1c39ed; color: #dff9ff; box-shadow: 0 15px 40px #0008, 0 0 23px #397eff30; }

/* The Pause preview moves through Sicuur's three real prompts, with an optional breath cue. */
.timer-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 30px;
  padding: clamp(24px, 3vw, 38px);
}
.timer-card::before,
.timer-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 440px;
  aspect-ratio: 1;
  border: 1px solid #76c9ff16;
  border-radius: 50%;
  pointer-events: none;
}
.timer-card::before {
  top: 9%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #398bff21 0, #725aff0d 40%, transparent 70%);
  animation: pause-atmosphere 13s ease-in-out infinite alternate;
}
.timer-card::after { top: 15%; left: 50%; transform: translateX(-50%); box-shadow: 0 0 0 34px #84caff08, 0 0 0 72px #9a78ff06; }
.timer-head { position: relative; z-index: 1; }
.timer-screen { position: relative; z-index: 1; }
.breath {
  width: min(220px, 58vw);
  transition: transform 4s cubic-bezier(.3,.05,.25,1), box-shadow 3s ease;
  will-change: transform;
}
.timer-card[data-breath="inhale"] .breath { transform: scale(1.075); box-shadow: 0 0 58px #41baff73, 0 0 110px #625bff32; }
.timer-card[data-breath="exhale"] .breath { transform: scale(.94); box-shadow: 0 0 35px #368bff45, 0 0 90px #625bff22; }
.timer-card[data-breath="steady"] .breath { transform: scale(1); }
.breath-inner { border: 1px solid #8bdfff38; box-shadow: inset 0 0 35px #358aff1c, 0 0 26px #367fff22; }
.breath-cue {
  min-height: 18px;
  margin: 15px 0 0;
  color: #9beaff;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}
.pause-journey {
  display: grid;
  grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  max-width: 430px;
  margin: 20px auto 24px;
  color: #8da3c8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .035em;
  text-align: center;
}
.pause-journey span { transition: color .35s ease, text-shadow .35s ease; }
.pause-journey span.active { color: #a8f2ff; text-shadow: 0 0 15px #5fcfff8a; }
.pause-journey span.complete { color: #b5ceff; }
.pause-journey i { height: 1px; background: #7d9cc22e; transition: background .35s ease, box-shadow .35s ease; }
.timer-card[data-step="2"] .pause-journey i:first-of-type,
.timer-card[data-step="3"] .pause-journey i { background: #66dfff; box-shadow: 0 0 10px #55caff88; }
.timer-card.step-change .timer-screen h3 { animation: pause-step-in .52s cubic-bezier(.2,.75,.25,1) both; }
.timer-card.step-change .timer-screen > p { animation: pause-step-in .52s .06s cubic-bezier(.2,.75,.25,1) both; }
.timer-card .timer-screen h3 { max-width: 500px; margin-inline: auto; }
.timer-controls, .timer-read, .timer-state, .timer-caveat { position: relative; z-index: 1; }
.timer-controls { display: flex; justify-content: center; gap: 10px; }
.timer-controls .button { min-width: 150px; }
.timer-read { color: #9beaff; }
.timer-state { color: #b4c8e5; }
.timer-caveat { max-width: 480px; margin-inline: auto; color: #9aaecf; line-height: 1.6; }

.pause-section {
  background:
    radial-gradient(ellipse at 80% 55%, #3334a83d, transparent 35rem),
    linear-gradient(115deg, #030817, #081a39 55%, #101b43);
  border-block-color: #7e9fff24;
}
.pause-section:before { border-color: #74ccff31; box-shadow: 0 0 0 55px #538dff0b, 0 0 0 115px #795fff0a, 0 0 0 180px #6abaff07; }
.pause-step span { border-color: #79c8ff82; color: #8beaff; }
.timer-card {
  border-color: #84c9ff68;
  background: linear-gradient(150deg, #101f3b, #071228);
  color: #f3f7ff;
  box-shadow: 0 35px 100px #0009, 0 0 55px #437fff25, inset 0 1px #ffffff19;
}
.timer-head { border-bottom-color: #bdd5f129; }
.timer-head span, .timer-state, .timer-caveat { color: #b3c6e1; }
.timer-screen h3 { color: #f2f7ff; }
.timer-screen p { color: #b9cbe5; }
.breath { background: conic-gradient(from -90deg, #78f1ff 0deg, #477dff var(--progress), #a05eff var(--progress), #182b58 0); box-shadow: 0 0 46px #368bff55; }
.breath:before, .breath:after { border-color: #7ecfff45; }
.breath-inner { background: radial-gradient(circle at 48% 25%, #1b3f7d, #07132d 75%); }
.breath-time { color: #f5f9ff; }
.breath-word, .timer-phase { color: #91eaff; }
.timer-read { color: #8fe9ff; }

.reflect-card { border-radius: 26px; }
.reflect-top strong { color: #f1f7ff; }
.switch { border-color: #8eb3e540; background: #06132c; }
.switch button { color: #bfd0ea; }
.switch button[aria-pressed=true] { background: linear-gradient(115deg, #7eeaff, #809bff); color: #061229; }
.chart { border-bottom-color: #9ab9e52b; }
.bar { background: linear-gradient(180deg, #9e8aff, #4bbdff 65%, #4ff1ff); box-shadow: 0 0 18px #488dff62; }
.bar-label { color: #9eb2d0; }
.reflect-insight { border-color: #82baff30; background: linear-gradient(120deg, #102a50, #17224a); }
.insight-icon { color: #8ceaff; background: #437cff2b; }
.reflect-insight strong { color: #eaf5ff; }
.reflect-insight p, .reflect-note { color: #b2c4df; }
.reflect-list span { color: #d2e0f2; }
.reflect-list b { color: #7eeaff; }

.trust-item { border-color: #94b8e524; }
.trust-icon { border-color: #80cfff55; color: #8ceaff; background: #152952; }
.trust-item b { color: #f0f6ff; }
.trust-item p { color: #b4c6e1; }
.faq-list details { border-color: #89b4e52b; background: #0a1931b5; }
.faq-list summary { color: #f0f6ff; }
.faq-answer { color: #bdcce3; }
.final-cta {
  border-color: #88caff48;
  background:
    radial-gradient(ellipse at 76% 26%, #3155b23a, transparent 29rem),
    linear-gradient(125deg, #081731, #0d1a3a 58%, #171b46);
  box-shadow: 0 25px 85px #0006, inset 0 1px #ffffff1a;
}
.final-cta:before { background: linear-gradient(90deg, #07142af8 0%, #07142ad6 44%, #07142a20 100%); }
.final-art { filter: drop-shadow(0 20px 42px #3d84ff53); }
.footer { border-top: 1px solid #8cbcff20; }
.footer-main { border-bottom-color: #92b7e524; }
.footer-links a, .footer-meta { color: #a9bad8; }
.footer-disclaimer { color: #879bb9; }
.mobile-dock {
  border-color: #82d6ff78;
  background: #061329ed;
  box-shadow: 0 16px 50px #000b, 0 0 30px #387eff29, inset 0 1px #ffffff19;
}
.mobile-dock .dock-label { color: #b9cbe7; }
.mobile-dock .dock-label b { color: #f4f8ff; }
.back-to-top { border-color: #79dfff83; background: #091b36ed; color: #8ceaff; box-shadow: 0 8px 28px #0006; }

@keyframes campaign-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-8px, 9px, 0) scale(1.025); }
}
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1000px) {
  .hero-photo { width: 70%; object-position: 49% 72%; }
}

@media (max-width: 760px) {
  .topbar { background: #030817f2; }
  .nav-links { background: #050d20f7; border-bottom-color: #8fbaff2c; }
  .hero {
    min-height: 820px;
    min-height: min(940px, max(790px, calc(100svh - 68px)));
    background:
      radial-gradient(ellipse at 74% 68%, #1554bb55, transparent 23rem),
      linear-gradient(180deg, #030817 0%, #061127 54%, #07152b 100%);
  }
  .hero:before { background: linear-gradient(180deg, #030817 0%, #030817f5 31%, #0308178a 55%, #03081724 81%, #03081770 100%); }
  .hero:after { background: linear-gradient(0deg, #030817 0%, #03081718 24%, transparent 70%, #03081725 100%); }
  .hero-photo {
    top: auto;
    bottom: 0;
    right: -10%;
    width: 92%;
    height: 62%;
    object-position: 50% 74%;
    opacity: .88;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 23%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 23%, #000 86%, transparent 100%);
  }
  .hero-orbit { right: -24%; top: 47%; width: 86vw; border-color: #79bdff53; }
  .hero-content { padding-top: 63px; padding-bottom: 255px; }
  .hero h1 { max-width: 580px; font-size: clamp(49px, 11vw, 72px); }
  .hero-copy { max-width: 500px; color: #d2def0; }
  .hero-float { right: 5%; bottom: 9%; width: min(205px, 58vw); }
  .hero-foot { color: #afc2df; }
  .story-stage { min-height: 435px; }
  .poster-frame { height: min(55svh, 390px); max-width: 62%; }
  .panel-label { left: 5%; bottom: 11%; font-size: 8px; }
  .story-step { border-color: #94b7e51d; background: #07152a72; }
  .story-step[aria-pressed=true] { transform: none; }
  .plan-card-aside { border-left: 0; border-top: 1px solid #a5cfff1c; }
  .trust-item:nth-child(-n+2) { border-bottom-color: #94b8e524; }
  .trust-item { border-color: #94b8e524; }
  .mobile-dock { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 400px) {
  .hero { min-height: 790px; min-height: max(770px, calc(100svh - 68px)); }
  .hero-content { padding-top: 55px; padding-bottom: 245px; }
  .hero h1 { font-size: 47px; }
  .hero-photo { width: 104%; right: -15%; height: 59%; object-position: 51% 73%; }
  .hero-float { bottom: 8%; width: 185px; }
  .story-stage { min-height: 395px; }
  .poster-frame { height: min(49svh, 350px); max-width: 58%; }
  .panel-label { bottom: 10%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; }
  .hero-content .eyebrow, .hero h1, .hero-copy, .hero-ctas, .hero-proof, .hero-note { animation: none; }
}

/* The sample-plan area is a small guided interaction, not a static form. */
.choice-controls {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.choice-controls::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30% -24% auto auto;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #278aff25 0, #675aff13 36%, transparent 70%);
  animation: focus-glow 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.choice-controls > * { position: relative; z-index: 1; }
.moment-picker {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #9abfff20;
}
.moment-picker .choice-label { margin-bottom: 11px; }
.moment-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.moment-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid #80abda35;
  border-radius: 12px;
  background: linear-gradient(145deg, #07142bc9, #101d3bcc);
  color: #d8e8ff;
  font: inherit;
  font-size: 10px;
  text-align: left;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
  cursor: pointer;
}
.moment-option:hover { transform: translateY(-2px); border-color: #79dfff9c; }
.moment-option > span {
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: #579dff20;
  color: #8eecff;
  font-size: 14px;
}
.moment-option[aria-pressed="true"] {
  border-color: #7be8ffb8;
  background: linear-gradient(120deg, #135394, #3b357b);
  color: #f4fbff;
  box-shadow: inset 0 0 0 1px #9feaff25, 0 0 22px #3c98ff2b;
}
.moment-option[aria-pressed="true"] > span { background: #86eaff2b; color: #b9f5ff; }
.moment-status {
  min-height: 1.4em;
  margin: 10px 1px 0;
  color: #9fb6d8;
  font-size: 9px;
  line-height: 1.5;
}
.moment-option:focus-visible, .mode:focus-visible {
  outline: 2px solid #b098ff;
  outline-offset: 3px;
}
.plan-card { min-height: 390px; }
.plan-card.is-updating .plan-card-top,
.plan-card.is-updating h3,
.plan-card.is-updating .plan-field {
  animation: plan-refresh .42s cubic-bezier(.2,.75,.25,1) both;
}
.plan-card.is-updating h3 { animation-delay: .04s; }
.plan-card.is-updating .plan-field:nth-of-type(1) { animation-delay: .08s; }
.plan-card.is-updating .plan-field:nth-of-type(2) { animation-delay: .12s; }
.aside-orbit { animation: orbit 26s linear infinite; box-shadow: 0 0 38px #448cff20; }
.aside-orbit:after { animation: focus-pulse 3.8s ease-in-out infinite alternate; }

/* The replacement campaign artwork carries the old schedule and closing art into the new look. */
.schedule-art { width: min(100%, 390px); }
.schedule-art img {
  width: min(100%, 390px);
  border-radius: 28px;
  transform: rotate(1deg) perspective(1100px) rotateY(-3deg);
}
.schedule-art:hover img { transform: rotate(0) perspective(1100px) rotateY(0) translateY(-6px); }
.final-art {
  display: block;
  justify-self: center;
  width: min(100%, 420px);
  height: 440px;
  max-height: none;
  object-fit: cover;
  object-position: 50% 52%;
  border: 1px solid #90cfff78;
  border-radius: 28px;
  box-shadow: 0 26px 75px #000b, 0 0 48px #3d84ff45;
  transform: perspective(1100px) rotateY(-5deg);
  transition: transform .5s ease, box-shadow .5s ease;
}
.final-cta:hover .final-art { transform: perspective(1100px) rotateY(0) translateY(-4px); box-shadow: 0 32px 85px #000b, 0 0 58px #3d84ff5e; }

/* Keep FAQ copy comfortably inset inside each interactive row. */
.faq-list { border-top: 0; }
.faq-list details {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #89b4e533;
  border-radius: 14px;
  background: linear-gradient(120deg, #0a1931e8, #0a1730c9);
  transition: border-color .22s ease, background .22s ease;
}
.faq-list details[open] { border-color: #8d9fff93; background: linear-gradient(120deg, #0c1d3aeF, #101937eF); }
.faq-list summary { padding: 19px 48px 19px 19px; }
.faq-list summary:after { right: 17px; }
.faq-answer { padding: 0 19px 20px; }

/* Gremlin reel stills connect the two key moments to familiar situations. */
.story-panel[data-panel="0"] .poster-frame img,
.story-panel[data-panel="3"] .poster-frame img { object-fit: cover; }
.panel-callout {
  left: 50%;
  bottom: 7%;
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: 86%;
  padding: 12px 15px;
  border-color: #82caff86;
  border-radius: 15px;
  background: linear-gradient(120deg, #07172bea, #101b3aeb);
  box-shadow: 0 12px 35px #0009, 0 0 25px #398eff2b;
  transform: translateX(-50%);
  text-align: left;
  letter-spacing: .075em;
}
.panel-callout b { color: #8eeeff; font-size: 10px; }
.panel-callout small { color: #edf5ff; font-size: 9px; font-weight: 550; letter-spacing: .01em; text-transform: none; }

@keyframes focus-glow {
  from { transform: translate3d(4%, -2%, 0) scale(.92); opacity: .65; }
  to { transform: translate3d(-7%, 8%, 0) scale(1.08); opacity: 1; }
}
@keyframes focus-pulse {
  from { transform: scale(.93); box-shadow: 0 0 0 0 #65ceff00; }
  to { transform: scale(1.07); box-shadow: 0 0 25px 4px #65ceff26; }
}
@keyframes plan-refresh {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pause-atmosphere {
  from { transform: translateX(-50%) scale(.94); opacity: .56; }
  to { transform: translateX(-50%) scale(1.06); opacity: 1; }
}
@keyframes pause-step-in {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .hero-photo {
    object-position: 50% 96%;
    opacity: .72;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 43%, #000 76%, #000 91%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 43%, #000 76%, #000 91%, transparent 100%);
  }
  .choice-controls { padding: 21px; }
  .moment-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moment-option:last-child { grid-column: 1 / -1; }
  .plan-card { min-height: auto; }
  .schedule-art { max-width: 390px; }
  .schedule-art img { width: min(88%, 340px); }
  .final-cta { min-height: 0; }
  .final-art {
    width: min(100%, 360px);
    height: 310px;
    object-position: 50% 52%;
    transform: none;
  }
  .faq-list summary { padding: 18px 47px 18px 17px; }
  .faq-list summary:after { right: 15px; }
  .faq-answer { padding: 0 17px 18px; }
  .timer-card { padding: 23px 17px; }
  .pause-journey { grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr); gap: 5px; margin: 16px auto 20px; font-size: 8px; }
  .timer-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .timer-controls .button { min-width: 0; width: 100%; padding-inline: 9px; font-size: 10px; }
  .timer-controls .button:only-child { grid-column: 1/-1; }
}
@media (max-width: 400px) {
  .hero-photo { object-position: 50% 100%; opacity: .67; }
  .choice-controls { padding: 18px; }
  .moment-options { gap: 7px; }
  .moment-option { padding-inline: 8px; font-size: 9px; }
  .faq-list summary { padding-left: 15px; }
  .faq-answer { padding-inline: 15px; }
  .final-art { height: 275px; }
  .timer-card { padding-inline: 14px; }
  .breath { width: 182px; }
  .pause-journey { font-size: 7px; letter-spacing: 0; }
  .panel-callout { max-width: 92%; padding: 10px 12px; }
  .panel-callout b { font-size: 9px; }
  .panel-callout small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-controls::before, .aside-orbit, .aside-orbit:after { animation: none; }
  .plan-card.is-updating .plan-card-top,
  .plan-card.is-updating h3,
  .plan-card.is-updating .plan-field { animation: none; }
  .moment-option, .schedule-art img, .final-art, .breath, .pause-journey span, .pause-journey i { transition: none; }
  .timer-card::before, .timer-card.step-change .timer-screen h3, .timer-card.step-change .timer-screen > p { animation: none; }
  .pause-section::before, .breath::before, .breath::after { animation: none; }
}