/* Fivebite — тёплая бумага, чернила, желток. Serif только для заголовков и больших чисел.
   Mobile-first: базовые стили — телефон, расширения — от 720px. Никаких внешних ресурсов. */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrumentserif-regular.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrumentserif-italic.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/instrumentsans-regular.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/instrumentsans-italic.woff2) format('woff2'); }

:root {
  --cream: #F4F1EA;
  --cream-2: #ECE7DD;
  --paper: #FFFDF8;
  --ink: #17170F;
  --ink-2: #43423B;
  --mute: #6E6C62;
  --hair: #E2DDD1;
  --yolk: #E2A115;
  --yolk-deep: #B8800A;
  --yolk-soft: #FBEFD0;
  --sage: #5F8A63;
  --sage-soft: #E3EDE2;
  --danger: #B5382F;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --shadow: 0 1px 2px rgba(23,23,15,.04), 0 8px 24px -12px rgba(23,23,15,.18);
  --shadow-lg: 0 2px 4px rgba(23,23,15,.05), 0 24px 48px -24px rgba(23,23,15,.28);
  --ease: cubic-bezier(.2,.7,.2,1);
  --pad: 20px;
  --maxw: 1120px;
  --app: 460px;
}
@media (min-width: 720px) { :root { --pad: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 18px/1.55 var(--sans); font-feature-settings: 'ss01', 'tnum' 0; -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { font-weight: 400; font-family: var(--serif); letter-spacing: -.015em; line-height: 1.02; text-wrap: balance; }
h1 em, h2 em, .em { font-style: italic; color: var(--yolk-deep); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.app { width: 100%; max-width: var(--app); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--yolk); }
.muted { color: var(--mute); }
.small { font-size: 16px; line-height: 1.45; }

/* ── бренд: пять точек ─────────────────────────────────────────────── */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 18px/1 var(--sans); letter-spacing: -.01em; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); display: block; }
.dots i:nth-child(5) { background: var(--yolk); }

/* ── кнопки ────────────────────────────────────────────────────────── */
.btn { --bg: var(--ink); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--bg); color: var(--fg); font-weight: 600; font-size: 17px; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--shadow); user-select: none; -webkit-tap-highlight-color: transparent; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0) scale(.99); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.yolk { --bg: var(--yolk); --fg: var(--ink); }
.btn.ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hair); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.wide { width: 100%; }
.btn .arr { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); font-weight: 500; }

/* ── шапка ─────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in srgb, var(--cream) 82%, transparent); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.top .cta { display: none; }
@media (min-width: 720px) { .top .cta { display: inline-flex; min-height: 44px; padding: 0 20px; font-size: 15px; } }

/* ── герой ─────────────────────────────────────────────────────────── */
.hero { padding: 24px 0 40px; }
.hero .wrap { display: grid; gap: 28px; }
.hero h1 { font-size: clamp(46px, 12.5vw, 64px); margin: 18px 0 16px; }
.hero .sub { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 34ch; }
.hero .act { margin-top: 26px; display: grid; gap: 14px; }
.notes { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--mute); font-size: 14px; }
.notes span { display: inline-flex; align-items: center; gap: 7px; }
.notes span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--yolk); }
.photo { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--cream-2); aspect-ratio: 4/5; box-shadow: var(--shadow-lg); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.chip { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255,253,248,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); animation: chip-in .9s var(--ease) .5s both; }
.chip .t { font: 600 12px/1 var(--sans); color: var(--mute); letter-spacing: .04em; }
.chip .f { font-weight: 600; font-size: 15px; margin-top: 3px; }
.chip .g { margin-left: auto; font: 400 28px/1 var(--serif); color: var(--ink); padding-left: 6px; }
.chip .ck { width: 34px; height: 34px; border-radius: 50%; background: var(--yolk-soft); display: grid; place-items: center; color: var(--yolk-deep); flex: none; }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .hero { padding: 40px 0 72px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 64px; align-items: center; }
  .hero h1 { font-size: clamp(64px, 6.6vw, 96px); margin: 22px 0 20px; }
  .hero .sub { font-size: 20px; }
  .hero .act { display: flex; align-items: center; gap: 22px; }
  .hero .act .btn { flex: none; white-space: nowrap; }
  .photo { max-width: 460px; justify-self: end; }
}

