/* ============================================================
   Notice by OmniPsyche: styles
   Brand system matches omnipsyche.org:
   navy gradient #1A2F4F -> #13233b, coral #F0744F, cream #FAF1E8.
   Bebas Neue headlines, Questrial UI, Cormorant Garamond italic quotes.
   Calm and spacious: negative space is a feature.
   ============================================================ */

:root {
  --navy: #1A2F4F;
  --navy-deep: #13233b;
  --coral: #F0744F;
  --coral-deep: #d85d3b;
  --coral-text: #B0401C;      /* darkened coral, AA for small text on cream */
  --cream: #FAF1E8;
  --paper: #fbf7f2;
  --ink: #243042;
  --muted: #5a6b7e;
  --line: #e7ddd1;
  --surface: #ffffff;

  --grad-navy: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 78%);

  --font-head: 'Bebas Neue', 'Questrial', system-ui, sans-serif;
  --font-ui: 'Questrial', system-ui, sans-serif;
  --font-quote: 'Cormorant Garamond', Georgia, serif;

  --radius: 18px;
  --shadow-1: 0 18px 44px -34px rgba(19, 35, 59, .4);
  --shadow-2: 0 26px 54px -32px rgba(19, 35, 59, .55);

  --pad-x: clamp(20px, 5vw, 48px);
  --content-w: 760px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  /* Navy shows behind the pinned home banner and on overscroll. */
  background: var(--navy-deep);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Content curtain: carries the watercolor background and scrolls OVER the
   pinned home banner (same mechanism as the website's page banners).
   Replace assets/bg-watercolor.jpg to swap the artwork. */
.curtain {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(226, 231, 237, 0.14), rgba(214, 222, 232, 0.3) 85%),
    url("../assets/bg-watercolor.jpg") center top / cover no-repeat,
    linear-gradient(180deg, #DEE3E9 0%, #C9D3DE 100%);
  background-color: #D6DDE5;
  box-shadow: 0 -24px 60px -20px rgba(7, 15, 28, .45);
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--coral-text); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Intro splash ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--navy-deep);
  opacity: 1;
  transition: opacity 2.4s ease;
}
.splash[hidden] { display: none; }
.splash video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.splash.fade { opacity: 0; pointer-events: none; }
.splash-skip {
  position: absolute;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  background: rgba(19, 35, 59, .55);
  color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 14px;
  letter-spacing: .06em;
  backdrop-filter: blur(4px);
}

/* ---------- Header band ---------- */

.app-header {
  background: var(--grad-navy);
  color: #fff;
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--pad-x) 26px;
}

/* ---------- Home parallax banner (ported from the website) ---------- */

.op-banner {
  --banner-h: clamp(380px, 52vw, 700px);
  height: var(--banner-h);
  position: relative;
  z-index: 0;
  background: var(--navy-deep);
}
.op-banner[hidden] { display: none; }
.op-banner-fixed {
  position: fixed;
  top: 0; left: 0; width: 100%;
  height: var(--banner-h);
  overflow: hidden;
  background: var(--navy-deep);
}
.op-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-pos, 50% 42%);
  transform: translateY(var(--recede, 0px)) scale(var(--zoom, 1)) scale(var(--zoom-base, 1));
  transform-origin: center var(--zoom-origin, 30%);
  will-change: transform;
}
/* Logo + (desktop) jump links, anchored near the bottom of the banner */
.banner-hero {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4.5vw, 52px);
  transform: translateX(-50%);
  z-index: 1;
  width: 100%;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vw, 26px);
}
.banner-lockup {
  display: flex;
  align-items: center;
  gap: .3em;
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(44px, 7.5vw, 104px);
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(7, 15, 28, .55);
}
.banner-lockup .mark {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 10px rgba(7, 15, 28, .5));
}
.banner-lockup .by {
  font-family: var(--font-ui);
  font-size: .3em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  display: block;
  margin-top: 8px;
}
/* Jump links under the logo (desktop only). White trim, transparent fill. */
.banner-jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.banner-jump button {
  font-family: var(--font-ui); font-size: 15px; letter-spacing: .02em;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .05);
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.banner-jump .bj-link:hover { background: rgba(255, 255, 255, .16); border-color: #fff; transform: translateY(-1px); }
/* Coral, pulsing "Install the app" (shown only when installable) */
.banner-jump .bj-install {
  background: var(--coral); border-color: transparent; color: var(--navy-deep); font-weight: 600;
  animation: bjpulse 1.9s ease-in-out infinite;
}
.banner-jump .bj-install:hover { background: var(--coral-deep); }
.banner-jump .bj-install[hidden] { display: none; }
@keyframes bjpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 116, 79, .55); }
  50% { box-shadow: 0 0 0 12px rgba(240, 116, 79, 0); }
}
@media (prefers-reduced-motion: reduce) { .bj-install { animation: none; } }
/* Soft fade rooting the photo's bottom into the content curtain */
.op-banner-fixed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 76%, rgba(19, 35, 59, .6) 100%);
}
/* Navy veil that deepens as the curtain rises over the photo */
.op-banner-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 35, 59, .08), rgba(19, 35, 59, .55));
  opacity: var(--dim, 0);
  pointer-events: none;
  transition: opacity .1s linear;
}
@media (max-width: 560px) {
  /* Short banner: frames the meditator with a little room above his head and
     below his seat, and the logo sits comfortably underneath. No jump links. */
  .op-banner { --banner-h: 262px; }
  /* Zoom into the meditator (he's small in the wide photo) so the crop sits
     just above his head and just below his seat, with the logo underneath. */
  .op-banner-img { --zoom-base: 1.72; --zoom-origin: 60%; object-position: 42% 50%; }
  .banner-hero { bottom: 15px; gap: 0; }
  .banner-lockup { font-size: clamp(38px, 11vw, 50px); }
  .banner-jump { display: none; }
}
#programs, #micro-label, #rescue-row { scroll-margin-top: 16px; }

