/* The landing's hero: the iOS welcome loop (ERL-126/130) on the web. The stage is one 340×400
   canvas (like WelcomeStage), scaled to its box; every actor is absolutely placed at --x/--y and
   moves by transform and opacity only. Classes inside the stage start with s- so they never meet
   the marketing page's own. */

/* ── The pastel field (WelcomeAmbient): four soft blobs on slow, coprime periods ── */

.field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.field__pan { position: absolute; inset: -60px; transition: transform var(--spring-move-dur) var(--spring-move); }
.blob {
  position: absolute; width: var(--d); height: var(--d);
  left: calc(var(--x) - var(--d) / 2); top: calc(var(--y) - var(--d) / 2);
  animation: field-x var(--px) ease-in-out infinite alternate; animation-delay: var(--ph);
}
.blob i {
  display: block; width: 100%; height: 100%; border-radius: 50%; opacity: .22;
  background: radial-gradient(closest-side, var(--c), transparent);
  animation: field-y var(--py) ease-in-out infinite alternate; animation-delay: var(--ph);
  transition: opacity 1.5s ease-in-out;
}
.blob--shop { --c: var(--shop); --d: 520px; --x: 12%; --y: 14%; --ax: 60px; --ay: 50px; --px: 19s; --py: 23s; --ph: 0s; }
.blob--check { --c: var(--check); --d: 440px; --x: 92%; --y: 30%; --ax: 45px; --ay: 65px; --px: 23s; --py: 29s; --ph: -6s; }
.blob--decide { --c: var(--decide); --d: 480px; --x: 8%; --y: 72%; --ax: 70px; --ay: 40px; --px: 29s; --py: 31s; --ph: -12s; }
.blob--habit { --c: var(--habit); --d: 420px; --x: 86%; --y: 88%; --ax: 50px; --ay: 55px; --px: 31s; --py: 19s; --ph: -18s; }
@keyframes field-x { from { transform: translateX(calc(var(--ax) * -1)); } to { transform: translateX(var(--ax)); } }
@keyframes field-y { from { transform: translateY(calc(var(--ay) * -1)); } to { transform: translateY(var(--ay)); } }
/* Each scene brightens its blob. */
.field[data-tint="check"] .blob--check i,
.field[data-tint="plan"] .blob--decide i,
.field[data-tint="recipe"] .blob--decide i,
.field[data-tint="trip"] .blob--shop i,
.field[data-tint="cook"] .blob--habit i { opacity: .34; }
.paused .blob, .paused .blob i { animation-play-state: paused; }

/* ── Hero ── */

.hero { position: relative; clip-path: inset(-120px 0 0 0); }
.hero > .field { top: -80px; }
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "cta" "loop" "sub";
  gap: 18px; padding-top: 4px; padding-bottom: 56px;
}
.hero__title { grid-area: title; font-size: clamp(2.1rem, 8.6vw, 4.1rem); font-weight: 700; letter-spacing: -0.035em; }
.hero__sub { grid-area: sub; }
.hero__sub > p { font-size: clamp(1.06rem, 2.6vw, 1.22rem); color: var(--text-2); max-width: 30em; }
.hero__points { margin-top: 18px; }
.hero__cta { grid-area: cta; }
.hero__cta .cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ── The loop: stage, caption, dots (WelcomeLoopView) ── */

.loop { grid-area: loop; position: relative; margin: 0 auto; width: min(100%, 330px); }
.loop__stage { position: relative; width: 100%; aspect-ratio: 340 / 400; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.loop__caption {
  position: relative; margin-top: 6px; min-height: 2.5em;
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.55rem, 6.4vw, 1.9rem);
  letter-spacing: -0.03em; line-height: 1.2;
}
.loop__under { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.loop__dots { display: flex; align-items: center; margin-left: -9px; }
.loop__pause {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .7);
  color: var(--text-2); font: 600 13px var(--font-body); cursor: pointer;
}
.loop__pause[hidden] { display: none; }
.loop__pause svg { width: 14px; height: 14px; }

/* Each dot is a 24 px button (a comfortable tap target); the 6 px pill is drawn inside it and
   the current scene's pill widens and fills as the scene plays. */