/* ── появление ─────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.on { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .08s; } .rv[data-d="2"] { transition-delay: .16s; } .rv[data-d="3"] { transition-delay: .24s; } .rv[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .chip { animation: none; } * { scroll-behavior: auto !important; } }

/* ── секции ────────────────────────────────────────────────────────── */
.sec { padding: 56px 0; }
.sec h2 { font-size: clamp(36px, 9vw, 48px); margin: 14px 0 14px; }
.sec .lead { color: var(--ink-2); font-size: 17px; max-width: 46ch; }
@media (min-width: 900px) { .sec { padding: 96px 0; } .sec h2 { font-size: clamp(48px, 5vw, 72px); } .sec .lead { font-size: 19px; } }

/* математика: число → пять укусов */
.math { background: var(--paper); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.math .wrap { display: grid; gap: 32px; }
.math .wrap > * { min-width: 0; }
.bites { display: grid; gap: 22px; padding: 26px 18px; border-radius: var(--r-lg); background: var(--cream); }
.bites .big { font: 400 clamp(72px, 22vw, 120px)/.9 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bites .big small { font-size: .38em; letter-spacing: 0; color: var(--mute); margin-left: 6px; }
.bites .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bites .eq { font: 400 28px/1 var(--serif); color: var(--mute); margin: 0 2px; }
.bite { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--hair); display: grid; place-items: center; font: 600 13px/1 var(--sans); letter-spacing: -.02em; transform: scale(.6); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease), background .3s; }
.on .bite { transform: none; opacity: 1; }
.on .bite:nth-child(2) { transition-delay: .1s; } .on .bite:nth-child(3) { transition-delay: .2s; } .on .bite:nth-child(4) { transition-delay: .3s; } .on .bite:nth-child(5) { transition-delay: .4s; } .on .bite:nth-child(6) { transition-delay: .5s; }
.on .bite.hot { background: var(--yolk-soft); border-color: var(--yolk); }
.bites .cap { color: var(--mute); font-size: 14px; }
@media (min-width: 900px) { .math .wrap { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .bites { padding: 40px 36px; } .bite { width: 64px; height: 64px; font-size: 15px; } }

/* как это работает */
.steps { display: grid; gap: 18px; margin-top: 32px; counter-reset: st; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--hair); }
.step::before { counter-increment: st; content: '0' counter(st); font: 400 40px/1 var(--serif); color: var(--yolk-deep); }
.step b { display: block; font-size: 19px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em; }
.step p { color: var(--ink-2); font-size: 17px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; } .step { grid-template-columns: 1fr; gap: 18px; padding-top: 26px; } .step::before { font-size: 56px; } }