.app-header .bar {
  max-width: var(--content-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.app-header .back-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  border-radius: 999px;
  width: 42px; height: 42px;
  font-size: 20px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.app-header .back-btn.show { display: inline-flex; }

.app-header .wordmark {
  font-family: var(--font-head);
  font-size: clamp(30px, 6vw, 40px);
  letter-spacing: .06em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-header .wordmark .mark {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
}
.app-header .wordmark .by {
  font-family: var(--font-ui);
  font-size: .34em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  display: block;
  margin-top: 6px;
}

.app-header .screen-title {
  font-family: var(--font-head);
  font-size: clamp(26px, 5.4vw, 36px);
  letter-spacing: .05em;
  line-height: 1.05;
}

/* ---------- Main / screens ---------- */

main {
  flex: 1;
  width: 100%;
  max-width: calc(var(--content-w) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: 30px var(--pad-x) 60px;
}

.screen { display: none; }
.screen.active { display: block; animation: fadein .35s ease; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- Tagline ---------- */

.tagline {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(21px, 4.6vw, 27px);
  color: var(--navy);
  text-align: center;
  max-width: 34ch;
  margin: 14px auto 40px;
  line-height: 1.45;
}
.tagline strong { font-weight: 600; color: var(--coral-text); font-style: italic; }

/* ---------- Reps line (anti-streak counter) ---------- */

.reps-line {
  text-align: center;
  font-size: 14px;
  color: #46586e;
  margin: -26px auto 36px;
  max-width: 44ch;
}

/* ---------- Home quick actions (Morning ritual + Learn) ---------- */

.home-actions {
  display: flex;
  gap: 12px;
  margin: 0 0 18px;
}
.home-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 10px;
  color: var(--navy);
  font-size: 14.5px;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, border-color .12s ease;
}
.home-action:hover { transform: translateY(-1px); border-color: var(--coral); }
.home-action:active { transform: scale(.99); }
.home-action svg { width: 18px; height: 18px; color: var(--coral); flex: 0 0 auto; }

/* ---------- Grounding rescue button ---------- */

.grounding-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 20px 22px;
  text-align: left;
  box-shadow: var(--shadow-2);
  margin-bottom: 44px;
  transition: transform .15s ease;
}
.grounding-cta:active { transform: scale(.985); }

.grounding-cta .pulse {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  position: relative;
}
.grounding-cta .pulse::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  animation: ripple 2.6s ease-out infinite;
}
@keyframes ripple {
  0% { transform: scale(.7); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}
.grounding-cta .pulse svg { width: 22px; height: 22px; }

.grounding-cta .t {
  display: block;
  font-family: var(--font-head);
  font-size: 24px;
  letter-spacing: .06em;
  line-height: 1.1;
}
.grounding-cta .s {
  display: block;
  font-size: 14.5px;
  color: rgba(255,255,255,.92);
  margin-top: 3px;
}

/* Two rescue buttons (Anxious / Angry) side by side, even on mobile, no icons */
.rescue-row {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: three stacked strips */
  gap: 12px;
  /* Match the label's 18px bottom gap so "Programs" sits evenly between the
     rescue cards above and the program cards below. */
  margin-bottom: 20px;
}
/* Wider screens: the three rescue cards sit side by side */
@media (min-width: 640px) {
  .rescue-row { grid-template-columns: repeat(3, 1fr); }
}
.rescue-row .grounding-cta {
  width: 100%;
  min-width: 0;                 /* let the grid columns shrink instead of overflowing */
  margin-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
}
.rescue-row .grounding-cta .t { font-size: 18px; overflow-wrap: anywhere; }
.rescue-row .grounding-cta .s { font-size: 12.5px; }
/* Anger button gets a distinct deeper tone so the two read apart */
#anger-cta { background: linear-gradient(135deg, #5b6b8a, #3c4a66); }
#offended-cta { background: linear-gradient(135deg, #b06246, #6f3a2e); }

/* "Learn about Anxiety" video button (grounding end + breathing overlay) */
.learn-btn {
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  background: var(--coral);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}
.learn-btn:hover { background: var(--coral-deep, #e05e3c); }
.learn-btn[hidden] { display: none; }
.bo-learn { margin-top: 6px; }

/* ---------- Track cards ---------- */

.section-label {
  font-size: 17px;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-align: center;
  color: #46586e;
  margin-bottom: 18px;
}

.track-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 620px) {
  .track-grid { grid-template-columns: 1fr 1fr; }
}

.track-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px 20px;
  text-align: left;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 158px;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
  overflow: hidden;
}
.track-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--grad-navy);
}
.track-card:not(.coming-soon):hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.track-card:not(.coming-soon):active { transform: scale(.99); }

.track-card h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .05em;
  color: var(--navy);
  line-height: 1.05;
}
.track-card p { font-size: 15px; color: var(--muted); flex: 1; }

.track-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--coral-text);
}

.progress-dots { display: flex; gap: 6px; }
.progress-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.progress-dots span.done { background: var(--coral); }

/* Track card with a photo background: dark image, light text.
   The gradient overlay is set inline by app.js along with the image. */
