/* ==========================================================================
   Merorme — home page
   ========================================================================== */

/* ---------- Hero: the Atlas landscape as a window ------------------------ */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(20px, 3vw, 40px));
  padding-bottom: clamp(40px, 6vw, 96px);
  overflow: clip;
}
.hero-glow {
  position: absolute;
  z-index: -1;
  inset: -30% -20% auto auto;
  width: min(1100px, 90vw);
  aspect-ratio: 1;
  background:
    radial-gradient(closest-side at 62% 48%, var(--glow-warm), transparent),
    radial-gradient(closest-side at 30% 70%, var(--glow-cool), transparent);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  min-height: min(calc(100svh - var(--header-h) - 40px), 900px);
}
.hero-copy .h-hero { margin-bottom: 26px; }
.hero-copy .lede { max-width: 31em; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.hero-facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero-facts svg { width: 18px; height: 18px; color: var(--moss); }

.hero-art { position: relative; display: grid; place-items: center; }
.atlas {
  --px: 0;
  --py: 0;
  position: relative;
  width: min(100%, calc((100svh - var(--header-h) - 64px) * 700 / 950), 600px);
  min-width: min(100%, 300px);
  aspect-ratio: 700 / 950;
  border-radius: var(--r-hero);
  overflow: hidden;
  isolation: isolate;
  background: #1E6E79;
  box-shadow: var(--shadow-lift), 0 0 0 1px rgb(24 32 29 / .06);
  transform: translateZ(0);
}
.atlas-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas-svg g { transform-box: view-box; }
.field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.atlas-bar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(16px, 2.6vw, 26px) clamp(18px, 2.8vw, 28px);
  color: var(--hero-ink);
  font: 600 clamp(.8125rem, .76rem + .2vw, .9375rem)/1.2 var(--sans);
  text-shadow: 0 1px 10px rgb(24 32 29 / .35);
}
.atlas-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: rgb(255 254 250 / .16);
  border: 1px solid rgb(255 254 250 / .32);
  text-shadow: none;
  white-space: nowrap;
}
.atlas-pill svg { width: 15px; height: 15px; }
.hero-mero {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  translate: calc(-50% + var(--px) * 10px) calc(-52% + var(--py) * 8px);
  transition: translate .6s var(--ease-out);
}
.hero-mero .mero { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.memory-chips { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.memory-chips li {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 62%;
  padding: 8px 13px 8px 10px;
  border-radius: var(--r-chip);
  background: #FFFEFA;
  color: #18201D;
  font: 600 clamp(.75rem, .7rem + .22vw, .875rem)/1.2 var(--sans);
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgb(10 20 16 / .5);
  translate: calc(var(--px) * var(--depth, 18px)) calc(var(--py) * var(--depth, 18px));
  transition: translate .7s var(--ease-out);
  animation: chip-drift 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -2.3s);
}
.memory-chips li i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: inset 0 0 0 1px rgb(24 32 29 / .15); }
.memory-chips li:nth-child(1) { left: 7%; top: 19%; --depth: 26px; }
.memory-chips li:nth-child(2) { right: 6%; top: 32%; --depth: 14px; }
.memory-chips li:nth-child(3) { left: 5%; bottom: 25%; --depth: 22px; }
.memory-chips li:nth-child(4) { right: 7%; bottom: 13%; --depth: 30px; }
@keyframes chip-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hero-in .9s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-name: hero-rise; animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .hero-copy > :nth-child(4) { animation-delay: 240ms; }
  .hero-copy > :nth-child(5) { animation-delay: 320ms; }
  .atlas { animation: atlas-in 1.2s var(--ease-out) both; }
  .memory-chips li { animation: chip-in .8s var(--ease-out) both, chip-drift 9s ease-in-out infinite; animation-delay: calc(900ms + var(--i) * 140ms), calc(var(--i) * -2.3s); }
}
@keyframes hero-in { from { opacity: 0; translate: 0 18px; } }
@keyframes hero-rise { from { translate: 0 22px; } }
@keyframes atlas-in { from { opacity: 0; scale: .965; } }
@keyframes chip-in { from { opacity: 0; scale: .8; } }

/* ---------- Statement ---------------------------------------------------- */

.statement { padding-block: clamp(64px, 9vw, 140px); }
.statement-text {
  max-width: 21em;
  font: 400 clamp(1.65rem, 1.02rem + 2.65vw, 3.3rem)/1.24 var(--serif);
  letter-spacing: -.018em;
  text-wrap: pretty;
}
.statement-ink { color: var(--text); }

/* ---------- Meet Mero ---------------------------------------------------- */

.meet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.meet-stage {
  --stage-hue: #FFD6A5;
  order: -1;
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sheet);
  background: #18201D;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-lift);
}
.stage-mero { position: relative; z-index: 1; width: 62%; }

.states { margin-top: 34px; }
.states-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.states-pills button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text);
  font: 600 .9375rem/1 var(--sans);
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--ease);
}
.states-pills button:hover { border-color: var(--text-2); }
.states-pills button:active { transform: scale(.96); }
.states-pills button i {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(24 32 29 / .2);
}
.states-pills button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; }
.state-card {
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
  min-height: 9.5rem;
}
.state-name { font: 650 1.125rem/1.3 var(--display); letter-spacing: -.01em; }
.state-desc { margin-top: 6px; color: var(--text-2); }
.tour-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  min-height: 44px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: 600 .875rem/1 var(--sans);
  cursor: pointer;
}
.tour-toggle:hover { color: var(--text); }
.tour-toggle svg { width: 16px; height: 16px; }
.tour-toggle .i-play { display: none; }
.tour-toggle[aria-pressed="true"] .i-play { display: block; }
.tour-toggle[aria-pressed="true"] .i-pause { display: none; }
.meet-note { margin-top: 18px; max-width: 34em; }

/* ---------- Remember: the conversation and its beats ---------------------- */

.remember-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 6vw, 104px);
  align-items: start;
}
.phone-col { position: sticky; top: calc(var(--header-h) + 28px); }
.phone {
  margin: 0 auto;
  width: min(100%, 372px);
  padding: 11px;
  border-radius: 52px;
  background: var(--night);
  box-shadow: var(--shadow-lift), inset 0 0 0 1.5px #3A4640;
}
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(690px, calc(100svh - var(--header-h) - 70px));
  min-height: 600px;
  padding: 18px 16px 14px;
  border-radius: 42px;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
/* The journal's top row, as the app draws it over its landscape (JournalHero, JournalTab): Mero's face in a dark
   pill edged in cream, the date with the weather under it, the mood pill, the dice and the magnifier. No title, no
   Done. Calm's fill is the app's sea glass (Palette.seaGlass), and its symbol a leaf (Mood.symbol). */
