/* Shared product presentation. Product scripts and functional controls stay local. */
.landing-product {
  --ink: #0b2438; --muted: #637581; --line: #dbe4e7;
  --accent: #2586bd; --tint: #eaf2f8; --stage: #c7e5f2;
  --stage-end: #b7d8ee; --paper: #fffefa;
  background: var(--paper); color: var(--ink); font-size: 16px;
}
.product-vision { --accent:#557e59; --tint:#eff3e9; --stage:#d9e6cc; --stage-end:#b8d9cb; --purple:#557e59; }
.product-speech { --accent:#8466a3; --tint:#f5f0f6; --stage:#e6dcef; --stage-end:#cadcf2; --purple:#8466a3; }
html:has(.landing-product) { scroll-padding-top:110px; }
.landing-product .wrap { width:min(1180px,calc(100% - 96px)); max-width:none; padding-left:0; padding-right:0; }
.product-site-header { position:sticky; top:0; z-index:50; background:#fffefaf2; backdrop-filter:blur(18px); border-bottom:1px solid #0b243807; }
.product-site-header nav { height:94px; border:0; gap:24px; }
.landing-product .brand img { width:155px; height:auto; }
.landing-product .brand-tagline { font-size:10px; margin-top:3px; color:#597384; }
.landing-product .brand>span,.landing-product .brand>small { display:none; }
.landing-product :is(.nav-links,.navlinks) { gap:24px; font-size:13px; }
.landing-product .button { border-radius:9px; padding:15px 24px; font-size:14px; transition:transform .25s,box-shadow .25s,background .25s; }
.landing-product .button:hover { transform:translateY(-3px); box-shadow:0 8px 20px #0b243819; }
.landing-product .button:is(.primary,.purple,.dark,.small) { background:var(--ink); color:#fff; border-color:var(--ink); }
.landing-product .button.small,.landing-product nav .button { padding:11px 18px; font-size:12px; }
.landing-product .hero {
  width:calc(100% - 48px); max-width:1510px; margin:0 auto 58px;
  display:flex; flex-direction:column; gap:0; padding:38px 32px 32px;
  background:var(--tint); border-radius:34px; text-align:center;
}
.product-switch { display:flex; justify-content:center; gap:5px; flex-wrap:wrap; margin-bottom:36px; }
.product-switch a { padding:6px 15px; border-radius:22px; font-size:11px; color:#597180; transition:background .2s; }
.product-switch a[aria-current=page] { background:white; color:var(--accent); box-shadow:0 3px 14px #233b4710; font-weight:700; }
.product-switch a:hover { background:#ffffffb0; }
.landing-product .hero>div:not(.hero-art,.hero-visual,.product-switch) { max-width:100%; }
.landing-product .hero .eyebrow { justify-content:center; font-size:11px; letter-spacing:.12em; color:var(--accent); margin-bottom:20px; }
.landing-product .hero h1 { font-size:clamp(42px,4.8vw,67px); line-height:1.25; font-weight:700; letter-spacing:-.06em; }
.landing-product .hero h1 em { color:var(--accent); font-style:normal; }
.landing-product .hero .intro { font-size:17px; line-height:1.85; color:var(--muted); margin-top:23px; }
.landing-product .hero :is(.actions,.cta) { justify-content:center; gap:24px; margin-top:27px; }
.landing-product .hero-caption { justify-content:center; margin:22px 0 0; font-size:11px; }
.landing-product .hero-tags { justify-content:center; margin-top:22px; }
.landing-product .hero .micro,.landing-product .hero .fine { font-size:12px; color:var(--muted); }
.landing-product .hero .mobile-break { display:none; }
.landing-product .hero :is(.hero-visual,.hero-art.photo-hero) {
  width:min(1040px,100%); max-width:none; margin:38px auto 0;
  padding:34px 60px 22px; border:1px solid #ffffffaa; border-radius:26px;
  background:linear-gradient(125deg,var(--stage),var(--stage-end));
  box-shadow:none; height:auto; min-height:0; transform:none; text-align:left;
}
.landing-product .hero .photo-collage { height:470px; width:100%; max-width:none; }
.landing-product .hero .lifestyle-image { width:76%; height:365px; border-radius:19px; object-fit:cover; }
.landing-product .hero .capture-device { width:205px; height:435px; top:13px; right:12px; border-radius:22px; box-shadow:0 18px 35px #173d3025; }
.landing-product .hero .photo-live { width:300px; bottom:8px; left:25px; padding:20px 25px; background:#fffefaf5; border:1px solid #ffffffc0; }
.landing-product .hero .photo-live>strong { font-size:36px; }
.landing-product .hero .photo-note { text-align:center; font-size:10px!important; line-height:1.7; margin-top:12px!important; }
.landing-product .speech-photo .lifestyle-image { width:72%; height:350px; left:auto; right:0; }
.landing-product .speech-photo .capture-browser { width:47%; height:305px; left:0; top:137px; border-radius:16px; box-shadow:0 20px 45px #42284b20; }
.landing-product .speech-photo .photo-audio { width:210px; bottom:0; right:18px; background:#fffefaf2; padding:20px; box-shadow:0 12px 30px #463c5c18; }
.landing-product .speech-photo .photo-audio>span { font-size:14px; }
.landing-product .hero .player { max-width:740px; margin:auto; transform:none; border:7px solid #0b2438; border-radius:18px; box-shadow:0 22px 42px #0b243824; }
.landing-product .hero .visual-label { max-width:740px; margin:0 auto 18px; font-size:10px; }
.landing-product .hero .photo-lesson { aspect-ratio:16/9; min-height:0; }
.landing-product .hero .photo-lesson img { object-position:50% 37%; }
.landing-product .hero .download-float { bottom:60px; right:22px; transform:none; padding:17px 22px; border-radius:13px; }
.landing-product .hero .preview-note { position:static; margin:25px 0 0; text-align:center; font-size:10px; }
.landing-product .section { padding-top:95px; padding-bottom:95px; }
.landing-product h2 { font-size:42px; line-height:1.4; letter-spacing:-.055em; font-weight:650; }
.landing-product :is(.section-heading,.section-head) { margin-bottom:40px; }
.landing-product .eyebrow { color:var(--accent); font-size:11px; }
.landing-product :is(.section-heading,.section-head)>p { font-size:15px; line-height:1.85; }
.landing-product :is(.feature-grid,.ai-cards,.benefits,.routine-grid,.benefit-grid) { gap:22px; }
.landing-product :is(.feature-grid,.ai-cards,.benefits,.routine-grid,.benefit-grid)>article,
.landing-product .benefit,.landing-product .step {
  background:var(--tint); border:1px solid #0c304409; border-radius:20px;
  padding:30px; transition:transform .35s,box-shadow .35s;
}
.landing-product :is(.feature-grid,.ai-cards,.benefits,.routine-grid,.benefit-grid)>article:hover,
.landing-product .benefit:hover { transform:translateY(-5px); box-shadow:0 16px 30px #213a4710; }
.landing-product :is(.feature-grid,.ai-cards,.benefits) h3 { font-size:22px; }
.landing-product :is(.feature-grid,.ai-cards,.benefits,.benefit) p { font-size:14px; line-height:1.9; }
.landing-product :is(.learning-section,.vision-section,.app-section,.journey) {
  background:var(--tint); border-radius:30px; margin:0 24px; padding:75px 0;
}
.landing-product :is(.learning-section,.vision-section,.app-section,.journey) .wrap { max-width:1180px; }
.product-vision .vision-copy { color:var(--ink); }
.product-vision .vision-copy :is(.eyebrow,em) { color:var(--accent); }
.product-vision .vision-copy>p:not(.eyebrow),.product-vision .vision-copy li span { color:var(--muted); }
.product-vision .vision-copy .vision-note { color:var(--muted)!important; }
.product-vision .vision-copy li { border-color:#cbd9c8; }
.landing-product :is(.journey,.learning-section) { color:var(--ink); }
.landing-product :is(.journey,.learning-section) .eyebrow,.landing-product .step small { color:var(--accent); }
.landing-product .journey .section-head p,.landing-product .step p,.landing-product .journey-note,.landing-product .learning-section .intro { color:var(--muted); }
.landing-product .steps { border-color:var(--line); }
.landing-product :is(.language-panel,.demo-card,.week-card,.share-card,.integration-flow,.capture-frame) { border-radius:20px; }
.landing-product .price-card { border-radius:20px; box-shadow:none; }
.landing-product .price-card.price-featured { border-color:var(--accent); background:var(--tint); }
.landing-product .price-cards { gap:20px; }
.landing-product .benchmark { background:var(--tint); border-radius:26px; padding:44px; margin-block:75px; }
.landing-product .bench-card { border-radius:17px; }
.landing-product .service-card { border-radius:20px; transition:transform .25s; }
.landing-product .service-card:hover { transform:translateY(-4px); }
.landing-product .faq { padding-top:85px; padding-bottom:85px; }
.landing-product .faq details { border-color:var(--line); padding-block:22px; }
.landing-product .faq summary { font-size:17px; }
.landing-product .closing,.landing-product .closing-inner { border-radius:26px; }
.landing-product .closing-inner,.product-vision .closing,.product-speech .closing {
  background:#0b344a; color:white; padding:65px; border:0;
}
.landing-product .closing :is(h2,h3) { color:#fff; }
.landing-product .closing :is(p,.eyebrow) { color:#bad9e6; }
.landing-product .closing .button { background:#daf1f7; color:#12394d; border-color:#daf1f7; }
.landing-product .site-footer { background:#fffefa; color:#677c88; padding-top:65px; }
.landing-product .site-footer h3 { color:#233e4f; }
.landing-product .footer-logo { width:150px; height:auto; }
.landing-product .footer-bottom { border-color:var(--line); }
.family-reveal { opacity:1; }
@media(prefers-reduced-motion:no-preference) {
  .family-motion .family-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
  .family-motion .family-reveal.is-visible { opacity:1; transform:none; }
}
@media(min-width:1500px) { .landing-product .hero { padding-top:45px; } }
@media(max-width:1000px) {
  .landing-product .wrap { width:calc(100% - 64px); }
  .landing-product :is(.nav-links,.navlinks) { gap:15px; font-size:11px; }
  .landing-product .hero { padding-inline:24px; }
  .landing-product .hero :is(.hero-visual,.hero-art.photo-hero) { padding-inline:30px; }
  .landing-product .hero .capture-device { right:0; width:185px; }
  .landing-product .hero .photo-live { left:0; width:260px; }
  .landing-product .hero h1 { font-size:53px; }
  .landing-product h2 { font-size:35px; }
  .landing-product .speech-photo .photo-audio { right:0; width:185px; }
}
@media(max-width:700px) {
  .landing-product .wrap { width:calc(100% - 40px); }
  .product-site-header nav { height:80px; gap:12px; }
  .landing-product .brand img { width:125px; }
  .landing-product .brand-tagline { font-size:8px; }
  .landing-product :is(.nav-links,.navlinks)>a:not(.button) { display:none; }
  .landing-product nav .button { font-size:11px; padding:10px 13px; gap:10px; }
  .landing-product .hero { width:calc(100% - 20px); margin-bottom:32px; padding:25px 15px 24px; border-radius:22px; }
  .product-switch { gap:0; margin-bottom:30px; }
  .product-switch a { font-size:10px; padding:6px 10px; }
  .landing-product .hero h1 { font-size:38px; line-height:1.35; letter-spacing:-.06em; }
  .landing-product .hero .eyebrow { font-size:9px; margin-bottom:16px; }
  .landing-product .hero .intro { font-size:14px; margin-top:19px; }
  .landing-product .hero :is(.actions,.cta) { gap:13px; flex-wrap:wrap; }
  .landing-product .hero .button { font-size:12px; padding:13px 16px; gap:12px; }
  .landing-product .hero .text-link { font-size:12px; }
  .landing-product .hero .fine { font-size:10px; }
  .landing-product .hero-caption { font-size:10px; }
  .landing-product .hero :is(.hero-visual,.hero-art.photo-hero) { padding:19px 13px 16px; border-radius:18px; margin-top:28px; }
  .landing-product .hero .photo-collage { height:395px; }
  .landing-product .hero .lifestyle-image { width:100%; height:225px; border-radius:13px; }
  .landing-product .hero .capture-device { width:38%; height:290px; top:86px; right:0; border-width:4px; border-radius:14px; }
  .landing-product .hero .photo-live { width:59%; left:0; bottom:8px; padding:12px 9px; border-radius:12px; }
  .landing-product .hero .photo-live>strong { font-size:25px; }
  .landing-product .hero .photo-live>span { font-size:8px; }
  .landing-product .hero .photo-note { font-size:9px!important; }
  .landing-product .speech-photo .capture-browser { width:68%; height:225px; top:153px; }
  .landing-product .speech-photo .photo-audio { width:28%; right:0; bottom:4px; padding:10px 5px; border-radius:12px; }
  .landing-product .speech-photo .photo-audio>span { font-size:10px; }
  .landing-product .hero .visual-label { font-size:7px; }
  .landing-product .hero .download-float { position:relative; bottom:auto; right:auto; margin:-12px 10px 0 auto; width:max-content; min-width:0; max-width:100%; padding:12px; }
  .landing-product .hero .player { border-width:4px; border-radius:13px; }
  .landing-product .hero .preview-note { font-size:9px; margin-top:15px; }
  .landing-product .hero .photo-lesson .subtitle { font-size:9px; padding:5px 8px; }
  .landing-product .section { padding-block:62px; }
  .landing-product h2 { font-size:30px; }
  .landing-product :is(.feature-grid,.ai-cards,.benefits,.routine-grid,.benefit-grid)>article,.landing-product .benefit,.landing-product .step { padding:24px; border-radius:17px; }
  .landing-product :is(.learning-section,.vision-section,.app-section,.journey) { margin-inline:10px; padding-block:50px; border-radius:22px; }
  .landing-product .benchmark { padding:25px 18px; margin-block:50px; border-radius:20px; }
  .landing-product .closing-inner,.product-vision .closing,.product-speech .closing { padding:35px 24px; }
  .landing-product .faq { padding-block:55px; }
  .landing-product .faq summary { font-size:15px; }
}