.dot {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dot > b {
  position: relative; display: block; width: 6px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--sunken);
  transition: width var(--spring-settle-dur) var(--spring-settle);
}
.dot[aria-current="step"] > b { width: 24px; }
.dot > b > i { position: absolute; inset: 0; border-radius: 3px; background: var(--accent-deep); transform: scaleX(0); transform-origin: left; }
.dot[aria-current="step"] > b > i { animation: dot-fill var(--scene-dur, 5.6s) linear forwards; }
.paused .dot[aria-current="step"] > b > i { animation-play-state: paused; }
.still-mode .dot[aria-current="step"] > b > i, html:not(.js) .dot[aria-current="step"] > b > i { animation: none; transform: none; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The caption: words rise one by one; the key words take the scene's ink and a growing
   highlight; a short underline draws under it. */
.cap { display: block; --ink: var(--amber700); }
.cap[data-scene="plan"], .cap[data-scene="trip"] { --ink: var(--blue700); }
.cap[data-scene="cook"] { --ink: var(--accent-deep); }
.cap .w {
  display: inline-block; white-space: pre;
  animation: cap-rise calc(.32s * 1.25) cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(.18s + var(--i) * .045s * 1.25);
}
.cap .k { position: relative; color: var(--ink); }
.cap .k::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: 12%; bottom: 8%; z-index: -1;
  border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); transform-origin: left;
  animation: cap-grow calc(.28s * 1.25) ease-out both; animation-delay: calc(.18s + (.5s - .28s) * 1.25);
}
.cap__line {
  display: block; width: 44px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--ink); transform-origin: left;
  animation: cap-grow calc(.28s * 1.25) ease-out both; animation-delay: calc(.18s + .3s * 1.25);
}
.cap--leave { position: absolute; inset: 0 0 auto 0; animation: cap-leave .2s ease-in forwards; }
@keyframes cap-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cap-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cap-leave { to { transform: translateY(-10px); opacity: 0; filter: blur(4px); } }
.still-mode .cap .w, .still-mode .cap .k::before, .still-mode .cap__line,
html:not(.js) .cap .w, html:not(.js) .cap .k::before, html:not(.js) .cap__line { animation: none; }

/* ── The stage ── */

.stage {
  position: absolute; left: 0; top: 0; width: 340px; height: 400px; transform-origin: 0 0;
  contain: layout paint style; font-family: var(--font-body); font-size: 15px; line-height: 1.3; color: var(--text);
}
.stage b { font-weight: 700; }
.stage p { margin: 0; }
.stage__breath { position: absolute; inset: 0; transform-origin: 50% 50%; }
.breathing .stage__breath { transform: scale(1.015); transition: transform var(--breath, 5.6s) linear; }
/* An actor's one-shot press or pop multiplies --pop into its placement scale. Animating
   transform or scale on an actor itself would override or wrap the placement and slide the
   actor toward the stage's corner (test/lib/welcome_loop_css_test.rb). */
@property --pop { syntax: "<number>"; inherits: false; initial-value: 1; }
.s-a {
  position: absolute; left: 0; top: 0; opacity: 0; --x: 0px; --y: 0px; --s: 1;
  transform: translate(var(--x), var(--y)) translate(-50%, -50%) scale(calc(var(--s) * var(--pop)));
  transition: transform var(--dur, .6s) var(--ease, ease), opacity var(--dur, .6s) var(--ease, ease),
    width var(--dur, .6s) var(--ease, ease), height var(--dur, .6s) var(--ease, ease),
    background-color .3s ease, border-color .3s ease, color .3s ease;
}
/* Without JavaScript, the server's still of the check scene. */
html:not(.js) .stage [data-still] { opacity: 1; }
html:not(.js) .stage { left: 50%; transform: translateX(-50%); }
html:not(.js) .loop__pause { display: none; }
html:not(.js) .loop__stage { cursor: default; }
.no-anim, .no-anim * { transition: none !important; }
.s-i { width: 1em; height: 1em; flex: none; }