.track-card.coming-soon.has-image h3 { color: rgba(255, 255, 255, .8); opacity: 1; }
.track-card.coming-soon.has-image p { color: rgba(250, 241, 232, .6); opacity: 1; }
.track-card.coming-soon.has-image .chip {
  border-color: rgba(255, 255, 255, .3);
  color: rgba(250, 241, 232, .75);
}
.track-card.has-image {
  background-size: cover;
  background-position: center;
  border-color: rgba(255, 255, 255, .14);
  min-height: 190px;
}
.track-card.has-image::before { background: none; }
.track-card.has-image h3 { color: #fff; }
.track-card.has-image p { color: rgba(250, 241, 232, .85); }
.track-card.has-image .meta { color: var(--coral-soft, #ff8e6a); }
.track-card.has-image .progress-dots span { background: rgba(255, 255, 255, .32); }
.track-card.has-image .progress-dots span.done { background: var(--coral); }

.track-card.coming-soon { cursor: default; }
.track-card.coming-soon h3, .track-card.coming-soon p { opacity: .45; }
.track-card.coming-soon::before { background: var(--line); }
.chip {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ---------- Track overview ---------- */

.about-track {
  font-family: var(--font-quote);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  margin: 6px 0 34px;
}

/* Gentle nudge to begin at Day 1, without locking any day. */
.day1-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: 12px;
  padding: 11px 15px;
  margin: 0 0 20px;
}

.day-list { display: flex; flex-direction: column; gap: 12px; }

.day-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: left;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease;
}
.day-row:hover { transform: translateY(-1px); }

.day-row .num {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 20px;
  color: var(--navy);
}
.day-row.done .num { background: var(--coral); border-color: var(--coral); color: #fff; }
.day-row.next .num { border-color: var(--coral); }

.day-row .theme { font-size: 16.5px; color: var(--ink); }
.day-row .state { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.day-row.done .state { color: var(--coral-text); }

.day-row.later { opacity: .62; }

/* ---------- Player ---------- */

.player-theme {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 21px;
  color: var(--navy);
  text-align: center;
  margin: 4px 0 8px;
}
.player-sub {
  text-align: center;
  font-size: 13.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.player-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 30px 24px;
  max-width: 520px;
  margin: 0 auto;
}

/* Player card with a photo background: dark image, light chrome. */
.player-card.has-image {
  background-size: cover;
  background-position: center;
  border-color: rgba(255, 255, 255, .16);
}
/* Anger photo: zoom in and shift so the man's face sits left of the play button.
   Mobile uses a height-based zoom (narrow portrait card crops the wide photo);
   wider cards need a width-based zoom to keep the same framing of the man. */
.player-card.anger-card {
  background-size: cover, auto 130%;
  background-position: center, 100% 22%;
}
@media (min-width: 480px) {
  .player-card.anger-card {
    background-size: cover, 185% auto;
    background-position: center, 88% 8%;
  }
}
.player-card.has-image .time { color: rgba(250, 241, 232, .82); }
.player-card.has-image .play-btn {
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
}
.player-card.has-image input[type="range"] { background: rgba(255, 255, 255, .3); }
.player-card.has-image .transport button {
  border-color: rgba(255, 255, 255, .32);
  color: #FAF1E8;
  background: rgba(19, 35, 59, .25);
}
.player-card.has-image .transport button:hover { border-color: var(--coral); color: var(--coral-soft, #ff8e6a); }
.player-card.has-image .audio-missing {
  background: rgba(19, 35, 59, .5);
  border-color: rgba(255, 255, 255, .28);
  color: rgba(250, 241, 232, .85);
}

.play-btn {
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 0;
  background: var(--grad-navy);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  box-shadow: var(--shadow-2);
  transition: transform .15s ease;
}
.play-btn:active { transform: scale(.94); }
.play-btn svg { width: 34px; height: 34px; }

/* ---------- Logo play button (meditation player) ---------- */
.play-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 2px auto 22px;
}
.logo-play {
  position: relative;
  flex: 0 0 auto;
  width: 84px; height: 83px;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  /* No filter here: a filter region would clip the pulse box-shadow into a
     square. The disc's drop-shadow lives on the SVG instead. */
}
/* Beat the .player-card.has-image .play-btn coral background */
.player-card.has-image .logo-play { background: none; }
.logo-play .pm { display: block; width: 84px; height: 83px; filter: drop-shadow(0 9px 18px rgba(19, 35, 59, .45)); }
/* Standalone disc (grounding, sleep sounds): center it like the old button */
.logo-play.lone { margin: 2px auto 18px; }
.play-word {
  position: relative;   /* byline hangs below without pulling NOTICE off-center */
  font-family: var(--font-head);
  font-size: 42px;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--navy);
  text-align: left;
}
.player-card.has-image .play-word { color: #FAF1E8; }
.play-word .by {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.player-card.has-image .play-word .by { color: rgba(250, 241, 232, .72); }

/* Radiating pulse so it clearly reads as the tappable play button.
   Only while paused; it settles once a session is playing. */
@keyframes playPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240, 116, 79, .5); }
  70%  { box-shadow: 0 0 0 20px rgba(240, 116, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 116, 79, 0); }
}
.logo-play:not(.playing) { animation: playPulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .logo-play:not(.playing) { animation: none; }
}

.length-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.length-row[hidden] { display: none; }
.length-pick { display: flex; gap: 8px; }
.length-pick button {
  border: 1px solid var(--line);
  background: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13.5px;
  color: var(--ink);
}
.length-pick button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.player-card.has-image .length-row { border-top-color: rgba(255, 255, 255, .18); }
.player-card.has-image .length-pick button {
  border-color: rgba(255, 255, 255, .32);
  color: #FAF1E8;
  background: rgba(19, 35, 59, .25);
}
.player-card.has-image .length-pick button[aria-pressed="true"] {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.length-row:not([hidden]) + .intro-row { margin-top: 12px; padding-top: 0; border-top: 0; }

.intro-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.intro-row[hidden] { display: none; }
.player-card.has-image .intro-row { border-top-color: rgba(255, 255, 255, .18); }
.intro-label { font-size: 13.5px; color: var(--ink); }
.intro-hint { font-size: 12.5px; color: var(--muted); font-style: italic; }
.player-card.has-image .intro-label { color: #FAF1E8; }
.player-card.has-image .intro-hint { color: rgba(250, 241, 232, .7); }
.player-card.has-image .switch { background: rgba(255, 255, 255, .3); }
.player-card.has-image .switch[aria-checked="true"] { background: var(--coral); }

.scrub-row { display: flex; align-items: center; gap: 12px; }

.time { font-size: 13px; color: var(--muted); min-width: 42px; font-variant-numeric: tabular-nums; }
.time.right { text-align: right; }

input[type="range"] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  outline-offset: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--coral);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(19,35,59,.35);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--coral);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(19,35,59,.35);
  cursor: pointer;
}

.transport {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
}
.transport button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  color: var(--ink);
}
.transport button:hover { border-color: var(--coral); color: var(--coral-text); }

.audio-missing {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  display: none;
}
.audio-missing.show { display: block; }
.audio-missing .am-msg { margin: 0; }

/* Secondary actions under the missing / error messages */
.am-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.am-actions button {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 13px;
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}
.am-actions button:hover { border-color: var(--coral); color: var(--coral-text); }
.player-card.has-image .am-actions button {
  background: rgba(19, 35, 59, .3);
  border-color: rgba(255, 255, 255, .35);
  color: #FAF1E8;
}
.player-card.has-image .am-actions button:hover { border-color: var(--coral); color: var(--coral-soft, #ff8e6a); }

/* "Could not play" error: same shape as the missing note, coral-tinted edge */
.audio-error {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  background: var(--paper);
  border: 1px dashed rgba(240, 116, 79, .55);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  display: none;
}
.audio-error.show { display: block; }
.audio-error .am-msg { margin: 0; }
.player-card.has-image .audio-error {
  background: rgba(19, 35, 59, .5);
  border-color: rgba(240, 116, 79, .6);
  color: rgba(250, 241, 232, .85);
}

/* ---------- Why it works / collapsibles ---------- */

.reveal {
  max-width: 520px;
  margin: 20px auto 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
}
.reveal > button {
  width: 100%;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--navy);
}
.reveal > button .arrow { transition: transform .2s ease; color: var(--coral-text); }
.reveal.open > button .arrow { transform: rotate(180deg); }
.reveal .body {
  display: none;
  padding: 0 18px 18px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
}
.reveal.open .body { display: block; }

/* "Why it works" reads as a navy card so it stands out from the page */
#why-reveal, #g-why-reveal, #video-why-reveal {
  background: var(--grad-navy);
  border-color: transparent;
  box-shadow: var(--shadow-1);
}
#why-reveal > button, #g-why-reveal > button, #video-why-reveal > button { color: #fff; }
#why-reveal > button .arrow, #g-why-reveal > button .arrow, #video-why-reveal > button .arrow { color: var(--coral-soft, #ff8e6a); }
#why-reveal .body, #g-why-reveal .body, #video-why-reveal .body { color: rgba(255, 255, 255, .88); }

/* Visual hierarchy inside "Why it works": a bright lead sentence with a coral
   accent, then short paragraphs, so it reads as digestible chunks not a wall. */
.reveal .body .why-lead {
  margin: 2px 0 12px;
  padding-left: 13px;
  border-left: 3px solid var(--coral);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.5;
}
.reveal .body .why-p { margin: 0 0 11px; }
.reveal .body .why-p:last-child { margin-bottom: 0; }
#why-reveal .body .why-lead, #g-why-reveal .body .why-lead {
  color: #fff;
  border-left-color: var(--coral-soft, #ff8e6a);
}

/* ---------- Breath guide (inside the player card) ----------
   The NOTICE mark, breathing: grows on the inhale, holds, shrinks on the
   exhale, driven by per-day cue timestamps taken from the actual recording.
   Paces a gentle default before the first cue and keeps guiding at the last
   instructed rhythm between and after cues. No words; the motion explains. */

.bguide-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.bguide-row[hidden] { display: none; }
.player-card.has-image .bguide-row { border-top-color: rgba(255, 255, 255, .2); }
.bg-orb {
  width: 128px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.bg-circle {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: scale(.45);
  transition: transform 4000ms cubic-bezier(.45, 0, .55, 1);
  z-index: 1;
}
.bg-mark {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 22px rgba(240, 116, 79, .45));
}
/* Soft coral light radiating from the mark, same cross-fading double layer
   as the panic-tool orb so the glow swells out and fades continuously. */
.bg-orb .bg-glow {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 116, 79, .55) 0%, rgba(240, 116, 79, .22) 42%, rgba(240, 116, 79, 0) 70%);
  opacity: 0;
  transform: scale(.7);
  animation: boGlow 5.2s ease-in-out infinite;
  pointer-events: none;
}
.bg-orb .bg-glow:nth-child(2) { animation-delay: 2.6s; }
@media (prefers-reduced-motion: reduce) {
  .bg-circle { transition: none; }
  .bg-orb .bg-glow { animation: none; opacity: .4; transform: scale(1.15); }
}

