/* Taylr beta landing page. Built from the app's approved v2 system
   (codex-prototype/design/customer-journey-v2 + walkthrough.html values):
   Mist ground, white surfaces (r24–25, soft shadow), Sora 700 headings, cobalt pill actions,
   pale-cobalt selection, Lucide icons, Ink pill navigation and Ink workout screens. */

:root {
  --bg: var(--taylr-mist); --paper: #FFFFFF; --text: var(--taylr-ink); --muted: var(--taylr-slate-500); --line: var(--taylr-slate-200); --tint: var(--taylr-cobalt-50);
  --sel: var(--taylr-cobalt-100); --sel-line: var(--taylr-cobalt-200); --cobalt: var(--taylr-cobalt-500); --cobalt-600: var(--taylr-cobalt-600); --ink-800: var(--taylr-ink-800);
  --shadow: 0 7px 22px #0b102009; --shadow-sm: 0 3px 10px #0b10200a;
}
body { background: var(--bg); color: var(--text); font-size: 16px; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
[data-lucide], .lucide { width: 18px; height: 18px; stroke-width: 1.8; flex: none; }

/* Buttons (walkthrough .primary / .secondary) */
.btn-p, .btn-s, .btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; font: 600 15px Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn-p { background: var(--cobalt); color: #fff; box-shadow: 0 5px 12px #2f5bff22; }
.btn-p:hover { background: var(--cobalt-600); }
.btn-s { background: var(--paper); color: var(--text); box-shadow: 0 3px 13px #0b10200d; border: 1px solid #fff; }
.btn-s:hover { box-shadow: 0 5px 18px #0b102014; }
.btn-white { background: #fff; color: var(--text); }
.btn-p:active, .btn-s:active, .btn-white:active { transform: scale(.985); }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn-p [data-lucide], .btn-p .lucide, .btn-white .lucide { transition: transform .2s; }
.btn-p:hover .lucide, .btn-white:hover .lucide { transform: translateX(3px); }

/* Type */
h1, h2, h3, .section-title { font-family: Sora, system-ui, sans-serif; font-weight: 700; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt-600); }
.eyebrow.dark { color: var(--taylr-cobalt-300); }
.section-title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; }
.section-title.light { color: #fff; }
.section-lead { margin: 18px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--muted); max-width: 34em; }
.section-lead.light { color: var(--taylr-slate-300); }
.section { padding: clamp(72px, 9vw, 128px) 0; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(244,246,250,.8); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.nav.scrolled { border-bottom-color: #0b10200f; }
.nav-inner { display: flex; align-items: center; gap: 22px; height: 72px; }
.nav-logo img { height: 34px; width: auto; display: block; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a, .nav-login { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-links a:hover, .nav-login:hover { color: var(--text); }
.nav-login { color: var(--cobalt-600); font-weight: 600; margin-left: auto; }
.nav-cta { min-height: 44px; padding: 0 20px; }

/* Hero */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 8px 14px 8px 12px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 500; }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px var(--sel); }
.hero-title { font-size: clamp(46px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.05em; }
.hero-sub { margin: 16px 0 0; font-size: clamp(19px, 1.8vw, 23px); color: var(--muted); }
.hero-lead { margin: 22px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 31em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; color: var(--muted); }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts .lucide { color: var(--cobalt); width: 17px; height: 17px; }

.hero-visual { position: relative; min-height: 600px; }
.hero-photo { position: absolute; inset: 0 0 6% 16%; border-radius: 25px; background: var(--taylr-slate-200) url(../assets/photos/hero-tying-shoes.jpg) 60% 62% / cover no-repeat; box-shadow: var(--shadow); }
.phone { margin: 0; background: #161923; border-radius: 46px; padding: 7px; box-shadow: 0 22px 55px #0b102030, 0 2px 5px #0b10202a; }
.phone img { display: block; width: 100%; height: auto; border-radius: 39px; }
.hero-phone { position: absolute; left: 0; bottom: 0; width: min(300px, 46%); animation: float 9s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.learning-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 21px; padding: 14px 18px 14px 14px; box-shadow: 0 16px 40px #0b10201f; }
.learning-row b { display: block; font-size: 14px; font-weight: 600; }
.learning-row small { display: block; font-size: 12.5px; color: var(--muted); }
.learning-icon { width: 36px; height: 40px; display: grid; place-items: center; background: var(--tint); color: var(--cobalt); border-radius: 12px; }
.float-learn { position: absolute; right: -8px; top: 9%; animation: pop .7s cubic-bezier(.2,.9,.3,1.2) .9s both; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.95); } }
.visual-note { margin-top: 14px; font-size: 12px; color: var(--taylr-slate-400); text-align: right; }

/* How it works */
#how { background: var(--paper); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.step { background: var(--bg); border-radius: 25px; padding: 22px 22px 28px; }
.step-ui { background: var(--paper); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); display: grid; gap: 9px; min-height: 236px; align-content: start; }
.ui-title { margin: 0 0 4px; font: 700 17px Sora, sans-serif; letter-spacing: -.04em; }
.ui-option { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 0 12px; border-radius: 15px; border: 1px solid transparent; background: var(--paper); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 500; }
.ui-option span:not(.ui-check):not(.ui-radio) { flex: 1; }
.ui-option.sel { background: var(--sel); border-color: var(--sel-line); }
.ui-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--taylr-slate-300); display: grid; place-items: center; }
.ui-check .lucide { width: 12px; height: 12px; stroke-width: 3; color: #fff; }
.sel .ui-check { background: var(--cobalt); border-color: var(--cobalt); }
.ui-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--taylr-slate-300); flex: none; }
.sel .ui-radio { border: 5px solid var(--cobalt); }
.ui-rows > div { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--taylr-slate-200); font-size: 14px; font-weight: 500; }
.ui-rows > div:last-child { border-bottom: 0; }
.ui-rows .chev { margin-left: auto; color: var(--muted); width: 16px; height: 16px; }
.ui-note { margin: 4px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ui-note .lucide { color: var(--cobalt); width: 15px; height: 15px; stroke-width: 2.4; }
.step-n { margin: 24px 0 0; font: 600 14px Sora, sans-serif; color: var(--cobalt); }
.step h3 { margin-top: 6px; font-size: 26px; }
.step > p:last-child { margin: 8px 0 0; color: var(--muted); line-height: 1.55; }

/* People mosaic */
.mosaic { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 14px; }
.mosaic figure { position: relative; margin: 0; border-radius: 25px; overflow: hidden; background: var(--taylr-slate-200); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.mosaic figure:hover img { transform: scale(1.03); }
.m1 { grid-row: span 2; } .m1 img { object-position: 50% 40%; }
.m2 img { object-position: 50% 30%; } .m3 img { object-position: 50% 22%; } .m4 img { object-position: 50% 40%; }
.m5 img { object-position: 50% 45%; }
.mosaic figcaption { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 11px; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-sm); }
.mosaic figcaption .lucide { color: var(--cobalt); width: 17px; height: 17px; }

/* Adapt (Ink) */
.adapt { background: var(--taylr-ink); color: #fff; position: relative; overflow: hidden; }
.adapt::before { content: ""; position: absolute; right: -10%; top: -30%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(47,91,255,.25), transparent 70%); pointer-events: none; }
.adapt-grid { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: clamp(40px, 7vw, 110px); align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chip { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--taylr-ink-600); background: var(--ink-800); color: var(--taylr-slate-300); font: 500 15px Inter, sans-serif; cursor: pointer; transition: all .18s; }
.chip:hover { color: #fff; border-color: var(--taylr-slate-500); }
.chip[aria-checked="true"] { background: var(--taylr-mist); color: var(--text); border-color: var(--taylr-mist); }
.adapt-note { margin: 20px 0 0; font-size: 13px; color: var(--taylr-slate-400); }

.preview { background: var(--paper); color: var(--text); border-radius: 30px; padding: 16px 16px 20px; display: grid; gap: 12px; box-shadow: 0 40px 80px -30px #000c; }
.preview-photo { position: relative; height: 190px; border-radius: 22px; background: var(--taylr-slate-200) url(../assets/photos/senior-man-squat.jpg) 50% 34% / cover no-repeat; }
.preview-pill { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 12.5px; font-weight: 500; }
.preview-kicker { margin: 4px 4px 0; font-size: 12.5px; color: var(--muted); }
.preview-title { margin: -6px 4px 0; font: 700 24px Sora, sans-serif; letter-spacing: -.045em; }
.notice { margin: 0; display: flex; gap: 9px; align-items: center; padding: 11px 13px; border-radius: 14px; background: var(--tint); font-size: 13.5px; line-height: 1.45; }
.notice .lucide { color: var(--cobalt); }
.preview-rows { display: grid; }
.p-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--taylr-slate-200); animation: rowIn .4s cubic-bezier(.2,.8,.2,1) both; }
.p-row:last-child { border-bottom: 0; }
.p-row .thumb { width: 48px; height: 48px; border-radius: 12px; background: var(--taylr-slate-200) center/cover no-repeat; flex: none; }
.p-row b { display: block; font-size: 14.5px; font-weight: 600; }
.p-row small { display: block; font-size: 12.5px; color: var(--muted); }
.p-row small.changed { color: var(--cobalt-600); font-weight: 500; }
.p-row .lucide { margin-left: auto; color: var(--muted); }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
.preview-btn { width: 100%; cursor: default; }
.preview-why { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); }
.preview-why .lucide { width: 15px; height: 15px; }

/* Progress */
.progress-grid { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.progress-phone { width: min(320px, 100%); justify-self: center; transform: rotate(-3deg); }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.ticks .lucide { width: 20px; height: 20px; color: var(--cobalt); }

/* Promise cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: var(--paper); border-radius: 25px; padding: 24px; box-shadow: var(--shadow); }
.icon-tile { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--tint); color: var(--cobalt); border-radius: 12px; }
.icon-tile .lucide { width: 20px; height: 20px; }
.card h3 { margin-top: 18px; font-size: 19px; letter-spacing: -.035em; }
.card p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Beta: the journey */
.beta { background: var(--paper); }
.beta-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.beta-head-side .section-lead { margin-top: 0; }
.beta-head-side .btn-p { margin-top: 24px; }
.journey { list-style: none; padding: 0; margin: clamp(44px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: j; }
.jstep { background: var(--bg); border-radius: 28px; padding: 28px 26px 30px; position: relative; overflow: hidden; }
.jstep .step-n { margin-top: 26px; }
.jstep h3 { margin-top: 6px; font-size: 23px; letter-spacing: -.04em; }
.jstep > p:last-child { margin: 8px 0 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.jstep:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%; }

/* Mini phones (app-scale screens drawn in HTML) */
.mini-phone { position: relative; width: min(232px, 100%); height: 400px; margin: 0 auto; border-radius: 36px; border: 6px solid #161923; overflow: hidden; background: var(--bg); box-shadow: 0 22px 44px #0b10202a; font-size: 11px; }
.ms-status { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px 0; font-weight: 600; font-size: 10.5px; height: 26px; position: relative; z-index: 2; }
.ms-island { width: 62px; height: 17px; border-radius: 12px; background: #07090D; }
.ms-bat { width: 18px; height: 8px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .7; }

/* 01: Home Screen with Taylr appearing */
.home-screen { background: linear-gradient(160deg, var(--taylr-cobalt-100) 0%, var(--taylr-cobalt-50) 45%, var(--taylr-mist) 100%); }
.hs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; padding: 22px 16px 0; }
.hs-app { aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px rgba(11,16,32,.04); position: relative; }
.hs-app.taylr { background: none; box-shadow: none; }
.hs-app.taylr img { width: 100%; height: 100%; border-radius: 12px; display: block; box-shadow: 0 6px 14px #2f5bff55; }
.hs-app.taylr b { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); font-size: 9.5px; font-weight: 500; color: var(--text); }
.jstep.in .hs-app.taylr { animation: appIn .8s cubic-bezier(.2,1.4,.3,1) .5s both; }
@keyframes appIn { from { opacity: 0; transform: scale(.4); } }
.hs-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0; padding: 10px 12px 18px; box-shadow: 0 -8px 24px #0b102014; }
.hs-sheet::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 10px; }
.hs-sheet-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 12px; background: var(--tint); font-weight: 600; font-size: 11.5px; }
.hs-sheet-row .lucide { width: 16px; height: 16px; color: var(--cobalt); }

/* 02: active exercise, Ink (board 28) */
.workout { background: var(--taylr-ink); color: #fff; }
.wo-progress { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; font-size: 9.5px; color: var(--taylr-slate-300); }
.wo-bar { flex: 1; height: 3px; border-radius: 3px; background: var(--taylr-ink-600); overflow: hidden; }
.wo-bar i { display: block; height: 100%; width: 33%; background: var(--cobalt); }
.wo-photo { margin: 10px 12px 0; height: 128px; border-radius: 16px; background: var(--taylr-ink-600) url(../assets/photos/senior-man-squat.jpg) 50% 30% / cover no-repeat; }
.wo-name { margin: 12px 0 0; text-align: center; font: 700 15px Sora, sans-serif; letter-spacing: -.04em; }
.wo-timer { margin: 0; text-align: center; font: 600 40px Sora, sans-serif; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.wo-next { margin: 8px 12px 0; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--taylr-ink-800); box-shadow: inset 0 0 0 1px var(--taylr-ink-600); font-size: 10.5px; font-weight: 500; }
.wo-next .lucide { width: 14px; height: 14px; color: var(--taylr-slate-300); }
.wo-pause { margin: 8px 12px 0; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 10px; border-radius: 999px; background: var(--cobalt); font-weight: 600; font-size: 11px; }
.wo-pause .lucide { width: 13px; height: 13px; }

/* 03: beyond day 30 (board 42) */
.future { padding: 0; }
.fu-logo { height: 22px; width: auto; margin: 12px 0 0 14px; display: block; }
.fu-title { margin: 10px 14px 0; font: 700 16px/1.15 Sora, sans-serif; letter-spacing: -.045em; }
.fu-sub { margin: 4px 14px 0; color: var(--muted); font-size: 10px; }
.fu-h { margin: 14px 14px 6px; font-weight: 600; font-size: 11px; }
.fu-row { margin: 0 12px 7px; display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.fu-row.now { background: var(--sel); }
.fu-row b { display: block; font-size: 10.5px; font-weight: 600; }
.fu-row small { display: block; font-size: 9px; color: var(--muted); }
.fu-row > .lucide { margin-left: auto; width: 13px; height: 13px; color: var(--muted); }
.fu-thumb { width: 34px; height: 34px; border-radius: 10px; flex: none; background: url(../assets/photos/woman-dumbbells-smile.jpg) 50% 20% / cover; }
.fu-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--tint); color: var(--text); }
.fu-ico .lucide { width: 15px; height: 15px; }

.beta-facts { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; color: var(--muted); font-size: 15px; }
.beta-facts li { display: flex; align-items: center; gap: 9px; }
.beta-facts .lucide { color: var(--cobalt); width: 18px; height: 18px; }
.visual-note.left { text-align: center; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-list { background: var(--paper); border-radius: 25px; box-shadow: var(--shadow); padding: 6px 24px; }
.faq-list details { border-bottom: 1px solid var(--taylr-slate-200); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 16.5px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 9v10M9 14h10' stroke='%232F5BFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100%; transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 0 0 20px; color: var(--muted); line-height: 1.6; }
.faq-list a { color: var(--cobalt-600); }

/* Final: the app's cobalt hero card with the photo fading in from the right */
.final-wrap { padding-top: 0; }
.final { position: relative; overflow: hidden; border-radius: 30px; background: var(--cobalt); color: #fff; padding: clamp(36px, 6vw, 72px); min-height: 360px; display: flex; align-items: center; }
.final-photo { position: absolute; right: 0; top: 0; height: 100%; width: 48%; background: url(../assets/photos/woman-dumbbells-smile.jpg) 50% 20% / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent, #000 32%); mask-image: linear-gradient(to right, transparent, #000 32%); }
.final-copy { position: relative; max-width: 560px; }
.final-kicker { margin: 0; color: var(--taylr-cobalt-100); font-size: 15px; }
.final-title { margin: 10px 0 28px; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; }

/* Footer */
.footer { padding: 36px 0 110px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer img { height: 30px; width: auto; }
.footer p { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 62em; line-height: 1.6; }
.footer a { color: var(--muted); }

.mobile-cta { display: none; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1040px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps .step:last-child { grid-column: span 2; }
}
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-login { margin-left: auto; }
  .hero-grid, .adapt-grid, .beta-head, .faq-grid, .progress-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .hero-visual { min-height: 520px; }
  .steps { grid-template-columns: 1fr; }
  .steps .step:last-child { grid-column: auto; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px; }
  .m1 { grid-row: span 2; }
  .progress-grid > div { order: -1; }
  .final-photo { width: 100%; opacity: .35; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%); mask-image: linear-gradient(to bottom, transparent, #000 60%); }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .nav-inner { height: 62px; gap: 14px; }
  .nav-logo img { height: 30px; }
  .nav-cta { display: none; }
  .hero-actions .btn-p, .hero-actions .btn-s { flex: 1 1 100%; }
  .hero-visual { min-height: 470px; }
  .hero-photo { inset: 0 0 12% 22%; }
  .hero-phone { width: 52%; }
  .float-learn { right: -4px; top: 4%; padding: 10px 12px 10px 10px; }
  .visual-note { text-align: left; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 170px 170px; gap: 10px; }
  .mosaic figcaption { left: 8px; bottom: 8px; font-size: 11.5px; padding: 7px 10px 7px 8px; gap: 6px; white-space: nowrap; }
  .mosaic figcaption .lucide { width: 14px; height: 14px; }
  .preview { border-radius: 26px; }
  .faq-list { padding: 4px 18px; }
  .mobile-cta { display: flex; position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; transform: translateY(150%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
  .mobile-cta.show { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-phone, .float-learn { animation: none; } }