/* Home page variants: shared interactive pieces, then one block per variant. Uses the tokens in styles.css. */

[hidden] { display: none !important; }

/* Screenshot pairs: dark app on the light site, light app on the dark site. */
.shot-on-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-on-light { display: none !important; }
  :root:not([data-theme="light"]) .shot-on-dark { display: block !important; }
}
:root[data-theme="dark"] .shot-on-light { display: none !important; }
:root[data-theme="dark"] .shot-on-dark { display: block !important; }

/* Variant switcher (for comparing only) */
.variant-bar {
  position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px; max-width: calc(100vw - 24px); overflow-x: auto;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 999px; box-shadow: var(--shadow-lg); font-size: .85rem; font-weight: 700; white-space: nowrap;
}
.variant-bar a { flex: none; }
@media (max-width: 420px) { .variant-bar span { display: none; } .variant-bar a { padding: 8px 12px; } }
.variant-bar span { padding: 0 8px 0 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.variant-bar a { padding: 8px 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; }
.variant-bar a:hover { background: var(--tile); color: var(--ink); }
.variant-bar a[aria-current] { background: var(--coral); color: #fff; }

/* Goal picker */
.goal-picker { background: var(--surface); border-radius: 32px; box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 44px); display: grid; gap: 22px; }
.goal-head h2 { margin-bottom: 4px; }
.goal-head p { margin: 0; }
.goal-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; background: var(--tile); border-radius: 999px; justify-self: start; }
.goal-options button {
  font: inherit; font-weight: 700; font-size: .95rem; border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px;
  background: transparent; color: var(--ink-2); transition: background .25s, color .25s, box-shadow .25s;
}
.goal-options button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.goal-panel { display: grid; grid-template-columns: 150px 1fr; gap: 8px 28px; align-items: center; animation: goalIn .45s cubic-bezier(.2,.8,.3,1); }
@keyframes goalIn { from { opacity: 0; transform: translateY(10px); } }
.goal-panel > img { width: 150px; grid-row: span 2; animation: goalOtter .6s cubic-bezier(.2,.8,.3,1.4); }
@keyframes goalOtter { from { transform: scale(.7) rotate(-8deg); } }
.goal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.goal-stats div { background: var(--canvas); border-radius: 18px; padding: 14px 16px; }
.goal-stats dt { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.goal-stats dd { margin: 2px 0 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.goal-stats .goal-pace { font-size: 1.05rem; letter-spacing: -0.01em; padding-top: 6px; }
.goal-checkin { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--ink-2); }
.goal-checkin svg { width: 20px; height: 20px; flex: none; color: var(--coral); margin-top: 2px; }
.goal-note { margin: 0; font-size: .82rem; color: var(--ink-3); }
@media (max-width: 720px) {
  .goal-options { justify-self: stretch; border-radius: 22px; }
  .goal-options button { flex: 1 1 auto; }
  .goal-panel { grid-template-columns: 1fr; }
  .goal-panel > img { width: 96px; grid-row: auto; }
  .goal-stats { grid-template-columns: 1fr 1fr; }
  .goal-stats div:last-child { grid-column: 1 / -1; }
}

/* Cards that open on tap */
.xcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 960px) { .xcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .xcards { grid-template-columns: 1fr; } }
.xcard { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s; }
.xcard:hover { transform: translateY(-2px); }
.xcard[open] { box-shadow: var(--shadow-lg); }
.xcard summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 28px; gap: 14px; align-items: center; padding: 18px 18px; }
.xcard summary::-webkit-details-marker { display: none; }
.xcard .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--tint) 15%, transparent); color: var(--tint); }
.xcard .ic svg { width: 22px; height: 22px; }
.xcard-text strong { display: block; font-size: 1.02rem; }
.xcard-text span { color: var(--ink-2); font-size: .92rem; }
.xcard-plus { width: 28px; height: 28px; border-radius: 50%; background: var(--tile); position: relative; transition: transform .3s, background .3s; }
.xcard-plus::before, .xcard-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink-2); border-radius: 2px; }
.xcard-plus::after { transform: rotate(90deg); }
.xcard[open] .xcard-plus { transform: rotate(45deg); background: color-mix(in srgb, var(--tint) 18%, transparent); }
.xcard p { margin: 0; padding: 0 18px 20px 76px; color: var(--ink-2); font-size: .95rem; line-height: 1.55; animation: goalIn .35s ease; }
@media (max-width: 600px) { .xcard p { padding-left: 18px; } }

/* Tabbed tour */
.tour { background: var(--surface); border-radius: 36px; box-shadow: var(--shadow-lg); padding: clamp(20px, 4vw, 48px); overflow: hidden; position: relative; }
.tour::before { content: ""; position: absolute; inset: auto -20% -40% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow-coral), transparent 70%); pointer-events: none; }
.tour-tabs { display: flex; gap: 6px; padding: 6px; background: var(--tile); border-radius: 999px; width: max-content; max-width: 100%; position: relative; }
.tour-tabs button { position: relative; overflow: hidden; font: inherit; font-weight: 700; border: 0; cursor: pointer; padding: 11px 22px; border-radius: 999px; background: transparent; color: var(--ink-2); transition: background .25s, color .25s; }
.tour-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.tour-progress { position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--coral); transform: scaleX(0); transform-origin: left; }
.tour.is-running [aria-selected="true"] .tour-progress { animation: tourBar 6s linear forwards; }
@keyframes tourBar { to { transform: scaleX(1); } }
.tour-body { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: clamp(24px, 5vw, 72px); align-items: center; margin-top: 28px; position: relative; }
.tour-panel { animation: goalIn .45s cubic-bezier(.2,.8,.3,1); }
.tour-panel h3 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 18px; }
.tour-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tour-panel li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 1.05rem; color: var(--ink-2); }
.tour-panel li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.tour-phone { position: relative; }
.tour-phone > img, .story-phone > img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); transition: opacity .5s ease, transform .5s ease; }
.tour-phone > img.is-hidden, .story-phone > img.is-hidden { opacity: 0; transform: scale(.97); }
@media (max-width: 760px) {
  .tour-tabs { width: 100%; }
  .tour-tabs button { flex: 1; padding: 11px 8px; }
  .tour-body { grid-template-columns: 1fr; }
  .tour-phone { width: min(200px, 56vw); margin-inline: auto; order: -1; }
}

/* Scroll story: sticky phone, steps scroll past */
.story-pin { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(32px, 7vw, 110px); }
.story-phone { position: sticky; top: 110px; align-self: start; }
.story-steps { list-style: none; padding: 0; margin: 0; }
.story-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .4s ease; }
.story-step.is-active { opacity: 1; }
.story-num { font-weight: 800; color: var(--coral-text); letter-spacing: .08em; font-size: .9rem; }
.story-step h3 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; margin: 6px 0 10px; }
.story-step p { font-size: 1.15rem; color: var(--ink-2); max-width: 30ch; margin: 0; }
.story-inline { display: none; }
@media (max-width: 880px) {
  .story-pin { grid-template-columns: 1fr; }
  .story-dots { display: none; }
  .story-phone { display: none; }
  .story-step { min-height: 0; opacity: 1; padding: 28px 0; }
  .story-inline { display: block; width: min(250px, 70vw); margin-top: 20px; border-radius: 30px; border: 8px solid var(--phone-frame); box-shadow: var(--shadow-lg); }
}

