@font-face { font-family:Poppins; src:url('assets/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:Poppins; src:url('assets/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:Poppins; src:url('assets/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
:root {
  color-scheme:light;
  --paper:#faf7f1; --ink:#352e3b; --plum:#514159; --muted:#665d69; --line:#d7cdd8;
  --surface:#f0e9f2; --accent-text:#70597c; --button-bg:#514159; --button-text:#faf7f1;
  --focus:#70597c; --sans:Poppins,sans-serif;
}
:root[data-theme='dark'] {
  color-scheme:dark;
  --paper:#241e29; --ink:#f8f3ed; --plum:#cdb6d7; --muted:#c8bbce; --line:#65536f;
  --surface:#342b3b; --accent-text:#d5bde0; --button-bg:#cdb6d7; --button-text:#241e29; --focus:#d5bde0;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme='light']) {
    color-scheme:dark;
    --paper:#241e29; --ink:#f8f3ed; --plum:#cdb6d7; --muted:#c8bbce; --line:#65536f;
    --surface:#342b3b; --accent-text:#d5bde0; --button-bg:#cdb6d7; --button-text:#241e29; --focus:#d5bde0;
  }
}
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.7 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p,figure,blockquote { margin:0; }
h1,h2,h3 { font-weight:600; text-wrap:balance; }
a,button,summary { touch-action:manipulation; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
.wrap { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; top:12px; left:12px; transform:translateY(-160%); background:var(--paper); padding:12px; z-index:1; /* Sole overlay: keyboard skip link. */ }
.skip-link:focus { transform:none; }
.site-header { height:80px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wordmark { display:grid; line-height:1.6; }
.wordmark>span { font-size:17px; font-weight:600; letter-spacing:-.7px; }
.wordmark>small { font-size:11px; color:var(--muted); }
.header-actions { display:flex; align-items:center; gap:28px; }
.header-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:13px; }
.header-link span { font-size:19px; }
.theme-toggle { min-height:44px; border:0; padding:8px 4px; background:none; font-size:12px; color:var(--muted); }
.hero { display:grid; grid-template-columns:1.45fr 1fr; align-items:center; gap:32px; padding-block:54px 84px; }
.hero h1 { font-size:clamp(54px,6vw,82px); line-height:1.08; letter-spacing:-.06em; text-wrap:nowrap; }
.hero h1 span { display:block; }
.lead { margin-top:28px; max-width:480px; font-size:17px; line-height:1.8; color:var(--muted); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:56px; padding:14px 22px; border-radius:8px; font-size:14px; font-weight:500; line-height:1.6; }
.button span { font-size:20px; }
.primary { background:var(--button-bg); color:var(--button-text); }
.secondary { background:transparent; color:var(--ink); border:1px solid var(--plum); }
.text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:14px; }
.text-link:hover,.header-link:hover { text-decoration:underline; text-underline-offset:6px; }
.hero-art { text-align:center; }
.hero-nox { width:430px; margin-inline:auto; }
.hero-art figcaption { margin-top:-22px; font-size:14px; color:var(--muted); }
h2 { font-size:clamp(34px,4vw,52px); line-height:1.18; letter-spacing:-.045em; }
h3 { font-size:20px; line-height:1.4; letter-spacing:-.025em; }
.personalization { padding-block:76px 88px; border-top:1px solid var(--line); }
.section-intro { max-width:740px; margin-bottom:38px; }
.section-intro p { max-width:620px; margin-top:20px; color:var(--muted); }
.example-panel { display:grid; grid-template-columns:1fr 1.12fr; background:var(--surface); }
.example-profile { padding:32px; }
.example-switch { display:flex; flex-wrap:wrap; gap:4px 20px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.example-switch button { position:relative; min-height:48px; border:0; padding:8px 0 14px; background:none; color:var(--muted); font-size:13px; font-weight:500; }
.example-switch button[aria-pressed='true'] { color:var(--ink); }
.example-switch button[aria-pressed='true']::after { content:''; position:absolute; height:3px; inset:auto 0 -1px; background:var(--plum); }
.example-body h3 { font-size:25px; line-height:1.35; max-width:390px; min-height:68px; }
.profile-details { display:grid; gap:20px; margin:28px 0 0; }
.profile-details div { display:grid; grid-template-columns:86px 1fr; gap:16px; font-size:14px; }
.profile-details dt { color:var(--muted); }
.profile-details dd { margin:0; }
.script-preview { display:flex; flex-direction:column; justify-content:center; padding:38px 40px; border-left:1px solid var(--line); }
.script-label { color:var(--accent-text); font-size:14px; font-weight:500; margin-bottom:20px; }
.script-preview blockquote { font-size:clamp(19px,1.8vw,23px); line-height:1.65; letter-spacing:-.025em; min-height:300px; }
.example-foot { margin-top:24px; font-size:12px; color:var(--muted); }
.small-note { margin-top:16px; font-size:12px; color:var(--muted); }
.practice-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; padding-block:76px 100px; }
.practice-copy h2 { max-width:440px; margin-bottom:40px; }
.practice-step+.practice-step { margin-top:28px; }
.practice-step h3 { font-size:18px; }
.practice-step p { font-size:14px; color:var(--muted); margin-top:9px; max-width:400px; }
.screen-gallery { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-content:start; }
.screen-gallery figure:nth-child(2) { margin-top:58px; }
.screen-gallery img { width:100%; border-radius:18px; border:1px solid var(--line); }
.screen-gallery figcaption { font-size:12px; line-height:1.5; margin-top:15px; }
.gallery-note { grid-column:1/-1; color:var(--muted); font-size:12px; margin-top:2px; }
.nox-story { padding-block:64px 72px; border-block:1px solid var(--line); }
.nox-story-copy { text-align:center; }
.nox-story-copy p { max-width:600px; margin:20px auto 0; color:var(--muted); }
.nox-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; max-width:960px; margin:30px auto 0; }
.nox-stages figure { text-align:center; }
.nox-stages img { width:100%; max-width:280px; margin-inline:auto; }
.nox-stages figcaption { font-size:14px; font-weight:500; }
.story-note { font-size:12px; color:var(--muted); text-align:center; margin-top:25px; }
.beta-section { display:grid; grid-template-columns:1fr 1fr; gap:96px; padding-block:100px; }
.beta-intro>p { max-width:440px; margin-top:24px; color:var(--muted); }
.beta-intro .beta-note { font-size:13px; }
.beta-options article+article { margin-top:34px; padding-top:34px; border-top:1px solid var(--line); }
.beta-options h3 { font-size:23px; }
.beta-options article>p { font-size:14px; margin-top:12px; color:var(--muted); max-width:440px; }
.beta-options .button { margin-top:22px; }
.beta-options article .availability { font-size:12px; margin-top:12px; }
a[aria-disabled='true'] { cursor:default; background:var(--surface); color:var(--muted); border:1px solid var(--line); }
.faq { border-top:1px solid var(--line); padding-block:72px 96px; }
.faq h2 { margin-bottom:30px; }
.faq-items { display:grid; grid-template-columns:1fr 1fr; column-gap:72px; align-items:start; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none; min-height:76px; cursor:pointer; padding:18px 0; font-size:15px; font-weight:500; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary>span { font-size:24px; color:var(--accent-text); }
.faq details[open] summary>span { transform:rotate(45deg); }
.faq details p { color:var(--muted); font-size:14px; line-height:1.8; padding-bottom:24px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding-block:28px 36px; }
footer>a:last-child { font-size:12px; min-height:44px; display:flex; align-items:center; }
@media(min-width:1440px) { .hero { gap:64px; } }
@media(max-width:1050px) {
  .wrap { width:calc(100% - 64px); }
  .hero { grid-template-columns:1.35fr 1fr; gap:20px; }
  .hero h1 { font-size:clamp(45px,5.9vw,64px); }
  .lead { font-size:15px; }
  .hero-art figcaption { margin-top:-12px; font-size:12px; }
  .example-profile { padding:26px; }
  .script-preview { padding:30px; }
  .profile-details div { grid-template-columns:72px 1fr; gap:10px; font-size:13px; }
  .practice-section { gap:40px; }
  .beta-section { gap:56px; }
  .faq-items { column-gap:40px; }
}
@media(max-width:767px) {
  .wrap { width:calc(100% - 40px); }
  .site-header { height:76px; }
  .wordmark>span { font-size:14px; letter-spacing:-.5px; }
  .wordmark>small { font-size:10px; }
  .header-actions { gap:12px; }
  .header-link { font-size:11px; gap:7px; }
  .header-link span { font-size:15px; }
  .theme-toggle { font-size:10px; }
  .hero { grid-template-columns:1fr; gap:28px; padding-block:38px 52px; }
  .hero h1 { font-size:clamp(40px,8.9vw,68px); }
  .lead { max-width:470px; margin-top:22px; font-size:15px; line-height:1.8; }
  .hero-actions { margin-top:24px; gap:12px 20px; }
  .button { font-size:13px; padding-inline:18px; gap:16px; }
  .text-link { font-size:13px; gap:8px; }
  .hero-nox { width:min(320px,100%); }
  .hero-art figcaption { margin-top:-16px; font-size:13px; }
  h2 { font-size:35px; }
  .personalization { padding-block:54px 60px; }
  .section-intro { margin-bottom:28px; }
  .section-intro p { font-size:15px; margin-top:18px; }
  .example-panel { grid-template-columns:1fr; }
  .example-profile { padding:24px; }
  .example-switch { gap:4px 22px; }
  .example-switch button { font-size:12px; }
  .example-body h3 { min-height:0; font-size:25px; }
  .profile-details div { grid-template-columns:78px 1fr; font-size:13px; }
  .script-preview { padding:28px 24px; border-left:0; border-top:1px solid var(--line); }
  .script-preview blockquote { font-size:20px; min-height:0; }
  .example-foot { margin-top:20px; }
  .practice-section { grid-template-columns:1fr; gap:36px; padding-block:42px 64px; }
  .practice-copy h2 { margin-bottom:30px; max-width:430px; }
  .practice-step p { font-size:15px; max-width:500px; }
  .screen-gallery { gap:14px; }
  .screen-gallery figure:nth-child(2) { margin-top:28px; }
  .screen-gallery img { border-radius:12px; }
  .screen-gallery figcaption { font-size:11px; }
  .nox-story { padding-block:48px 54px; }
  .nox-story-copy h2 { max-width:420px; margin-inline:auto; }
  .nox-story-copy p { font-size:15px; }
  .nox-stages { gap:4px; margin-top:28px; }
  .nox-stages figcaption { font-size:11px; max-width:100px; margin-inline:auto; padding-inline:5px; }
  .story-note { font-size:11px; max-width:360px; margin-inline:auto; }
  .beta-section { grid-template-columns:1fr; gap:32px; padding-block:62px; }
  .beta-intro>p { font-size:15px; margin-top:18px; }
  .beta-options h3 { font-size:22px; }
  .beta-options article>p { font-size:15px; }
  .faq { padding-block:52px 64px; }
  .faq-items { grid-template-columns:1fr; }
  .faq summary { font-size:14px; }
  footer { gap:16px; }
  footer>a:last-child { font-size:11px; }
}
@media(max-width:360px) {
  .wrap { width:calc(100% - 32px); }
  .wordmark>span { font-size:12px; }
  .header-actions { gap:8px; }
  .header-link { font-size:10px; gap:4px; }
  .hero h1 { font-size:39px; }
  .hero-actions { gap:4px 12px; }
  .button { font-size:12px; padding-inline:15px; gap:12px; }
  .text-link { font-size:12px; }
  .example-profile { padding:22px; }
  .example-switch { gap:4px 14px; }
  .example-switch button { font-size:11px; }
  .profile-details div { grid-template-columns:65px 1fr; gap:8px; font-size:12px; }
  .script-preview { padding:26px 22px; }
  .script-preview blockquote { font-size:18px; }
  .nox-stages figcaption { font-size:10px; }
  footer { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth; }
  .button { transition:transform .18s ease-out,opacity .18s ease-out; }
  .button:hover:not([aria-disabled]) { transform:translateY(-2px); }
  .button:active:not([aria-disabled]) { transform:translateY(0) scale(.98); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}