/* день на плане */
.dayplan { background: var(--ink); color: var(--cream); }
.dayplan .eyebrow { color: var(--cream-2); }
.dayplan .eyebrow::before { background: var(--yolk); }
.dayplan h2 em { color: var(--yolk); }
.dayplan .wrap { display: grid; gap: 32px; }
.tl { display: grid; gap: 0; margin-top: 8px; border-radius: var(--r-lg); background: rgba(255,253,248,.06); padding: 8px 18px; }
.tl .slot { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,253,248,.1); }
.tl .slot:first-child { border-top: 0; }
.tl .th { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--cream-2); }
.tl .time { font: 600 12px/1 var(--sans); letter-spacing: .06em; color: rgba(244,241,234,.6); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.tl .food { font-size: 15px; font-weight: 500; }
.tl .food small { display: block; color: rgba(244,241,234,.6); font-weight: 400; font-size: 13px; margin-top: 2px; }
.tl .g { font: 400 30px/1 var(--serif); color: var(--yolk); font-variant-numeric: tabular-nums; }
.tl .tot { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 12px; border-top: 1px solid rgba(255,253,248,.2); font-weight: 600; }
.tl .tot b { font: 400 34px/1 var(--serif); color: #fff; }
@media (min-width: 900px) { .dayplan .wrap { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; } .tl { padding: 12px 28px; } }

/* честно */
.honest { display: grid; gap: 12px; margin-top: 28px; }
.card { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 22px; }
.card b { display: block; font-size: 18px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em; }
.card p { color: var(--ink-2); font-size: 16px; }
@media (min-width: 720px) { .honest { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1000px) { .honest { grid-template-columns: repeat(4, 1fr); margin-top: 44px; } }

/* финал */
.free .box { background: var(--yolk); color: var(--ink); border-radius: var(--r-xl); padding: 40px 24px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.free h2 { font-size: clamp(40px, 10vw, 56px); margin: 0; }
.free p { color: rgba(23,23,15,.75); max-width: 36ch; }
.free .btn { margin-top: 10px; }
@media (min-width: 900px) { .free .box { padding: 80px 40px; } .final h2 { font-size: clamp(56px, 6vw, 84px); } }

/* ── подвал ────────────────────────────────────────────────────────── */
.foot { padding: 32px 0 40px; border-top: 1px solid var(--hair); color: var(--mute); font-size: 15px; }
.foot .wrap { display: grid; gap: 14px; }
.foot .med { color: var(--ink-2); font-weight: 500; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { color: var(--mute); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ── воронка: экраны-приложение ────────────────────────────────────── */
.screen { padding: 12px 0 56px; }
body[data-page="quiz"] .screen { padding-bottom: 24px; }
body[data-page="quiz"] .foot { padding-bottom: 96px; }
.bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bar .app { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 60px; }
.bar .back { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; margin-left: -8px; visibility: hidden; }
.bar .back.on { visibility: visible; }
.bar .back:hover { background: var(--cream-2); }
.prog { display: flex; gap: 4px; }
.prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--hair); overflow: hidden; position: relative; }
.prog i::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.prog i.done::after { transform: none; }
.prog i.cur::after { background: var(--yolk); transform: scaleX(1); }
.bar .n { font: 600 12px/1 var(--sans); color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; }

.q { padding-top: 28px; }
.q h1 { font-size: clamp(36px, 9.6vw, 44px); margin-bottom: 8px; }
.q .hint { color: var(--mute); font-size: 15px; margin-bottom: 22px; }
.q.enter { animation: q-in .45s var(--ease) both; }
.q.leave { animation: q-out .25s var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes q-out { from { opacity: 1; } to { opacity: 0; transform: translateX(-16px); } }
.opts { display: grid; gap: 10px; margin-top: 22px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; min-height: 64px; border-radius: 18px; border: 1.5px solid var(--hair); background: var(--paper); transition: border-color .2s, background .2s, transform .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.opt:hover { border-color: var(--ink-2); }
.opt:active { transform: scale(.985); }
.opt .lb { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.opt .hn { display: block; font-weight: 400; color: var(--mute); font-size: 14px; margin-top: 2px; }
.opt .mk { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--hair); display: grid; place-items: center; flex: none; transition: background .2s, border-color .2s; }
.opt .mk svg { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s var(--ease); }
.opt.sel { border-color: var(--ink); background: #fff; }
.opt.sel .mk { background: var(--ink); border-color: var(--ink); color: #fff; }
.opt.sel .mk svg { opacity: 1; transform: none; }
.field { margin-top: 14px; display: grid; gap: 8px; }
.field label { font-size: 14px; color: var(--mute); font-weight: 500; }
.inp { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--hair); border-radius: 18px; background: var(--paper); padding: 0 18px; min-height: 64px; transition: border-color .2s; }
.inp:focus-within { border-color: var(--ink); }
.inp input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: 400 34px/1 var(--serif); letter-spacing: -.01em; padding: 0; -moz-appearance: textfield; }
.inp input::-webkit-outer-spin-button, .inp input::-webkit-inner-spin-button { -webkit-appearance: none; }
.inp input[type=time] { font: 500 22px/1 var(--sans); }
.inp input[type=email] { font: 500 18px/1.2 var(--sans); }
.inp .u { color: var(--mute); font-weight: 600; }
.unit { display: inline-flex; border-radius: 999px; background: var(--cream-2); padding: 3px; margin-left: auto; }
.unit button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mute); }
.unit button.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.note { margin-top: 10px; font-size: 14px; color: var(--mute); }
.times { display: grid; gap: 14px; margin-top: 22px; }
.err { color: var(--danger); font-size: 14px; margin-top: 10px; min-height: 1.4em; }

.dock { position: sticky; bottom: 0; z-index: 10; margin: 28px calc(-1 * var(--pad)) 0; padding: 12px var(--pad) calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--cream) 75%, transparent); }
.dock .btn { width: 100%; }

/* результат */
.res { padding-top: 24px; }
.res h1 { font-size: clamp(30px, 8vw, 36px); margin: 12px 0 0; }
.num { font: 400 clamp(112px, 34vw, 150px)/.85 var(--serif); letter-spacing: -.04em; margin: 8px 0 0; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.num small { font-size: .3em; letter-spacing: 0; color: var(--mute); }
.res .portions { font-size: 19px; font-weight: 500; margin-top: 10px; letter-spacing: -.01em; }
.res .range { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--yolk-soft); color: var(--ink-2); font-size: 14px; }
.res .tl { background: var(--paper); border: 1px solid var(--hair); color: var(--ink); margin-top: 20px; }
.res .tl .slot { border-color: var(--hair); }
.res .tl .time, .res .tl .food small { color: var(--mute); }
.res .tl .g { color: var(--yolk-deep); }
.res .tl .tot { border-color: var(--hair); }
.res .tl .tot b { color: var(--ink); }
.res .lbl { margin-top: 32px; }
.res .sub { color: var(--ink-2); font-size: 16px; margin-top: 12px; }
.mail { margin-top: 24px; padding: 24px 20px 22px; border-radius: var(--r-lg); background: var(--ink); color: var(--cream); }
.mail h2 { font-size: 34px; margin-bottom: 8px; }
.mail p { color: rgba(244,241,234,.7); font-size: 15px; }
.mail .inp { margin-top: 18px; background: rgba(255,253,248,.08); border-color: rgba(255,253,248,.18); color: #fff; }
.mail .inp:focus-within { border-color: var(--yolk); }
.mail .inp input { color: #fff; }
.mail .inp input::placeholder { color: rgba(244,241,234,.4); }
.mail .btn { margin-top: 18px; }
.mail .err { color: #F2A79F; }

/* цена */
.price { padding-top: 24px; }
.price h1 { font-size: clamp(38px, 10vw, 46px); margin: 12px 0 10px; }
.price .sub { color: var(--ink-2); font-size: 16px; }
.feat { display: grid; gap: 10px; margin-top: 24px; }
.feat li { list-style: none; display: flex; gap: 12px; align-items: center; font-weight: 500; font-size: 16px; }
.feat li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--yolk); flex: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--cream); }
.pill.yolk { background: var(--yolk-soft); color: var(--yolk-deep); }
.pill.sage { background: var(--sage-soft); color: var(--sage); }
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.pr { padding: 14px; border-radius: 16px; background: var(--cream); }
.pr .l { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.pr .v { font: 400 44px/1 var(--serif); margin-top: 6px; letter-spacing: -.02em; }
.pr .v small { font: 500 14px/1 var(--sans); color: var(--mute); letter-spacing: 0; }
.pr.found { background: var(--ink); color: #fff; }
.pr.found .l { color: var(--yolk); }
.pr.reg .v { text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; color: var(--mute); }

/* спасибо */
.thanks { padding-top: 40px; text-align: center; display: grid; justify-items: center; gap: 16px; }
.thanks .dots.big i { width: 14px; height: 14px; animation: pop .5s var(--ease) both; }
.thanks .dots.big i:nth-child(2) { animation-delay: .1s } .thanks .dots.big i:nth-child(3) { animation-delay: .2s } .thanks .dots.big i:nth-child(4) { animation-delay: .3s } .thanks .dots.big i:nth-child(5) { animation-delay: .4s }
@keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }
.thanks h1 { font-size: clamp(44px, 12vw, 56px); }
.thanks .body { color: var(--ink-2); max-width: 32ch; font-size: 17px; }
.thanks .nx { text-align: left; width: 100%; margin-top: 12px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--hair); display: grid; gap: 10px; }
.thanks .nx ol { padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); font-size: 15px; }

/* план */
.planpg { padding-top: 24px; }
.planpg h1 { font-size: clamp(38px, 10vw, 46px); margin: 10px 0 8px; }
.planpg .sub { color: var(--ink-2); font-size: 15px; }
.planpg .sum { display: flex; gap: 12px; align-items: baseline; margin-top: 18px; }
.planpg .sum b { font: 400 56px/1 var(--serif); letter-spacing: -.02em; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 22px calc(-1 * var(--pad)) 0; padding: 0 var(--pad) 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; border: 1.5px solid var(--hair); background: var(--paper); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 14px; }
.tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.planpg .day { margin-top: 16px; }
.planpg .day[hidden] { display: none; }
.planpg .tl { background: var(--paper); border: 1px solid var(--hair); color: var(--ink); }
.planpg .tl .slot { border-color: var(--hair); }
.planpg .tl .time, .planpg .tl .food small { color: var(--mute); }
.planpg .tl .g { color: var(--yolk-deep); }
.planpg .tl .tot { border-color: var(--hair); }
.planpg .tl .tot b { color: var(--ink); }
.planpg .dh { display: none; font: 400 30px/1 var(--serif); margin: 26px 0 10px; }
.planpg .tools { display: flex; gap: 10px; margin-top: 22px; }
.planpg .msg { margin-top: 24px; padding: 20px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--hair); display: grid; gap: 14px; justify-items: start; }
@media print {
  .bar, .top, .tools, .tabs, .foot nav, .dock { display: none !important; }
  body { background: #fff; }
  .planpg .day[hidden] { display: block !important; }
  .planpg .dh { display: block; }
  .tl { break-inside: avoid; border: 1px solid #ccc; }
}

/* юридические */
.legal { padding: 24px 0 64px; max-width: 680px; }
.legal h1 { font-size: clamp(40px, 10vw, 56px); margin: 10px 0 24px; }
.legal h2 { font-size: 28px; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--ink-2); font-size: 16px; }
.legal p { margin: 0 0 14px; }
.legal ul { padding-left: 20px; margin: 0 0 14px; }
.draft { padding: 12px 14px; border-radius: 12px; background: var(--yolk-soft); color: var(--yolk-deep); font-size: 14px; font-weight: 500; margin-bottom: 20px; }

/* полоса «пять укусов» из фото */
.strip { display: flex; gap: 8px; margin-top: 28px; }
.strip img { width: 0; flex: 1; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.strip.rv img { transform: scale(.7); opacity: 0; transition: transform .6s var(--ease), opacity .6s; }
.strip.rv.on img { transform: none; opacity: 1; }
.strip.rv.on img:nth-child(2) { transition-delay: .08s } .strip.rv.on img:nth-child(3) { transition-delay: .16s } .strip.rv.on img:nth-child(4) { transition-delay: .24s } .strip.rv.on img:nth-child(5) { transition-delay: .32s }

/* ── микро-анимации ─────────────────────────────────────────────────
   Всё на CSS, коротко и мягко; при prefers-reduced-motion выключается разом. */
body { animation: page-in .45s var(--ease) both; }
body.leaving { opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* заголовок героя — по словам */
.words .w { display: inline-block; animation: w-in .8s var(--ease) both; animation-delay: calc(.12s + var(--i, 0) * .055s); }
.words .w.em { font-style: italic; color: var(--yolk-deep); }
@keyframes w-in { from { opacity: 0; transform: translateY(.35em) rotate(1.5deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.hero .eyebrow, .hero .sub, .hero .act, .hero .photo { animation: rise .8s var(--ease) both; }
.hero .eyebrow { animation-delay: .05s } .hero .sub { animation-delay: .45s } .hero .act { animation-delay: .58s } .hero .photo { animation-delay: .3s }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* фото: медленный наезд и лёгкий отклик на курсор */
.photo img { transform: scale(1.06); animation: settle 1.8s var(--ease) .2s both; transition: transform .8s var(--ease); }
@keyframes settle { to { transform: scale(1); } }
.photo:hover img { transform: scale(1.03); }
.chip .ck svg { animation: pop .5s var(--ease) 1.1s both; }

/* точки логотипа заполняются по очереди при загрузке */
.logo .dots i { animation: dot-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * .07s); }
.logo .dots i:nth-child(1) { --i: 0 } .logo .dots i:nth-child(2) { --i: 1 } .logo .dots i:nth-child(3) { --i: 2 } .logo .dots i:nth-child(4) { --i: 3 } .logo .dots i:nth-child(5) { --i: 4 }
@keyframes dot-in { from { transform: scale(0); } 70% { transform: scale(1.3); } to { transform: scale(1); } }
.logo:hover .dots i:nth-child(5) { animation: dot-bounce .6s var(--ease); }
@keyframes dot-bounce { 40% { transform: translateY(-4px); } }

/* шапка: тень появляется при прокрутке */
.top, .bar { transition: box-shadow .3s ease; }
.top.scrolled, .bar.scrolled { box-shadow: 0 1px 0 var(--hair), 0 10px 30px -18px rgba(23,23,15,.25); }

/* кнопки: мягкое свечение у жёлтой, блик у тёмной */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); z-index: -1; }
.btn:hover::after { transform: translateX(120%); }
.btn.yolk:hover { box-shadow: 0 8px 28px -10px rgba(226,161,21,.7); }

/* карточки и шаги */
.card { transition: transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease); }
.card:hover { transform: translateY(-3px); border-color: var(--ink-2); box-shadow: var(--shadow-lg); }
.step::before { display: inline-block; transition: transform .4s var(--ease); }
.step:hover::before { transform: translateX(4px); }

/* строки плана появляются одна за другой */
.tl .slot { animation: row-in .55s var(--ease) both; animation-delay: calc(.1s + var(--i, 0) * .07s); }
.tl .g { display: inline-block; animation: g-pop .6s var(--ease) both; animation-delay: calc(.25s + var(--i, 0) * .07s); }
.tl .tot { animation: row-in .55s var(--ease) .5s both; }
@keyframes row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes g-pop { from { opacity: 0; transform: scale(.7); } 70% { transform: scale(1.08); } to { opacity: 1; transform: none; } }
.dayplan .tl .slot, .dayplan .tl .g, .dayplan .tl .tot { animation-play-state: paused; }
.dayplan .tl.on .slot, .dayplan .tl.on .g, .dayplan .tl.on .tot { animation-play-state: running; }

/* квиз: варианты выезжают по очереди, реагируют на наведение и нажатие */
.opt, .optw, .times .field { animation: opt-in .5s var(--ease) both; animation-delay: calc(.08s + var(--i, 0) * .06s); }
@keyframes opt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.opt { transition: border-color .2s, background .2s, transform .25s var(--ease), box-shadow .25s var(--ease); }
.opt:hover { transform: translateX(3px); box-shadow: var(--shadow); }
.opt.sel { animation: sel .35s var(--ease); }
@keyframes sel { 50% { transform: scale(.985); } }
.opt .mk { transition: background .2s, border-color .2s, transform .3s var(--ease); }
.opt.sel .mk { transform: scale(1.1); }
.prog i.cur::after { animation: prog-glow 1.6s ease-in-out infinite alternate; }
@keyframes prog-glow { from { opacity: .75; } to { opacity: 1; } }
.inp { transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease); }
.inp:focus-within { box-shadow: 0 0 0 4px rgba(23,23,15,.06); }
.mail .inp:focus-within { box-shadow: 0 0 0 4px rgba(226,161,21,.18); }
.unit button { transition: background .2s, color .2s, box-shadow .2s; }

/* результат: число, подпись и бейджи */
.num { animation: num-in .9s var(--ease) both; }
@keyframes num-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.res .portions, .res .range, .res .sent { animation: rise .7s var(--ease) both; }
.res .portions { animation-delay: .5s } .res .range { animation-delay: .6s } .res .sent { animation-delay: .7s }
.res .lbl, .res .next { animation: rise .7s var(--ease) .8s both; }
@keyframes gate-out { to { opacity: 0; transform: translateY(-10px); } }
.mail { animation: rise .7s var(--ease) .15s both; }

/* цена: пилюли, карточки цены, кнопка */
.pill { animation: pill-in .5s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * .1s); }
@keyframes pill-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.pr { transition: transform .35s var(--ease); }
.pr.found { animation: found-glow 2.4s ease-in-out infinite alternate; }
@keyframes found-glow { from { box-shadow: 0 0 0 0 rgba(226,161,21,0); } to { box-shadow: 0 8px 30px -10px rgba(226,161,21,.55); } }
.pr.reg .v { text-decoration-color: transparent; animation: strike .6s ease .9s both; }
@keyframes strike { to { text-decoration-color: var(--danger); } }
.feat li { animation: row-in .5s var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * .07s); }
.feat li:nth-child(1) { --i: 0 } .feat li:nth-child(2) { --i: 1 } .feat li:nth-child(3) { --i: 2 } .feat li:nth-child(4) { --i: 3 }

