/* September 2026: shared visual language of the redesigned Laeli app. */
@font-face{font-family:Laeli Jakarta;src:url('assets/fonts/PlusJakartaSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Laeli Jakarta;src:url('assets/fonts/PlusJakartaSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Laeli Jakarta;src:url('assets/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Laeli Jakarta;src:url('assets/fonts/PlusJakartaSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Laeli Jakarta;src:url('assets/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');font-weight:800 900;font-display:swap}
:root{
  --forest:#194b3b;--forest-deep:#153e31;--forest-soft:#285c49;
  --ink:#193f32;--ink-muted:#49665b;--text-muted:#536d61;
  --peach:#f7aa87;--peach-deep:#ee9b74;--peach-soft:#fce6d9;
  --cream:#edf2ee;--cream-warm:#f5f8f5;--ivory:#fff;
  --line:#dce6df;--line-strong:#bbcec1;--border:#dce6df;--border-strong:#bbcec1;
  --coral:#c2623f;--coral-deep:#a55032;--sage:#cbdcce;
  --display:"Laeli Jakarta",sans-serif;--body:"Laeli Jakarta",sans-serif;--hand:"Laeli Jakarta",sans-serif;
  --shadow-soft:0 8px 24px #193f3209;--shadow-lift:0 20px 48px #193f3210;--shadow-plush:0 26px 60px #193f3217;
}
body{background:#edf2ee;font-family:var(--body);color:var(--ink)}
.atmosphere{background:radial-gradient(ellipse at 12% 12%,#d9e6dd 0,transparent 45%),radial-gradient(ellipse at 95% 56%,#e9efe9 0,transparent 45%),#edf2ee}
.atmosphere::before,.veil,.grain{display:none}
body > nav{background:rgba(255,255,255,.95);border-color:var(--line);backdrop-filter:blur(16px)}
.nav-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;background:#fff;border-color:var(--line);box-shadow:var(--shadow-soft)}
header + .soc-band{margin-top:0!important;padding-bottom:24px}
.nav-links{justify-content:space-evenly;gap:4px;min-width:0}.nav-links a{font-size:13px;padding:12px 8px;text-align:center;white-space:nowrap}
.nav-actions{display:flex;align-items:center}.nav-actions a{font-size:14px;white-space:nowrap}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.045em}
h2{line-height:1.15}
.hero-copy h1{font-size:clamp(38px,4.3vw,59px);line-height:1.13;letter-spacing:-.055em}
.hero-copy h1 em{font-style:normal;color:var(--forest)}
.hero .lede{font-weight:500;line-height:1.7;font-size:18px}
.hero-art .halo,.hero-art .blob-accent{display:none}
.tour-frame{border-radius:32px;box-shadow:var(--shadow-lift);overflow:hidden}
.eyebrow{background:white;border-color:var(--line);font-size:11px}
.chip{background:#fff;border:1px solid var(--line);box-shadow:none;font-size:12px}
.hero-dl .hd-note,.quiz-door{font-size:14px}
.hero-dl .hd-note{color:var(--ink-muted)}
.block{padding:76px 0}.section-head{max-width:730px;margin-bottom:36px}
.section-head p:not(.kicker){font-weight:500;font-size:17px;line-height:1.7}
.kicker{font-size:11px;letter-spacing:.17em;font-weight:800;color:var(--forest)}
section.block.cream{background:#fff}section.block.light{background:#f5f8f5}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.how-grid article{background:white;padding:30px;border:1px solid var(--line);border-radius:26px}
.step-number{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e5eee7;color:var(--forest);font-size:15px;font-weight:800}
.how-grid h3{font-size:22px;letter-spacing:-.03em;margin:22px 0 12px}
.how-grid p{font-size:15px;line-height:1.75;color:var(--ink-muted);margin:0}
.dl-card{background:var(--forest-deep);box-shadow:var(--shadow-lift)}
.dl-copy h2{font-family:var(--display);font-size:clamp(28px,3.2vw,42px);font-weight:800}
.dl-head .soft{color:#bcd9c8}.dl-sub{font-weight:500}
.wi-nav{gap:9px}.nav-item{padding:9px 15px 9px 10px;background:#fff;border-color:var(--line)}
.nav-item .nn{background:#edf3ee;font-size:13px}.nav-item .nt{font-size:14px}
.nav-item.active .nt{color:#fff}
.stage{min-width:0;min-height:560px;background:#fff;border-radius:32px;padding:30px 38px;box-shadow:var(--shadow-soft)}
.stage::before{background:radial-gradient(ellipse,#e5eee7 0,transparent 72%);width:520px;height:520px;right:auto;left:-2%}
.panel,.panel.flip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
.panel .phones,.panel.flip .phones{order:0;height:auto;min-width:0;display:flex;align-items:center;justify-content:center}
.feature-phone{display:block;width:100%;max-width:470px;height:auto}
.panel .copy,.panel.flip .copy{order:1;max-width:420px}
.copy .kicker{font-size:10px;margin:0 0 16px}.copy h3{font-size:clamp(24px,2.6vw,36px);line-height:1.2;font-weight:800;letter-spacing:-.045em}
.copy .l{font-size:16px;font-weight:500;line-height:1.75;margin:18px 0 24px}
.copy li{font-size:14px;line-height:1.6;font-weight:600;gap:12px}.copy ul{gap:16px}
.copy .chk{background:#2c7556;box-shadow:none;width:22px;height:22px;flex-basis:22px}
.wi-arrow{width:44px;height:44px;flex-basis:44px}
.scene-card{padding:10px;background:#f1f5f1;border-radius:28px;box-shadow:none}
.lifestage{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-radius:20px}
.lifestage figure{position:relative;margin:0;overflow:hidden;border-radius:16px;aspect-ratio:3/4}
.lifestage figure img{width:100%;height:100%;object-fit:cover;object-position:58% center;border-radius:0}
.lifestage figure:last-child img{object-position:45% center}
.lifestage figcaption{position:absolute;bottom:12px;left:10px;right:10px;padding:10px 6px;text-align:center;border-radius:99px;background:#fffffff0;font-size:13px;line-height:1.2;font-weight:700}
.split h2{font-size:clamp(30px,3.2vw,44px)}.split li{font-weight:500;line-height:1.7}.split .b{box-shadow:none}
.honesty{border-radius:30px}.honesty p{font-weight:500;line-height:1.8;font-size:17px}.honesty::after{display:none}
.pol{border-radius:20px;box-shadow:var(--shadow-soft);transform:none!important;background:#fff;border:1px solid var(--line)}
.pol .cap{font-family:var(--body);font-size:13px;font-weight:600}
.faq details{background:#f5f8f5;border-color:var(--line);box-shadow:none}.faq summary{font-family:var(--body);font-size:17px;font-weight:700}.faq .a{font-size:15px;font-weight:500;line-height:1.8}
.final-card{box-shadow:var(--shadow-lift)}.final-card p{font-weight:500}
.g-col h3{font-family:var(--body);font-size:19px;font-weight:800}.g-col a{font-size:14px;font-weight:500}
.lq-opt,.lq-input,.lq-textarea,.lq-suggest{background:#fff;border-color:var(--line)}
.lq-opt.lq-picked{background:#e7f0e9;border-color:var(--forest)}.lq-progress i.lq-fill{background:var(--forest)}
.lq-pill,.lq-chip{background:#edf3ee}.lq-chip.lq-on{background:var(--forest)}
.lq-opt:hover{background:#f2f7f3;border-color:var(--forest)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #357b5b;outline-offset:4px}
@media(min-width:901px){.hero-grid{grid-template-columns:1fr 1fr}.tour-frame{width:100%;margin-right:0}.hero-art{min-height:420px}}
@media(max-width:1050px){.nav-links a{font-size:12px}.stage{padding:25px}.wi-stage-row{gap:10px}}
@media(max-width:900px){
  .nav-inner{grid-template-columns:1fr auto;gap:4px 12px;border-radius:26px;padding:9px 12px}
  .nav-actions{grid-column:2;grid-row:1}.nav-links{grid-column:1/-1;grid-row:2}
  #how,#inside,#guides,#faq,#download,#tutorial{scroll-margin-top:160px}
  .block{padding:54px 0}.hero-art{order:0}.hero-copy{text-align:center}.hero-copy h1{font-size:clamp(38px,7vw,56px)}
  .how-grid{grid-template-columns:1fr}.how-grid article{padding:26px}.how-grid h3{margin-top:16px}
  .panel.active,.panel.flip.active{grid-template-columns:1fr;gap:12px}.stage{padding:20px 22px 32px}
  .feature-phone{width:calc(100% + 160px);max-width:480px;flex-shrink:0}.panel .copy{max-width:530px;text-align:left;margin:auto}.stage::before{top:230px;left:50%;transform:translate(-50%,-50%)}
  .feature-stack{width:calc(100% + 28px);max-width:500px}
  .copy h3{font-size:30px}.copy li{text-align:left}.wi-nav{justify-content:center;flex-wrap:wrap}.nav-item{padding:8px 12px 8px 8px}.nav-item .nt{font-size:13px}
  .split{gap:30px}.lifestage{max-width:600px;margin:auto}
}
@media(max-width:600px){
  .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:0 4px}.nav-links a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 4px;white-space:normal}
  #how,#inside,#guides,#faq,#download,#tutorial{scroll-margin-top:210px}
}
@media(max-width:480px){.stage{padding:12px 18px 30px}.copy h3{font-size:27px}.copy .l{font-size:15px}.nav-item .nn{width:25px;height:25px;flex-basis:25px}.nav-item{gap:7px}.wi-nav{gap:7px}.lifestage figcaption{font-size:11px;left:6px;right:6px}.hero .lede{font-size:16px}.hero-grid{gap:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.panel.active{animation:none}}

/* Restored tutorial uses the September app typography and palette. */
#tutorial{scroll-margin-top:120px}
.tut-frame{aspect-ratio:16/9;border:1px solid var(--line);box-shadow:var(--shadow-lift);background:var(--forest-deep)}
.tut-play{display:block;width:100%;border:0;padding:0;background:transparent;cursor:pointer}
.tut-frame .play span{background:#fff;box-shadow:var(--shadow-lift)}
.tut-frame .play svg{fill:var(--forest)}
.tut-frame:focus-within{outline:3px solid #357b5b;outline-offset:4px}
.tut-meta{text-align:center;color:var(--ink-muted);font-size:14px;margin:20px 0 0}
.tut-meta a{color:var(--forest);font-weight:700;text-underline-offset:3px}
@media(max-width:900px){#tutorial{scroll-margin-top:160px}}
@media(max-width:600px){#tutorial{scroll-margin-top:210px}.tut-frame .play span{width:64px;height:64px}.tut-frame .play svg{width:26px;height:26px}}