/* ---------- Background sound (inside the player card) ---------- */

.bed-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.player-card.has-image .bed-row { border-top-color: rgba(255, 255, 255, .2); }
.bed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--ink);
}
.player-card.has-image .bed-toggle { border-color: rgba(255, 255, 255, .45); color: #fff; }
.bed-toggle .arrow { transition: transform .2s ease; color: var(--coral-soft, #ff8e6a); }
.bed-toggle[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.bed-inline { display: none; margin-top: 12px; }
.bed-inline.open { display: block; }

.bed-pick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.player-card.has-image .bed-pick button {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.player-card.has-image .bed-pick button[aria-pressed="true"] {
  background: var(--coral);
  border-color: var(--coral);
}
.player-card.has-image .bed-vol-row svg { color: rgba(255, 255, 255, .7); }

.bed-vol-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  transition: opacity .25s ease;
}
.bed-vol-row.dim { opacity: .35; }
.bed-vol-row svg {
  width: 19px;
  height: 19px;
  color: var(--muted);
  flex: 0 0 auto;
}
.bed-pick button {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--ink);
}
.bed-pick button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.switch {
  position: relative;
  width: 50px; height: 28px;
  border-radius: 999px;
  border: 0;
  background: var(--line);
  transition: background .2s ease;
  flex: 0 0 auto;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(19,35,59,.3);
  transition: transform .2s ease;
}
.switch[aria-checked="true"] { background: var(--coral); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }

/* ---------- Completion ---------- */

.done-banner {
  display: none;
  max-width: 520px;
  margin: 22px auto 0;
  background: var(--grad-navy);
  color: #fff;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.done-banner.show { display: block; }
.done-banner p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 19px;
  margin-bottom: 14px;
}
.done-banner button {
  background: var(--coral);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 26px;
  font-size: 15px;
  letter-spacing: .04em;
}

/* ---------- Bridges (where to go next) ---------- */

.bridges { display: none; }
.done-banner .bridges { display: block; }
/* Per-day links under the player (e.g. Feelings Wheel on Heavy Feelings day 2).
   Match the "Why it works" row shape; coral fill + white type so it reads as a CTA. */
.player-bridges:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  margin: 12px auto 0;
}
.player-bridges .bridge-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0;
  padding: 15px 18px;
  border-radius: 14px;
  border: 0;
  background: var(--coral);
  box-shadow: var(--shadow-1);
  text-align: left;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}
.player-bridges .bridge-card:hover {
  transform: translateY(-1px);
  border-color: transparent;
  filter: brightness(1.06);
}
.player-bridges .bridge-card .b-label {
  display: none;
}
.player-bridges .bridge-card .b-title {
  display: block;
  margin-top: 0;
  font-size: 15px;
  letter-spacing: .04em;
  font-weight: 600;
  color: #fff;
}
.player-bridges .bridge-card .b-arrow {
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  line-height: 1;
  margin-left: 12px;
  flex-shrink: 0;
}

.g-bridges.show {
  display: block;
  max-width: 520px;
  margin: 22px auto 0;
  animation: fadein .35s ease;
}

.bridge-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  margin-top: 10px;
  text-decoration: none;
  text-align: left;
  transition: transform .12s ease;
}
.bridge-card:hover { transform: translateY(-1px); border-color: var(--coral); }
.bridge-card .b-label {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.bridge-card .b-title {
  display: block;
  font-size: 15.5px;
  color: var(--coral-text);
  margin-top: 2px;
}
.done-banner .bridge-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.done-banner .bridge-card .b-label { color: rgba(255,255,255,.6); }
.done-banner .bridge-card .b-title { color: #fff; }

/* ---------- Share row ---------- */

.share-row { text-align: center; margin-top: 26px; }
.share-row button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(251, 247, 242, .78);
  backdrop-filter: blur(3px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--muted);
  transition: color .15s ease, border-color .15s ease;
}
.share-row button:hover { color: var(--coral-text); border-color: var(--coral); }
.share-row svg { width: 17px; height: 17px; }

/* Coral call-to-action back to the main site */
.site-cta {
  display: block;
  max-width: 520px;
  margin: 18px auto 0;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 22px;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: transform .15s ease;
}
.site-cta:active { transform: scale(.99); }
.site-cta:hover { transform: translateY(-2px); }
.site-cta .t {
  display: block;
  font-family: var(--font-head);
  font-size: 23px;
  letter-spacing: .05em;
  line-height: 1.1;
}
.site-cta .s {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
  margin-top: 5px;
  letter-spacing: .02em;
}

/* ---------- Grounding player variant ---------- */

.screen-grounding .player-card { border-top: 5px solid var(--coral); }
.grounding-note {
  text-align: center;
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 19px;
  color: var(--navy);
  max-width: 38ch;
  margin: 0 auto 30px;
  line-height: 1.55;
}

/* ---------- Footer ---------- */

.app-footer {
  background: var(--grad-navy);
  color: rgba(255,255,255,.8);
  padding: 40px var(--pad-x) calc(34px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.app-footer .logo {
  width: min(300px, 68%);
  height: auto;
  margin: 0 auto 22px;
}
.app-footer .foot-credit {
  font-size: 13.5px;
  letter-spacing: .05em;
  color: rgba(255,255,255,.72);
  margin: -8px auto 24px;
}
.app-footer nav {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.app-footer a {
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
  letter-spacing: .06em;
}
.app-footer a:hover { color: var(--coral); }
.app-footer .disclaimer {
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.6;
}
.app-footer .disclaimer a { font-size: inherit; color: rgba(255,255,255,.75); text-decoration: underline; }

/* Social circles, matching the website footer */
.app-footer .foot-social { display: flex; gap: 14px; justify-content: center; margin-bottom: 26px; }
.app-footer .foot-social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background .18s ease, transform .18s ease;
}
.app-footer .foot-social a:hover { background: rgba(240, 116, 79, .85); transform: translateY(-2px); }
.app-footer .foot-social svg { width: 19px; height: 19px; fill: #fff; }

/* Newsletter box, matching the website footer */
.app-footer .foot-newsletter {
  max-width: 560px; margin: 0 auto 30px; padding: 26px 22px 22px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}
.nlf-heading {
  font-family: var(--font-quote);
  font-weight: 600;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.15;
  color: #fff;
  margin-bottom: 6px;
}
.nlf-sub { font-size: 15px; line-height: 1.55; max-width: 46ch; margin: 0 auto 16px; color: #b9c8da; }
.omni-nl { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 440px; margin: 0 auto; }
.nlf-email {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--font-ui); font-size: 15.5px;
  padding: 12px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.nlf-email::placeholder { color: #93a3b6; }
.nlf-btn {
  flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 999px;
  font-family: var(--font-ui); font-size: 15px; letter-spacing: .02em;
  padding: 12px 24px; color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  box-shadow: 0 12px 26px -12px rgba(216, 93, 59, .7);
  transition: transform .18s ease, opacity .18s ease;
}
.nlf-btn:hover { transform: translateY(-2px); }
.nlf-btn:disabled { opacity: .6; transform: none; cursor: default; }
.nlf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.app-footer .nlf-note { font-size: 12.5px; margin-top: 12px; color: #93a3b6; }
.app-footer .nlf-note a { font-size: inherit; color: inherit; text-decoration: underline; }
.nlf-msg { display: none; margin-top: 12px; font-size: 15px; }
.nlf-msg.show { display: block; }
.nlf-msg.ok { color: #6fd6a8; font-weight: 600; }
.nlf-msg.err { color: #ff9c9c; }

/* Single link back to the website, under the disclaimer */
.app-footer .foot-site {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.app-footer .foot-site a { font-size: 15px; letter-spacing: .04em; }

/* ---------- Install hint ---------- */

.install-hint {
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted);
}
.install-hint.show { display: flex; }
.install-hint button {
  margin-left: auto;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13.5px;
  flex: 0 0 auto;
}

/* ---------- Large screens: scale up proportionally ---------- */

@media (min-width: 1500px) {
  :root { --content-w: 860px; }
  body { font-size: 17px; }
  .tagline { font-size: 30px; }
  .track-card h3 { font-size: 29px; }
  .track-card p { font-size: 16.5px; }
  .about-track { font-size: 21px; }
  .app-header .wordmark { font-size: 46px; }
}

@media (min-width: 1920px) {
  :root { --content-w: 960px; }
  body { font-size: 18px; }
  .tagline { font-size: 33px; }
  .track-card h3 { font-size: 32px; }
  .app-header .wordmark { font-size: 52px; }
  .player-card, .reveal, .bed-panel, .done-banner { max-width: 600px; }
}

/* ---------- Menu (fixed button + slide-in panel) ---------- */

.menu-btn {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 60;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(19, 35, 59, .5);
  backdrop-filter: blur(6px);
  color: #fff;
  display: grid;
  place-items: center;
}
.menu-btn svg { width: 22px; height: 22px; }

.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(7, 15, 28, .5);
  opacity: 0;
  transition: opacity .25s ease;
}
.menu-scrim.show { opacity: 1; }
.menu-scrim[hidden] { display: none; }

.menu-panel {
  position: fixed;
  top: 0; right: 0;
  z-index: 70;
  height: 100%;
  height: 100dvh;
  width: min(300px, 82vw);
  background: rgba(20, 34, 58, .94);
  backdrop-filter: blur(12px);
  padding: calc(72px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform .28s ease;
  box-shadow: -20px 0 50px -24px rgba(0, 0, 0, .7);
}
.menu-panel.show { transform: translateX(0); }
.menu-panel[hidden] { display: none; }
.menu-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  background: none; border: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 30px; line-height: 1;
}
.menu-link {
  display: flex;
  align-items: center;
  line-height: 1.25;
  gap: var(--ml-gap, 14px);
  padding: var(--ml-pady, 15px) 12px;
  color: #fff;
  text-decoration: none;
  font-size: var(--ml-font, 17px);
  border-radius: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.menu-link:hover { background: rgba(255, 255, 255, .08); }
.menu-link svg { width: var(--ml-icon, 22px); height: var(--ml-icon, 22px); color: var(--coral-soft, #ff8e6a); flex: 0 0 auto; }
.menu-divider { height: 1px; background: rgba(255, 255, 255, .16); margin: 16px 12px 12px; }
.menu-section {
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  padding: 0 12px 6px;
}
.menu-ext { font-size: 15.5px; padding: 12px; border-bottom: 0; }

/* Crisis line: a calm coral accent, not an alarming red siren. */

/* ---------- Start your day (morning ritual) ---------- */

.start-intro, .learn-intro {
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 46ch;
  margin: 4px auto 26px;
}
.ritual-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: clamp(22px, 5vw, 34px);
  max-width: 560px;
  margin: 0 auto;
}
.step-count {
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral-text);
  margin-bottom: 8px;
}
.step-title {
  font-family: var(--font-quote);
  font-weight: 600;
  font-size: clamp(22px, 4.6vw, 28px);
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 16px;
}
.step-title.sub { margin-top: 30px; font-size: clamp(19px, 4vw, 23px); }
.field-list { display: flex; flex-direction: column; gap: 10px; }
.field-list input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
}
.field-list input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(240,116,79,.15); }
.add-more {
  background: none; border: 0;
  color: var(--coral-text);
  font-size: 14.5px;
  padding: 10px 2px 0;
}
.field-hint { font-size: 13px; color: var(--muted); margin-top: 10px; }
.suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.suggest-chips button {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--ink);
}
.suggest-chips button:hover { border-color: var(--coral); color: var(--coral-text); }

.ritual-why { max-width: none; margin-top: 18px; }

.choice-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 12px;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, border-color .12s ease;
}
.choice-card:hover { transform: translateY(-1px); border-color: var(--coral); }
.choice-card .t { display: block; font-family: var(--font-head); font-size: 22px; letter-spacing: .04em; color: var(--navy); }
.choice-card .s { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }
#choose-breath { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); border: 0; }
#choose-breath .t, #choose-breath .s { color: #fff; }
#choose-breath .s { color: rgba(255,255,255,.9); }

.ritual-nav {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  max-width: 560px;
  margin: 20px auto 0;
}
.btn-back {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 15px;
  color: var(--ink);
}
.btn-next {
  flex: 1;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 15px;
  letter-spacing: .04em;
}
.btn-next:hover { background: var(--navy-deep); }

/* ---------- Breathe (video) ---------- */

.video-wrap {
  max-width: 420px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: var(--navy-deep);
}
.video-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--navy-deep);
}
.yt-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  background: var(--yt-red, #FF0000);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  letter-spacing: .02em;
}
.yt-sub-btn svg { width: 18px; height: 18px; }
/* Guided video: one featured card under the tracks, plus its player screen. */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.video-label { margin-top: 34px; }
.screen-video { text-align: center; }
/* The intro toggle sits at the top of the screen, so no divider rule above it. */
.video-intro-row { border-top: 0; margin-top: 6px; padding-top: 0; margin-bottom: 20px; }

.screen-breathe { text-align: center; }
.breathe-body {
  max-width: 520px;
  margin: 26px auto 0;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}
.breathe-body h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--navy);
  margin-bottom: 10px;
}
.breathe-body p { font-size: 15.5px; line-height: 1.7; color: var(--ink); }

.start-tools {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 24px auto 0;
}
.start-tools[hidden] { display: none; }
.start-tools button {
  font-size: 14px;
  border-radius: 999px;
  padding: 11px 22px;
  letter-spacing: .02em;
}
#download-history {
  background: var(--navy);
  color: #fff;
  border: 0;
}
#download-history:hover { background: var(--navy-deep); }
#clear-history {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
}
#clear-history:hover { border-color: #d98b7a; color: #b03a2e; }