/* спасибо */
.thanks h1, .thanks .body, .thanks .nx, .thanks .btn { animation: rise .7s var(--ease) both; }
.thanks h1 { animation-delay: .45s } .thanks .body { animation-delay: .55s } .thanks .nx { animation-delay: .65s } .thanks .btn { animation-delay: .75s }

/* подвал: подчёркивание выезжает, бренд с точками */
.foot a { position: relative; }
.foot a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.foot a:hover::after { transform: scaleX(1); }
.foot .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; font-size: 15px; letter-spacing: -.01em; }

/* план: вкладки */
.tabs button { transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.tabs button:hover { transform: translateY(-1px); }
.planpg .day { animation: rise .45s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  body, .words .w, .hero .eyebrow, .hero .sub, .hero .act, .hero .photo, .photo img, .chip .ck svg, .logo .dots i, .tl .slot, .tl .g, .tl .tot,
  .opt, .optw, .times .field, .num, .res .portions, .res .range, .res .sent, .res .lbl, .res .next, .mail, .teaser, .pill, .pr.found, .pr.reg .v,
  .feat li, .thanks h1, .thanks .body, .thanks .nx, .thanks .btn, .planpg .day, .prog i.cur::after, .opt.sel { animation: none !important; }
  .photo img { transform: none; }
  .pr.reg .v { text-decoration-color: var(--danger); }
  .btn::after { display: none; }
  body.leaving { opacity: 1; transform: none; }
}

/* ── оффер плана за $9 ─────────────────────────────────────────────── */
.faq { margin-top: 40px; }
.faq h2 { font-size: 32px; margin-bottom: 8px; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq .pl { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--hair); transition: transform .3s var(--ease), background .2s; }
.faq .pl::before, .faq .pl::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.faq .pl::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
.faq details[open] .pl { transform: rotate(45deg); background: var(--yolk-soft); border-color: var(--yolk); }
.faq p { padding: 0 0 18px; color: var(--ink-2); font-size: 17px; animation: rise .35s var(--ease) both; }

/* ── после оплаты ──────────────────────────────────────────────────── */
@keyframes dot-wave { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }

/* план: мягкая замена под порцией */

/* ── шапка: вход для купивших ─────────────────────────────────────── */
.topnav { display: flex; align-items: center; gap: 18px; }

/* ── что внутри плана: страницы PDF ───────────────────────────────── */

/* ── мой план ─────────────────────────────────────────────────────── */

/* таблицы в юридических и справочных страницах */
.legal .scroll { overflow-x: auto; margin: 0 0 18px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 520px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.legal th { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); }

/* для кого: строка над первым экраном */
.hero .eyebrow { display: flex; }
.hero .for { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 8px 14px 8px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--hair); font-size: 13px; font-weight: 600; color: var(--ink-2); animation: rise .7s var(--ease) both; }
.hero .for .dots i { width: 5px; height: 5px; }

