/* Mobile first: prove the result before asking the parent to register. */
.mobile-first-hero{max-width:980px;padding:18px 0 26px}
.mobile-first-hero .intro{padding:12px 0 0;animation:none}
.mobile-first-hero .intro h1{font-size:clamp(30px,7.8vw,48px);line-height:1.12;letter-spacing:-1.1px;margin:14px auto}
.mobile-first-hero .intro .hero-description{font-size:14px;line-height:1.6;margin:14px auto 18px;color:#686477}
.home-proof{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);align-items:center;gap:5px;max-width:660px;margin:auto}
.home-proof figure{margin:0;min-width:0;position:relative;border:1px solid #e8dfed;border-radius:20px;overflow:hidden;background:#fff9ef}
.home-proof figcaption{font-size:12px;font-weight:700;line-height:1.4;padding:12px 6px 4px;color:#58496c}
.proof-source img{display:block;width:100%;height:190px;object-fit:contain;padding:8px;background:#fff9ef}
.proof-arrow{font-size:23px;color:#8a68c3}
.home-proof .proof-result{background:#eee7fa}
#home-model{height:150px;position:relative;width:100%;overflow:hidden}
#home-model canvas{display:block;width:100%;height:100%;touch-action:pan-y}
#home-model-status{position:absolute;inset:0;display:grid;place-items:center;padding:10px;margin:0;font-size:12px;line-height:1.5;color:#675378}
.proof-turn{min-height:40px;background:transparent;border:0;border-top:1px solid #ded3ef;width:100%;font-size:12px;font-weight:700;color:#67479c;padding:8px 4px}
.mobile-first-hero .intro .proof-caption{font-size:11px;line-height:1.5;margin:9px auto 16px;color:#766a82}
.mobile-first-hero .hero-cta{min-height:52px;width:100%;max-width:380px;justify-content:center;font-size:16px;padding:15px 18px}
.mobile-first-hero .intro .hero-stage-note{font-size:11px;line-height:1.6;color:#776c80;margin:12px auto}
.mobile-first-hero .hero-note{font-size:11px;margin-top:12px}
@media(max-width:700px){
 .header{padding:12px 16px;gap:8px;flex-wrap:nowrap}
 .header nav{margin-left:auto;gap:4px}
 .header nav>.pill{display:none}
 .header nav .nav-link{font-size:14px;min-width:48px;min-height:44px;padding:10px 6px}
 .header .brand{font-size:25px}
 .mobile-first-hero .intro .eyebrow{font-size:9px;letter-spacing:1.5px}
 .mobile-first-hero .intro .hero-description br{display:none}
 .story-section{margin-top:28px}
}
@media(min-width:701px){
 .mobile-first-hero{padding-top:22px}
 .mobile-first-hero .intro h1{font-size:56px}
 .mobile-first-hero .intro .hero-description{max-width:600px;font-size:16px}
 .proof-source img{height:260px}
 #home-model{height:220px}
 .home-proof figcaption{font-size:14px}
}
@media(max-width:350px){
 .mobile-first-hero .intro h1{font-size:28px}
 .home-proof figcaption{font-size:10px}
 .proof-turn{font-size:10px}
 .proof-source img{height:170px}
 #home-model{height:130px}
}

/* Landing media slots remain visibly unfinished until real assets are supplied. */
.media-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;background:#e9e8e7;border:1px solid #d6d5d3;border-radius:22px;color:#656360;padding:22px;overflow:hidden}
.media-placeholder .placeholder-symbol{font-size:36px;font-weight:400;color:#8d8b88}
.media-placeholder strong{font-size:16px;line-height:1.4;max-width:250px}
.media-placeholder>span:not(.placeholder-symbol){font-size:12px;line-height:1.6;max-width:250px}
.media-placeholder small{font-size:10px;letter-spacing:.5px;color:#7e7c78}
.mobile-first-hero .video-slot{aspect-ratio:4/5;width:100%;max-width:300px;margin:18px auto 20px}
.mobile-first-hero .intro .hero-description{max-width:510px}
.island-preview-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 6px;color:#7354a1;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.mobile-first-hero .island-preview-link{margin:6px auto}
.landing-section-head{margin:0 0 24px}
.landing-section-head h2,.landing-island h2{font-size:clamp(27px,5vw,39px);line-height:1.15;letter-spacing:-.9px;margin:14px 0;color:#413651}
.landing-section-head p,.landing-island p{font-size:14px;line-height:1.75;color:#766e7e;max-width:540px}
.landing-examples,.landing-steps,.landing-island,.landing-parent,.landing-faq{margin:55px 0}
.example-grid{display:grid;gap:24px}
.example-media figure{margin:0;min-width:0}
.example-media figure img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:15px;background:#fff}
.example-media figcaption{font-size:11px;text-align:center;color:#81788a;margin-top:8px}
@media(min-width:760px){.landing-examples .example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.example-pair{border:1px solid #e6dfe9;border-radius:24px;background:#fffdf9;padding:14px}
.example-media{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.example-media .media-placeholder{aspect-ratio:1;padding:12px;gap:7px;border-radius:15px}
.example-media .media-placeholder strong{font-size:12px}
.example-media .media-placeholder span:not(.placeholder-symbol){font-size:10px}
.example-media .media-placeholder small{display:none}
.example-pair h3{font-size:17px;margin:16px 2px 6px}
.example-pair p,.landing-note{font-size:12px;line-height:1.7;color:#81788a}
.landing-steps ol{padding:0;list-style:none;display:grid;gap:14px}
.landing-steps li{display:flex;gap:16px;align-items:flex-start;background:#f0eaf8;border-radius:20px;padding:22px}
.landing-steps li>span{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:#fffaf4;color:#7957ad;font-size:12px;font-weight:700}
.landing-steps h3{font-size:17px;margin:3px 0 8px}
.landing-steps p{font-size:13px;line-height:1.7;color:#7c6e8a;margin:0}
.landing-island{display:grid;gap:24px}.landing-island .video-slot{aspect-ratio:4/3}
.landing-island .island-preview-link{justify-content:flex-start}
.landing-parent{padding:25px;background:#eef0e5;border-radius:24px}
.parent-points{display:grid;gap:18px}.parent-points p{margin:0;display:grid;gap:6px}.parent-points strong{font-size:15px;color:#4e604b}.parent-points span{font-size:13px;color:#74806c;line-height:1.6}
.landing-faq{max-width:780px;margin-left:auto;margin-right:auto}.landing-faq details{border-bottom:1px solid #e0d9e6;padding:18px 0}.landing-faq summary{font-size:15px;font-weight:700;cursor:pointer;min-height:36px;line-height:1.5}.landing-faq details p{font-size:14px;color:#7b7085;line-height:1.75}.landing-faq .text-button{min-height:44px;font-size:13px}
.closing-invite>small{display:block;margin:14px auto 0;line-height:1.6;max-width:280px}
body[data-guest-preview=true] .island-hud [data-auth],body[data-guest-preview=true] #toggle-pet{display:none}
body[data-guest-preview=true] .island-bottom .pill{font-size:14px}
@media(min-width:701px){
 .mobile-first-hero{max-width:1100px;padding:32px 0 55px}.mobile-first-hero .intro{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;text-align:left;align-content:center}
 .mobile-first-hero .intro>.eyebrow{grid-column:1;align-self:end}.mobile-first-hero .intro h1{grid-column:1;font-size:clamp(35px,4.2vw,55px);margin:18px 0;width:auto}
 .mobile-first-hero .intro .hero-description{grid-column:1;margin:0 0 20px}.mobile-first-hero .intro>.video-slot{grid-column:2;grid-row:1/8;max-width:400px;margin:0 auto}
 .mobile-first-hero .hero-cta{grid-column:1;justify-self:start;align-self:start}.mobile-first-hero .island-preview-link{grid-column:1;justify-content:flex-start;margin:8px 0}.mobile-first-hero .intro .hero-stage-note{grid-column:1;margin:4px 0}
 .example-grid{grid-template-columns:repeat(3,1fr);gap:16px}.example-media{gap:7px}.example-media .media-placeholder{padding:8px}.example-media .placeholder-symbol{font-size:24px}
 .landing-steps ol{grid-template-columns:repeat(3,1fr)}.landing-steps li{flex-direction:column}.landing-island{grid-template-columns:1fr 1fr;align-items:center;gap:40px}.parent-points{grid-template-columns:repeat(3,1fr);gap:30px}.landing-parent{padding:35px}
}
@media(max-width:350px){.mobile-first-hero .video-slot{max-width:260px}.media-placeholder strong{font-size:14px}}

.mobile-first-hero .intro h1{width:auto;max-width:100%}.mobile-first-hero .intro h1 span{white-space:normal}
@media(max-width:380px){.mobile-first-hero .intro h1{font-size:26px;letter-spacing:-.8px}}

/* One lightweight video; its frame keeps the hero layout stable. */
.mobile-first-hero .video-slot.hero-film{aspect-ratio:auto;background:transparent;border:0;padding:0;align-self:center}
.hero-film-frame{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#eee9e5;border:1px solid #e2dbe5}
.hero-film video{display:block;width:100%;height:100%;object-fit:cover}
.hero-film figcaption{font-size:10px;line-height:1.5;text-align:center;color:#81788a;margin-top:8px}

.hero-film video{pointer-events:none}

/* Clear illustrated steps, with compact rows on phones. */
.visual-steps ol{gap:18px;margin:24px 0 0}
.visual-steps ol>li{display:block;padding:0;overflow:hidden;border:1px solid #e6dfe9;border-radius:24px;background:#fffdf9}
.visual-steps .step-photo{position:relative;background:#f1ebe5;overflow:hidden}
.visual-steps .step-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.visual-steps .step-number{--sticker:#ffda70;--sticker-shadow:#c8993a;--sticker-turn:-8deg;position:absolute;top:17px;left:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:59px;height:65px;border:3px solid #fffaf2;border-radius:19px 16px 22px 15px;background:linear-gradient(145deg,#ffffff55,transparent 60%),var(--sticker);color:#574166;box-shadow:0 4px 0 var(--sticker-shadow),0 7px 12px #34253b24;transform:rotate(var(--sticker-turn));pointer-events:none;overflow:visible}
.visual-steps li:nth-child(2) .step-number{--sticker-turn:6deg;border-radius:16px 22px 16px 21px}
.visual-steps li:nth-child(3) .step-number{--sticker-turn:-5deg;border-radius:21px 15px 20px 16px}
.visual-steps .step-number-caption{font-size:8px;font-weight:800;line-height:1;letter-spacing:1.6px;text-transform:uppercase;margin-left:2px}
.visual-steps .step-number b{font:900 34px/1 'Trebuchet MS','Segoe UI',sans-serif;letter-spacing:-1px}
.visual-steps .step-spark{position:absolute;right:-12px;top:-8px;width:23px;height:23px;color:#fff9e9;filter:drop-shadow(0 1px 1px #48314c33);transform:rotate(13deg)}
.visual-steps .step-copy{padding:20px 20px 24px}.visual-steps h3{font-size:19px;line-height:1.3;margin:0 0 9px}.visual-steps p{font-size:14px;line-height:1.6;color:#756c80}
.steps-start{display:flex;align-items:center;flex-direction:column;gap:12px;margin-top:26px}.steps-start .pill{min-height:52px;justify-content:center}.steps-start small{font-size:11px;color:#81788a;text-align:center}
@media(max-width:700px){.visual-steps ol{gap:14px}.visual-steps ol>li{position:relative;display:grid;grid-template-columns:clamp(108px,34vw,144px) minmax(0,1fr);align-items:stretch;border-radius:20px}.visual-steps .step-photo{height:100%;position:static}.visual-steps .step-photo img{height:100%;min-height:158px}.visual-steps .step-copy{padding:76px 14px 18px}.visual-steps h3{font-size:17px}.visual-steps .step-copy p{font-size:13px;line-height:1.55}.visual-steps .step-number{top:13px;left:calc(clamp(108px,34vw,144px) + 16px);width:40px;height:46px;border-width:2px;border-radius:13px 11px 15px 10px;gap:2px}.visual-steps .step-number b{font-size:25px}.visual-steps .step-number-caption{font-size:6px;letter-spacing:1px}.visual-steps .step-spark{width:17px;height:17px;right:-9px;top:-6px}.steps-start .pill{width:100%;max-width:380px}}
@media(max-width:350px){.visual-steps ol>li{grid-template-columns:104px minmax(0,1fr)}.visual-steps .step-copy{padding:73px 11px 14px}.visual-steps .step-number{left:117px}.visual-steps h3{font-size:16px}}


.landing-island .island-photo{margin:0;min-width:0}.island-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px;border:1px solid #e2dbe5;background:#d1e7b3}.island-photo figcaption{margin-top:9px;text-align:center;font-size:11px;line-height:1.5;color:#81788a}