/* ---------- Learn ---------- */

.learn-video { max-width: 560px; margin: 0 auto 22px; }
.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--navy-deep);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  border-radius: 12px;
  background: rgba(19, 35, 59, .78);
  border: 1px solid rgba(255,255,255,.4);
}
.yt-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.yt-facade:hover .yt-play { background: var(--coral); }
.learn-caption {
  text-align: center;
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 18px;
  color: var(--navy);
  margin-top: 12px;
}
.btn-coral {
  display: inline-block;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: #fff;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 15px;
  letter-spacing: .04em;
}
.learn-sub { display: block; width: fit-content; margin: 8px auto 0; }

/* ---------- Continue card (home) ---------- */

.continue-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 22px;
  text-align: left;
  background: var(--grad-navy);
  border: 1px solid rgba(240, 116, 79, .38);
  border-radius: 16px;
  padding: 16px 18px;
  color: #fff;
  box-shadow: var(--shadow-2);
  transition: transform .12s ease, border-color .12s ease;
}
.continue-card:hover { transform: translateY(-1px); border-color: var(--coral); }
.continue-card[hidden] { display: none; }
.cc-play {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: grid;
  place-items: center;
}
.cc-play svg { width: 22px; height: 22px; margin-left: 2px; }
.cc-text { flex: 1; min-width: 0; }
.cc-label {
  display: block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral-soft, #ff8e6a);
}
.cc-title {
  display: block;
  font-family: var(--font-head);
  font-size: 23px;
  letter-spacing: .04em;
  line-height: 1.1;
  margin-top: 3px;
}
.cc-sub { display: block; font-size: 13px; color: rgba(255, 255, 255, .75); margin-top: 3px; }
.cc-go { flex: 0 0 auto; color: rgba(255, 255, 255, .7); font-size: 22px; }