/* ══ Вариант дизайна «bold»: крупно, контрастно, без анимаций ═══════════════════════════════════
   Гипотеза для 65+ (IDEA-senior-design.md). Только оформление: текст, квиз, цена и оплата те же.
   Включается атрибутом <html data-d="bold">; классический вариант этот слой не задевает. */
  --serif: var(--sans);
  --ink: #111109; --ink-2: #26251E; --mute: #3A3932; --hair: #B9B3A5;
  --yolk-deep: #6A4805; --sage: #2F5733; --danger: #8E2A23;
}

/* кнопки: во всю ширину, высокие, без эффектов */

/* шапка */

/* первый экран: заголовок, строка и кнопка видны без прокрутки */

/* секции лендинга */

/* день на плане и таймлайны */

/* квиз: один вопрос, большие карточки, прогресс словами */

/* результат и почта */

/* оффер и вопросы */

/* после оплаты, план, мой план, спасибо */

/* юридические страницы и подвал */

@media (min-width: 900px) {
}

/* переключатель дизайна — только в превью-сборках: статичная полоса над шапкой, ничего не закрывает */

/* ── длинный квиз: блок над вопросом, «почему спрашиваем» ─────────── */
.blk { margin: 22px 0 -18px; }
.whyq { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px dashed var(--hair); color: var(--mute); font-size: 14px; line-height: 1.45; }
.whyq::before { content: 'Why we ask · '; font-weight: 600; color: var(--ink-2); }

