/* 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; }