/* ===== Variant A: Playful ===== */
.variant-playful .pf-hero { padding: clamp(36px, 6vw, 72px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.pf-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 80% 40%, color-mix(in srgb, var(--amber) 30%, transparent), transparent 70%), radial-gradient(50% 60% at 10% 0%, color-mix(in srgb, var(--coral) 22%, transparent), transparent 70%); }
.pf-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
.pf-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-weight: 700; font-size: .9rem; margin-bottom: 20px; }
.pf-badge img { border-radius: 8px; }
.pf-copy h1 { font-size: clamp(2.6rem, 6.6vw, 5rem); line-height: 1.02; }
.pf-accent { color: var(--coral); display: inline-block; animation: wiggle 5s ease-in-out infinite 1.5s; transform-origin: left bottom; }
@keyframes wiggle { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-2deg); } 96% { transform: rotate(1.5deg); } }
.pf-copy .lead { margin-bottom: 26px; }
.pf-call { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.pf-call img { width: 44px; animation: bob 4s ease-in-out infinite; }
.pf-call strong { color: var(--coral-text); }
.pf-stage { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; --px: 0; --py: 0; }
.pf-blob { position: absolute; inset: 12%; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: linear-gradient(140deg, var(--coral), var(--amber)); opacity: .9; animation: blob 12s ease-in-out infinite; }
@keyframes blob { 50% { border-radius: 58% 42% 45% 55% / 42% 58% 42% 58%; transform: rotate(8deg) scale(1.03); } }
.pf-otter { position: absolute; width: 62%; left: 19%; bottom: 6%; filter: drop-shadow(0 24px 30px rgba(120, 60, 20, .3)); animation: bob 5s ease-in-out infinite; transform: translate(calc(var(--px) * -10px), calc(var(--py) * -10px)); }
.pf-food { position: absolute; width: 15%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.15)); animation: float 6s ease-in-out infinite; translate: calc(var(--px) * 30px) calc(var(--py) * 30px); transition: translate .3s ease-out; }
@keyframes float { 50% { transform: translateY(-14px) rotate(6deg); } }
.pf-food-0 { left: 2%; top: 16%; animation-delay: -1s; }
.pf-food-1 { left: 20%; top: 0; animation-delay: -2.5s; width: 13%; }
.pf-food-2 { right: 18%; top: 2%; animation-delay: -4s; }
.pf-food-3 { right: 0; top: 26%; animation-delay: -.5s; width: 17%; }
.pf-food-4 { right: 2%; bottom: 26%; animation-delay: -3s; }
.pf-food-5 { left: 0; bottom: 30%; animation-delay: -5s; width: 13%; }
.pf-food-6 { left: 10%; bottom: 6%; animation-delay: -2s; }
.pf-food-7 { right: 14%; bottom: 4%; animation-delay: -3.5s; width: 12%; }
.pf-bubble { position: absolute; right: -2%; top: 46%; max-width: 200px; background: var(--surface); border-radius: 18px 18px 18px 4px; padding: 10px 14px; box-shadow: var(--shadow-lg); font-size: .85rem; line-height: 1.35; animation: pop 6s ease-in-out infinite; }
.pf-bubble strong { display: block; color: var(--coral-text); }
@keyframes pop { 0%, 8% { opacity: 0; transform: scale(.85) translateY(6px); } 14%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: scale(.95); } }
@media (max-width: 880px) {
  .pf-hero-grid { grid-template-columns: 1fr; }
  .pf-stage { max-width: 290px; order: -1; }
  .pf-bubble { right: 0; top: 54%; }
}

.pf-marquee-wrap { overflow: hidden; padding: 12px 0; }
.pf-marquee { overflow: hidden; background: var(--coral); color: #fff; padding: 14px 0; transform: rotate(-1.5deg) scale(1.02); }
.pf-marquee div { display: flex; gap: 40px; width: max-content; animation: marquee 30s linear infinite; font-weight: 800; font-size: 1.1rem; }
.pf-marquee span::after { content: "✦"; margin-left: 40px; opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }
.pf-goal { padding-top: clamp(56px, 8vw, 96px); }
.variant-playful .goal-picker { background: linear-gradient(150deg, color-mix(in srgb, var(--amber) 14%, var(--surface)), var(--surface) 55%); }
.variant-playful .xcard .ic { border-radius: 50%; }
.pf-train { background: linear-gradient(160deg, color-mix(in srgb, var(--coral) 12%, var(--canvas)), var(--canvas)); }
.pf-lift { left: auto !important; right: -4%; bottom: -6% !important; width: 170px !important; animation: bob 4.5s ease-in-out infinite; }
.pf-final img { animation: bob 4s ease-in-out infinite; }

/* ===== Variant B: Clean & calm ===== */
.variant-calm .site-header { background: color-mix(in srgb, var(--canvas) 70%, transparent); }
.cm-hero { text-align: center; padding: clamp(56px, 9vw, 120px) 0 0; overflow: hidden; }
.cm-hero::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 60%; z-index: -1; background: radial-gradient(50% 60% at 50% 100%, var(--glow-coral), transparent 75%), radial-gradient(35% 45% at 25% 90%, var(--glow-amber), transparent 75%), radial-gradient(35% 45% at 75% 90%, var(--glow-amber), transparent 75%); }
.cm-hero h1 { font-size: clamp(2.5rem, 7vw, 5.4rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.cm-muted { color: var(--ink-3); }
.cm-hero .lead { margin: 0 auto 28px; max-width: 36ch; }
.cm-hero .cta-row { justify-content: center; }
.cm-trust { margin: 16px 0 0; color: var(--ink-3); font-size: .9rem; font-weight: 600; }
.cm-hero-phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3vw, 36px); margin-top: clamp(40px, 6vw, 72px); height: clamp(380px, 48vw, 600px); overflow: hidden; }
.cm-hero-phones .phone { flex: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cm-hero-phones .phone img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cm-main { width: clamp(240px, 26vw, 320px); }
.cm-side { width: clamp(180px, 20vw, 260px); opacity: .9; transform: translateY(14%); }
@media (max-width: 640px) { .cm-side { display: none; } .cm-hero-phones { height: 420px; } }
.variant-calm .story-step h3 { font-weight: 700; }
.cm-narrow { max-width: 900px; }
.variant-calm .goal-picker { box-shadow: var(--shadow); }
.cm-price { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: clamp(28px, 5vw, 56px); }
.cm-price h2 { font-weight: 700; letter-spacing: -0.035em; }
.cm-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cm-price li { padding: 18px 20px; border-radius: 18px; background: var(--canvas); color: var(--ink-2); line-height: 1.5; }
.cm-price li strong { display: block; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 800px) { .cm-price { grid-template-columns: 1fr; } }
.variant-calm .section-head h2 { font-weight: 700; letter-spacing: -0.035em; }
.variant-calm .faq details { box-shadow: none; background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; }

/* ===== Variant C: Interactive tour ===== */
.tr-hero { overflow: hidden; text-align: center; padding: clamp(44px, 7vw, 88px) 0 clamp(24px, 4vw, 40px); }
.tr-hero::before { content: ""; position: absolute; inset: -30% -10% auto; height: 140%; z-index: -1; background: radial-gradient(45% 50% at 50% 30%, var(--glow-coral), transparent 70%); }
.tr-hero h1 { max-width: 15ch; margin-inline: auto; }
.tr-hero h1 .accent { background: linear-gradient(100deg, var(--coral) 10%, var(--amber) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-hero .lead { margin: 0 auto 26px; }
.tr-hero .cta-row { justify-content: center; }
.tr-tour { padding-top: 0; }

/* Keep the switcher clear of the last content */
.variant .site-footer, body:has(.variant-bar) .site-footer { padding-bottom: 96px; }

/* ===== Calm, round 2 (Robert's pick) ===== */
/* Hero stage: the strategy phone rises from a coral blob, Otto waves beside it, food floats around. */
.cm-stage { position: relative; width: min(760px, 100%); height: clamp(380px, 46vw, 540px); margin: clamp(36px, 5vw, 60px) auto 0; --px: 0; --py: 0; }
.cm-stage .pf-blob { inset: 14% 18% -30%; }
.cm-hero-phone { position: absolute; left: 50%; bottom: 0; width: clamp(230px, 28vw, 300px); transform: translateX(-50%); aspect-ratio: auto; height: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; overflow: hidden; }
.cm-hero-phone img { height: auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cm-otter { position: absolute; width: clamp(140px, 20vw, 210px); left: 4%; bottom: 0; z-index: 2; filter: drop-shadow(0 20px 26px rgba(120, 60, 20, .28)); animation: bob 5s ease-in-out infinite; }
.cm-bubble { top: 30%; right: 2%; z-index: 2; }
.cm-stage .pf-food { width: 11%; }
@media (max-width: 640px) {
  .cm-stage { height: 400px; }
  .cm-otter { width: 118px; left: -2%; }
  .cm-bubble { right: -2%; top: 22%; max-width: 160px; font-size: .78rem; }
  .cm-stage .pf-food { width: 15%; }
  .cm-stage .pf-food-3, .cm-stage .pf-food-4, .cm-stage .pf-food-7 { display: none; }
}

/* Longer scroll story */
.story-points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.story-points li { display: flex; gap: 10px; align-items: center; color: var(--ink-2); font-size: 1rem; }
.story-points li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--amber), var(--coral)); flex: none; }
.story-step { min-height: 72vh; }
/* Wide screens: phone and text stay pinned while the page scrolls. The fades are tied to the scroll position itself
   (variants.js sets them), so the text and the screen move with your fingers, and the browser's own gentle snap
   settles the page on a step when you stop near one. */
html:has([data-story]) { scroll-snap-type: y proximity; }
.story { position: relative; height: calc((var(--n) - 1) * 95vh + 100vh); }
.story-snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-margin-top: -16px; /* the page already pads anchors by 84px; the header is 68px */ pointer-events: none; }
@media (min-width: 881px) {
  .story-pin { position: sticky; top: 68px; height: calc(100vh - 68px); align-items: center; grid-template-columns: auto 1fr auto; }
  /* The phone fills the window's height on the left; the title and the step's text sit beside it as one block,
     centred against the phone, so short laptop screens keep a big phone and tall ones don't leave a gap. */
  .story-pin { grid-template-rows: 1fr auto auto 1fr; align-content: stretch; row-gap: 0; padding-block: 20px; }
  .story-phone { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .story-head { grid-column: 2; grid-row: 2; margin: 0 0 clamp(20px, 4vh, 40px); max-width: none; }
  .story-steps { grid-column: 2; grid-row: 3; }
  .story-dots { grid-column: 3; grid-row: 1 / -1; align-self: center; }
  .story-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 4px; }
  .story-head .eyebrow { margin-bottom: 6px; }
  .story-head .lead { margin: 0; font-size: 1.02rem; }
  .story-phone { position: relative; top: auto; width: min(340px, calc((100vh - 120px) / 2.173)); }
  .story-phone > img, .story-phone > img.is-hidden { transition: none; transform: none; }
  .story-steps { display: grid; }
  .story-step { grid-area: 1 / 1; min-height: 0; opacity: 0; pointer-events: none; transition: none; will-change: opacity, transform; }
  .story-step.is-active { opacity: 1; pointer-events: auto; }
  .story-dots { display: grid; gap: 10px; }
  .story-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: height .4s ease, background .4s ease; }
  .story-dots i.is-active { height: 28px; background: linear-gradient(180deg, var(--amber), var(--coral)); }
}
.story-step.is-active .story-num { background: linear-gradient(135deg, var(--amber), var(--coral)); color: #fff; }
.story-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--tile); transition: background .4s, color .4s; }