/* ── результат: чем ответы изменили план ───────────────────────────── */
.why { margin-top: 22px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--sage-soft); border: 1px solid #C9DCC9; }
.why ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.why li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.why li::before { content: ''; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--sage); }
.why .eyebrow { color: var(--sage); }
.why .eyebrow::before { background: var(--sage); }

/* ── первый экран: кнопка видна сразу ────────────────────────────────────────────────
   Подзаголовок и кнопка проявлялись с задержкой 0,6 с и длились 0,8 с, вся страница стартовала
   с затухания — во встроенных браузерах кнопку не видно первые секунды. Анимируется только заголовок, коротко. */
body[data-page="landing"] { animation: none; }
.hero .eyebrow, .hero .sub, .hero .act, .hero .for { animation: none; }
.words .w { animation-duration: .45s; animation-delay: calc(var(--i, 0) * .03s); }

/* ── первый экран с вопросом вместо кнопки (сплит data-h) ─────────────────── */
/* переключатель превью: три группы, переносится на узком экране; активные варианты подсвечены */

/* квиз: без счётчика «N of M» — длину не подчёркиваем, остаётся только полоска прогресса */
.bar .n { display: none; }
.bar .app { grid-template-columns: 44px 1fr 44px; }

/* ── приложение: кнопки магазина, экраны, возможности ───────────────── */
.stores { display: grid; gap: 12px; width: 100%; max-width: 430px; }
.store-btn { min-height: 62px; padding: 10px 22px; }
.store-btn > span { display: grid; gap: 3px; width: 100%; text-align: center; }
.store-btn small { font-weight: 500; font-size: 14px; opacity: .74; }
.badge-link { display: inline-flex; align-self: start; border-radius: 10px; }
.badge-link img { width: 208px; height: auto; }
.stores .plus { color: var(--mute); margin-top: 2px; }
.stores .inapp { margin-top: 2px; padding: 12px 14px; border-radius: 14px; background: var(--yolk-soft); color: var(--ink-2); }
.stores .inapp .link { color: var(--ink); font-weight: 600; }
.test-link { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid var(--yolk); }
.test-link .arr { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.test-link:hover .arr { transform: translateX(3px); }
@media (min-width: 900px) { .hero .act { display: grid; justify-items: start; gap: 20px; } .hero .act .btn { white-space: normal; } }

/* три экрана приложения */
.shots { background: var(--paper); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.shots-row { display: flex; gap: 16px; margin: 28px calc(-1 * var(--pad)) 0; padding: 8px var(--pad) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shots-row::-webkit-scrollbar { display: none; }
.shots-row figure { flex: 0 0 70%; max-width: 280px; margin: 0; scroll-snap-align: center; }
.shots-row img { width: 100%; height: auto; border-radius: 24px; border: 1px solid var(--hair); background: var(--cream); box-shadow: var(--shadow-lg); }
.shots-row figcaption { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--ink-2); text-align: center; text-wrap: balance; }
@media (min-width: 900px) { .shots-row { justify-content: center; overflow: visible; gap: 32px; } .shots-row figure { flex: 0 0 280px; } }

/* что умеет приложение */
.feat-grid { display: grid; gap: 12px; margin-top: 28px; }
.feat-grid .card ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 9px; }
.feat-grid .card li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.feat-grid .card li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--yolk); }
@media (min-width: 720px) { .feat-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1100px) { .feat-grid { grid-template-columns: repeat(4, 1fr); align-items: start; } }