/* ---------- Quick resets (micro sessions) ---------- */

.micro-label { margin-top: 34px; }
.micro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.micro-grid[hidden], .micro-label[hidden] { display: none; }
.micro-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, border-color .12s ease;
}
button.micro-card:hover { transform: translateY(-1px); border-color: var(--coral); }
.micro-card.coming-soon .t, .micro-card.coming-soon .s { opacity: .5; }
.micro-card .t {
  display: block;
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--navy);
}
.micro-card .s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.micro-card .chip { margin-top: 9px; }
/* Ripple photo background: navy overlay baked into the inline style, cream text */
.micro-card.has-image {
  background-size: cover;
  background-position: center;
  border-color: rgba(255, 255, 255, .14);
  min-height: 132px;
  display: flex;
  flex-direction: column;
  /* Title pinned to the top, description centered, time pill at the bottom. */
  justify-content: space-between;
}
.micro-card.has-image .t { color: var(--coral); }
.micro-card.has-image .s { margin-top: 0; }
.micro-card.has-image .s { color: rgba(250, 241, 232, .85); }
.micro-card.has-image .chip {
  color: rgba(250, 241, 232, .92);
  border-color: rgba(255, 255, 255, .32);
  background: rgba(19, 35, 59, .35);
}

/* ---------- Practice calendar (reps dot grid) ---------- */