/* Scene 1: the pantry check card (it becomes the plan's pantry tile). */
.s-check {
  width: 300px; height: 224px; padding: 10px; overflow: hidden; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--border); box-shadow: 0 8px 16px rgba(0, 0, 0, .07);
}
.s-check.as-tile { background: var(--green50); border-color: transparent; box-shadow: none; }
.s-check__head { display: flex; align-items: center; gap: 8px; height: 38px; padding-left: 6px; font-size: 14px; font-weight: 600; color: var(--green700); transition: opacity .25s; }
.s-check__head .s-i { font-size: 18px; }
.s-check__rows { display: grid; gap: 8px; transition: opacity .25s; }
.s-check__tile { position: absolute; inset: 0; padding: 10px 12px; opacity: 0; color: var(--green700); transition: opacity .3s; }
.s-check__tile b { display: block; margin-top: 6px; font-size: 15px; color: var(--text); }
.s-check__tile small { font-size: 12px; font-weight: 600; }
.s-check.as-tile .s-check__head, .s-check.as-tile .s-check__rows { opacity: 0; }
.s-check.as-tile .s-check__tile { opacity: 1; }
.s-row {
  position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px; border-radius: 12px;
  background: rgba(244, 245, 246, .6);
  transition: transform var(--spring-settle-dur) var(--spring-settle), opacity .4s ease;
}
.s-row.away { transform: translateX(14px); opacity: 0; }
.s-row::after { content: ""; position: absolute; inset: 0; border-radius: 12px; border: 2px solid var(--row-ink, transparent); opacity: 0; transition: opacity .3s; }
.s-row.glow::after { opacity: .45; animation: s-flash calc(.7s * 1.25) ease-out; }
html:not(.js) .s-row.glow::after { animation: none; }
@keyframes s-flash { 40% { opacity: 1; } }
.s-row[data-status="out"] { --row-ink: var(--red500); }
.s-row[data-status="low"] { --row-ink: var(--amber500); }
.s-row[data-status="have"] { --row-ink: var(--green500); }
.s-bar { position: relative; flex: none; width: 3px; height: 26px; border-radius: 2px; background: var(--border-strong); }
.s-bar::after {
  content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--row-ink, transparent);
  transform: scaleY(.01); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.s-row[data-status] .s-bar::after { transform: none; }