/* бесплатный тест и вопросы на главной */
.free .box .eyebrow { color: rgba(23,23,15,.72); }
.free .box .eyebrow::before { background: var(--ink); }
.faq-sec h2 { font-size: clamp(36px, 9vw, 48px); }
.faq-sec .faq { margin-top: 20px; max-width: 760px; }

/* результат: блок с кнопками приложения */
.res .swap-note { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.getapp { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hair); }
.getapp h2 { font-size: clamp(32px, 8.4vw, 40px); margin-bottom: 8px; }
.getapp .sub { color: var(--ink-2); font-size: 16px; margin-bottom: 20px; }
.getapp .stores { max-width: none; }

/* ── лист ожидания: окно поверх страницы ────────────────────────────── */
.wl { position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center; }
.wl-back { position: absolute; inset: 0; background: rgba(23,23,15,.45); animation: fade-in .25s var(--ease) both; }
.wl-box { position: relative; width: 100%; max-width: 470px; max-height: 92dvh; overflow-y: auto; background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 28px var(--pad) calc(26px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-lg); animation: sheet-up .3s var(--ease) both; }
.wl-x { position: absolute; right: 12px; top: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--cream-2); display: grid; place-items: center; color: var(--ink-2); }
.wl-x:hover { background: var(--hair); color: var(--ink); }
.wl-box h2 { font-size: clamp(28px, 7.4vw, 34px); margin: 12px 0 8px; padding-right: 48px; line-height: 1.06; }
.wl-box .sub { color: var(--ink-2); font-size: 17px; }
.wl-f { margin-top: 20px; display: grid; }
.wl-f .inp { background: var(--cream); }
.wl-f .inp input { font: 500 18px/1.2 var(--sans); }
.wl-f .consent { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.wl-f .consent a { color: var(--ink); font-weight: 600; }
#wl-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 10px 0 4px; }
#wl-done h2 { padding-right: 0; }
#wl-done .btn { margin-top: 12px; width: 100%; }
.dots.big i { width: 10px; height: 10px; }
body.wl-open { overflow: hidden; }
@keyframes sheet-up { from { transform: translateY(26px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 720px) { .wl { place-items: center; } .wl-box { border-radius: var(--r-xl); animation: rise .3s var(--ease) both; } }
@media (prefers-reduced-motion: reduce) { .wl-box, .wl-back { animation: none; } }