.practice-cal {
  max-width: 560px;
  margin: 30px auto 0;
  /* Peach watercolor wash; a whisper of cream on top keeps text/dots crisp
     without lightening it back to the cream page color. */
  background: linear-gradient(rgba(250, 241, 232, .16), rgba(250, 241, 232, .16)),
              url(../assets/cards/practice.jpg) center / cover;
  border: 1px solid rgba(240, 116, 79, .28);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px 20px;
}
.practice-cal[hidden] { display: none; }
.pc-line { font-size: 13.5px; color: rgba(19, 35, 59, .66); text-align: center; margin-bottom: 12px; }
/* 8 week-columns: Sunday's date on top, Sun..Sat dots going down */
.pc-grid {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.pc-week {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.pc-wk {
  font-size: 10.5px;
  color: rgba(19, 35, 59, .6);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
/* Empty dots read as faint navy against the peach; filled dots are full coral
   with a soft light halo so they pop off the wash. */
.pc-week span:not(.pc-wk) { width: 11px; height: 11px; border-radius: 50%; background: rgba(19, 35, 59, .18); }
.pc-week span.on { background: var(--coral); box-shadow: 0 0 0 2px rgba(250, 241, 232, .45); }
.pc-week span.future { opacity: .4; }
.pc-delta {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 16.5px;
  color: var(--navy);
}
.pc-delta[hidden] { display: none; }

/* ---------- Before/after check-in ---------- */

.checkin-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.player-card.has-image .checkin-row { border-top-color: rgba(255, 255, 255, .2); }
.ci-label { font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.player-card.has-image .ci-label { color: rgba(255, 255, 255, .82); }
.ci-wrap { display: flex; align-items: center; gap: 10px; }
.ci-end {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.player-card.has-image .ci-end { color: rgba(255, 255, 255, .55); }
.ci-dots { display: flex; gap: 8px; }
.ci-dots button {
  flex: 0 0 auto;          /* never shrink into an oval on a tight row */
  width: 34px; height: 34px;
  padding: 0;              /* override the generic .done-banner button pill padding */
  line-height: 1;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
}
.player-card.has-image .ci-dots button {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.ci-dots button[aria-pressed="true"],
.player-card.has-image .ci-dots button[aria-pressed="true"] {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.checkin-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.checkin-after[hidden] { display: none; }
.checkin-after .ci-label { color: rgba(255, 255, 255, .85); }
.checkin-after .ci-end { color: rgba(255, 255, 255, .55); }
.checkin-after .ci-dots button { border-color: rgba(255, 255, 255, .5); color: #fff; }
.checkin-after .ci-dots button[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); }
.ci-note {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, .92);
}
.ci-note[hidden] { display: none; }

/* Finish share button lives in the navy done banner */
.done-banner .share-finish {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, .65);
  color: #fff;
  border-radius: 999px;
  padding: 11px 26px;
  font-size: 15px;
}
.done-banner .share-finish:hover { border-color: #fff; }
.done-banner .share-finish[hidden] { display: none; }

/* ---------- Lines worth keeping (quotes) ---------- */

.quote-list { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.quote-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
}
.q-text {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.42;
  color: var(--navy);
}
.q-src {
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral-text);
  margin-top: 10px;
}
.q-share {
  margin-top: 12px;
  font-size: 13.5px;
  border: 1px solid var(--line);
  background: none;
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--ink);
}
.q-share:hover { border-color: var(--coral); color: var(--coral-text); }
.q-share:disabled { opacity: .6; }
.q-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.q-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.q-actions .q-share { margin-top: 0; }
.q-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.q-lockup svg { width: 32px; height: 32px; flex: 0 0 auto; }
.q-lockup .ql-t {
  font-family: var(--font-head);
  font-size: 17px;
  letter-spacing: .07em;
  line-height: 1;
  color: #FAF1E8;
}
.q-lockup .ql-by {
  display: block;
  font-family: var(--font-ui);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250, 241, 232, .72);
  margin-top: 3px;
}
/* On the rare card without a photo, keep the lockup legible on cream */
.quote-card:not(.has-image) .ql-t { color: var(--navy); }
.quote-card:not(.has-image) .ql-by { color: var(--muted); }
.quote-card:not(.has-image) .q-lockup svg circle[stroke],
.quote-card:not(.has-image) .q-lockup svg path { stroke: var(--navy); }

/* Quote cards wear the photo of the track they came from, same overlay
   treatment as the track cards. */
.quote-card.has-image {
  background-size: cover;
  background-position: center;
  border-color: rgba(255, 255, 255, .14);
  border-left-color: var(--coral);
}
.quote-card.has-image .q-text { color: #FAF1E8; }
.quote-card.has-image .q-src { color: var(--coral-soft, #ff8e6a); }
.quote-card.has-image .q-share {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.quote-card.has-image .q-share:hover { border-color: var(--coral); color: #fff; }

/* ---------- Daily reminder ---------- */

.reminder-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: clamp(22px, 5vw, 34px);
  max-width: 560px;
  margin: 0 auto;
}
.rem-copy { font-size: 15px; color: var(--ink); line-height: 1.65; margin-bottom: 20px; }
.rem-time-label {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral-text);
  margin-bottom: 6px;
}
#rem-time {
  display: block;
  font-family: inherit;
  font-size: 24px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 16px;
}
.rem-ics { width: 100%; margin-bottom: 8px; }
.rem-gcal {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px 14px;
  background: var(--coral);
  border: 0;
  border-radius: 12px;
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .18s ease;
}
.rem-gcal:hover { background: var(--coral-deep, #d85d3b); }
.rem-notif-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; margin-bottom: 6px; }
.rem-notif-row .intro-label { font-size: 14.5px; color: var(--ink); }

/* ---------- Silent paced breathing ---------- */

.silent-breathe-btn {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 16px auto 0;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, border-color .12s ease;
}
.silent-breathe-btn:hover { transform: translateY(-1px); border-color: var(--coral); }
.silent-breathe-btn[hidden] { display: none; }
.silent-breathe-btn .t {
  display: block;
  font-family: var(--font-head);
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--navy);
}
.silent-breathe-btn .s { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }

.breathe-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: radial-gradient(circle at 50% 42%, #22395c, #0d1a2e 78%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
}
.breathe-overlay[hidden] { display: none; }
body.bo-open { overflow: hidden; }
.bo-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 18px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 36px;
  line-height: 1;
}
/* Orb: the breathing mark plus the rings that radiate out from behind it. */
.bo-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: min(58vw, 300px);
  aspect-ratio: 1;
}
.bo-circle {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: scale(.52);
  transition: transform 4000ms cubic-bezier(.45, 0, .55, 1);
  z-index: 1;
}
.bo-circle.grow { transform: scale(1); }
/* Coral NOTICE mark that breathes; the drop shadow gives the pulsing halo. */
.bo-mark {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 38px rgba(240, 116, 79, .5));
}
/* Soft coral light radiating from the mark: two layers cross-fade so the glow
   swells out and fades continuously, no hard edges. */
.bo-glow {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 116, 79, .55) 0%, rgba(240, 116, 79, .22) 42%, rgba(240, 116, 79, 0) 70%);
  opacity: 0;
  transform: scale(.7);
  animation: boGlow 5.2s ease-in-out infinite;
  pointer-events: none;
}
.bo-glow:nth-child(2) { animation-delay: 2.6s; }
@keyframes boGlow {
  0%   { transform: scale(.7);  opacity: 0; }
  45%  { opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}
.bo-cue {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 27px;
  color: #FAF1E8;
  min-height: 1.4em;
}
.bo-hint { font-size: 13.5px; color: rgba(255, 255, 255, .6); max-width: 36ch; }
/* Background-sound selector on the breathing overlay: dark-context styling
   mirroring the has-image player cards so it reads on the navy backdrop. */
.bo-bed { width: min(90vw, 400px); }
.bo-bed .bed-row { border-top-color: rgba(255, 255, 255, .16); margin-top: 4px; }
.bo-bed .intro-label { color: rgba(250, 241, 232, .9); }
.bo-bed .bed-toggle { border-color: rgba(255, 255, 255, .45); color: #fff; }
.bo-bed .bed-pick button {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.bo-bed .bed-pick button[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); }
.bo-bed .bed-vol-row svg { color: rgba(255, 255, 255, .7); }
@media (prefers-reduced-motion: reduce) {
  .bo-circle { transition: none; }
  .bo-glow { animation: none; opacity: .4; transform: scale(1.15); }
}

/* Offended-reflection mode: smaller orb; the six questions stack and reveal
   one by one, staying on screen for reference. */
.bo-reflect { display: none; }
body.bo-reflect-mode .breathe-overlay { justify-content: flex-start; gap: 20px; padding-top: calc(30px + env(safe-area-inset-top, 0px)); }
body.bo-reflect-mode .bo-orb { width: min(38vw, 172px); }
body.bo-reflect-mode .bo-cue { font-size: 22px; }
body.bo-reflect-mode .bo-hint { max-width: 42ch; }
body.bo-reflect-mode .bo-learn { display: block; margin-top: 4px; }
body.bo-reflect-mode .bo-reflect { display: flex; flex-direction: column; gap: 15px; width: min(92vw, 470px); text-align: left; margin-top: 2px; }
.br-line { opacity: 0; transform: translateY(9px); transition: opacity .6s ease, transform .6s ease; }
.br-line.in { opacity: 1; transform: none; }
.br-lead { font-family: var(--font-quote); font-style: italic; color: #FAF1E8; font-size: 21px; text-align: center; }
.br-lead.br-small { font-size: 16px; color: rgba(255, 255, 255, .72); margin-top: -8px; }
.br-q { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.5; }
.br-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); color: #13233b; font-weight: 600; display: grid; place-items: center; font-size: 14px; font-family: var(--font-ui); }
.br-q .br-t { flex: 1; padding-top: 1px; }
/* Larger screens: let the reflection breather expand (bigger orb, roomier)
   type, and a wider question column. */
@media (min-width: 720px) {
  body.bo-reflect-mode .breathe-overlay { gap: 26px; padding-top: calc(46px + env(safe-area-inset-top, 0px)); }
  body.bo-reflect-mode .bo-orb { width: min(32vw, 252px); }
  body.bo-reflect-mode .bo-cue { font-size: 30px; }
  body.bo-reflect-mode .bo-hint { font-size: 15px; max-width: 52ch; }
  body.bo-reflect-mode .bo-reflect { width: min(84vw, 640px); gap: 20px; }
  body.bo-reflect-mode .br-lead { font-size: 27px; }
  body.bo-reflect-mode .br-lead.br-small { font-size: 18px; }
  body.bo-reflect-mode .br-q { font-size: 20px; gap: 16px; }
  body.bo-reflect-mode .br-n { width: 32px; height: 32px; font-size: 17px; }
  body.bo-reflect-mode .br-q .br-t { padding-top: 3px; }
}

/* ---------- Sleep sounds ---------- */

.sounds-card { text-align: center; }
/* The Better Sleep banner under a navy tint. The photo is much brighter than
   the night shots on the other player cards, so the veil is deeper here to
   land at the same visual weight and keep the controls legible. */
.sounds-card.has-image {
  background-image:
    linear-gradient(180deg, rgba(19, 35, 59, .62), rgba(19, 35, 59, .86)),
    url("../assets/cards/sleep-sounds.webp");
  background-size: cover;
  background-position: center;
}
.sounds-card .play-btn { margin-bottom: 14px; }
.snd-status {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 16px;
}
.player-card.has-image .snd-status { color: rgba(250, 241, 232, .88); }
.sounds-card .bed-pick { justify-content: center; }
.sounds-card .bed-vol-row { max-width: 320px; margin: 18px auto 0; }
.snd-timer-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.player-card.has-image .snd-timer-row { border-top-color: rgba(255, 255, 255, .2); }
.snd-timer-row .intro-label { display: block; margin-bottom: 10px; }
.snd-timer button[aria-pressed="true"] {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

/* ---------- Backup & restore ---------- */

.data-divider { height: 1px; background: var(--line); margin: 26px 0 22px; }
.data-import-btn { display: block; width: 100%; text-align: center; }

/* ---------- Share my week ---------- */

.pc-share {
  display: block;
  margin: 14px auto 0;
  font-size: 13.5px;
  border: 1px solid rgba(19, 35, 59, .28);
  background: rgba(250, 241, 232, .5);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--ink);
}
.pc-share:hover { border-color: var(--coral); color: var(--coral-text); }
.pc-share[hidden] { display: none; }
.pc-share:disabled { opacity: .6; }

/* ---------- First-open hint ---------- */

@keyframes hintGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 116, 79, .0), var(--shadow-2); }
  50% { box-shadow: 0 0 0 6px rgba(240, 116, 79, .35), var(--shadow-2); }
}
.grounding-cta.hint-glow { animation: hintGlow 1.8s ease-in-out infinite; }
.hint-pop {
  max-width: 460px;
  margin: -8px auto 18px;
  text-align: center;
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 16.5px;
  color: var(--coral-text);
}
@media (prefers-reduced-motion: reduce) {
  .grounding-cta.hint-glow { animation: none; }
}