.phone--today { --mood-dot: #B3DED0; }
.jhero {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -18px -16px 14px;
  padding: 38px 14px 12px;
  border-radius: 0 0 26px 26px;
  background:
    radial-gradient(70% 120% at 92% 0%, rgb(220 231 226 / .38), transparent 60%),
    radial-gradient(60% 140% at 0% 100%, rgb(27 36 32 / .55), transparent 70%),
    linear-gradient(150deg, #1B2420 0%, #315B50 38%, #1E6E79 76%, #5E9E93 100%);
  color: var(--hero-ink);
}
.jhero-mero {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #18201D;
  box-shadow: 0 0 0 1.5px #F4F1EB;
}
.jhero-mero .mero { position: absolute; left: 50%; top: 50%; width: 62px; translate: -50% -55%; }
.jhero-date { flex: 1; min-width: 0; display: grid; gap: 2px; }
.jhero-date b { font: 650 .75rem/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The date says less rather than being cut, as the app's does (MoodHeader.dateStyles): the month shortens first */
.jhero { container-type: inline-size; }
.jhero-date .d-short { display: none; }
@container (max-width: 339px) {
  .jhero-date .d-long { display: none; }
  .jhero-date .d-short { display: inline; }
}
.jhero-weather {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 500 .6875rem/1.2 var(--sans);
  color: rgb(255 254 250 / .86);
  white-space: nowrap;
}
.jhero-date svg { width: 13px; height: 13px; flex: none; }
.jhero-mood {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: #B3DED0;
  color: #18201D;
  font: 600 .6875rem/1 var(--sans);
}
.jhero-mood svg { width: 12px; height: 12px; }
.jhero-ico { flex: none; width: 20px; height: 20px; color: var(--hero-ink); }
.convo { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.bubble {
  position: relative;
  padding: 12px 15px 26px;
  font-size: .9375rem;
  line-height: 1.45;
}
.bubble small {
  position: absolute;
  right: 14px;
  bottom: 8px;
  font: 500 .75rem/1 var(--sans);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.bubble--me {
  margin-left: 12%;
  border-radius: 24px 24px 5px 24px;
  background: var(--surface);
  border: 1px solid var(--line2);
}
.bubble--me small::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--mood-dot, var(--fill-primary));
  vertical-align: 1px;
}
.bubble--mero {
  margin-right: 8%;
  border-radius: 5px 24px 24px 24px;
  background: var(--bubble-mero);
  color: var(--bubble-mero-ink);
}
.bubble--mero small { color: #4C5652; position: static; }
.bubble-meta {
  position: absolute;
  left: 15px; right: 14px; bottom: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bubble-meta svg { width: 16px; height: 16px; color: #4C5652; }
/* Mero's working face, in the thread where the reply will be: the face alone, 34 points, no words on screen
   (MeroWorking.swift; the words are for VoiceOver). A face that is not showing takes no room. */
.working-mero { flex: none; height: 34px; margin-left: 2px; overflow: visible; }
.working-mero .mero { width: 34px; }
.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.composer-plus, .composer-mic {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
}
.composer-plus { color: var(--text-2); }
.composer-plus svg, .composer-mic svg { width: 20px; height: 20px; }
.composer-field {
  flex: 1;
  height: 42px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text-2);
  font-size: .875rem;
}
.composer-mic { background: var(--fill-primary); color: #18201D; }

/* The sequence is shown whole by default; script (phones) or scroll (desktop) takes it over */
[data-convo][data-seq] [data-step] { opacity: 0; translate: 0 12px; transition: opacity .5s var(--ease), translate .6s var(--ease-out), height .5s var(--ease), margin .5s var(--ease); }
[data-convo][data-seq] [data-step].is-shown { opacity: 1; translate: 0 0; }
[data-convo][data-seq] .working-mero:not(.is-shown) { height: 0; margin-top: -10px; }
[data-convo]:not([data-seq]) .working-mero { display: none; }

@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .remember-grid { timeline-scope: --b1, --b2; }
    .beat[data-beat="1"] { view-timeline: --b1 block; }
    .beat[data-beat="2"] { view-timeline: --b2 block; }
    [data-convo]:not([data-seq]) .working-mero { display: block; }
    [data-convo] [data-step] { animation: step-in linear both; }
    [data-convo] [data-step="1"] { animation-timeline: --b1; animation-range: entry 10% entry 55%; }
    [data-convo] [data-step="2"] { animation: step-in linear both, step-out linear forwards; animation-timeline: --b1, --b1; animation-range: entry 55% entry 90%, cover 46% cover 54%; }
    [data-convo] [data-step="3"] { animation-timeline: --b1; animation-range: cover 50% cover 62%; }
    [data-convo] [data-step="4"] { animation-timeline: --b2; animation-range: entry 25% entry 70%; }
    [data-convo] [data-step="5"] { animation: step-in linear both, step-out linear forwards; animation-timeline: --b2, --b2; animation-range: entry 70% cover 40%, cover 46% cover 54%; }
    [data-convo] [data-step="6"] { animation-timeline: --b2; animation-range: cover 50% cover 62%; }
    @keyframes step-in { from { opacity: 0; translate: 0 14px; } }
    @keyframes step-out { to { opacity: 0; height: 0; margin-top: -10px; } }
  }
}

.beats { list-style: none; margin: 0; padding: 0; }
.beat { padding-block: 8px; }
.beat + .beat { margin-top: clamp(56px, 8vw, 120px); }
.beat-num {
  font: 600 .8125rem/1 var(--mono);
  color: var(--moss);
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.beat .h3 { margin-bottom: 10px; }
.beat > p:not(.beat-num) { color: var(--text-2); max-width: 32em; }
.entry-card {
  margin: 22px 0 0;
  padding: 22px 24px 18px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
}
.entry-card blockquote, .entry-card figcaption { margin: 0; }
.entry-date { font: 600 .8125rem/1 var(--sans); color: var(--text-2); letter-spacing: .02em; }
.entry-text {
  margin-top: 10px;
  font: 400 clamp(1.125rem, 1.05rem + .3vw, 1.3rem)/1.6 var(--serif);
  color: var(--text);
}
.tag {
  padding: .05em .3em;
  border-radius: 7px;
  color: #18201D;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tag--person { background: var(--fill-peach); }
.tag--plan { background: var(--fill-mint); }
.tag--place { background: var(--fill-sky); }
.tag-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; font: 600 .8125rem/1 var(--sans); color: var(--text-2); }
.tag-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tag-legend i { width: 12px; height: 12px; border-radius: 4px; }
.k-person { background: var(--fill-peach); }
.k-plan { background: var(--fill-mint); }
.k-place { background: var(--fill-sky); }
.entry-note { margin-top: 10px; font: 500 .8125rem/1.4 var(--sans); color: var(--text-2); }
.followup-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 20px 16px 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
}
.followup-mero { width: 64px; flex: none; }
.followup-quote { font: italic 400 1rem/1.4 var(--serif); color: var(--text-2); }
.followup-ask { margin-top: 4px; font-weight: 600; }
.ask-card {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
}
.ask-q {
  justify-self: end;
  max-width: 85%;
  padding: 10px 16px;
  border-radius: 22px 22px 5px 22px;
  border: 1px solid var(--line2);
  background: var(--paper);
  font-size: .9375rem;
  line-height: 1.4;
}
.ask-a { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.ask-mero { width: 40px; flex: none; }
.ask-a p {
  padding: 11px 16px 10px;
  border-radius: 22px 22px 22px 5px;
  background: var(--bubble-mero);
  color: var(--bubble-mero-ink);
  font-size: .9375rem;
  line-height: 1.45;
}
.ask-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font: 500 .75rem/1 var(--sans);
  color: #4C5652;
}
.ask-meta svg { width: 15px; height: 15px; flex: none; }

.days { margin-top: clamp(80px, 10vw, 150px); }
.days-title { margin-bottom: 22px; }
.days-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
.day-tile {
  padding: 16px 16px 22px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
}
.day-tile :is(h3, h4) { margin: 16px 6px 6px; font: 650 1.0625rem/1.3 var(--display); letter-spacing: -.01em; }
.day-tile p { margin-inline: 6px; color: var(--text-2); font-size: var(--fs-small); }
.tile-art {
  height: 156px;
  border-radius: 18px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.tile-cal { padding: 12px 14px; }
.tile-cal > p { font: 700 .9375rem/1 var(--display); margin-bottom: 8px; }
.mini-cal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font: 600 .6875rem/1 var(--sans);
  color: var(--text-2);
}
/* Remember's month, as the app draws it (TimelineGrids.swift): a day with a mood takes the mood's fill and carries
   its symbol under the number, never colour alone; a day with writing but no mood gets a dot on the card's fill; an
   empty day is blank. The fills are the app's (Palette): Great, Happy, Good, Okay, Calm, Tired, Loved. */
.mini-cal li { display: grid; place-items: center; align-content: center; gap: 2px; height: 30px; border-radius: 6px; }
.mini-cal li[class] { color: #18201D; }
.mini-cal svg { width: 10px; height: 10px; }
.mini-cal li.d-wrote { background: var(--surface); color: var(--text-2); }
.mini-cal li.d-wrote i { width: 5px; height: 5px; border-radius: 50%; background: var(--text); opacity: .45; }
.d-great { background: #FFB387; }
.d-happy { background: #C2EE9E; }
.d-good { background: #FFC7AC; }
.d-okay { background: #C4D9A4; }
.d-calm { background: #B3DED0; }
.d-tired { background: #CECFC7; }
.d-loved { background: #F9BDCB; }
.mini-cal .is-today { box-shadow: 0 0 0 2px var(--text); }
.tile-map { color: var(--lagoon); background: color-mix(in srgb, var(--mist) 60%, var(--bg)); }
.tile-map svg { width: 100%; height: 100%; }
.tile-map .pins circle { fill: var(--persimmon); stroke: var(--surface); stroke-width: 3; }
.tile-reflect { padding: 14px 16px; color: var(--persimmon); display: flex; flex-direction: column; justify-content: space-between; }
.reflect-num { color: var(--text); font: 700 1.75rem/1 var(--display); letter-spacing: -.03em; }
.reflect-num span { font: 500 .875rem/1 var(--sans); color: var(--text-2); letter-spacing: 0; }
.tile-reflect svg { width: 100%; height: 70px; }
.tile-calendar { padding: 16px; display: grid; align-content: start; gap: 8px; }
.tile-calendar .ev {
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--surface);
  border-left: 3px solid var(--lagoon);
  font-size: .875rem;
}
.tile-calendar .ev b { font-variant-numeric: tabular-nums; margin-right: 6px; }
.tile-calendar .ev.off { border-left-color: var(--rule); color: var(--text-2); font-size: .8125rem; background: transparent; border: 1px dashed var(--rule); }

/* ---------- Photos ------------------------------------------------------- */

.photos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.photo-tag {
  position: absolute;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px 6px 8px;
  border-radius: 999px;
  background: #FFFEFA;
  color: #18201D;
  font: 650 .8125rem/1 var(--sans);
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / .5);
}
.photo-tag svg { width: 14px; height: 14px; }
.ask-bubble {
  position: absolute;
  left: 4%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 80%;
  padding: 10px 18px 10px 8px;
  border-radius: 26px 26px 26px 6px;
  background: var(--bubble-mero);
  color: #18201D;
  box-shadow: var(--shadow-lift);
}
.ask-mero { width: 64px; flex: none; margin: -8px -4px -8px -6px; }
.ask-bubble p { display: grid; gap: 3px; font-size: .9375rem; line-height: 1.35; }

.photos-copy .lede { margin-top: 22px; }
.feature-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; }
.feature-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.feature-list li > svg {
  width: 44px; height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: var(--well);
  color: var(--text);
}
.feature-list h3 { font: 650 1.0625rem/1.3 var(--display); margin-bottom: 4px; }
.feature-list p { color: var(--text-2); font-size: var(--fs-small); }

/* ---------- Voice -------------------------------------------------------- */

.voice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.voice-copy .lede { margin-top: 22px; }
.voice-promise {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 22px;
  max-width: 32em;
  font-weight: 600;
}
.voice-promise svg { width: 22px; height: 22px; flex: none; color: var(--moss); margin-top: 1px; }
.voice-play { margin-top: 28px; }
.voice-note { margin-top: 10px; }
.voice-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(22px, 4vw, 44px);
  border-radius: var(--r-sheet);
  border: 1px solid var(--rule);
  background:
    radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--fill-sky) 55%, transparent), transparent 60%),
    var(--surface);
}
.voice-orb { width: min(56%, 250px); }
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
  width: min(100%, 300px);
}
.wave i {
  flex: 1;
  height: 100%;
  border-radius: 3px;
  background: var(--lagoon);
  transform: scaleY(.12);
  transform-origin: center;
  opacity: .8;
  transition: transform .3s var(--ease);
}
.voice-stage[data-phase="talking"] .wave i { animation: wave .9s ease-in-out infinite; animation-delay: calc(var(--k) * -73ms); }
@keyframes wave { 0%, 100% { transform: scaleY(.15); } 50% { transform: scaleY(var(--amp, .8)); } }
.transcript { width: 100%; display: grid; gap: 12px; }
.transcript-me {
  padding: 14px 18px;
  border-radius: 24px 24px 5px 24px;
  background: var(--bg);
  border: 1px solid var(--rule);
  font: 400 1.0625rem/1.5 var(--serif);
  min-height: 3.6em;
}
.transcript-me .w { opacity: 0; transition: opacity .25s; }
.transcript-me .w.on { opacity: 1; }
.transcript-mero {
  padding: 14px 18px;
  border-radius: 5px 24px 24px 24px;
  background: var(--bubble-mero);
  color: #18201D;
  font-size: .9375rem;
  line-height: 1.5;
}
.speaking { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; vertical-align: -3px; color: #4C5652; }
.speaking svg { width: 18px; height: 18px; margin-right: 4px; }
.speaking i { width: 3px; height: 12px; border-radius: 2px; background: currentColor; transform: scaleY(.35); }
.voice-stage[data-phase="speaking"] .speaking i { animation: wave .7s ease-in-out infinite; --amp: 1; }
.voice-stage[data-phase="speaking"] .speaking i:nth-child(3) { animation-delay: -.2s; }
.voice-stage[data-phase="speaking"] .speaking i:nth-child(4) { animation-delay: -.45s; }
.voice-stage[data-phase="talking"] .transcript-mero,
.voice-stage[data-phase="thinking"] .transcript-mero,
.voice-stage[data-phase="writing"] .transcript-mero { opacity: 0; translate: 0 10px; }
.transcript-mero { transition: opacity .5s var(--ease), translate .6s var(--ease-out); }

/* ---------- Play --------------------------------------------------------- */

.games {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.game {
  --game-bg: #EBE6EA;
  --board: #FFFEFA;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 16px 22px;
  border-radius: var(--r-card);
  background: var(--game-bg);
  color: #18201D;
}
.game--nines { --game-bg: #EBE6EA; }
.game--doubles { --game-bg: #E9ECDB; }
.game--letters { --game-bg: #F5E7DC; }
.game--tempo { --game-bg: #E6EAEB; }
.game--freecell { --game-bg: #E1EAE2; }
.game-text p { color: var(--game-ink-2, #2A332F); }
.game-text .game-meta { color: var(--game-ink-3, #4F5A55); }
:root[data-scheme="dark"] .game { color: #EFF4EE; --game-ink-2: #C9D3CD; --game-ink-3: #B9C6BE; }
:root[data-scheme="dark"] .game--nines { --game-bg: #26222B; }
:root[data-scheme="dark"] .game--doubles { --game-bg: #22261C; }
:root[data-scheme="dark"] .game--letters { --game-bg: #2B231E; }
:root[data-scheme="dark"] .game--tempo { --game-bg: #1F2628; }
:root[data-scheme="dark"] .game--freecell { --game-bg: #1C2620; }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .game { color: #EFF4EE; --game-ink-2: #C9D3CD; --game-ink-3: #B9C6BE; }
  :root:not([data-scheme="light"]) .game--nines { --game-bg: #26222B; }
  :root:not([data-scheme="light"]) .game--doubles { --game-bg: #22261C; }
  :root:not([data-scheme="light"]) .game--letters { --game-bg: #2B231E; }
  :root:not([data-scheme="light"]) .game--tempo { --game-bg: #1F2628; }
  :root:not([data-scheme="light"]) .game--freecell { --game-bg: #1C2620; }
}
.game-board {
  position: relative;
  aspect-ratio: 1;
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.game-text { padding-inline: 4px; }
.game-text .h3 { margin-bottom: 6px; }
.game-text p { font-size: .9375rem; line-height: 1.5; }
.game-text .game-meta { margin-top: 10px; font: 600 .8125rem/1.35 var(--sans); }

/* Nines */
.nines {
  width: 92%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  background: #FFFEFA;
  border: 2px solid #18201D;
  border-radius: 4px;
  font: 600 clamp(.7rem, .3rem + 1vw, 1rem)/1 var(--rounded);
  font-variant-numeric: tabular-nums;
}
.nines span {
  display: grid;
  place-items: center;
  border-right: 1px solid #D7D5CC;
  border-bottom: 1px solid #D7D5CC;
  color: #18201D;
  transition: background-color .35s;
}
.nines span:nth-child(9n) { border-right: 0; }
.nines span:nth-child(3n):not(:nth-child(9n)) { border-right: 1.6px solid #18201D; }
.nines span:nth-child(n+19):nth-child(-n+27), .nines span:nth-child(n+46):nth-child(-n+54) { border-bottom: 1.6px solid #18201D; }
.nines span:nth-child(n+73) { border-bottom: 0; }
.nines span.hl { background: #ECEFEA; }
.nines span.sel { background: #F7CDB6; box-shadow: inset 0 0 0 2px #315B50; }
.nines span.hint { color: #315B50; animation: pop .5s var(--ease-out); }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }

/* Doubles */
.doubles {
  --n: 4;
  --gap: 6%;
  position: relative;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #D9D7CE;
}
.doubles .cell, .doubles .tile {
  position: absolute;
  width: calc((100% - var(--gap) * 5 / 4 * 1) / 4 - 4%);
}
.doubles .cell {
  width: 21%;
  aspect-ratio: 1;
  left: calc(4% + var(--x) * 23.5%);
  top: calc(4% + var(--y) * 23.5%);
  border-radius: 10px;
  background: #CBC9BF;
}
.doubles .tile {
  width: 21%;
  aspect-ratio: 1;
  left: 4%;
  top: 4%;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--t-bg, #FFFEFA);
  color: var(--t-ink, #18201D);
  font: 700 clamp(.8rem, .3rem + 1.4vw, 1.4rem)/1 var(--rounded);
  translate: calc(var(--x) * 111.9%) calc(var(--y) * 111.9%);
  transition: translate .16s ease-out;
  z-index: 1;
}
.doubles .tile.new { animation: pop .28s var(--ease-out) both; }
.doubles .tile.merged { animation: bump .22s var(--ease-out); z-index: 2; }
@keyframes bump { 50% { scale: 1.16; } }

/* Letters */
.letters {
  width: 74%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  perspective: 600px;
}
.letters span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 2px solid #D7D5CC;
  background: #FFFEFA;
  color: #18201D;
  font: 700 clamp(.7rem, .3rem + 1vw, 1.05rem)/1 var(--sans);
  text-transform: uppercase;
}
.letters span.typed { border-color: #8F968F; animation: tap .14s ease-out; }
@keyframes tap { 50% { scale: 1.1; } }
.letters span.flip { animation: flip .5s ease-in-out both; animation-delay: calc(var(--k) * 110ms); }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.letters span.s-right { --fill: #315B50; --fill-ink: #FFFEFA; }
.letters span.s-near { --fill: #E6BA64; --fill-ink: #18201D; }
.letters span.s-no { --fill: #CECFC7; --fill-ink: #3B4440; }
.letters span.done { background: var(--fill); color: var(--fill-ink); border-color: transparent; transition: background-color 0s calc(var(--k) * 110ms + 250ms), color 0s calc(var(--k) * 110ms + 250ms), border-color 0s calc(var(--k) * 110ms + 250ms); }

/* FreeCell: the board stays the app's Classic look, light, in both schemes, as the other boards */
.fc-board { width: 92%; aspect-ratio: 1; display: block; }
.fc-felt { fill: #CFE0D4; }
.fc-slot { fill: rgb(255 254 250 / .35); stroke: #6F8F7B; stroke-width: .9; stroke-dasharray: 2.4 2; }
.fc-card rect { fill: #FFFEFA; stroke: #5C6662; stroke-width: .8; }
.fc-card text { fill: #18201D; font-family: var(--rounded); font-weight: 700; }
.fc-card.fc-red text { fill: #B4532A; }
.fc-corner { font-size: 10px; letter-spacing: -.6px; }
.fc-pip { font-size: 15px; }
.fc-card.fc-hint rect { stroke: #6E56CF; stroke-width: 1.8; }

/* Tempo */
.tempo {
  position: relative;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 18px;
  background: #FFFEFA;
}
.tempo .note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #F2B48C;
  box-shadow: inset 0 0 0 2.5px #FFFEFA, 0 0 0 1.5px #5C6662;
  display: grid;
  place-items: center;
  font: 700 clamp(.75rem, .35rem + 1vw, 1.15rem)/1 var(--rounded);
  color: #18201D;
  animation: note-in var(--life) linear both;
}
.tempo .ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid #D9824F;
  animation: ring-close var(--approach) linear both;
}
.tempo .burst {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 3px solid #DF6B4B;
  animation: burst .5s ease-out both;
}
.tempo .slider {
  position: absolute;
  height: 22%;
  border-radius: 999px;
  background: rgb(242 180 140 / .45);
  box-shadow: inset 0 0 0 1.5px #5C6662;
  transform-origin: 11% 50%;
}
@keyframes ring-close { from { transform: scale(2.7); opacity: 0; } 15% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes note-in { 0% { opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes burst { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

/* The win show: a game's own pieces, gathered into a shape */
.win-show { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

.play-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.panel {
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(22px, 3vw, 36px);
}
.panel--ask { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3.4vw, 44px); align-items: center; }
.panel--ask .h3 { margin: 18px 0 8px; }
.panel--ask > .ask-copy > p:not(.ask-button-replica) { color: var(--text-2); }
.phone--shot {
  width: clamp(190px, 18vw, 250px);
  padding: 8px;
  border-radius: 38px;
}
.phone--shot .shot-status {
  position: relative;
  height: 0;
  padding-top: 14.38%;
  background: var(--status);
  border-radius: 30px 30px 0 0;
}
.phone--shot .shot-status::before {
  content: "9:41";
  position: absolute;
  left: 13%;
  top: 50%;
  translate: 0 -40%;
  font: 650 clamp(.6rem, .45rem + .3vw, .78rem)/1 var(--sans);
  color: #18201D;
}
.phone--shot .shot-status::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 30%;
  height: 34%;
  translate: -50% 0;
  border-radius: 999px;
  background: #0B0F0D;
}
.shot-icons { position: absolute; right: 10%; top: 50%; translate: 0 -40%; display: flex; gap: 3px; align-items: center; }
.shot-icons i { display: block; background: #18201D; border-radius: 1px; }
.shot-icons i:nth-child(1) { width: 3px; height: 5px; }
.shot-icons i:nth-child(2) { width: 3px; height: 7px; }
.shot-icons i:nth-child(3) { width: 3px; height: 9px; }
.shot-icons i:nth-child(4) { width: 15px; height: 8px; border-radius: 2.5px; margin-left: 3px; }
.phone--shot img { width: 100%; border-radius: 0 0 30px 30px; }
.ask-button-replica {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px 6px 6px;
  border-radius: 999px;
  color: #FFF3E6;
  font: 600 1.125rem/1 var(--sans);
  background:
    radial-gradient(circle at 84% 22%, rgb(255 236 170 / .9) 0 2.2px, transparent 3px),
    radial-gradient(circle at 70% 76%, rgb(255 255 255 / .7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 46% 18%, rgb(255 255 255 / .6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 92% 70%, rgb(255 255 255 / .55) 0 1px, transparent 1.6px),
    linear-gradient(135deg, #6C3FE2, #4A22B6 55%, #3A1A93);
  box-shadow: inset 0 0 0 1.5px rgb(200 180 255 / .55), 0 8px 18px -8px rgb(58 26 147 / .7);
}
.ask-face {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8E6BF0, #5B35C9);
  overflow: hidden;
}
.ask-face .mero { width: 54px; margin: -6px; }
.ask-list { margin: 18px 0 16px; display: grid; gap: 0; }
.ask-list div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.ask-list div:last-child { border-bottom: 1px solid var(--rule); }
.ask-list dt { font-weight: 650; }
.ask-list dd { margin: 0; color: var(--text-2); }
.panel--gc { display: flex; flex-direction: column; }
.panel-ico { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--well); color: var(--text); }
.panel--gc .h3 { margin: 18px 0 8px; }
.panel--gc > p { color: var(--text-2); }
.gc-list { list-style: none; margin: 18px 0; padding: 0; display: grid; }
.gc-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.gc-list li span { color: var(--text-2); text-align: right; }
.gc-ach {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--bg);
  font-weight: 600;
  line-height: 1.35;
}
.gc-num { font: 700 2.25rem/1 var(--display); letter-spacing: -.04em; color: var(--moss); }
.panel--gc .small { margin-top: auto; }

/* ---------- Mero's cards: the dark table -------------------------------- */

.cards-sec {
  --text: #EFF4EE;
  --text-2: #B9C6BE;
  --rule: #34423C;
  --surface: #1B2420;
  --btn-bg: #EFF4EE;
  --btn-ink: #121816;
  --accent: #FF9A78;
  --focus: #FF9A78;
  color-scheme: dark;
  margin-inline: clamp(8px, 1.6vw, 22px);
  border-radius: var(--r-hero);
  background:
    radial-gradient(ellipse at 78% 40%, rgb(230 186 100 / .14), transparent 55%),
    radial-gradient(ellipse at 18% 90%, rgb(114 200 210 / .10), transparent 55%),
    #18201D;
  color: var(--text);
  overflow: clip;
}
:root[data-scheme="dark"] .cards-sec { box-shadow: inset 0 0 0 1px #34423C; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .cards-sec { box-shadow: inset 0 0 0 1px #34423C; } }
.cards-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.cards-copy .lede { margin-top: 22px; color: var(--text-2); }
.kinds { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 28px 0 10px; padding: 0; }
.kinds li {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #3F4F48;
  font: 600 .875rem/1 var(--sans);
}
.kinds-note { color: var(--text-2); }


.cards-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(460px, 48vw, 640px);
  perspective: 1100px;
}
.fan { position: relative; display: grid; place-items: center; width: 100%; }
.fan > .mcard { grid-area: 1 / 1; }
.mcard {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --hover: 0;
  --rim1: #F7E7B0; --rim2: #C9953D; --rim3: #FFF3C8; --rim4: #9A6B1F;
  position: relative;
  width: clamp(210px, 25vw, 320px);
  aspect-ratio: 63 / 88;
  margin: 0;
  border-radius: 6.5% / 4.6%;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .7s var(--ease-out);
  will-change: transform;
}
.mcard[data-tracking] { transition: transform .08s linear; }
.mcard[data-idle] { transition: transform .35s linear; }
.mcard-in {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--rim1), var(--rim2) 34%, var(--rim3) 56%, var(--rim4));
  box-shadow: 0 34px 60px -26px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .1) inset;
  container-type: inline-size;
}
.mcard-art, .mcard-foil, .mcard-glare {
  position: absolute;
  inset: 3.4%;
  border-radius: 4.6% / 3.3%;
  overflow: hidden;
}
.scene { position: absolute; inset: 0; }
.scene::before, .scene::after { content: ""; position: absolute; inset: 0; }
.mcard-art .mero {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 104%;
  translate: -50% -50%;
}
.mcard-foil { mix-blend-mode: var(--foil-blend, overlay); opacity: var(--foil-op, .9); pointer-events: none; }
.mcard-glare {
  background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / .75), rgb(255 255 255 / .15) 28%, transparent 55%);
  mix-blend-mode: overlay;
  opacity: calc(.25 + var(--hover) * .55);
  transition: opacity .4s;
  pointer-events: none;
}
.mcard-top {
  position: absolute;
  top: 7.4%;
  left: 9%;
  right: 9%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  color: #FFFEFA;
  text-shadow: 0 1px 6px rgb(0 0 0 / .45);
  transform: translateZ(28px);
}
.mcard-top b { font: 700 7.4cqi/1.1 var(--display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard-top span { flex: none; font: 600 4.8cqi/1 var(--sans); color: #F6D98B; }
.mcard-cap {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8%;
  text-align: center;
  color: #FFFEFA;
  font: 500 6.2cqi/1.25 var(--sans);
  text-shadow: 0 1px 8px rgb(0 0 0 / .55);
  transform: translateZ(24px);
}
@supports not (font-size: 1cqi) {
  .mcard-top b { font-size: 1.05rem; }
  .mcard-top span { font-size: .75rem; }
  .mcard-cap { font-size: .9rem; }
}

/* Scenes: the mood's world behind Mero */
.mcard[data-scene="ember"] .scene { background: radial-gradient(circle at 28% 18%, #F7C27A, transparent 46%), radial-gradient(circle at 82% 88%, #8E2F2A, transparent 56%), linear-gradient(160deg, #D07A3E, #8C3A2B 58%, #4D1E1A); }
.mcard[data-scene="ember"] .scene::before { background: radial-gradient(circle at 18% 30%, rgb(255 226 140 / .8) 0 2.5%, transparent 3%), radial-gradient(circle at 80% 22%, rgb(255 226 140 / .7) 0 2%, transparent 2.6%), radial-gradient(circle at 70% 60%, rgb(255 226 140 / .45) 0 3.5%, transparent 4%), radial-gradient(circle at 26% 72%, rgb(255 226 140 / .55) 0 2%, transparent 2.6%), radial-gradient(circle at 88% 46%, rgb(255 236 170 / .6) 0 1.4%, transparent 2%), radial-gradient(circle at 40% 12%, rgb(255 236 170 / .6) 0 1.2%, transparent 1.8%); }
.mcard[data-scene="tide"] .scene { background: radial-gradient(circle at 70% 18%, rgb(114 200 210 / .55), transparent 50%), linear-gradient(170deg, #1E6E79, #1C3E62 55%, #26306A); }
.mcard[data-scene="tide"] .scene::before { background: radial-gradient(circle at 20% 24%, transparent 0 2.2%, rgb(220 240 255 / .55) 2.4% 2.9%, transparent 3.1%), radial-gradient(circle at 78% 30%, transparent 0 3%, rgb(220 240 255 / .5) 3.2% 3.7%, transparent 3.9%), radial-gradient(circle at 86% 62%, transparent 0 2%, rgb(220 240 255 / .45) 2.2% 2.7%, transparent 2.9%), radial-gradient(circle at 14% 70%, transparent 0 3.4%, rgb(220 240 255 / .45) 3.6% 4.1%, transparent 4.3%), radial-gradient(circle at 60% 12%, transparent 0 1.6%, rgb(220 240 255 / .5) 1.8% 2.3%, transparent 2.5%); }
.mcard[data-scene="hearts"] .scene { background: radial-gradient(circle at 30% 20%, rgb(255 170 200 / .5), transparent 50%), linear-gradient(165deg, #B8487D, #702459 55%, #3D1743); }
.mcard[data-scene="hearts"] .scene::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23FFC4DA' fill-opacity='.55'%3E%3Cpath d='M20 30c-6-8-18-2-12 8l12 12 12-12c6-10-6-16-12-8z'/%3E%3Cpath d='M86 70c-4-5-12-1-8 5l8 8 8-8c4-6-4-10-8-5z'/%3E%3Cpath d='M98 18c-3-4-9-1-6 4l6 6 6-6c3-5-3-8-6-4z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 46% auto;
}

/* Materials, by rarity (CardMaterial.swift) */
.mcard[data-material="common"] .mcard-foil {
  --foil-blend: soft-light;
  --foil-op: 1;
  background: repeating-linear-gradient(118deg, transparent 0 10%, rgb(255 255 255 / .0) 11%, rgb(255 255 255 / .85) 13%, rgb(255 255 255 / 0) 15.5%, transparent 22%);
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
}
.mcard[data-material="rare"] { --rim1: #F2F4F9; --rim2: #99A3B5; --rim3: #FFFFFF; --rim4: #808A9C; }
.mcard[data-material="rare"] .mcard-foil {
  --foil-blend: overlay;
  background:
    linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .8) 47%, transparent 64%) var(--mx) 0 / 240% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 1px, rgb(0 0 0 / .12) 1px 2px, transparent 2px 4px),
    linear-gradient(160deg, rgb(225 230 240 / .55), rgb(120 130 150 / .35));
}
.mcard[data-material="holo"] .mcard-foil {
  --foil-blend: color-dodge;
  --foil-op: .55;
  background:
    repeating-conic-gradient(from calc(var(--ry) * 4) at var(--mx) var(--my), #F7A8B8 0deg, #A8DBFF 40deg, #FFE08A 80deg, #AEE3C2 120deg, #F7A8B8 160deg),
    radial-gradient(circle at 50% 50%, transparent, rgb(0 0 0 / .2));
  background-blend-mode: overlay;
}
.mcard[data-material="ultra"] .mcard-foil {
  --foil-blend: screen;
  --foil-op: .8;
  background:
    linear-gradient(62deg, transparent 0 38%, rgb(255 255 255 / .38) 38.4% 42%, transparent 42.4%),
    linear-gradient(-28deg, transparent 0 56%, rgb(200 230 255 / .34) 56.3% 61%, transparent 61.3%),
    linear-gradient(14deg, transparent 0 70%, rgb(255 255 255 / .28) 70.3% 73%, transparent 73.3%),
    linear-gradient(118deg, transparent 0 18%, rgb(220 255 240 / .3) 18.3% 24%, transparent 24.3%),
    linear-gradient(-70deg, transparent 0 82%, rgb(255 255 255 / .3) 82.3% 86%, transparent 86.3%),
    linear-gradient(110deg, transparent 25%, rgb(255 255 255 / .55) 45%, transparent 60%) var(--mx) 0 / 220% 100% no-repeat;
}
.mcard[data-material="gold"] { --rim1: #FFE085; --rim2: #CC8519; --rim3: #FFF2B3; --rim4: #A8660F; }
.mcard[data-material="gold"] .mcard-foil {
  --foil-blend: overlay;
  background:
    linear-gradient(115deg, transparent 30%, rgb(255 250 220 / .85) 48%, transparent 64%) var(--mx) 0 / 240% 100% no-repeat,
    radial-gradient(circle at 30% 35%, rgb(255 255 255 / .55) 0 18%, rgb(120 70 0 / .35) 46%, transparent 64%) 0 0 / 22px 22px,
    linear-gradient(150deg, rgb(255 210 110 / .85), rgb(170 105 20 / .75));
}
.mcard[data-material="diamond"] { --rim1: #F5FAFF; --rim2: #B3C7E0; --rim3: #FFFFFF; --rim4: #8FA3C2; }
.mcard[data-material="diamond"] .mcard-foil {
  --foil-blend: overlay;
  background:
    repeating-conic-gradient(from calc(var(--ry) * 3) at var(--mx) var(--my), rgb(255 255 255 / .75) 0 8deg, transparent 8deg 22deg, rgb(180 210 255 / .5) 22deg 28deg, transparent 28deg 40deg),
    conic-gradient(from 45deg at 50% 50%, rgb(255 255 255 / .3), rgb(150 180 230 / .4), rgb(255 255 255 / .3), rgb(150 180 230 / .4), rgb(255 255 255 / .3));
}
.mcard[data-material="fire"] { --rim1: #FFD166; --rim2: #DB3D10; --rim3: #FF9933; --rim4: #9E1A0A; }
.mcard[data-material="fire"] .mcard-foil {
  --foil-blend: screen;
  --foil-op: .85;
  background:
    radial-gradient(ellipse 20% 34% at 22% 100%, rgb(255 170 60 / .9), transparent 70%),
    radial-gradient(ellipse 18% 42% at 52% 104%, rgb(255 120 40 / .9), transparent 70%),
    radial-gradient(ellipse 22% 30% at 80% 100%, rgb(255 190 80 / .85), transparent 70%),
    linear-gradient(0deg, rgb(219 61 16 / .75), rgb(255 120 40 / .25) 34%, transparent 62%);
  background-size: 100% 100%;
}
.mcard[data-material="ice"] { --rim1: #E0F7FF; --rim2: #5CA3E6; --rim3: #FFFFFF; --rim4: #3875C7; }
.mcard[data-material="ice"] .mcard-foil {
  --foil-blend: screen;
  --foil-op: .75;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg stroke='%23E6F7FF' stroke-width='1.2' stroke-linecap='round' fill='none' opacity='.75'%3E%3Cpath d='M22 8v28M8 22h28M12 12l20 20M32 12 12 32'/%3E%3Cpath d='M66 50v26M53 63h26M57 54l18 18M75 54 57 72'/%3E%3Cpath d='M70 10v12M64 16h12M18 62v10M13 67h10'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 46% auto,
    linear-gradient(110deg, transparent 30%, rgb(230 248 255 / .7) 48%, transparent 64%) var(--mx) 0 / 240% 100% no-repeat,
    linear-gradient(180deg, rgb(180 225 255 / .45), rgb(60 120 200 / .35));
}
.mcard[data-material="mythic"] { --rim1: #DBC2FF; --rim2: #6B3DC7; --rim3: #FFDBFA; --rim4: #422385; }
.mcard[data-material="mythic"] .mcard-foil {
  --foil-blend: screen;
  --foil-op: .9;
  background:
    radial-gradient(circle at 12% 18%, #fff 0 .5%, transparent .8%), radial-gradient(circle at 74% 12%, #fff 0 .45%, transparent .7%),
    radial-gradient(circle at 88% 40%, #fff 0 .5%, transparent .8%), radial-gradient(circle at 30% 48%, #fff 0 .35%, transparent .6%),
    radial-gradient(circle at 62% 30%, #fff 0 .35%, transparent .6%), radial-gradient(circle at 18% 82%, #fff 0 .45%, transparent .7%),
    linear-gradient(158deg, transparent 22%, rgb(120 240 200 / .55) 36%, rgb(170 120 255 / .5) 52%, transparent 66%) 0 var(--my) / 100% 220% no-repeat,
    linear-gradient(180deg, rgb(20 12 60 / .55), rgb(60 30 130 / .25));
}
@media (prefers-reduced-motion: no-preference) {
  .mcard[data-material="fire"] .mcard-foil { animation: flames 2.4s ease-in-out infinite alternate; }
  .mcard[data-material="mythic"] .mcard-foil { animation: aurora 9s ease-in-out infinite alternate; }
}
@keyframes flames { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 -10px, 0 -16px, 0 -8px, 0 -6px; } }
@keyframes aurora { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(40deg); } }

.mcard--hero { z-index: 2; }
.fan .mcard--side { z-index: 1; width: clamp(170px, 20vw, 262px); }
.fan .mcard--l { translate: -60% 5%; rotate: -11deg; }
.fan .mcard--r { translate: 60% 5%; rotate: 11deg; }
.tilt-hint { position: absolute; bottom: -6px; left: 0; right: 0; text-align: center; color: #B9C6BE; }

.mcard[data-scene="night"] .scene { background: radial-gradient(circle at 70% 20%, rgb(183 168 243 / .35), transparent 50%), linear-gradient(170deg, #2C2659, #1A1B3C 55%, #10132A); }
.mcard[data-scene="night"] .scene::before { background: radial-gradient(circle at 14% 20%, #fff 0 .6%, transparent .9%), radial-gradient(circle at 80% 14%, #fff 0 .5%, transparent .8%), radial-gradient(circle at 64% 34%, #fff 0 .4%, transparent .7%), radial-gradient(circle at 22% 66%, #fff 0 .5%, transparent .8%), radial-gradient(circle at 88% 74%, #fff 0 .45%, transparent .75%), radial-gradient(circle at 46% 10%, #fff 0 .4%, transparent .7%); opacity: .8; }
.mcard[data-scene="dusk"] .scene { background: radial-gradient(circle at 50% 30%, rgb(255 210 140 / .5), transparent 50%), linear-gradient(165deg, #E08A4F, #9C3B2D 50%, #3D1A24); }
.mcard[data-scene="dusk"] .scene::before { background: radial-gradient(circle at 20% 76%, rgb(255 200 120 / .7) 0 1.4%, transparent 2%), radial-gradient(circle at 72% 84%, rgb(255 200 120 / .6) 0 1.2%, transparent 1.8%), radial-gradient(circle at 84% 30%, rgb(255 220 160 / .5) 0 1%, transparent 1.6%); }

.materials {
  margin-top: clamp(56px, 7vw, 100px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid #34423C;
}
.materials-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 26px;
}
.materials-head p { color: var(--text-2); }
.materials-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 14px;
  perspective: 900px;
}
.materials-grid li { display: grid; align-content: start; gap: 12px; }
.materials-grid .mcard--mini { width: 100%; }
.mcard--mini .mcard-in { box-shadow: 0 18px 30px -16px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .1) inset; }
.materials-grid p { display: grid; gap: 2px; font-size: .8125rem; line-height: 1.35; }
.materials-grid b { font-weight: 650; color: var(--text); }
.materials-grid span { color: var(--text-2); }

/* ---------- Privacy ------------------------------------------------------ */

.flows {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: stretch;
}
.device {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: var(--r-sheet);
  background:
    radial-gradient(ellipse at 50% 0%, rgb(137 188 168 / .22), transparent 60%),
    #18201D;
  color: #EFF4EE;
  box-shadow: inset 0 0 0 1px #34423C;
}
.device-title { display: flex; align-items: center; gap: 10px; font: 650 1.25rem/1.2 var(--display); letter-spacing: -.01em; }
.device-title svg { width: 26px; height: 26px; color: #89BCA8; }
.device-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.device-list li {
  padding: 12px 14px;
  border-radius: 16px;
  background: #1B2420;
  box-shadow: inset 0 0 0 1px #34423C;
  font-size: .9375rem;
  line-height: 1.3;
}
/* Mero and its line sit in the middle of the room the list leaves: beside the long list of what can leave, the
   card is as tall as the list, and the space splits above Mero and below the line instead of pooling over Mero. */
.device-mero { width: clamp(132px, 12vw, 176px); margin: auto auto 0; padding-top: 18px; }
.device-us {
  margin-bottom: auto;
  padding-top: 10px;
  text-align: center;
  font-size: 1.0625rem;
  color: #B9C6BE;
}
.device-us b { color: #FF9A78; }
.leaves {
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: var(--r-sheet);
  background: var(--surface);
  border: 1px solid var(--rule);
}
.leaves-title { font: 650 1.25rem/1.2 var(--display); letter-spacing: -.01em; margin-bottom: 16px; }
.leave-list { list-style: none; margin: 0; padding: 0; display: grid; }
.leave-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
}
.leave-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--well); }
.leave-ico svg { width: 20px; height: 20px; }
.leave-list .is-optin .leave-ico { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); }
.leave-what { font-weight: 650; }
.leave-where { color: var(--text-2); font-size: var(--fs-small); }
.leave-where em { font-style: normal; color: var(--text); }
.promises {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.promises li {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
}
.promises .h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.promises p { color: var(--text-2); font-size: var(--fs-small); }
.privacy-foot { margin: 28px auto 0; max-width: 54em; text-align: center; }
.privacy-foot a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Get ---------------------------------------------------------- */

.get { padding-bottom: clamp(64px, 8vw, 120px); }
.get-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 56vw, 680px);
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
  border-radius: var(--r-hero);
  overflow: hidden;
  background: #18201D;
  color: #FFFEFA;
  text-align: center;
}
.get-panel .field { z-index: -2; }
.get-scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 64% 58% at 50% 60%, rgb(18 24 22 / .72), rgb(18 24 22 / .38) 70%, rgb(18 24 22 / .1)); }
.get-content { display: grid; justify-items: center; gap: 14px; max-width: 40rem; }
.get-mero { width: clamp(150px, 16vw, 210px); margin-bottom: 4px; }
.get .h2 { color: #FFFEFA; text-shadow: 0 2px 24px rgb(0 0 0 / .25); }
.get-sub { font-size: var(--fs-lede); color: #EAF1EC; }
.store-btn--light { margin-top: 12px; background: #FFFEFA; color: #18201D; }
.get-age { font-size: var(--fs-small); color: #DCE7E2; margin-top: 6px; }
.get :focus-visible { outline-color: #FFFEFA; }

/* ---------- Reveal ------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    [data-reveal] {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes reveal { from { opacity: 0; translate: 0 34px; } }

    .statement-text { view-timeline: --stmt block; }
    .statement-ink {
      color: transparent;
      background: linear-gradient(90deg, var(--text) 50%, color-mix(in srgb, var(--text) 20%, transparent) 50%) 100% 0 / 200% 100% no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      animation: ink linear both;
      animation-timeline: --stmt;
      animation-range: cover 18% cover 58%;
    }
    @keyframes ink { to { background-position: 0 0; } }

    /* The landscape parts move at their own depth as the hero leaves */
    .hero { view-timeline: --hero block; }
    .atlas .ls-sky { animation: drift-sky linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .atlas .ls-right { animation: drift-right linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .atlas .ls-left { animation: drift-left linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .atlas .ls-lines { animation: drift-lines linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero-mero > .mero { animation: float 7s ease-in-out infinite; }
    .hero-mero { animation: rise linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .memory-chips { animation: chips-up linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    @keyframes drift-sky { to { transform: translateY(60px); } }
    @keyframes drift-right { to { transform: translateY(-40px); } }
    @keyframes drift-left { to { transform: translateY(-90px); } }
    @keyframes drift-lines { to { transform: translateY(-130px); } }
    @keyframes rise { to { transform: translateY(-14%) scale(.9); } }
    @keyframes chips-up { to { transform: translateY(-22%); opacity: .2; } }

    /* Mero's cards are dealt from the deck as the table comes into view */
    .cards-stage { view-timeline: --deal block; }
    .fan .mcard--l { animation: deal-l linear both; animation-timeline: --deal; animation-range: entry 10% cover 45%; }
    .fan .mcard--r { animation: deal-r linear both; animation-timeline: --deal; animation-range: entry 10% cover 45%; }
    @keyframes deal-l { from { translate: 0 10%; rotate: 0deg; opacity: 0; } }
    @keyframes deal-r { from { translate: 0 10%; rotate: 0deg; opacity: 0; } }
  }
}
/* Without scroll-driven animations, a one-shot fade when each block arrives (script adds .is-in) */
:root[data-reveal-fallback] [data-reveal]:not(.is-in) { opacity: 0; translate: 0 28px; }
:root[data-reveal-fallback] [data-reveal] { transition: opacity .8s var(--ease), translate .9s var(--ease-out); }

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 1099.98px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Five in two columns: FreeCell takes the last row whole, its board beside its words */
  .game--freecell { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .materials-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .play-panels { grid-template-columns: 1fr; }
}

@media (max-width: 999.98px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 36px; }
  .hero-copy { padding-top: 8px; }
  .atlas { width: min(100%, 520px); }
  .meet-grid, .remember-grid, .photos-grid, .voice-grid, .cards-grid { grid-template-columns: 1fr; }
  .meet-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .meet-copy { display: contents; }
  .meet-copy > .eyebrow { order: 1; }
  .meet-copy > .h2 { order: 2; }
  .meet-copy > .lede { order: 3; }
  .meet-stage { order: 4; width: min(100%, 520px); margin: 30px auto 0; }
  .meet-copy > .states { order: 5; }
  .meet-copy > .meet-note { order: 6; }
  .phone-col { position: static; }
  .phone-screen { height: auto; min-height: 0; }
  .beat + .beat { margin-top: 56px; }
  .group-art { width: min(100%, 560px); margin-inline: auto; }
  .voice-stage { width: min(100%, 560px); margin-inline: auto; }
  .flows { grid-template-columns: 1fr; }
  .cards-stage { min-height: clamp(380px, 92vw, 560px); }
}

@media (max-width: 699.98px) {
  .panel--ask { grid-template-columns: 1fr; }
  .ask-shot { justify-self: center; }
  .phone--shot { width: min(62vw, 240px); }
  .memory-chips li { font-size: .75rem; padding: 6px 10px 6px 8px; }
  .memory-chips li:nth-child(1) { left: 5%; top: 15%; }
  .memory-chips li:nth-child(2) { right: 4%; top: 28%; }
  .memory-chips li:nth-child(3) { left: 4%; bottom: 23%; }
  .memory-chips li:nth-child(4) { right: 5%; bottom: 10%; }
  .device-list { grid-template-columns: 1fr 1fr; }
  .fan .mcard--l { translate: -44% 5%; }
  .fan .mcard--r { translate: 44% 5%; }
  .mcard { width: min(62vw, 250px); }
  .fan .mcard--side { width: min(50vw, 200px); }
}

@media (max-width: 599.98px) {
  /* Phones: the games stay side by side, two by two, FreeCell's row whole */
  .games { gap: 12px; }
  .game { gap: 12px; padding: 10px 10px 16px; border-radius: 22px; }
  .game-board { border-radius: 14px; }
  .game-text { padding-inline: 2px; }
  .game-text .h3 { font-size: 1.125rem; margin-bottom: 4px; }
  .game-text p { font-size: .875rem; line-height: 1.45; }
  .game-text .game-meta { margin-top: 8px; font-size: .75rem; }
  .letters { width: 76%; gap: 3px; }
  .letters span { border-radius: 5px; border-width: 1.5px; }
  .materials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ask-list div { grid-template-columns: 5.5rem 1fr; }
}

@media (max-width: 420px) {
  .device-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mero .mero, .memory-chips li { animation: none; }
  .wave i, .speaking i { animation: none !important; }
  .mcard, .doubles .tile { transition: none !important; }
  .nines span.hint, .doubles .tile, .letters span { animation: none !important; transition: none !important; }
}

/* ============ Moods: the card takes the colour of the mood you set (moods.js) ============ */
.moods-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .moods-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.moods-copy { display: grid; gap: 18px; min-width: 0; align-content: start; }
.mood-note { margin: 0; }
.mood-stage {
  --mood-glow: #FECDD3;
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(440px, 46vw, 620px);
  perspective: 1100px;
}
.mood-stage::before {
  content: "";
  position: absolute;
  inset: 10% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--mood-glow), transparent);
  opacity: .42;
  filter: blur(34px);
  transition: background .9s ease;
  pointer-events: none;
}
.mcard--mood { width: clamp(240px, 30vw, 360px); cursor: pointer; }
.mcard--mood .mcard-cap { font-weight: 600; }
.mcard--mood .mcard-art .mero { top: 56%; width: 98%; }
.mood-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mcard--mood .mcard-top b, .mcard--mood .mcard-cap { transition: opacity .3s ease; }

/* The glass ripple: a ring of light that bends what is under it */
.ripple {
  position: absolute;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, transparent 52%, rgb(255 255 255 / .22) 58%, rgb(255 255 255 / .62) 61.5%,
    rgb(255 255 255 / .16) 64.5%, transparent 70%);
  -webkit-backdrop-filter: blur(1.6px) saturate(1.45) brightness(1.08);
  backdrop-filter: blur(1.6px) saturate(1.45) brightness(1.08);
  -webkit-mask: radial-gradient(circle, transparent 47%, #000 55%, #000 67%, transparent 73%);
  mask: radial-gradient(circle, transparent 47%, #000 55%, #000 67%, transparent 73%);
  mix-blend-mode: screen;
}

/* The card a won round gives */
.won-card { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 9%; z-index: 4; pointer-events: none; perspective: 900px; }
.won-card .mcard { width: 42%; transition: none; }
.won-label {
  position: absolute;
  left: 50%;
  bottom: 7%;
  margin: 0;
  transform: translate(-50%, 0);
  white-space: nowrap;
  font: 700 .8rem/1 var(--sans);
  color: #FFFEFA;
  background: rgb(24 32 29 / .86);
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgb(0 0 0 / .6);
}
@media (max-width: 560px) {
  .won-card { padding-bottom: 14%; }
  .won-label { bottom: 4%; font-size: .64rem; padding: 5px 9px; }
}

/* The mood card's rainbow foil turns all the way round without a seam (the game cards' repeats every 160°) */
.mcard--mood[data-material="holo"] .mcard-foil {
  background:
    conic-gradient(from calc(var(--ry) * 4) at var(--mx) var(--my), #F7A8B8, #A8DBFF, #FFE08A, #AEE3C2, #F7A8B8),
    radial-gradient(circle at 50% 50%, transparent, rgb(0 0 0 / .2));
  background-blend-mode: overlay;
}

/* ==========================================================================
   Additions — October 2026: the handset, the moods' picker, Moments, the win,
   faces and groups, Places, the materials' light and the atlas's weather.
   Every block below honours Reduce Motion and the page's own "Pause animations".
   ========================================================================== */

/* ---------- The handset: one iPhone for every recording and capture from the app ----------
   The screen is exactly the recordings' 600 × 1304 (a 1179 × 2556 capture is the same shape to within a quarter
   of a percent), with the display's own round corners (14% of its width). The frame draws no status bar and no
   island: every recording carries its own. Each stage sets --hs-w, the screen's width. */
.handset {
  --hs-w: 260px;
  --hs-b: calc(var(--hs-w) * .043);
  --hs-r: calc(var(--hs-w) * .14);
  position: relative;
  flex: none;
  width: calc(var(--hs-w) + 2 * var(--hs-b) + 4px);
  margin: 0;
  padding: var(--hs-b);
  border: 2px solid transparent;
  border-radius: calc(var(--hs-r) + var(--hs-b) + 2px);
  background:
    linear-gradient(var(--hs-bezel), var(--hs-bezel)) padding-box,
    var(--hs-band) border-box;
  box-shadow: var(--hs-shadow);
}
:root {
  --hs-bezel: #0F1412;
  --hs-band: linear-gradient(152deg, #79827D, #2E3733 22%, #5C6560 48%, #262E2B 74%, #646D68);
  --hs-shadow: 0 1px 2px rgb(16 28 24 / .18), 0 34px 64px -28px rgb(16 28 24 / .5), 0 14px 28px -16px rgb(16 28 24 / .28);
}
/* The buttons on its sides — the Action button and the volume on the left, the side button on the right — on the
   handset and on v2's two phones alike */
:is(.handset, .phone)::before, :is(.handset, .phone)::after {
  content: "";
  position: absolute;
  width: 3px;
  pointer-events: none;
}
:is(.handset, .phone)::before {
  left: -5px;
  top: 17%;
  height: 25.5%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(#4A534F 0 16%, transparent 16% 35%, #4A534F 35% 64%, transparent 64% 72%, #4A534F 72%);
}
:is(.handset, .phone)::after {
  right: -5px;
  top: 27%;
  height: 11%;
  border-radius: 0 2px 2px 0;
  background: #4A534F;
}
.handset-screen {
  position: relative;
  aspect-ratio: 600 / 1304;
  border-radius: var(--hs-r);
  overflow: hidden;
  isolation: isolate;
  background: #EFEBE4;
}
.handset-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Where the glass meets the border, and the faintest reflection across it */
.handset-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .07), transparent 34%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .4);
}
:root[data-scheme="dark"] { --hs-shadow: 0 0 0 1px rgb(255 255 255 / .05), 0 34px 64px -28px rgb(0 0 0 / .8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) { --hs-shadow: 0 0 0 1px rgb(255 255 255 / .05), 0 34px 64px -28px rgb(0 0 0 / .8); }
}

/* v2's two phones — the Today conversation and the Nines capture — wear the same frame, so every phone on the
   page is one phone. Their own geometry is kept; the Nines capture takes the handset's exact proportions. */
.phone {
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(var(--hs-bezel), var(--hs-bezel)) padding-box, var(--hs-band) border-box;
  box-shadow: var(--hs-shadow);
}
.phone:not(.handset) { border-radius: 55px; }
.ask-shot .handset { --hs-w: clamp(176px, 16vw, 232px); }
@media (max-width: 699.98px) { .ask-shot .handset { --hs-w: min(54vw, 214px); } }
.handset .shot-status { border-radius: var(--hs-r) var(--hs-r) 0 0; }
.handset.phone--shot img { display: block; width: 100%; border-radius: 0 0 var(--hs-r) var(--hs-r); }
/* The island drawn over the Nines capture, at the real one's size and place */
.handset .shot-status::after { top: 21%; width: 21.7%; height: 60%; }

/* Play and pause for a recording, under its phone: shown with Reduce Motion, with the page's motion paused, or if
   the browser refuses to start it by itself. Otherwise each recording plays while it is on screen (clips.js).
   It wears v2's own quiet control, the tour's and the footer's, and never covers the recording. */
.clip-toggle {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 22px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text);
  font: 600 var(--fs-small)/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, transform .2s var(--ease);
}
.clip-toggle:hover { border-color: var(--text-2); }
.clip-toggle:active { transform: scale(.96); }
.clip-toggle[hidden] { display: none; }
.clip-toggle svg { width: 16px; height: 16px; flex: none; }
.clip-toggle .i-pause { display: none; }
.clip-toggle[data-playing] .i-pause { display: block; }
.clip-toggle[data-playing] .i-play { display: none; }

/* A recording with Mero beside it, come out of the screen to be with you */
.clip-pair { position: relative; display: grid; justify-items: center; }
.clip-mero {
  position: absolute;
  z-index: 3;
  width: 58%;
  left: calc(100% - 9%);
  bottom: 11%;
  pointer-events: none;
}

/* ---------- Moods: sixteen, one tap each — a ribbon of their skies (moods.js) ---------- */
.mood-picker { display: grid; gap: 12px; min-width: 0; }
.mood-picker-head { display: flex; align-items: baseline; gap: 12px; }
.mood-picker-head b { font: 650 1.0625rem/1.3 var(--display); letter-spacing: -.01em; }
.mood-picker-now {
  font: italic 400 1.25rem/1.2 var(--serif);
  letter-spacing: -.01em;
  color: var(--text-2);
  transition: opacity .25s;
}
.mood-picker-now.is-changing { opacity: 0; }
.mood-gems {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 7px;
  max-width: 35rem;
}
.mood-gem { position: relative; display: block; min-width: 0; cursor: pointer; }
/* The native radio stays in place, invisible: it takes the tap, the keys and the focus */
.mood-gem input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.gem {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 32%;
  background:
    radial-gradient(130% 100% at 22% 12%, color-mix(in srgb, var(--g) 60%, transparent), transparent 52%),
    linear-gradient(168deg, var(--a), var(--b));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 4px 10px -6px rgb(10 16 14 / .45);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.mood-gem:hover .gem { transform: translateY(-2px); }
.mood-gem input:checked + .gem {
  transform: translateY(-2px) scale(1.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 0 0 2.5px var(--bg), 0 0 0 4px var(--text), 0 10px 18px -8px rgb(10 16 14 / .55);
}
.mood-gem input:focus-visible + .gem { outline: 3px solid var(--focus); outline-offset: 4px; }
/* The mood's name over a stone, on hover and on focus */
.gem::after {
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  translate: var(--tip-x, -50%) 4px;
  padding: 6px 9px;
  border-radius: 9px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: 600 .75rem/1 var(--sans);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, translate .2s var(--ease-out);
}
.mood-gem:hover .gem::after, .mood-gem input:focus-visible + .gem::after { opacity: 1; translate: var(--tip-x, -50%) 0; }
/* The first and the last stone's names open inwards: a name never reaches past the screen's edge */
.mood-gem:first-child .gem::after { --tip-x: 0%; left: -2px; }
.mood-gem:last-child .gem::after { --tip-x: 0%; left: auto; right: -2px; }
.mood-note { margin: 0; }
@media (max-width: 599.98px) {
  .mood-gems { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px 8px; max-width: 23rem; }
  /* A name over a stone at either end of a row opens inwards, never past the screen's edge */
  .mood-gem:nth-child(8n+1) .gem::after { --tip-x: 0%; left: -2px; }
  .mood-gem:nth-child(8n) .gem::after { --tip-x: 0%; left: auto; right: -2px; }
}

/* The app's own sheet, when its capture is there (shots.js): behind the card, a little turned */
.mood-stage .mcard--mood { z-index: 1; }
.mood-shot { --hs-w: clamp(150px, 14vw, 196px); position: absolute; z-index: 0; left: 1%; top: 50%; translate: 0 -50%; rotate: -7deg; }
.mood-stage.has-shot .mcard--mood { translate: 22% 0; }
@media (max-width: 599.98px) {
  .mood-shot { --hs-w: 148px; left: 3%; }
  .mood-stage.has-shot .mcard--mood { translate: 15% 0; }
}

/* ---------- Moments: a recording from the app, and Mero beside it ---------- */
.moments-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.moments-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 8px 0;
}
.moments-stage::before {
  content: "";
  position: absolute;
  inset: 2% 10% 2% 6%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 50% 46%, rgb(255 179 135 / .7), rgb(244 201 184 / .34) 56%, transparent),
    radial-gradient(closest-side at 70% 72%, rgb(230 186 100 / .34), transparent);
  filter: blur(30px);
  pointer-events: none;
}
.moments-stage .handset { --hs-w: clamp(228px, 19.5vw, 270px); }
/* On the narrowest phones the recording narrows, so Mero beside it stays inside the screen */
@media (max-width: 419.98px) { .moments-stage .handset { --hs-w: min(57vw, 228px); } }
.moments-copy .followup-card { max-width: 31rem; margin-top: 30px; }
.moment-hard .followup-ask { font-weight: 500; color: var(--text); }

/* ---------- Play: the win, a recording from the app ---------- */
.panel--win {
  --game-bg: #F5E7DC;
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--game-bg);
  border-color: transparent;
  display: grid;
  grid-template-columns: minmax(0, 28rem) auto;
  justify-content: center;
  gap: clamp(28px, 8vw, 132px);
  align-items: center;
}
.win-copy { max-width: 28rem; }
.win-copy .h3 { margin: 18px 0 8px; }
.win-copy p { color: var(--game-ink-2, #2A332F); }
:root[data-scheme="dark"] .panel--win { --game-bg: #2B231E; --game-ink-2: #C9D3CD; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .panel--win { --game-bg: #2B231E; --game-ink-2: #C9D3CD; } }
.win-stage { position: relative; display: grid; place-items: center; padding-block: 6px; }
/* The game's light behind the phone: the slow green-and-gold swirl a won round of Letters is lit by */
.win-stage::before {
  content: "";
  position: absolute;
  width: min(118%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgb(155 197 138 / .7), rgb(244 238 222 / .25) 22%, rgb(217 175 74 / .55) 40%,
    rgb(244 238 222 / .2) 58%, rgb(120 176 110 / .6) 76%, rgb(155 197 138 / .7));
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent);
  mask: radial-gradient(closest-side, #000 30%, transparent);
  filter: blur(26px);
  opacity: .7;
  pointer-events: none;
}
.win-stage .handset { --hs-w: clamp(214px, 17.5vw, 246px); }
@media (prefers-reduced-motion: no-preference) {
  .win-stage::before { animation: game-light 26s linear infinite; }
}
@keyframes game-light { to { rotate: 1turn; } }

@media (max-width: 999.98px) {
  /* One column: the heading and the lede, the recording, then the hard moments */
  .moments-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .moments-copy { display: contents; }
  .moments-copy > .eyebrow { order: 1; align-self: flex-start; }
  .moments-copy > .h2 { order: 2; }
  .moments-copy > .lede { order: 3; }
  .moments-stage { order: 4; margin-top: 40px; }
  .moments-copy > .followup-card { order: 5; margin: 40px auto 0; width: 100%; }
  /* Room on the right for Mero, inside the screen's width */
  .moments-stage .clip-pair { translate: -11% 0; }
  .clip-mero { width: 44%; left: calc(100% - 10%); bottom: 10%; }
}
@media (max-width: 759.98px) {
  .panel--win { grid-template-columns: 1fr; }
  .win-copy { justify-self: start; }
}

/* ---------- Photos: one group, read the way the journal reads it ----------
   The faces are found; the two far back are set aside, not counted; the two with names wear them; the one
   without a name is asked about — "Who is this?" — in Mero's own bubble. home.js walks it through. */
.photos-grid--flip { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.group-art { position: relative; }
.group-scene { position: relative; padding: 0 0 54px; }
.group-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  border: 6px solid var(--surface);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--rule);
  rotate: -2deg;
  transition: width .6s var(--ease-out);
}
.group-pic { display: block; width: 100%; height: 100%; }
.photo-tag--count { top: 12px; left: 12px; bottom: auto; }
.face-mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: visible;
  fill: none;
  stroke: #FFFEFA;
  stroke-width: 2.5px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgb(255 254 250 / .45));
}
.face-mark--far { stroke-width: 1.5px; }
.face-name { left: var(--x); top: var(--y); bottom: auto; translate: -50% 0; padding: 5px 10px; }
.face-name--new { min-width: 28px; justify-content: center; background: #18201D; color: #FFFEFA; }
/* Far back: dimmed and dashed, and left out of the count */
.group-art:not([data-seq="0"]):not([data-seq="1"]) .face-mark--far { opacity: .55; stroke-dasharray: 2 3; }
/* The one without a name: the gold of a question */
.group-art:not([data-seq="0"]):not([data-seq="1"]):not([data-seq="2"]) .face-mark--new { stroke: #F6D98B; }
.who-bubble { left: auto; right: 0; max-width: 88%; padding: 10px 14px 10px 8px; }
.who-bubble b { font: 650 1rem/1.25 var(--display); letter-spacing: -.01em; }
.who-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.who-choices span {
  padding: 7px 12px;
  border-radius: 999px;
  background: #FFFEFA;
  color: #18201D;
  font: 600 .8125rem/1 var(--sans);
  box-shadow: 0 1px 0 rgb(24 32 29 / .06);
}
.who-choices span + span { background: rgb(255 254 250 / .5); }

/* The walk-through (data-seq from home.js). Without it — Reduce Motion, or no script — the last step shows, whole. */
[data-photos][data-seq] :is(.face-mark, .face-name, .photo-tag--count, .who-bubble) {
  transition: opacity .55s var(--ease), scale .55s var(--ease-out), translate .55s var(--ease-out), stroke .4s;
}
[data-photos][data-seq="0"] :is(.face-mark, .face-name, .photo-tag--count, .who-bubble) { opacity: 0; }
[data-photos][data-seq="0"] .face-mark { scale: 1.35; }
[data-photos][data-seq="1"] .face-mark { transition-delay: calc(var(--k) * 110ms); }
[data-photos]:is([data-seq="1"], [data-seq="2"]) :is(.face-name, .who-bubble) { opacity: 0; }
[data-photos][data-seq="1"] .photo-tag--count { opacity: 0; }
[data-photos]:is([data-seq="1"], [data-seq="2"], [data-seq="3"]) .who-bubble { translate: 0 12px; }
[data-photos][data-seq="3"] .who-bubble { opacity: 0; }

/* The journal's own question, when its capture is there (shots.js): the phone beside the photo, in place of the bubble */
.face-shot { --hs-w: clamp(150px, 13vw, 184px); position: absolute; z-index: 2; right: -2%; bottom: -4%; rotate: 3deg; }
.group-art.has-shot .group-photo { width: 78%; }
.group-art.has-shot .who-bubble { display: none; }

@media (max-width: 999.98px) {
  .photos-grid--flip { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) {
  .group-photo { border-width: 4px; border-radius: 18px; }
  .photo-tag--count { top: 8px; left: 8px; }
  .face-name { font-size: .6875rem; padding: 4px 7px; }
  .who-bubble { max-width: 96%; }
  .face-shot { --hs-w: 124px; right: 1%; }
}

/* ---------- Places: each photo on the map, where it was taken — as in Timeline (places.js) ----------
   The map is drawn on a 1000 × 800 canvas that covers its frame — wide on a desktop, tall on a phone — so a mark,
   placed in the canvas's own percentages, always sits on its spot. Zooming scales the map, never the marks. */
@property --zoom { syntax: "<number>"; inherits: true; initial-value: 1; }
.places-stage { position: relative; }
.map {
  --m-land: #EDEFE7;
  --m-sea: #AED5D2;
  --m-coast: #93C4C1;
  --m-park: #D5E6CC;
  --m-hill: #D3DBCF;
  --m-road: #FFFEFA;
  --m-road-edge: #DCD9CF;
  --m-street: #F8F6F0;
  --m-pier: #E4DED2;
  --m-island: #E3E9DD;
  --m-block: #E2DED4;
  --m-label: #7A847E;
  --m-water-label: #4F8E8B;
  --zoom: 1;
  position: relative;
  container-type: size;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sheet);
  overflow: hidden;
  isolation: isolate;
  background: var(--m-land);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--rule);
  transition: --zoom .9s var(--ease-out);
}
:root[data-scheme="dark"] .map {
  --m-land: #19221E; --m-sea: #1C4548; --m-coast: #2A5E61; --m-park: #1F3329; --m-hill: #2A3731;
  --m-road: #2D3934; --m-road-edge: #222C28; --m-street: #26312C; --m-pier: #2B3632; --m-island: #212D27;
  --m-block: #232E29; --m-label: #8FA39A; --m-water-label: #6FB2B4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .map {
    --m-land: #19221E; --m-sea: #1C4548; --m-coast: #2A5E61; --m-park: #1F3329; --m-hill: #2A3731;
    --m-road: #2D3934; --m-road-edge: #222C28; --m-street: #26312C; --m-pier: #2B3632; --m-island: #212D27;
    --m-block: #232E29; --m-label: #8FA39A; --m-water-label: #6FB2B4;
  }
}
.map.is-zoomed { --zoom: 2.2; }
.map-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 125cqh);
  aspect-ratio: 5 / 4;
  translate: -50% -50%;
}
.map-zoom { position: absolute; inset: 0; transform: scale(var(--zoom)); transform-origin: 54% 31.6%; }
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-land { fill: var(--m-land); }
.m-sea { fill: var(--m-sea); }
.m-coast { stroke: var(--m-coast); stroke-width: 3; }
.m-island { fill: var(--m-island); stroke: var(--m-coast); stroke-width: 2; }
.m-park { fill: var(--m-park); }
.m-hill path { stroke: var(--m-hill); stroke-width: 2.5; }
.m-river { stroke: var(--m-sea); stroke-width: 17; stroke-linecap: round; }
.m-pier path { fill: var(--m-pier); }
.m-road path { stroke: var(--m-road); stroke-width: 9; stroke-linecap: round; paint-order: stroke; }
.m-street path { stroke: var(--m-street); stroke-width: 4; stroke-linecap: round; }
.m-block rect { fill: var(--m-block); }
.m-labels text { fill: var(--m-label); stroke: var(--m-land); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; font: 700 13px/1 var(--sans); letter-spacing: .16em; }
.m-labels .m-water { stroke: var(--m-sea); }
.m-labels .m-water { fill: var(--m-water-label); }

/* A mark is the photograph itself, on a small white mount with a point at its place */
.pmark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: clamp(40px, 4.4cqw, 56px);
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid #FFFEFA;
  border-radius: 14px;
  background: #FFFEFA;
  box-shadow: 0 12px 22px -10px rgb(10 20 16 / .5), 0 0 0 1px rgb(24 32 29 / .1);
  translate: -50% calc(-100% - 7px);
  transform-origin: 50% calc(100% + 7px);
  scale: calc(1 / var(--zoom));
  cursor: pointer;
  transition: opacity .35s var(--ease), box-shadow .3s var(--ease), translate .55s var(--ease-out), visibility 0s;
}
.pmark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 11px;
  height: 11px;
  translate: -50% 0;
  rotate: 45deg;
  border-radius: 0 0 3px 0;
  background: #FFFEFA;
  z-index: -1;
}
.pmark svg { display: block; width: 100%; height: 100%; border-radius: 10px; }
.pmark:hover { box-shadow: 0 16px 26px -10px rgb(10 20 16 / .55), 0 0 0 1px rgb(24 32 29 / .14); }
.pmark:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 14px; }
.pmark[aria-pressed="true"] {
  z-index: 3;
  box-shadow: 0 0 0 3px #E6BA64, 0 16px 28px -10px rgb(10 20 16 / .6);
}
/* A town of photos: one mark, a second print behind it, and the count */
.pmark--group::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -2;
  border-radius: 14px;
  background: #FFFEFA;
  rotate: 8deg;
  box-shadow: 0 6px 14px -8px rgb(10 20 16 / .5);
}
.pcount {
  position: absolute;
  top: -10px;
  right: -11px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--persimmon);
  color: #FFFEFA;
  font: 700 .8125rem/24px var(--sans);
  text-align: center;
  box-shadow: 0 0 0 2px #FFFEFA;
}
:root[data-scheme="dark"] .pcount { color: #121816; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .pcount { color: #121816; } }
.pmark--member { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, .35s; }
.map.is-zoomed .pmark--member { opacity: 1; visibility: visible; transition-delay: .25s, 0s, 0s, 0s; }
.map.is-zoomed .pmark--group { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, .35s; }

/* The zoom, as the map's own buttons */
.map-zoom-ctl {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  display: grid;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -12px rgb(10 20 16 / .45), 0 0 0 1px var(--rule);
}
.map-zoom-ctl button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.map-zoom-ctl button + button { border-top: 1px solid var(--rule); }
.map-zoom-ctl button:first-child { border-radius: 14px 14px 0 0; }
.map-zoom-ctl button:last-child { border-radius: 0 0 14px 14px; }
.map-zoom-ctl button:disabled { color: var(--text-2); opacity: .45; cursor: default; }
.map-zoom-ctl svg { width: 20px; height: 20px; }

/* The entry a photo belongs to, on the day it was written */
.map-entry {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(392px, calc(100% - 32px));
  padding: 12px 18px 12px 12px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px -18px rgb(10 20 16 / .5), 0 0 0 1px var(--rule);
  color: var(--text);
}
.me-ph { flex: none; width: 64px; height: 64px; border-radius: 14px; }
.me-body { display: grid; gap: 2px; min-width: 0; }
/* The entry a photo opens: its day, then its words. No place name: the app's map adds none of its own. */
.me-date { font: 650 1rem/1.3 var(--display); letter-spacing: -.01em; color: var(--text); }
.me-text { font: 400 .9375rem/1.4 var(--serif); color: var(--text); }
.map-entry.is-changing :is(.me-ph, .me-body) { opacity: 0; }
.map-entry :is(.me-ph, .me-body) { transition: opacity .25s var(--ease); }

/* The photos arrive on the map as it comes into view */
@media (prefers-reduced-motion: no-preference) {
  .map.is-waiting .pmark:not(.pmark--member) { opacity: 0; translate: -50% calc(-100% - 40px); }
  .map.is-arriving .pmark:not(.pmark--member) { transition-delay: calc(var(--k) * 90ms), 0s, calc(var(--k) * 90ms), 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .map, .map * { transition: none !important; }
}

/* The app's own map, when its capture is there (shots.js): standing on the sea, where it hides the water's names */
.map-shot { --hs-w: clamp(160px, 14vw, 200px); position: absolute; z-index: 5; right: 6%; top: 50%; translate: 0 -50%; rotate: 4deg; }
@media (min-width: 600px) { .places-stage.has-shot .m-water { visibility: hidden; } }

.places-facts {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px clamp(24px, 4vw, 56px);
}
.places-facts li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.places-facts li > svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--well); color: var(--text); }
.places-facts h3 { font: 650 1.0625rem/1.3 var(--display); margin-bottom: 4px; }
.places-facts p { color: var(--text-2); font-size: var(--fs-small); }

@media (max-width: 999.98px) {
  .map { aspect-ratio: 3 / 2; }
  .places-facts { grid-template-columns: 1fr; max-width: 34rem; }
}
@media (max-width: 599.98px) {
  .map { aspect-ratio: 1 / 1.1; border-radius: var(--r-card); }
  .m-labels text { font-size: 22px; letter-spacing: .12em; }
  .m-labels .m-wide { display: none; }
  .map-entry { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 10px 14px 10px 10px; gap: 12px; border-radius: 18px; }
  .me-ph { width: 52px; height: 52px; border-radius: 12px; }
  .me-text { font-size: .875rem; }
  .map-zoom-ctl { top: 10px; left: auto; right: 10px; }
  .map.is-zoomed { --zoom: 2.6; }
  .map-shot { position: relative; right: auto; top: auto; translate: none; rotate: 0deg; margin: 28px auto 0; --hs-w: 200px; }
}

/* ---------- The atlas at the top: its weather ----------
   Light running along the ridge lines now and then, the sun breathing, a few motes rising, and one remembered
   note lit at a time — slow and faint, so the landscape seems alive rather than busy. Still with Reduce Motion. */
.ls-wind path { fill: none; stroke-linecap: round; stroke-dasharray: .07 .93; stroke-dashoffset: 1; opacity: 0; }
.ls-motes circle { opacity: 0; }
.ls-sun { transform-box: fill-box; transform-origin: center; }
.memory-chips li::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  opacity: 0;
  box-shadow: 0 0 0 3px rgb(230 186 100 / .4), 0 0 24px 4px rgb(255 214 140 / .42);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ls-wind path { animation: atlas-wind 13s linear infinite; }
  .ls-wind path:nth-child(2) { animation-duration: 15s; animation-delay: -5s; }
  .ls-wind path:nth-child(3) { animation-duration: 15s; animation-delay: -8.5s; }
  .ls-sun { animation: sun-breathe 9s ease-in-out infinite; }
  .ls-motes circle { animation: atlas-mote 16s linear infinite; animation-delay: var(--d); }
  .memory-chips li::after { animation: chip-recall 14s ease-in-out infinite; animation-delay: calc(2.5s + var(--i) * 3.5s); }
}
@keyframes atlas-wind {
  0% { stroke-dashoffset: 1; opacity: 0; }
  10% { opacity: .55; }
  60% { opacity: .55; }
  72%, 100% { stroke-dashoffset: -.12; opacity: 0; }
}
@keyframes sun-breathe { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.07); opacity: .4; } }
@keyframes atlas-mote {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .75; }
  85% { opacity: .4; }
  100% { transform: translate(var(--x, 0), -560px); opacity: 0; }
}
@keyframes chip-recall { 0%, 4% { opacity: 0; } 9%, 17% { opacity: 1; } 25%, 100% { opacity: 0; } }

/* ---------- Nine rarities, nine materials: each card catches the light by itself ----------
   Every material's foil and glare already follow --mx and --my (where a pointer would be). Registered, they can be
   animated: the light drifts over each card in its own phase, and a sheen passes along the row like a slow wave.
   A pointer still takes over (data-tracking, home.js). Still with Reduce Motion. */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.materials-grid li:nth-child(1) .mcard { --k: 0; }
.materials-grid li:nth-child(2) .mcard { --k: 1; }
.materials-grid li:nth-child(3) .mcard { --k: 2; }
.materials-grid li:nth-child(4) .mcard { --k: 3; }
.materials-grid li:nth-child(5) .mcard { --k: 4; }
.materials-grid li:nth-child(6) .mcard { --k: 5; }
.materials-grid li:nth-child(7) .mcard { --k: 6; }
.materials-grid li:nth-child(8) .mcard { --k: 7; }
.materials-grid li:nth-child(9) .mcard { --k: 8; }
.materials-grid .mcard-glare::after {
  content: "";
  position: absolute;
  inset: -10% -70%;
  background: linear-gradient(104deg, transparent 40%, rgb(255 255 255 / .95) 50%, transparent 60%);
  translate: -60% 0;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .materials-grid .mcard { animation: material-light 9s ease-in-out infinite; animation-delay: calc(var(--k) * -1.1s); }
  .materials-grid .mcard[data-tracking] { animation: none; }
  .materials-grid .mcard-glare { opacity: calc(.29 + var(--hover) * .5); }
  .materials-grid .mcard-glare::after { animation: material-sheen 8.1s cubic-bezier(.45, .05, .35, 1) infinite; animation-delay: calc(1.2s + var(--k) * .3s); }
}
@keyframes material-light {
  0%, 100% { --mx: 20%; --my: 26%; }
  33% { --mx: 74%; --my: 40%; }
  66% { --mx: 46%; --my: 78%; }
}
@keyframes material-sheen {
  0% { translate: -60% 0; opacity: 0; }
  3% { opacity: 1; }
  20% { translate: 60% 0; opacity: 1; }
  23%, 100% { translate: 60% 0; opacity: 0; }
}

/* ============ v5: the story's index, the chapter marks, the condition line, the mood's line, the support links ============ */

/* The four parts of the page, under the statement */
.story { margin-top: clamp(40px, 5vw, 64px); }
.story ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
}
.story a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-content: start;
  height: 100%;
  padding: 16px 18px 18px 16px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--text);
  text-decoration: none;
  transition: border-color .25s, transform .25s var(--ease);
}
.story a:hover { border-color: var(--text-2); transform: translateY(-2px); }
.story-n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
  font: 650 .8125rem/1 var(--sans);
}
.story b { font: 650 1.0625rem/1.25 var(--display); letter-spacing: -.01em; }
.story a > span:last-child { color: var(--text-2); font-size: var(--fs-small); line-height: 1.45; }

/* The first section of each part carries its number where the diamond was */
.eyebrow[data-chapter]::before {
  content: attr(data-chapter);
  content: attr(data-chapter) / "";
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  clip-path: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
  font: 650 .75rem/1 var(--sans);
  letter-spacing: 0;
}

/* What remembering needs, said under Remember's heading */
.section-head .needs {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--r-chip);
  background: var(--well);
  color: var(--text);
  font: 500 var(--fs-small)/1.45 var(--sans);
}
.needs svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }

/* What the journal says when a mood is picked, under the card */
.mood-says {
  position: relative;
  max-width: 24em;
  margin: 26px auto 0;
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-wrap: balance;
}

/* Your days: the tiles stand in their own section now */
.days-sec .days-grid { margin-top: 0; }

/* The support links, between privacy and the closing panel */
.help { padding-block: 0 clamp(56px, 7vw, 96px); }
.help-panel { display: grid; gap: 20px; }
.help-title { text-align: center; }
.help-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}
.help-links a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 18px 20px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--text);
  text-decoration: none;
  transition: border-color .25s, transform .25s var(--ease);
}
.help-links a:hover { border-color: var(--text-2); transform: translateY(-2px); }
.help-links svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--moss); }
.help-links a > span { display: grid; gap: 4px; min-width: 0; }
.help-links b { font: 650 1.0625rem/1.25 var(--display); letter-spacing: -.01em; }
.help-links small { color: var(--text-2); font-size: var(--fs-small); line-height: 1.45; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .story a, .help-links a { transition: none; }
  .story a:hover, .help-links a:hover { transform: none; }
}

/* ---------- The film: the App Store preview, recorded in the app, in the page's handset ---------- */
.film-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.film-grid .section-head { margin-bottom: 0; }
.film-note { margin-top: 18px; max-width: 34rem; }
.film-stage { position: relative; display: grid; justify-items: center; gap: 14px; padding: 8px 0; }
/* The same warm light the moments' recording stands in */
.film-stage::before {
  content: "";
  position: absolute;
  inset: 2% -4% 8%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 50% 46%, rgb(255 179 135 / .7), rgb(244 201 184 / .34) 56%, transparent),
    radial-gradient(closest-side at 70% 72%, rgb(230 186 100 / .34), transparent);
  filter: blur(30px);
  pointer-events: none;
}
.film-stage .handset { --hs-w: clamp(230px, 20vw, 280px); }
@media (max-width: 859.98px) {
  .film-grid { grid-template-columns: 1fr; }
  .film-stage { margin-top: 8px; }
}

/* ---------- Play: a win and a hard win's summons, side by side — two recordings from the app ---------- */
.win-duo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 30px);
  align-items: flex-start;
}
.win-shot { display: grid; justify-items: center; gap: 10px; }
.win-stage .win-shot .handset { --hs-w: clamp(146px, 12.5vw, 200px); }
.win-label { margin: 0; color: var(--game-ink-2, #2A332F); font-weight: 600; text-align: center; }
@media (max-width: 599.98px) { .win-stage .win-shot .handset { --hs-w: min(31vw, 180px); } }