.living-page { --mint:#8ae9cf; --paper:#eee9ff; --ink:#0b071e; background-color:var(--ink); }
.living-page h1,.living-page h2,.living-page h3 { text-wrap:balance; }
.living-page p { text-wrap:pretty; }
.living-page :focus-visible { outline:3px solid var(--mint); outline-offset:5px; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:2000; background:var(--mint); color:var(--ink); padding:12px 20px; border-radius:8px; }
.skip-link:focus { top:12px; }
.living-language { display:flex; padding:4px; border:1px solid var(--border-light); border-radius:100px; gap:2px; margin-left:12px; }
.living-language button { padding:6px 9px; font:600 12px 'Inter',sans-serif; border:0; border-radius:30px; background:transparent; color:#c4b9e6; cursor:pointer; }
.living-language [aria-pressed=true] { background:#302447; color:#fff; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:2.5px; color:var(--mint); margin-bottom:20px; }
.living-hero { min-height:760px; display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:32px; padding-top:150px; padding-bottom:75px; }
.living-hero h1 { font-size:clamp(42px,4.4vw,65px); line-height:1.07; letter-spacing:-2px; margin-bottom:27px; }
.living-hero h1 em { font-style:normal; color:var(--mint); }
.living-lead { font-size:17px; line-height:1.85; color:#beb5d8; max-width:500px; }
.living-actions { display:flex; flex-wrap:wrap; gap:23px; align-items:center; margin:30px 0 24px; }
.living-page .btn-gold { font-size:14px; padding:14px 21px; }
.text-link { color:var(--paper); text-decoration:underline; text-decoration-color:#8c7cae; text-underline-offset:6px; font-size:14px; font-weight:500; }
.text-link:hover { color:var(--mint); }
.hero-facts { color:#a198bc; font-size:11px; letter-spacing:.2px; }
.living-hero-art { position:relative; margin-right:-22px; }
.living-hero-art img { display:block; width:100%; height:auto; border-radius:38% 38% 20% 20%; mask-image:linear-gradient(#000 80%,transparent); }
.living-hero-art figcaption { color:#ae9fc5; text-align:center; font-size:11px; letter-spacing:.6px; margin-top:8px; }
.living-manifesto { display:grid; grid-template-columns:1fr 1fr; gap:90px; padding-top:44px; padding-bottom:49px; border-top:1px solid #332641; border-bottom:1px solid #332641; }
.living-manifesto h2 { font-size:26px; line-height:1.5; font-weight:400; }
.living-manifesto strong { color:var(--mint); font-weight:500; }
.living-manifesto p { font-size:14px; line-height:1.9; color:#b2a9c7; }
.living-section { padding-top:105px; padding-bottom:20px; scroll-margin-top:110px; }
.section-heading { max-width:720px; margin-bottom:38px; }
.section-heading h2,.chat-explanation h2,.family-panel h2 { font-size:clamp(30px,3.4vw,46px); line-height:1.15; margin-bottom:22px; }
.section-heading>p:last-child,.journey-story>p,.chat-explanation>p,.family-panel p,.rules-grid p { color:#b7adca; line-height:1.85; font-size:15px; }
.companion-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.companion-choice { --avatar-color:#86dff1; display:grid; justify-items:center; position:relative; padding:15px 12px 21px; border:1px solid #332740; border-radius:18px; color:var(--paper); background:#140e28; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.companion-choice.seren { --avatar-color:#c0dfa0; }
.companion-choice.astra { --avatar-color:#b8a7ff; }
.companion-choice.aspirix { --avatar-color:#e1b5fa; }
.companion-choice:hover { transform:translateY(-4px); border-color:var(--avatar-color); }
.companion-choice[aria-pressed=true] { border-color:var(--avatar-color); background:#211831; box-shadow:inset 0 -2px var(--avatar-color); }
.companion-choice strong { font:600 22px 'Outfit',sans-serif; margin-top:7px; }
.emotion-label { font-size:11px; color:var(--avatar-color); letter-spacing:.3px; margin-top:3px; }
.avatar-sprite { display:block; aspect-ratio:3/5; width:110px; background-image:var(--atlas); background-size:500% 100%; background-position:calc(var(--stage,0) * 25%) center; background-repeat:no-repeat; border-radius:42% 42% 20% 20%; }
.companion-choice .avatar-sprite { width:92px; }
.journey-stage { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; padding:54px 30px 35px 0; }
.journey-story h3 { font-size:31px; line-height:1.2; margin-bottom:22px; }
.journey-story>p+p { margin-top:15px; }
.evolution-controls { display:flex; flex-wrap:wrap; gap:7px; margin:28px 0 15px; }
.evolution-controls button,.demo-switch button { font:500 12px 'Inter',sans-serif; background:transparent; border:1px solid #554363; border-radius:100px; color:#c2b4d5; padding:9px 13px; cursor:pointer; }
.evolution-controls button[aria-pressed=true],.demo-switch button[aria-pressed=true] { background:var(--mint); border-color:var(--mint); color:#101b23; }
.journey-story .stage-reward { color:var(--gold-light); font-size:13px; min-height:25px; }
.small-note,.journey-story .small-note { font-size:11px; line-height:1.8; color:#a69abc; }
.evolution-portrait { position:relative; display:grid; justify-items:center; margin:0; }
.selected-art { width:min(220px,80%); }
.evolution-portrait figcaption { font:500 12px 'Inter',sans-serif; color:var(--mint); letter-spacing:1px; padding:10px 24px; border:1px solid #42685e; border-radius:50px; margin-top:15px; }
.portrait-spark { position:absolute; top:10%; right:8%; color:var(--gold-light); font-size:28px; }
.living-chat-section { margin-top:65px; padding:85px 0; background:#130e27; border-block:1px solid #30263c; scroll-margin-top:80px; }
.living-chat-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.chat-steps { list-style:none; counter-reset:chat; display:grid; gap:22px; margin:30px 0; }
.chat-steps li { counter-increment:chat; position:relative; padding-left:42px; }
.chat-steps li:before { content:counter(chat,decimal-leading-zero); position:absolute; left:0; top:0; color:var(--mint); font:500 16px 'Outfit',sans-serif; }
.chat-steps strong { display:block; font-size:14px; margin-bottom:4px; }
.chat-steps span { font-size:13px; color:#afa3c2; }
.chat-explanation .demo-disclosure { font-size:11px; line-height:1.8; color:#a89aba; border-left:2px solid #665079; padding-left:16px; }
.sample-chat { background:#0d0a1c; border:1px solid #56416b; border-radius:24px; overflow:hidden; box-shadow:0 30px 70px #05020d66; }
.sample-chat-header { display:flex; align-items:center; gap:13px; padding:16px 23px; border-bottom:1px solid #352440; }
.chat-avatar { width:32px; flex-shrink:0; }
.sample-chat-header h3 { font:600 14px 'Outfit',sans-serif; }
.chat-status { font-size:10px; color:#b6a5c5; }
.demo-label { margin-left:auto; font-size:9px; letter-spacing:1px; color:var(--mint); border:1px solid #375548; padding:3px 5px; border-radius:4px; }
.sample-messages { list-style:none; display:flex; flex-direction:column; gap:15px; padding:24px; }
.sample-messages li { max-width:90%; }
.sample-messages .from-user { align-self:flex-end; }
.message-author { display:block; font-size:9px; margin-bottom:5px; color:#b9a8c9; letter-spacing:.6px; }
.from-user .message-author { text-align:right; }
.message-body { border-radius:14px 14px 14px 3px; padding:12px 15px; font-size:12px; line-height:1.75; color:#e6dcf0; background:#231832; }
.from-user .message-body { background:#19453e; border-radius:14px 14px 3px 14px; color:#d7fff0; }
.chat-takeaway { margin:0 24px 18px; color:var(--mint); font-size:11px; line-height:1.6; }
.demo-switch { border-top:1px solid #352440; padding:15px 24px; }
.demo-switch p { font-size:10px; color:#a99ab9; margin-bottom:9px; }
.demo-switch>div { display:flex; gap:6px; flex-wrap:wrap; }
.demo-switch button { padding:6px 10px; font-size:10px; }
.benefits-editorial { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin:48px 0 38px; }
.benefits-editorial article { border-top:1px solid #4d395d; padding-top:25px; }
.benefit-number { color:#947aa8; font:400 34px 'Outfit',sans-serif; }
.benefits-editorial h3 { font-size:22px; margin:16px 0 12px; }
.benefits-editorial p { color:#b7adca; font-size:14px; line-height:1.85; }
.emotional-note { border-left:3px solid var(--mint); padding:15px 25px; color:#dad1e6; font-size:16px; line-height:1.8; max-width:830px; }
.family-panel { background:linear-gradient(125deg,#262039,#17152e); border:1px solid #4c3c5b; border-radius:24px; display:grid; grid-template-columns:1.25fr 1fr; gap:58px; padding:48px; }
.family-panel p { font-size:14px; margin-bottom:18px; }
.family-panel h2 { font-size:34px; }
.family-practices { padding-left:30px; border-left:1px solid #51435f; }
.family-practices h3 { font-size:20px; margin-bottom:25px; }
.family-practices ul { list-style:none; display:grid; gap:28px; }
.family-practices strong { font-size:15px; font-weight:500; color:#ead7b9; display:block; }
.family-practices span { display:block; font-size:12px; color:#b1a5c4; margin-top:8px; }
.family-context { font-size:12px; color:#a89bbc; padding:20px 10px 0; line-height:1.9; }
.rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.rules-grid h3 { font-size:25px; margin-bottom:25px; }
.journey-instructions { padding-left:20px; display:grid; gap:17px; }
.journey-instructions li { padding-left:8px; color:var(--mint); }
.journey-instructions strong { font-weight:600; color:#e8dcf2; }
.rules-grid .points-note { font-size:12px; border-left:2px solid #665079; padding-left:16px; margin-top:27px; }
.evolution-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.evolution-table caption { text-align:left; font:600 22px 'Outfit',sans-serif; color:var(--paper); margin-bottom:24px; }
.evolution-table th { font-weight:500; }
.evolution-table th,.evolution-table td { padding:17px 7px; border-bottom:1px solid #3b2c4a; }
.evolution-table thead th { color:#aa9abb; font-size:10px; }
.evolution-table td:last-child { color:var(--gold-light); }
.evolution-table-wrap .small-note { margin-top:20px; }
.living-faq { max-width:950px; }
.living-faq details { padding:23px 0; border-bottom:1px solid #3a2b47; }
.living-faq summary { cursor:pointer; font-size:17px; color:#e3d8ee; }
.living-faq details p { font-size:14px; line-height:1.9; color:#b3a5c5; padding-top:16px; max-width:780px; }
.living-final { text-align:center; padding-top:110px; padding-bottom:100px; }
.living-final h2 { font-size:clamp(32px,4vw,50px); line-height:1.15; margin-bottom:24px; }
.living-final>p:not(.eyebrow) { max-width:560px; margin:0 auto 28px; color:#b8abcb; font-size:14px; line-height:1.85; }
.living-footer { padding:40px 0; }
.living-footer>.container { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; }
.living-footer-links { display:flex; gap:23px; justify-content:flex-end; flex-wrap:wrap; font-size:12px; }
.living-footer .small-note { grid-column:1/-1; }
.home-living-promo { margin:30px auto 55px; padding:30px 36px; border:1px solid #69528b; background:linear-gradient(120deg,#211630,#111c2c); border-radius:22px; display:flex; align-items:center; gap:35px; }
.home-living-promo h2 { font-size:27px; line-height:1.2; margin-bottom:10px; }
.home-living-promo p { font-size:14px; color:#bbafce; }
.home-living-promo .btn { flex-shrink:0; margin-left:auto; }
@media(max-width:900px) { .living-chat-grid { gap:35px; } .living-manifesto { gap:40px; } .family-panel { gap:30px; padding:30px; } .rules-grid { gap:35px; } .living-hero { gap:10px; } }
@media(max-width:768px) {
  .living-hero { grid-template-columns:1fr; padding-top:130px; padding-bottom:42px; min-height:0; gap:35px; }
  .living-hero-copy { max-width:570px; }
  .living-hero h1 { font-size:46px; letter-spacing:-1.5px; }
  .living-lead { font-size:15px; line-height:1.85; }
  .living-actions { gap:20px; margin-top:25px; }
  .living-hero-art { margin:0 auto; width:min(100%,520px); }
  .living-hero-art figcaption { font-size:10px; }
  .living-manifesto { grid-template-columns:1fr; gap:18px; margin-inline:24px; width:auto; padding-inline:0; }
  .living-manifesto h2 { font-size:23px; }
  .living-section { padding-top:70px; }
  .section-heading { margin-bottom:28px; }
  .section-heading h2,.chat-explanation h2 { font-size:33px; }
  .companion-picker { gap:9px; }
  .companion-choice { border-radius:12px; padding:10px 4px 15px; }
  .companion-choice .avatar-sprite { width:clamp(40px,12vw,80px); }
  .companion-choice strong { font-size:17px; }
  .emotion-label { font-size:9px; }
  .journey-stage { grid-template-columns:1fr; padding:32px 0 5px; gap:24px; }
  .journey-story h3 { font-size:27px; }
  .evolution-portrait { grid-row:1; }
  .selected-art { width:180px; }
  .portrait-spark { right:22%; }
  .living-chat-section { padding:60px 0; margin-top:45px; }
  .living-chat-grid { grid-template-columns:1fr; gap:35px; }
  .sample-chat { max-width:510px; width:100%; margin:auto; }
  .sample-chat-header { padding:14px 18px; }
  .sample-messages { padding:20px; gap:14px; }
  .message-body { font-size:13px; }
  .benefits-editorial { grid-template-columns:1fr; gap:28px; margin-top:30px; }
  .benefits-editorial article { display:flex; gap:25px; }
  .benefits-editorial h3 { margin-top:5px; }
  .emotional-note { padding-left:19px; font-size:15px; }
  .family-panel { grid-template-columns:1fr; padding:26px; gap:30px; }
  .family-panel h2 { font-size:30px; }
  .family-practices { padding-left:0; padding-top:26px; border-left:0; border-top:1px solid #51435f; }
  .rules-grid { grid-template-columns:1fr; gap:35px; }
  .evolution-table th,.evolution-table td { padding:15px 5px; }
  .living-final { padding-top:75px; padding-bottom:70px; }
  .living-footer>.container { grid-template-columns:1fr; }
  .living-footer-links { justify-content:flex-start; gap:20px; }
  .home-living-promo { flex-direction:column; align-items:flex-start; gap:22px; margin-inline:24px; width:auto; padding:26px; }
  .home-living-promo .btn { margin-left:0; }
}
@media(max-width:360px) { .living-hero h1 { font-size:38px; } .companion-choice strong { font-size:15px; } .emotion-label { font-size:8px; } .living-language button { padding-inline:7px; } .family-panel { padding:20px; } .demo-label { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .living-page *,.home-living-promo * { transition:none!important; animation:none!important; } }