/* Coloured widgets so they stand out from the page */
.variant-calm .goal-stats div { background: linear-gradient(150deg, color-mix(in srgb, var(--coral) 14%, var(--surface)), color-mix(in srgb, var(--amber) 10%, var(--surface))); }
.variant-calm .goal-stats div:first-child { background: linear-gradient(150deg, var(--coral), var(--coral-deep)); color: #fff; }
.variant-calm .goal-stats div:first-child dt { color: rgba(255,255,255,.85); }
.variant-calm .goal-options button[aria-checked="true"] { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; }
.variant-calm .cm-price li:last-child { background: linear-gradient(150deg, color-mix(in srgb, var(--coral) 16%, var(--surface)), color-mix(in srgb, var(--amber) 12%, var(--surface))); }

/* Feature cards: Otto instead of small icons */
.xcard .ic { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--amber) 35%, var(--surface)), color-mix(in srgb, var(--coral) 30%, var(--surface))); overflow: hidden; }
.xcard .ic img { width: 120%; max-width: none; margin-top: 18%; transition: transform .35s cubic-bezier(.2,.8,.3,1.4); }
.xcard summary { grid-template-columns: 56px 1fr 28px; }
.xcard:hover .ic img, .xcard[open] .ic img { transform: translateY(-6%) rotate(-6deg) scale(1.06); }
.xcard[open] { background: linear-gradient(160deg, color-mix(in srgb, var(--coral) 9%, var(--surface)), var(--surface) 70%); }
.xcard[open] .xcard-plus { background: color-mix(in srgb, var(--coral) 20%, transparent); }
.xcard p { padding-left: 88px; }
@media (max-width: 600px) { .xcard p { padding-left: 18px; } }