/* ---------- Toast (brief, non-blocking notices) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  z-index: 95;
  max-width: min(92vw, 420px);
  background: rgba(20, 34, 58, .96);
  color: #FAF1E8;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 18px 44px -20px rgba(7, 15, 28, .7);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.toast[hidden] { display: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .3s ease; } }

/* ---------- Update banner (new content available) ---------- */

.update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 96;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(92vw, 460px);
  background: var(--grad-navy);
  color: #FAF1E8;
  border: 1px solid rgba(240, 116, 79, .4);
  border-radius: 14px;
  padding: 12px 14px 12px 18px;
  font-size: 14px;
  box-shadow: 0 20px 48px -22px rgba(7, 15, 28, .75);
}
.update-banner[hidden] { display: none; }
.update-banner span { flex: 1; line-height: 1.35; }
.update-banner button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13.5px;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
}
.update-banner button:hover { background: var(--coral-deep); }

/* ---------- Mobile rhythm (must stay LAST in this file so it overrides
   the base rules above; same specificity, later source order wins) ---------- */

@media (max-width: 560px) {
  main { padding-top: 8px; }
  .tagline { margin: 0 auto 12px; }
  .reps-line { margin: -4px auto 14px; }
  .home-actions { margin-bottom: 12px; }
  .home-action { padding: 11px 6px; font-size: 12.5px; gap: 6px; }
  .home-action svg { width: 15px; height: 15px; }
  .grounding-cta { margin-bottom: 14px; }
  /* Newsletter form stacks; a 220px flex-basis in a column reads as height */
  .omni-nl { flex-direction: column; }
  .nlf-email { flex: 0 0 auto; width: 100%; }
  .nlf-btn { width: 100%; }
}