.s-row__name { flex: 1; font-size: 16px; font-weight: 600; transition: opacity .22s; }
.s-row.gone .s-row__name { opacity: 0; }
.s-seg { display: flex; gap: 4px; }
.s-seg span {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 44px; height: 28px; border-radius: 8px;
  background: var(--sunken); border: 1px solid var(--border-strong); color: var(--text-2); font-size: 11px; font-weight: 600;
  transition: background-color .25s, border-color .25s, color .25s;
}
.s-row[data-status="out"] [data-s="out"] { background: var(--red50); border-color: var(--red500); color: var(--red700); }
.s-row[data-status="low"] [data-s="low"] { background: var(--amber50); border-color: var(--amber500); color: var(--amber700); }
.s-row[data-status="have"] [data-s="have"] { background: var(--green50); border-color: var(--green500); color: var(--green700); }
.s-seg.pop { animation: s-pop calc(.42s * 1.25) cubic-bezier(.3, 1.6, .5, 1); }
@keyframes s-pop { 30% { transform: scale(1.08); } }
.s-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  background: var(--sunken); color: var(--text-2); font-size: 15px; font-weight: 600;
}
.s-pill.on { background: var(--blue50); color: var(--blue700); }
.s-pill .s-i { font-size: 18px; }
.s-pill.bounce .s-i, .s-bmark.bump { animation: s-bounce .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes s-bounce { 40% { transform: translateY(-4px) scale(1.15); } }

/* Scene 2: the meal, the chips and the one list. */
.s-tile { width: 146px; height: 82px; padding: 10px 12px; border-radius: 14px; background: var(--amber50); }
.s-tile b { display: block; margin-top: 6px; font-size: 15px; }
.s-tile small { font-size: 12px; font-weight: 600; color: var(--amber700); }
.s-tile__icons { display: flex; justify-content: space-between; align-items: center; color: var(--amber700); }
.s-art { display: grid; place-items: center; border-radius: 7px; font-family: var(--font-heading); font-weight: 700; }
.s-art--dot { width: 24px; height: 24px; border-radius: 50%; font-size: 12px; }
.s-art--c { background: linear-gradient(160deg, #DDF0E5, #BFE2CD); color: var(--green700); }
.s-art--t { background: linear-gradient(160deg, #F7DDEA, #EFC3D8); color: #A33A6B; }
.s-art--p { background: linear-gradient(160deg, #F3DDF2, #E6C6EA); color: #8C3A8E; }
.s-art--d { background: linear-gradient(160deg, #F8E1CC, #F0C9A6); color: #9A4A14; }
.s-panel { width: 300px; height: 198px; padding: 12px 14px; border-radius: 18px; background: var(--blue50); }
.s-panel__head { display: flex; justify-content: space-between; align-items: center; color: var(--blue700); font-size: 15px; font-weight: 700; }
.s-panel__head > span { display: inline-flex; align-items: center; gap: 6px; }
.s-panel__head small { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; transition: opacity .2s; }
.s-panel__sweep { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; pointer-events: none; }
.s-panel__sweep::after { content: ""; position: absolute; top: 0; bottom: 0; left: -90px; width: 80px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); }
.s-panel.swept .s-panel__sweep::after { animation: s-sweep calc(.9s * 1.25) ease-in-out forwards; }
@keyframes s-sweep { to { transform: translateX(400px); } }
.s-item {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; overflow: hidden; white-space: nowrap;
  border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 15px; font-weight: 600;
}
.s-item.as-row { border-radius: 10px; }
.s-item__mark { display: none; flex: none; justify-content: center; width: 10px; color: var(--amber700); font-size: 10px; }
.s-item.as-row .s-item__mark { display: inline-flex; }
.s-item__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red500); }
.s-item__dot--low { background: var(--amber500); }
.s-ring { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text); }
.s-item--rice { width: 74px; }

/* Scene 3: the trip on two phones. */
.s-who { display: flex; align-items: center; gap: 8px; }
.s-who b { display: block; font-size: 12px; font-weight: 600; line-height: 1.1; }
.s-who small { font-size: 11px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.s-who.done .s-ava { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green500); }
.s-ava {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  color: var(--ink-on-pastel); font-family: var(--font-heading); font-size: 14px; font-weight: 700;
}
.s-ava--a { background: var(--shop); }
.s-ava--s { background: var(--amber500); }
.s-phone { width: 150px; height: 260px; border-radius: 26px; background: #fff; border: 2px solid var(--border-strong); box-shadow: 0 10px 24px rgba(0, 0, 0, .06); }
.s-phone::before { content: ""; position: absolute; left: 53px; top: 9px; width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); }
.s-phone__avas { position: absolute; top: 24px; left: 0; right: 0; display: flex; justify-content: center; }
.s-phone__avas .s-ava { width: 14px; height: 14px; margin: 0 -1px; border: 1.5px solid #fff; font-size: 7px; }
.s-prow {
  display: flex; align-items: center; gap: 6px; width: 128px; height: 26px; padding: 0 6px; border-radius: 8px;
  background: var(--surface); font-size: 10px; font-weight: 600;
}
.s-prow.mine { background: #fff; border: 1px solid var(--border); }
.s-prow:not(.mine) .s-prow__name, .s-prow:not(.mine) .s-tick, .s-prow:not(.mine) .s-ava { opacity: .55; }
.s-prow .s-ava { width: 13px; height: 13px; font-size: 7px; }
.s-prow__name { position: relative; flex: 1; white-space: nowrap; transition: color .25s; }
.s-prow__name::after { content: ""; position: absolute; left: 0; top: 52%; width: 100%; height: 1.2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.s-prow.done .s-prow__name { color: var(--text-3); }
.s-prow.done .s-prow__name::after { transform: scaleX(1); }
.s-tick { display: grid; place-items: center; flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--text-3); transition: all .25s; }
.s-tick .s-i { font-size: 7px; color: #fff; opacity: 0; }
.s-prow.done .s-tick, .s-ingr.on .s-tick { background: var(--green500); border-color: var(--green500); }
.s-prow.done .s-tick .s-i, .s-ingr.on .s-tick .s-i { opacity: 1; }
.s-nub { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #3478F6; color: #fff; box-shadow: 0 3px 8px rgba(52, 120, 246, .35), 0 0 0 2px #fff; }
.s-nub .s-i { font-size: 15px; }
.s-wedge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); font-size: 11px; color: var(--text-2); }
.s-wedge--pick { width: 28px; height: 28px; background: var(--green500); border-color: var(--green500); color: #fff; }
.s-wedge--give { color: var(--blue700); }
.s-spark { width: 7px; height: 7px; border-radius: 50%; background: var(--green500); box-shadow: 0 0 8px 2px rgba(116, 196, 160, .7); --dur: .32s; --ease: cubic-bezier(.4, 0, .2, 1); }
.s-picked { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; white-space: nowrap; background: var(--green50); color: var(--success-text); font-size: 14px; font-weight: 700; }
.s-picked .s-i { font-size: 15px; }
.s-picked.wiggle .s-i { animation: s-wiggle .7s ease-in-out; }
@keyframes s-wiggle { 20% { transform: rotate(-14deg) scale(1.15); } 40% { transform: rotate(12deg) scale(1.15); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }

/* Scene 4: the recipe, the cookbook and its grid. */
.s-rcard {
  width: 220px; height: 268px; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  transition: transform var(--spring-move-dur) var(--spring-move), opacity .3s ease;
}
.s-rcard > .s-art { height: 112px; border-radius: 0; font-size: 40px; }
.s-rcard__body { padding: 12px 14px; }
.s-rcard__body b { display: block; font-family: var(--font-heading); font-size: 18px; }
.s-rcard__meta { display: flex; align-items: center; gap: 5px; margin: 2px 0 8px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.s-rcard ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 500; }
.s-rcard li { display: flex; align-items: center; gap: 8px; }
.s-rcard li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.s-bmark { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 15px; }
.s-bmark .on { display: none; color: var(--blue700); }
.bookmarked .s-bmark .on { display: block; }
.bookmarked .s-bmark .off { display: none; }
.bookmarked .s-bmark { animation: s-bounce .45s cubic-bezier(.3, 1.6, .5, 1); }
.s-cbook {
  display: flex; align-items: center; gap: 10px; width: 220px; height: 58px; padding: 0 14px;
  border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
}
.s-cbook .s-i { font-size: 22px; color: var(--amber700); }
.s-cbook b { flex: 1; font-family: var(--font-heading); font-size: 15px; }
.s-cbook small { font-size: 12px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.s-cbook.filed { animation: s-file .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes s-file { 30% { --pop: 1.08; } }
.s-grid { width: 300px; height: 256px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 24px rgba(0, 0, 0, .07); }
.s-chips { display: flex; gap: 6px; }
.s-chips span { padding: 4px 11px; border-radius: 999px; background: var(--sunken); font-size: 13px; font-weight: 600; }
.s-chips .sel { background: var(--shop); color: var(--ink-on-pastel); }
.s-rt { width: 134px; height: 92px; overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.s-rt > .s-art { height: 62px; border-radius: 0; font-size: 22px; }
.s-rt b { display: block; padding: 6px 8px; font-size: 11px; }
.s-rt__new { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--amber700); font-size: 13px; font-weight: 700; }

/* Scene 5: Cooking Mode. */
.s-page { width: 320px; height: 384px; overflow: hidden; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(0, 0, 0, .08); }
.s-page__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; font-size: 15px; font-weight: 600; }
.s-page__mid { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.s-pager { position: absolute; left: 0; top: 52px; display: flex; width: 960px; height: 250px; transition: transform var(--spring-settle-dur) var(--spring-settle); }
.s-stepv { position: relative; width: 320px; padding: 6px 20px; }
.s-stepv__n { margin-top: 30px; font-family: var(--font-heading); font-size: 34px; font-weight: 700; line-height: 1.2; color: var(--blue700); }
.s-stepv p { margin-top: 4px; font-size: 21px; font-weight: 600; line-height: 1.4; }
.s-words {
  display: inline-block; max-width: 200px; margin: 0 -3px; padding: 0 3px; overflow: hidden; vertical-align: bottom; white-space: nowrap;
  border-radius: 6px; transition: background-color .3s, color .3s, max-width .45s ease, opacity .3s;
}
.found .s-words { background: var(--blue50); color: var(--blue700); }
.timing .s-words { max-width: 0; opacity: 0; }
.s-ingr { position: absolute; left: 20px; bottom: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.s-ingr .s-tick { width: 16px; height: 16px; border-width: 2px; }
.s-ingr .s-tick .s-i { font-size: 9px; }
.s-timer {
  position: absolute; left: 20px; top: 0; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--blue50); color: var(--blue700); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.6); transform-origin: left center;
  transition: opacity .3s, transform var(--spring-move-dur) var(--spring-move), background-color .25s, color .25s;
}
.timing .s-timer { opacity: 1; transform: none; }
.s-timer.rang { background: var(--red50); color: var(--red700); animation: s-ring .5s ease-in-out; }
.s-timer .s-i { font-size: 15px; }
@keyframes s-ring { 20% { rotate: -6deg; } 40% { rotate: 6deg; } 60% { rotate: -4deg; } 80% { rotate: 3deg; } }
.s-btns { position: absolute; left: 12px; right: 12px; bottom: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-btns span { display: grid; place-items: center; height: 40px; border-radius: 13px; font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
.s-btns__back { background: var(--sunken); }
.s-btns__next { background: var(--shop); color: var(--ink-on-pastel); }
.s-finish {
  position: absolute; left: 8px; right: 8px; bottom: 8px; height: 156px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
  transform: translateY(180px); transition: transform var(--spring-settle-dur) var(--spring-settle);
}
.finished .s-finish { transform: none; }
.s-finish b { font-family: var(--font-heading); font-size: 20px; }
.s-stars { display: flex; gap: 6px; font-size: 22px; color: var(--border-strong); }
.s-stars .lit { color: var(--amber500); animation: s-bounce .4s cubic-bezier(.3, 1.6, .5, 1); }
.s-confetti { position: absolute; inset: 0; width: 340px; height: 400px; pointer-events: none; }

/* The ghost touch (TouchGhost.swift): a soft circle in the ink on pastel; a press squeezes it in
   place and sends a halo ring out that fades. */
.s-ghost {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(32, 40, 58, .10); border: 1.5px solid rgba(32, 40, 58, .18);
  --dur: calc(.26s * 1.25); --ease: cubic-bezier(.3, 0, .2, 1);
}
.s-ghost::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 2px solid rgba(32, 40, 58, 1); opacity: 0; }
.s-ghost.press { animation: s-press calc(.25s * 1.25) ease-out; }
.s-ghost.press::after { animation: s-halo calc(.45s * 1.25) cubic-bezier(.2, .7, .3, 1); }
@keyframes s-press { 44% { --pop: .8; } }
@keyframes s-halo { 0% { opacity: 0; transform: scale(1); } 11% { opacity: .35; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }

/* ── "A week with erlist": the App Store captions, each beside its scene ── */

.five-steps { background: var(--page); padding: 64px 0; }
.five-steps__list { display: grid; gap: 18px; margin: 32px 0 0; padding: 0; list-style: none; }
.step { display: grid; gap: 18px; padding: 22px; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid var(--border); }
.step__num { display: inline-flex; margin-bottom: 10px; color: var(--ink); font: 700 13px var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.step__copy h3 { font-size: clamp(1.5rem, 5.4vw, 2rem); font-weight: 700; letter-spacing: -0.03em; }
.step__copy h3 em { margin: 0 -3px; padding: 0 3px; border-radius: 6px; font-style: normal; color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.step__copy p { margin-top: 10px; color: var(--text-2); font-size: 1.05rem; }
.step__media { position: relative; overflow: hidden; border-radius: 20px; background: var(--tint); }
.step__media .loop__stage { width: min(100%, 340px); margin: 0 auto; cursor: default; }
.step[data-scene="check"] { --ink: var(--green700); --tint: var(--green50); }
.step[data-scene="plan"] { --ink: var(--amber700); --tint: var(--amber50); }
.step[data-scene="trip"] { --ink: var(--blue700); --tint: var(--blue50); }
.step[data-scene="recipe"] { --ink: var(--lilac700); --tint: var(--lilac50); }
.step[data-scene="cook"] { --ink: var(--blue700); --tint: #EEF1FD; }
/* Without JavaScript only the check scene has a still to show. */
html:not(.js) .step:not([data-scene="check"]) .step__media { display: none; }

@media (min-width: 860px) {
  .hero__inner {
    grid-template-columns: 1.05fr .95fr; grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". loop" "title loop" "sub loop" "cta loop" ". loop";
    column-gap: 56px; row-gap: 18px; min-height: 660px; padding-top: 28px; padding-bottom: 96px;
  }
  .hero__cta { margin-top: 10px; }
  .hero__cta .cta { flex-direction: column; align-items: flex-start; }
  .loop { width: min(100%, 440px); }
  .five-steps { padding: 104px 0; }
  .step { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 28px 28px 28px 44px; }
  .step:nth-child(even) { padding: 28px 44px 28px 28px; }
  .step:nth-child(even) .step__media { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .blob i { animation: none !important; }
}