/* Drawn screens follow the same rule as screenshots: a dark app on the light site, a light app on the dark site. */
.tour-phone .screen { --sc-bg: #111113; --sc-card: #1E1E21; --sc-ink: #F5F3F0; --sc-muted: #A9A49F; --sc-chip: #2A2A2F; --sc-track: #2E2E33; --sc-on: rgba(255, 133, 98, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tour-phone .screen { --sc-bg: #FFF7EE; --sc-card: #FFFFFF; --sc-ink: #2B2A33; --sc-muted: #8A7B6E; --sc-chip: #F4ECE2; --sc-track: #EFE6DA; --sc-on: #FFF1EB; } }
:root[data-theme="dark"] .tour-phone .screen { --sc-bg: #FFF7EE; --sc-card: #FFFFFF; --sc-ink: #2B2A33; --sc-muted: #8A7B6E; --sc-chip: #F4ECE2; --sc-track: #EFE6DA; --sc-on: #FFF1EB; }
/* Drawn phone screens (Crews, Shopping, Booking) */
.tour-phone .screen { position: absolute; inset: 9px; border-radius: 38px; overflow: hidden; background: var(--sc-bg); color: var(--sc-ink); padding: 44px 12px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; line-height: 1.3; transition: opacity .5s ease, transform .5s ease; }
.tour-phone .screen.is-hidden { opacity: 0; transform: scale(.97); visibility: hidden; transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.tour-phone .screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 34%; height: 18px; border-radius: 12px; background: #111; transform: translateX(-50%); }
.sc-title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; margin: 0 2px 2px; }
.sc-card { background: var(--sc-card); border-radius: 14px; padding: 9px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sc-card small { display: block; color: var(--sc-muted); font-size: 10px; font-weight: 600; margin-bottom: 4px; }
.sc-card strong { display: block; font-size: 12px; }
.sc-flame { display: flex; gap: 10px; align-items: center; background: linear-gradient(135deg, #FF7A59, #E9A03B); color: #fff; }
.sc-flame small { color: rgba(255,255,255,.9); margin: 0; }
.flame { width: 26px; height: 32px; flex: none; background: #fff; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; clip-path: polygon(50% 0, 80% 30%, 100% 65%, 85% 95%, 50% 100%, 15% 95%, 0 65%, 20% 30%); animation: flicker 1.6s ease-in-out infinite; transform-origin: bottom; }
@keyframes flicker { 50% { transform: scaleY(1.1) scaleX(.94); } }
.sc-member { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; }
.sc-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sc-chip); font-weight: 800; font-size: 10px; }
.sc-name { font-weight: 700; }
.sc-days { display: flex; gap: 3px; }
.sc-days i { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-track); }
.sc-days i.on { background: #3FA57A; }
.sc-versus .vs-row { display: grid; grid-template-columns: 46px 1fr 20px; gap: 6px; align-items: center; font-weight: 700; margin-top: 4px; }
.vs-bar { height: 7px; border-radius: 9px; background: var(--sc-track); overflow: hidden; }
.vs-bar i { display: block; height: 100%; width: var(--w); background: #FF7A59; border-radius: inherit; }
.vs-bar.bulk i { background: #5683C4; }
.sc-shared strong { font-size: 11.5px; }
.sc-scanner { position: relative; height: 92px; border-radius: 16px; background: linear-gradient(160deg, #3A3940, #1D1C22); display: grid; place-items: end center; padding-bottom: 8px; overflow: hidden; }
.sc-scanner small { color: rgba(255,255,255,.75); font-size: 10px; }
.sc-corner { position: absolute; inset: 18px 30%; border: 2px solid rgba(255,255,255,.8); border-radius: 10px; }
.sc-line { position: absolute; left: 30%; right: 30%; top: 20px; height: 2px; background: #FF8562; box-shadow: 0 0 10px #FF8562; animation: scanline 2s ease-in-out infinite alternate; }
@keyframes scanline { to { top: 70px; } }
.sc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sc-product { text-align: center; padding: 8px 6px; }
.sc-food { display: grid; place-items: center; height: 34px; }
.sc-food img { width: 28px; }
.sc-product strong { font-size: 11px; }
.sc-product small { margin: 2px 0 6px; }
.sc-product em { display: inline-block; font-style: normal; font-weight: 700; font-size: 9.5px; padding: 3px 7px; border-radius: 99px; background: rgba(63,165,122,.14); color: #2C7F5C; }
.sc-product em.meh { background: rgba(233,160,59,.16); color: #9A6514; }
.sc-product.best { box-shadow: 0 0 0 2px #3FA57A; }
.sc-list p { margin: 3px 0; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.sc-list .tick { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--sc-muted); flex: none; position: relative; }
.sc-option { border: 2px solid transparent; }
.sc-option.on { border-color: #FF7A59; background: var(--sc-on); }
.sc-dayrow, .sc-slots { display: flex; flex-wrap: wrap; gap: 5px; }
.sc-dayrow span, .sc-slots span { padding: 5px 8px; border-radius: 9px; background: var(--sc-chip); font-weight: 700; font-size: 10.5px; }
.sc-slots { margin-top: 6px; }
.sc-dayrow .on, .sc-slots .on { background: #FF7A59; color: #fff; }
.sc-brief p { margin: 0; color: var(--sc-muted); font-size: 10.5px; }
.sc-button { margin-top: auto; text-align: center; padding: 10px; border-radius: 99px; background: linear-gradient(180deg, #FF7A59, #E2502C); color: #fff; font-weight: 800; }
/* Little animations while a drawn screen is showing */
.screen:not(.is-hidden) .sc-days i.on { animation: dotIn .4s cubic-bezier(.2,.8,.3,1.5) both; animation-delay: var(--d); }
@keyframes dotIn { from { transform: scale(0); } }
.screen:not(.is-hidden) .vs-bar i { animation: barIn 1.2s cubic-bezier(.3,.7,.2,1) both .6s; }
@keyframes barIn { from { width: 0; } }
.screen:not(.is-hidden) .sc-product.best { animation: bestPulse 2.4s ease-in-out infinite 1s; }
@keyframes bestPulse { 50% { box-shadow: 0 0 0 4px rgba(63,165,122,.35); } }
.screen:not(.is-hidden) .sc-list .tick { animation: tick .3s ease both; animation-delay: var(--d); }
.sc-list p:nth-child(n+4) .tick { animation: none !important; }
@keyframes tick { to { background: #3FA57A; border-color: #3FA57A; } }
.screen:not(.is-hidden) .sc-slots .on, .screen:not(.is-hidden) .sc-dayrow .on { animation: pick .5s cubic-bezier(.2,.8,.3,1.5) both .5s; }
.screen:not(.is-hidden) .sc-slots .on { animation-delay: 1.1s; }
@keyframes pick { from { background: var(--sc-chip); color: inherit; transform: scale(.9); } }
.screen:not(.is-hidden) .sc-button { animation: pick .5s ease both 1.8s; }
.cm-extras .tour-phone { width: 100%; max-width: 300px; aspect-ratio: 1320 / 2868; justify-self: center; }
@media (max-width: 760px) { .cm-extras .tour-phone { width: min(210px, 58vw); } }

/* Hero food: hover or tap shows a typical portion's calories and macros. */
.food-tip { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; z-index: 1; }
.food-tip img { width: 100%; transition: transform .25s cubic-bezier(.2,.8,.3,1.5); }
.food-tip:hover, .food-tip:focus-visible, .food-tip.is-open { animation-play-state: paused; z-index: 6; }
.food-tip:hover img, .food-tip:focus-visible img, .food-tip.is-open img { transform: scale(1.25) rotate(-8deg); }
.food-tip .tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); width: 168px; transform: translate(-50%, 6px) scale(.92);
  padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg);
  text-align: left; color: var(--ink); line-height: 1.25; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.3,1.3);
}
.food-tip:hover .tip, .food-tip:focus-visible .tip, .food-tip.is-open .tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.food-tip .tip b { display: block; font-size: .92rem; }
.food-tip .tip small { display: block; color: var(--ink-3); font-size: .78rem; margin-bottom: 6px; }
.food-tip .tip strong { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(90deg, var(--amber), var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.food-tip .tip strong em { font-style: normal; font-size: .8rem; font-weight: 700; }
.tip-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.tip-macros i { font-style: normal; font-weight: 800; font-size: .8rem; padding: 6px 4px; border-radius: 10px; text-align: center; line-height: 1.2; }
.tip-macros u { text-decoration: none; font-weight: 600; font-size: .75rem; opacity: .8; }
.tip-macros .p { background: color-mix(in srgb, var(--protein) 16%, transparent); color: var(--protein); }
.tip-macros .c { background: color-mix(in srgb, var(--carbs) 18%, transparent); color: color-mix(in srgb, var(--carbs) 75%, var(--ink)); }
.tip-macros .f { background: color-mix(in srgb, var(--fat) 16%, transparent); color: var(--fat); }
/* Food near the edges opens its card inwards so it stays on screen. */
.cm-stage .pf-food-0 .tip, .cm-stage .pf-food-5 .tip, .cm-stage .pf-food-6 .tip { left: 0; transform: translate(0, 6px) scale(.92); }
.cm-stage .pf-food-0:is(:hover, :focus-visible, .is-open) .tip, .cm-stage .pf-food-5:is(:hover, :focus-visible, .is-open) .tip, .cm-stage .pf-food-6:is(:hover, :focus-visible, .is-open) .tip { transform: none; }
.cm-stage .pf-food-2 .tip, .cm-stage .pf-food-3 .tip, .cm-stage .pf-food-4 .tip, .cm-stage .pf-food-7 .tip { left: auto; right: 0; transform: translate(0, 6px) scale(.92); }
.cm-stage .pf-food-2:is(:hover, :focus-visible, .is-open) .tip, .cm-stage .pf-food-3:is(:hover, :focus-visible, .is-open) .tip, .cm-stage .pf-food-4:is(:hover, :focus-visible, .is-open) .tip, .cm-stage .pf-food-7:is(:hover, :focus-visible, .is-open) .tip { transform: none; }
.cm-stage:has(.food-tip:is(:hover, :focus-visible, .is-open)) .cm-bubble { visibility: hidden; }

/* "What's inside" picker wheel: rows tilt away from the middle like an iOS picker; the middle row's card pops up. */
.wheel-wrap { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; max-width: 980px; margin-inline: auto; }
.wheel-col { display: grid; justify-items: center; gap: 8px; }
.wheel-step { width: 40px; height: 32px; border: 0; border-radius: 999px; background: var(--tile); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.wheel-step:hover { background: linear-gradient(135deg, var(--amber), var(--coral)); color: #fff; }
.wheel {
  --row: 64px; position: relative; width: 100%; height: calc(var(--row) * 5); overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none; perspective: 900px; outline: none; border-radius: 26px;
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.wheel::-webkit-scrollbar { display: none; }
.wheel-col { position: relative; }
.wheel-col::before { /* the selection band behind the middle row */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 64px; transform: translateY(-50%); border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 30%, var(--surface)), color-mix(in srgb, var(--coral) 28%, var(--surface)));
  box-shadow: var(--shadow);
}
.wheel:focus-visible { box-shadow: 0 0 0 3px var(--coral); }
.wheel-pad { height: calc(var(--row) * 2); }
.wheel-item {
  height: var(--row); display: flex; align-items: center; gap: 14px; padding: 0 18px; scroll-snap-align: center; cursor: pointer;
  font-weight: 700; font-size: 1.05rem; color: var(--ink-2); transform-origin: center; will-change: transform, opacity;
  transition: color .2s;
}
.wheel-item img { width: 44px; height: 44px; object-fit: cover; object-position: top; border-radius: 14px; background: var(--tile); }
.wheel-item.is-active { color: var(--ink); }
.wheel-cards { position: relative; min-height: 340px; display: grid; }
.wheel-card {
  grid-area: 1 / 1; align-self: center; position: relative; padding: clamp(24px, 4vw, 40px); padding-top: 120px; margin-top: 60px;
  border-radius: 32px; box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--coral) 14%, var(--surface)), color-mix(in srgb, var(--amber) 10%, var(--surface)) 70%);
  animation: wheelPop .45s cubic-bezier(.2,.8,.3,1.25);
}
@keyframes wheelPop { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.wheel-otter { position: absolute; top: -60px; left: clamp(24px, 4vw, 40px); width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--amber) 45%, var(--surface)), color-mix(in srgb, var(--coral) 40%, var(--surface)));
  box-shadow: var(--shadow-lg); overflow: hidden; display: grid; place-items: end center; }
.wheel-otter img { width: 92%; animation: wheelOtter .7s cubic-bezier(.2,.8,.3,1.5) .1s both; }
@keyframes wheelOtter { from { transform: translateY(40%) rotate(-10deg); } }
.wheel-count { margin: 0 0 6px; font-weight: 800; font-size: .8rem; letter-spacing: .1em; color: var(--coral-text); }
.wheel-card h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px; }
.wheel-short { font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.wheel-long { color: var(--ink-2); margin: 0; }
@media (max-width: 760px) {
  .wheel-wrap { grid-template-columns: 1fr; }
  .wheel { --row: 56px; }
  .wheel-col::before { height: 56px; }
  .wheel-cards { min-height: 0; }
}
/* Food in the top half opens its card downwards, so it never hides under the header. */
.cm-stage :is(.pf-food-0, .pf-food-1, .pf-food-2, .pf-food-3) .tip { bottom: auto; top: calc(100% + 10px); }

@media (pointer: coarse) {
  .wheel-step { width: 56px; height: 44px; }
}

@media (pointer: coarse) {
  .wheel-step { width: 56px; height: 44px; }
}

/* Phones: the same pinned story, stacked. Title on top, the phone in the middle, the step's text underneath,
   sliding in from the left and the right in turn (variants.js moves it with the scroll). */
@media (max-width: 880px) {
  .story-pin { position: sticky; top: 68px; height: calc(100svh - 68px); display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; align-content: start; justify-items: center; row-gap: 14px; padding-top: 14px; overflow: hidden; }
  .story-head { margin: 0; justify-self: stretch; }
  .story-head h2 { font-size: 1.6rem; margin-bottom: 0; }
  .story-head .eyebrow { margin-bottom: 4px; }
  .story-head .lead { display: none; }
  .story-phone { display: block; position: relative; top: auto; padding: 7px; border-radius: 34px; width: max(120px, min(62vw, calc((100svh - 410px) / 2.173))); }
  .story-phone > img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 27px; }
  .story-phone > img, .story-phone > img.is-hidden { transition: none; transform: none; }
  .story-steps { display: grid; width: 100%; overflow: hidden; }
  .story-step { grid-area: 1 / 1; min-height: 0; padding: 0; opacity: 0; pointer-events: none; transition: none; text-align: center; align-items: center; justify-content: flex-start; will-change: opacity, transform; }
  .story-step.is-active { opacity: 1; pointer-events: auto; }
  .story-step .story-num { width: 30px; height: 30px; border-radius: 10px; font-size: .78rem; }
  .story-step h3 { font-size: 1.55rem; margin: 6px 0 6px; }
  .story-step p { font-size: .98rem; max-width: 34ch; margin-inline: auto; }
  .story-points, .story-inline, .story-dots { display: none; }
}

/* ---- 29 Oct revamp: hero food clear of Otto, value proposition, alignment, entrance motion ---- */

/* Hero food sits in an arc around the phone, above and right of Otto (who stands bottom-left), never behind him. */
.cm-stage .pf-food-0 { left: 3%;  top: 8%;  right: auto; bottom: auto; }   /* avocado */
.cm-stage .pf-food-1 { left: 18%; top: -2%; right: auto; bottom: auto; }   /* egg */
.cm-stage .pf-food-5 { left: 9%;  top: 30%; right: auto; bottom: auto; }   /* broccoli */
.cm-stage .pf-food-2 { right: 17%; top: 0;  left: auto; bottom: auto; }    /* banana */
.cm-stage .pf-food-3 { right: 2%;  top: 22%; left: auto; bottom: auto; }   /* salad */
.cm-stage .pf-food-4 { right: 5%;  top: 50%; left: auto; bottom: auto; }   /* steak */
.cm-stage .pf-food-6 { right: 18%; top: 72%; left: auto; bottom: auto; }   /* strawberries */
.cm-stage .pf-food-6 .tip { left: auto; right: 0; }
.cm-otter { z-index: 3; }
@media (max-width: 640px) {
  .cm-stage .pf-food-5 { top: 28%; left: 4%; }
  .cm-stage .pf-food-6 { display: none; }
}

/* Hero entrance: the headline rises, then the phone comes up from below. */
.cm-hero h1, .cm-hero .lead, .cm-hero .cta-row, .cm-hero .cm-trust { animation: heroRise .8s cubic-bezier(.2,.8,.2,1) both; }
.cm-hero .lead { animation-delay: .08s; }
.cm-hero .cta-row { animation-delay: .16s; }
.cm-hero .cm-trust { animation-delay: .22s; }
.cm-hero-phone { animation: phoneRise 1s cubic-bezier(.2,.8,.2,1) .25s both; }
.cm-otter { animation: otterIn .9s cubic-bezier(.2,.8,.3,1.3) .55s both, bob 5s ease-in-out 1.5s infinite; }
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } }
@keyframes phoneRise { from { opacity: 0; transform: translate(-50%, 80px); } to { transform: translate(-50%, 0); } }
@keyframes otterIn { from { opacity: 0; transform: translateX(-40px) rotate(-8deg); } }

/* One rhythm for every section: centred heads, the same gap under them, the same content width. */
main > section > .wrap > .section-head { margin-bottom: clamp(32px, 4.5vw, 52px); }
.cm-more { text-align: center; margin-top: 20px; }
#calls .calls-grid { max-width: 980px; margin-inline: auto; }
#calls .disclaimer { max-width: 980px; margin-inline: auto; }
.cm-price { max-width: 980px; margin-inline: auto; align-items: center; }
.cm-narrow { max-width: 980px; }
.tour { max-width: 1080px; margin-inline: auto; }
.tour-copy { display: grid; gap: 28px; align-content: center; }
.tour-body { margin-top: 0; align-items: center; }
.wheel-cards { align-content: center; }
.wheel-card { align-self: center; }

/* Why OttoPlate */
.why-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.why-copy h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -0.04em; }
.why-copy .lead { max-width: 42ch; }
.why-chat { display: grid; gap: 10px; justify-items: start; padding: clamp(20px, 3vw, 32px); border-radius: 32px; background: var(--surface); box-shadow: var(--shadow-lg); }
.why-rule { margin: 0; padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: var(--tile); color: var(--ink-2); font-weight: 600; transition: opacity .4s ease calc(var(--i) * .35s), transform .4s ease calc(var(--i) * .35s), color .3s ease calc(var(--i) * .35s + 1.6s); }
.why-rule s { text-decoration: none; background: linear-gradient(currentColor, currentColor) left 55% / 100% 2px no-repeat; transition: background-size .5s ease calc(var(--i) * .35s + 1.6s); }
.why-rule { color: var(--ink-3); }
.why-otto { margin: 8px 0 0; justify-self: end; display: flex; align-items: center; gap: 10px; transition: opacity .5s ease 3.4s, transform .5s cubic-bezier(.2,.8,.3,1.3) 3.4s; }
.why-otto img { width: 52px; height: 52px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--tile); }
.why-otto span { padding: 12px 18px; border-radius: 20px 20px 6px 20px; color: #fff; font-weight: 700; line-height: 1.3; background: linear-gradient(135deg, var(--coral), var(--coral-deep)); box-shadow: 0 10px 24px -10px var(--coral); }

.why-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(48px, 7vw, 88px); max-width: 980px; margin-inline: auto; }
.why-card { border-radius: 28px; padding: clamp(24px, 3vw, 36px); }
.why-card h3 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; margin-bottom: 18px; }
.why-card h3 img { border-radius: 10px; }
.why-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.why-card li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; line-height: 1.45; transition: opacity .45s ease calc(var(--i) * .12s + .2s), transform .45s ease calc(var(--i) * .12s + .2s); }
.why-ours { color: #fff; background: linear-gradient(155deg, var(--coral) 0%, var(--coral-deep) 100%); box-shadow: 0 30px 60px -30px var(--coral); }
.why-ours li::before { content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(255,255,255,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23E2502C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.why-theirs { background: var(--surface); box-shadow: var(--shadow); color: var(--ink-2); }
.why-theirs h3 { color: var(--ink-2); }
.why-theirs li::before { content: ""; width: 14px; height: 2px; margin: 11px 4px 0; border-radius: 2px; background: var(--ink-3); }

.why-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: clamp(40px, 6vw, 72px) auto 0; max-width: 980px; }
.why-numbers div { display: flex; flex-direction: column-reverse; justify-content: flex-end; text-align: center; padding: 22px 12px; border-radius: 22px; background: var(--tile); transition: opacity .5s ease calc(var(--i) * .1s), transform .5s ease calc(var(--i) * .1s); }
.why-numbers dd { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(120deg, var(--coral), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-numbers dt { color: var(--ink-2); font-size: .92rem; font-weight: 600; }

@media (max-width: 880px) {
  .why-top, .why-compare { grid-template-columns: 1fr; }
  .why-numbers { grid-template-columns: 1fr 1fr; }
}

/* Start states, only before the block scrolls in (and only with JavaScript); the end state is the default. */
.js .why-top:not(.in-view) .why-rule { opacity: 0; transform: translateY(10px); transition: none; }
.js .why-top:not(.in-view) .why-rule s { background-size: 0 2px; transition: none; }
.js .why-top:not(.in-view) .why-rule { color: var(--ink-2); }
.js .why-top:not(.in-view) .why-otto { opacity: 0; transform: translateY(14px) scale(.9); transition: none; }
.js .why-compare:not(.in-view) li { opacity: 0; transform: translateX(-12px); transition: none; }
.js .why-numbers:not(.in-view) div { opacity: 0; transform: translateY(16px); transition: none; }

/* ---- Editorial touches (techniques borrowed from landonorris.com) ---- */
.serif, .mw.accent, .marquee-serif { font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.02em; }
em.serif { color: var(--coral-text); }

/* Marker strokes that draw themselves */
.scribbled { position: relative; display: inline-block; }
.scribble { position: absolute; left: -2%; width: 104%; bottom: -0.12em; height: 0.32em; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--coral); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cm-hero .scribble path { animation: draw 1s cubic-bezier(.6,0,.3,1) .9s both; }
.scribble-circle { left: -12%; width: 124%; top: -18%; bottom: auto; height: 136%; }
.scribble-circle path { stroke-width: 4; transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.3,1) .5s; }
.js .why-top:not(.in-view) .scribble-circle path { stroke-dashoffset: 1; transition: none; }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* Faint contour lines behind the hero */
.cm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/img/contours.svg") center top / max(1440px, 100%) auto no-repeat; -webkit-mask: linear-gradient(180deg, transparent, #000 15%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 15%, #000 70%, transparent); animation: contourDrift 30s ease-in-out infinite alternate; }
@keyframes contourDrift { to { transform: translate3d(-30px, 18px, 0) scale(1.04); } }

/* Manifesto that lights up word by word */
.manifesto { padding-block: clamp(80px, 14vw, 180px); }
.manifesto-text { margin: 0 auto; text-align: center; font-size: clamp(2.6rem, 8.2vw, 7.4rem); line-height: 1; font-weight: 800; letter-spacing: -0.045em; text-transform: uppercase; display: grid; gap: .06em; }
.ml { display: block; white-space: nowrap; }
.manifesto-sub { margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; color: var(--ink-2); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; }
.mw { color: var(--ink); transition: color .35s ease; }
.mw.accent { text-transform: none; font-size: 1.1em; }
.mw.accent.lit, html:not(.js) .mw.accent { color: var(--coral); }
.js .mw:not(.lit) { color: color-mix(in srgb, var(--ink) 16%, transparent); }

/* Giant moving text band with Otto in the middle */
.marquee-band { position: relative; padding-block: clamp(90px, 11vw, 150px); overflow: hidden; }
.marquee-row { overflow: hidden; white-space: nowrap; font-size: clamp(3rem, 10vw, 9rem); line-height: 1; font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase; }
.marquee-row + .marquee-row { margin-top: .08em; }
.marquee-serif { text-transform: none; color: var(--coral); }
.marquee-track { display: inline-flex; animation: marquee 38s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; animation-duration: 44s; }
.marquee-track span { display: inline-flex; align-items: center; gap: .35em; padding-right: .35em; }
.marquee-track i { font-style: normal; font-size: .4em; color: var(--amber); }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Otto cards dropped over the band. They fall in, tilt and settle when the band scrolls into view. */
.drop { position: absolute; left: var(--x); top: var(--y); width: clamp(96px, 11vw, 150px); aspect-ratio: 4 / 5; transform: translate(-50%, -50%) rotate(var(--r)); border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: var(--shadow-lg); display: grid; place-items: end center; overflow: hidden; transition: transform .8s cubic-bezier(.2,.9,.3,1.25) calc(var(--i) * .12s), opacity .4s ease calc(var(--i) * .12s); }
.drop img { width: 94%; margin-bottom: -6%; }
.drop-main { width: clamp(150px, 19vw, 250px); z-index: 2; }
.drop:hover { transform: translate(-50%, -54%) rotate(0deg) scale(1.05); transition-delay: 0s; transition-duration: .35s; z-index: 3; }
.js .marquee-band:not(.in-view) .drop { opacity: 0; transform: translate(-50%, -140%) rotate(calc(var(--r) * -2)); transition: none; }
@media (max-width: 640px) {
  .drop:not(.drop-main):nth-of-type(odd) { display: none; }
  .drop { width: 84px; }
  .drop-main { width: 140px; }
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Fanned deck of app screens: stacked until it scrolls in, then fans out. Hover lifts a card. */
.deck { position: relative; height: clamp(380px, 46vw, 560px); display: grid; place-items: center; margin-top: 8px; }
.deck-card { position: absolute; width: clamp(150px, 19vw, 240px); transform: translateX(calc(var(--o) * clamp(70px, 13vw, 190px))) translateY(calc(var(--a) * 22px)) rotate(calc(var(--o) * 7deg)); z-index: calc(10 - var(--a) * 2); transition: transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--a) * .06s); }
.deck-card:hover { transform: translateX(calc(var(--o) * clamp(70px, 13vw, 190px))) translateY(-18px) rotate(calc(var(--o) * 4deg)); z-index: 20; transition-duration: .35s; transition-delay: 0s; }
.js .deck:not(.in-view) .deck-card { transform: translateY(40px) rotate(0deg); }
@media (max-width: 640px) {
  .deck { height: 360px; }
  .deck-card { width: 150px; transform: translateX(calc(var(--o) * 52px)) translateY(calc(var(--a) * 16px)) rotate(calc(var(--o) * 8deg)); }
}

.deck-label { position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%); white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: .82rem; font-weight: 700; color: var(--ink-2); transition: opacity .4s ease .6s; }
.js .deck:not(.in-view) .deck-label { opacity: 0; transition: none; }
.deck { margin-bottom: 40px; }
@media (max-width: 640px) { .deck-label { display: none; } .deck { margin-bottom: 0; } }
@media (max-width: 640px) {
  .manifesto-text { font-size: clamp(2rem, 10.5vw, 3rem); gap: .2em; }
  .ml { white-space: normal; text-wrap: balance; }
}
.deck-details { margin-top: clamp(56px, 8vw, 96px); }
.deck-details-head { text-align: center; color: var(--ink-2); font-weight: 600; margin: 0 0 clamp(24px, 4vw, 40px); }


/* ---- 29 Oct round 3: nothing cut, softer edges, playful compare, goal picker and calls refreshed ---- */

/* Band text fades out at the screen edges instead of being sliced off. */
.marquee-row { -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }


/* Coloured sections fade into the page instead of starting on a hard line. */
.band { background: linear-gradient(180deg, var(--canvas) 0, var(--canvas-2) 140px, var(--canvas-2) calc(100% - 140px), var(--canvas) 100%); }

/* OttoPlate vs a strict diet: two cards tossed on the table, a "vs" badge between them, Otto peeking over. */
.why-compare-title { text-align: center; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; margin: clamp(56px, 8vw, 96px) 0 0; }
.why-compare-title em { color: var(--coral-text); }
.why-compare { position: relative; margin-top: clamp(80px, 9vw, 110px); align-items: center; gap: clamp(20px, 4vw, 48px); }
.why-ours { position: relative; transform: rotate(-2.5deg); z-index: 2; transition: transform .8s cubic-bezier(.2,.9,.3,1.25); }
.why-theirs { transform: rotate(2.5deg) scale(.96); filter: saturate(.6); transition: transform .8s cubic-bezier(.2,.9,.3,1.25) .1s; }
.why-ours:hover { transform: rotate(0) translateY(-6px); }
.why-theirs:hover { transform: rotate(0) scale(.98); }
.js .why-compare:not(.in-view) .why-ours { transform: translateX(-40px) rotate(-8deg); }
.js .why-compare:not(.in-view) .why-theirs { transform: translateX(40px) rotate(8deg) scale(.96); }
.why-peek { position: absolute; right: 18px; top: -78px; width: 104px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.2)); animation: bob 5s ease-in-out infinite; }
.why-vs { position: absolute; left: 50%; top: 50%; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-lg); font-family: ui-serif, "New York", Georgia, serif; font-style: italic; font-size: 1.5rem; color: var(--coral-text); transition: transform .6s cubic-bezier(.2,.9,.3,1.5) .5s; }
.js .why-compare:not(.in-view) .why-vs { transform: scale(0) rotate(-90deg); }
@media (max-width: 880px) {
  .why-vs { top: auto; bottom: auto; position: relative; left: auto; margin: -36px auto; }
  .why-ours { transform: rotate(-1.5deg); }
  .why-theirs { transform: rotate(1.5deg) scale(.97); }
  .why-peek { width: 84px; top: -60px; }
}

/* Goal picker, in the new style: centred serif heading, Otto on a glowing blob, gradient numbers. */
.cm-narrow .goal-picker { position: relative; overflow: hidden; text-align: center; justify-items: center; padding: clamp(32px, 5vw, 64px); background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--coral) 12%, var(--surface)), var(--surface) 70%); }
.cm-narrow .goal-picker::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/img/contours.svg") center / 140% auto no-repeat; opacity: .6; }
.cm-narrow .goal-picker > * { position: relative; z-index: 1; }
.cm-narrow .goal-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.04em; }
.cm-narrow .goal-head h2 em { color: var(--coral-text); }
.cm-narrow .goal-options { justify-self: center; }
.cm-narrow .goal-panel { grid-template-columns: 190px 1fr; text-align: left; width: 100%; max-width: 820px; }
.cm-narrow .goal-panel > img { width: 190px; padding: 14px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--amber) 40%, transparent), transparent 70%); }
.cm-narrow .goal-stats div, .variant-calm .cm-narrow .goal-stats div, .variant-calm .cm-narrow .goal-stats div:first-child { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); box-shadow: var(--shadow); border: 1px solid var(--line); }
.variant-calm .cm-narrow .goal-stats div:first-child dt { color: var(--ink-2); }
.cm-narrow .goal-stats dd { background: linear-gradient(120deg, var(--coral), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cm-narrow .goal-checkin, .cm-narrow .goal-note { justify-content: center; text-align: center; }
@media (max-width: 760px) { .cm-narrow .goal-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; } .cm-narrow .goal-panel > img { width: 130px; } }

/* 1-to-1 support, in the new style: the free call is the coral card, Otto on the phone peeks over it. */
#calls .call { border-radius: 30px; padding: clamp(26px, 3vw, 36px); }
#calls .call.featured { color: #fff; background: linear-gradient(155deg, var(--coral), var(--coral-deep)); box-shadow: 0 30px 60px -30px var(--coral); transform: rotate(-1.5deg); }
#calls .call.featured .muted, #calls .call.featured .meta, #calls .call.featured li { color: rgba(255,255,255,.9); }
#calls .call.featured .tag { background: rgba(255,255,255,.22); color: #fff; }
#calls .call.featured li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23E2502C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#calls .call.featured .btn { background: #fff; color: var(--coral-deep); box-shadow: none; }
#calls .call:not(.featured) { transform: rotate(1.5deg); }
#calls .calls-grid { position: relative; gap: clamp(20px, 3vw, 36px); padding-top: 40px; }
#calls .calls-grid::before { content: ""; position: absolute; left: 4%; top: -24px; width: 110px; height: 110px; z-index: 3; background: url("/img/otter-phone.webp") center / contain no-repeat; filter: drop-shadow(0 10px 16px rgba(0,0,0,.2)); animation: bob 5s ease-in-out infinite; }
#calls .disclaimer { margin-top: 32px; }
@media (max-width: 760px) { #calls .call.featured, #calls .call:not(.featured) { transform: none; } #calls .calls-grid::before { width: 84px; height: 84px; top: -10px; } }
.cm-narrow .goal-stats dd.goal-pace { font-size: clamp(1.05rem, 1.6vw, 1.25rem); padding-top: 8px; }
.why { overflow: hidden; }

/* Under the manifesto: two "no" chips and the coral "yes" chip, popping in one after another. */
.manifesto-chips { list-style: none; padding: 0; margin: clamp(32px, 5vw, 56px) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.manifesto-chips li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 12px; border-radius: 999px; font-weight: 700; font-size: clamp(.98rem, 1.4vw, 1.12rem); transition: opacity .45s ease calc(var(--i) * .18s + .1s), transform .55s cubic-bezier(.2,.9,.3,1.4) calc(var(--i) * .18s + .1s); }
.manifesto-chips li > span { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: .85rem; }
.chip-no { background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow); }
.chip-no > span { background: var(--tile); color: var(--ink-3); }
.chip-yes { color: #fff; background: linear-gradient(135deg, var(--coral), var(--coral-deep)); box-shadow: 0 14px 30px -14px var(--coral); }
.chip-yes > span { background: rgba(255,255,255,.95); color: var(--coral-deep); }
.chip-yes em { font-size: 1.1em; }
.js .manifesto-chips:not(.in-view) li { opacity: 0; transform: translateY(14px) scale(.9); transition: none; }
.chip-yes em.serif { color: #fff; }
.manifesto-chips li { font-size: clamp(1rem, 1.6vw, 1.25rem); padding: 14px 24px 14px 14px; }
.manifesto-chips li > span { width: 32px; height: 32px; }

/* Phones: the fanned screens stay inside the page, and the tab row fits longer (Romanian) labels. */
.deck-section { overflow: hidden; }
@media (max-width: 520px) {
  .tour-tabs { width: 100%; }
  .tour-tabs button { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: .86rem; }
  .tour-tabs button span { display: block; overflow-wrap: anywhere; }
}

/* ---- 29 Oct round 4: marker strokes that wipe away on hover, phone deck as a swipeable row ---- */
/* The stroke is revealed with a clip instead of a dash, so it's one continuous line at any width
   (the dash trick broke into pieces on wide screens because of the non-scaling stroke). */
.scribble path { stroke-dasharray: none; animation: none !important; transition: none !important; }
.scribble { clip-path: inset(-50% 0 -50% 0); transition: clip-path .5s cubic-bezier(.6,0,.3,1), opacity .4s ease, transform .5s cubic-bezier(.6,0,.3,1); }
.cm-hero .scribble { animation: scribbleIn 1s cubic-bezier(.6,0,.3,1) .9s both; }
.scribble-circle { clip-path: inset(-20% 0 -20% 0); transition: clip-path 1.1s cubic-bezier(.6,0,.3,1) .5s; }
.js .why-top:not(.in-view) .scribble-circle { clip-path: inset(-20% 100% -20% 0); transition: none; }
@keyframes scribbleIn { from { clip-path: inset(-50% 100% -50% 0); } }
.scribbled { cursor: default; -webkit-tap-highlight-color: transparent; }
/* Wiped away: the line leaves to the right, lifting and fading as it goes. */
.scribbled.erased .scribble { animation: none; clip-path: inset(-50% 0 -50% 100%); opacity: 0; transform: translateY(-0.12em) rotate(-1.5deg); transition: clip-path .55s cubic-bezier(.6,0,.3,1), opacity .5s ease .1s, transform .55s cubic-bezier(.6,0,.3,1); }
.scribbled.redraw .scribble { animation: scribbleIn .7s cubic-bezier(.6,0,.3,1) both; }
.scribbled.erased .scribble-circle { clip-path: inset(-20% 0 -20% 100%); }
.scribbled.redraw .scribble-circle { animation: circleIn .8s cubic-bezier(.6,0,.3,1) both; }
@keyframes circleIn { from { clip-path: inset(-20% 100% -20% 0); } }
@media (prefers-reduced-motion: reduce) { .scribble, .scribbled.erased .scribble { transition: none; animation: none !important; } }

@media (max-width: 640px) {
  .deck { display: flex; height: auto; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 8px -16px 0; padding: 18px 19vw 56px; place-items: initial; }
  .deck::-webkit-scrollbar { display: none; }
  .deck-card, .deck-card:hover, .js .deck:not(.in-view) .deck-card { position: relative; flex: 0 0 62vw; width: auto; transform: scale(.88); opacity: .55; z-index: auto;
    scroll-snap-align: center; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
  .deck-card.is-centre { transform: none; opacity: 1; }
  .deck-label { display: block; bottom: -42px; opacity: 0; transition: opacity .3s ease; }
  .deck-card.is-centre .deck-label { opacity: 1; }
  .js .deck:not(.in-view) .deck-card.is-centre { transform: translateY(30px); opacity: 0; }
}

/* ---- 29 Oct round 4: showcase cards line up, and the day card tells its own little story ---- */
/* Equal columns, and each card's step, title, picture and caption share rows, so the pictures are the same height
   and the captions start on one line. */
.showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase-grid .demo { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.showcase-grid .demo-visual { align-self: stretch; }
@media (max-width: 960px) { .showcase-grid { grid-template-columns: minmax(0, 1fr); } }

.day-visual { grid-template-columns: 128px minmax(0, 1fr); align-content: center; row-gap: 18px; }
.day-meal { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  font-weight: 600; font-size: .9rem; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.3,1.3); }
.day-meal img { width: 28px; height: 28px; flex: none; }
.day-meal b { margin-left: auto; color: var(--coral-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ring-label strong, .macro-num span { font-variant-numeric: tabular-nums; }
.demo .day-visual.nomeal .day-meal { opacity: 0; transform: translateY(-10px) scale(.96); transition: none; }
.demo .day-visual.before .ring-fill { stroke-dashoffset: var(--from); transition: none; }
.demo .day-visual.before .bar span { width: var(--w0); transition: none; }
.demo .day-visual .ring-fill { transition: stroke-dashoffset 1.2s cubic-bezier(.3,.7,.2,1); }
.demo .day-visual .bar span { transition: width 1.1s cubic-bezier(.3,.7,.2,1) var(--d); }
.js .animate:not(.in-view) .day-meal { opacity: 0; }

/* Check-in: the old number appears struck through only when the new one starts counting down. */
.week-visual.play .checkin-pop s { animation: wFade .3s ease both 4.4s; }
@media (max-width: 480px) {
  .day-visual { grid-template-columns: 92px minmax(0, 1fr); gap: 14px 12px; justify-items: stretch; padding: 14px; }
  .ring { width: 92px; }
  .ring-label strong { font-size: 1.2rem; }
  .ring-label span { font-size: .68rem; }
  .macros li { font-size: .78rem; }
  .day-meal { font-size: .85rem; }
}

/* ---- 29 Oct round 5: elastic hero underline with a cursor aura, background that drifts with the cursor ---- */
/* Room for the line to be pushed around without being clipped. */
.cm-hero .scribble { clip-path: inset(-600% -30% -600% -30%); }
@keyframes scribbleIn { from { clip-path: inset(-600% 100% -600% 0); } }
.cursor-aura { position: absolute; left: 0; top: 0; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, color-mix(in srgb, var(--coral) 30%, transparent) 0%, color-mix(in srgb, var(--amber) 14%, transparent) 45%, transparent 70%);
  opacity: 0; transition: opacity .35s ease; will-change: transform; }
.cursor-aura.on { opacity: 1; }
.cm-hero { --hx: 0; --hy: 0; }
.cm-hero::after { translate: calc(var(--hx) * -28px) calc(var(--hy) * -18px); transition: translate .8s cubic-bezier(.2,.8,.2,1); }
.cm-stage .pf-food { translate: calc(var(--px) * 26px) calc(var(--py) * 18px); transition: translate .6s cubic-bezier(.2,.8,.2,1); }
.cm-stage .cm-otter, .cm-stage .cm-hero-phone { translate: calc(var(--px) * -8px) calc(var(--py) * -6px); transition: translate .8s cubic-bezier(.2,.8,.2,1); }

/* Card 2: the numbers count up without changing width, so the macros never shift sideways. */
.macro-num span { display: inline-block; min-width: 3ch; text-align: right; }

/* ---- 30 Oct: How it works on phones. A wide phone cropped at the bottom instead of a tiny whole one (its width used to
   come from the leftover height, so Safari's bars shrank it), about half the scrolling, and dots to show how far along you are. ---- */
@media (max-width: 880px) {
  .story { height: calc((var(--n) - 1) * 50svh + 100svh); }
  .story-pin { grid-template-rows: auto minmax(0, 1fr) auto auto; row-gap: 12px; padding-bottom: 14px; }
  .story-phone { --w: min(72vw, 290px); width: var(--w); height: 100%; max-height: calc(var(--w) * 2.173); aspect-ratio: auto; align-self: start; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 82%, transparent); mask: linear-gradient(180deg, #000 82%, transparent); }
  .story-phone > img { inset: 7px 7px auto; height: auto; }
  .story-step { flex-flow: row wrap; justify-content: center; align-items: center; gap: 4px 10px; }
  .story-step .story-num { flex: none; }
  .story-step h3 { font-size: 1.3rem; margin: 0; max-width: calc(100% - 40px); }
  .story-step p { flex-basis: 100%; font-size: .95rem; line-height: 1.4; }
  .story-dots { display: flex; justify-content: center; gap: 6px; }
  .story-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line); transition: width .3s ease, background .3s ease; }
  .story-dots i.is-active { width: 22px; background: linear-gradient(90deg, var(--amber), var(--coral)); }
}
@media (max-width: 880px) { html:has([data-story]) { scroll-snap-type: none; } } /* phones land on a step through variants.js */
/* Short phones lose the small label, and a phone held sideways puts the screen beside the text. */
@media (max-width: 880px) and (max-height: 640px) {
  .story-head .eyebrow { display: none; }
  .story-pin { padding-top: 10px; row-gap: 10px; }
  .story-head h2 { font-size: 1.4rem; line-height: 1.15; }
  .story-step p { font-size: .9rem; }
}
@media (max-width: 880px) and (max-height: 480px) {
  .story-pin { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 24px; }
  .story-head { display: none; }
  .story-phone { --w: 180px; grid-column: 1; grid-row: 1 / -1; }
  .story-steps { grid-column: 2; grid-row: 1; align-self: center; }
  .story-dots { grid-column: 2; grid-row: 2; }
}