:root{
  --bg:#F3EEE4; --surface:#FFFCF6; --surface-2:#E7E4D2; --ink:#2F2A1F; --ink-2:#6E6455; --line:#DDD3C0;
  --brand:#5E6E3A; --brand-ink:#FFFFFF; --leaf:#6E7F45; --honey:#A85F37; --honey-ink:#FFFFFF; --honey-soft:#F2DFCF;
  --warn-soft:#F8E4DA; --warn:#9C3F22; --shadow:0 10px 30px rgba(47,42,31,.12); --lift:0 2px 0 #E3DAC8;
  --f-display:"Literata", Georgia, "Times New Roman", serif;
  --f-body:"Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1A1813; --surface:#24211A; --surface-2:#2F2C21; --ink:#EFE9DC; --ink-2:#B5AB98; --line:#3D382B;
  --brand:#B5C487; --brand-ink:#1A1813; --leaf:#A3B474; --honey:#D9875A; --honey-ink:#1A1206; --honey-soft:#3A2A1E;
  --warn-soft:#3A1D16; --warn:#F09A84; --shadow:0 10px 30px rgba(0,0,0,.4); --lift:0 2px 0 #12100C; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#1A1813; --surface:#24211A; --surface-2:#2F2C21; --ink:#EFE9DC; --ink-2:#B5AB98; --line:#3D382B;
  --brand:#B5C487; --brand-ink:#1A1813; --leaf:#A3B474; --honey:#D9875A; --honey-ink:#1A1206; --honey-soft:#3A2A1E;
  --warn-soft:#3A1D16; --warn:#F09A84; --shadow:0 10px 30px rgba(0,0,0,.4); --lift:0 2px 0 #12100C; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:18px; line-height:1.5}
button{font:inherit; color:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--honey); outline-offset:2px}
h1,h2,h3{font-family:var(--f-display); font-weight:600; line-height:1.15; text-wrap:balance; margin:0}
h1{font-size:1.9rem} h2{font-size:1.5rem} h3{font-size:1.2rem}
p{margin:0}
.muted{color:var(--ink-2)}
.small{font-size:.88rem}
.eyebrow{font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; font-weight:800; color:var(--honey)}

.shell{max-width:440px; margin:0 auto; min-height:100vh; min-height:100dvh; background:var(--bg); position:relative}
@media (min-width:600px){.shell{box-shadow:var(--shadow); background:var(--bg)}}
.screen{padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:20px 120px; display:flex; flex-direction:column; gap:18px}
.screen.app{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}

.brandrow{display:flex; align-items:center; gap:10px}
.logo{width:34px; height:34px; flex:none}
.wordmark{font-family:var(--f-display); font-size:1.25rem}

.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:58px; border-radius:14px; border:0;
  background:var(--brand); color:var(--brand-ink); font-weight:700; font-size:1.08rem; cursor:pointer; padding:0 18px; text-align:center}
.btn.honey{background:var(--honey); color:var(--honey-ink)}
.btn.ghost{background:transparent; color:var(--brand); border:2px solid var(--line)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn:active{transform:translateY(1px)}

.card{background:var(--surface); border-radius:18px; box-shadow:var(--lift); padding:18px; display:flex; flex-direction:column; gap:12px}
.panel{background:var(--surface-2); border-radius:16px; padding:14px 16px}

/* guide */
.guide{display:flex; gap:12px; align-items:center}
.guide svg{width:52px; height:52px; flex:none}
.guide .bubble{background:var(--surface); border-radius:4px 16px 16px 16px; padding:10px 14px; font-size:1rem; min-width:0}

/* quiz */
.qtop{display:flex; align-items:center; gap:12px}
.back{background:var(--surface); border:0; width:44px; height:44px; border-radius:50%; cursor:pointer; flex:none; font-size:1.3rem}
.bar{flex:1; height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--leaf); border-radius:99px; transition:width .3s}
.opts{display:flex; flex-direction:column; gap:10px}
.opt{display:flex; align-items:center; gap:14px; text-align:left; background:var(--surface); border:2px solid transparent; border-radius:16px; padding:16px; min-height:62px; cursor:pointer; font-size:1.05rem}
.opt[aria-pressed="true"]{border-color:var(--brand); background:var(--surface-2)}
.opt .ic{width:40px; height:40px; border-radius:12px; background:var(--surface-2); display:grid; place-items:center; flex:none; color:var(--brand)}
.opt[aria-pressed="true"] .ic{background:var(--brand); color:var(--brand-ink)}
.opt .ic svg{width:22px; height:22px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:700; font-size:.95rem}
.field input{font:inherit; font-size:1.1rem; padding:16px; border-radius:14px; border:2px solid var(--line); background:var(--surface); color:var(--ink); width:100%}

/* loading */
.loader{display:flex; flex-direction:column; gap:14px; padding-top:30px}
.lstep{display:flex; gap:12px; align-items:center; opacity:.35; transition:opacity .3s}
.lstep.on{opacity:1}
.lstep .dot{width:26px; height:26px; border-radius:50%; border:2px solid var(--leaf); display:grid; place-items:center; flex:none; font-size:.8rem; color:var(--brand-ink)}
.lstep.on .dot{background:var(--leaf)}

/* sales */
.hero-art{border-radius:24px; overflow:hidden; aspect-ratio:4/3; max-width:100%}
.hero-art svg{width:100%; height:100%; display:block}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{background:var(--surface-2); border-radius:99px; padding:4px 12px; font-size:.85rem}
.weeks{display:flex; flex-direction:column; gap:10px}
.week{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:start}
.week .wk{font-family:var(--f-display); font-size:.95rem; background:var(--surface-2); border-radius:12px; padding:8px 0; text-align:center}
.feat{display:flex; gap:12px; align-items:flex-start}
.feat .ic{width:40px; height:40px; border-radius:12px; background:var(--surface-2); display:grid; place-items:center; flex:none; color:var(--brand)}
.feat .ic svg{width:22px; height:22px}
.plans{display:flex; flex-direction:column; gap:10px}
.plan{position:relative; display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; text-align:left; background:var(--surface); border:2px solid var(--line); border-radius:18px; padding:16px; cursor:pointer}
.plan[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent)}
.radio{width:24px; height:24px; border-radius:50%; border:2px solid var(--ink-2)}
.plan[aria-pressed="true"] .radio{border:7px solid var(--brand)}
.plan .price{text-align:right; font-variant-numeric:tabular-nums}
.plan .price b{font-size:1.25rem; display:block}
.ribbon{position:absolute; top:-12px; left:16px; background:var(--honey); color:var(--honey-ink); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:99px}
.faq details{background:var(--surface); border-radius:16px; padding:14px 16px}
.faq details+details{margin-top:8px}
.faq summary{font-weight:700; cursor:pointer}
.faq details p{margin-top:8px}
.disclaimer{font-size:.82rem; color:var(--ink-2); border-top:1px solid var(--line); padding-top:14px}
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:20; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); padding-top:12px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(to top, var(--bg) 70%, transparent)}
.sticky-cta .in{max-width:408px; margin:0 auto}

/* app */
.top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.daypill{background:var(--surface); border-radius:99px; padding:6px 14px; font-weight:700; font-size:.9rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.gallery{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:8px; aspect-ratio:3/2; max-width:100%}
.gallery>div{border-radius:16px; overflow:hidden; min-width:0}
.gallery>div:first-child{grid-row:1/3}
.gallery svg{width:100%; height:100%; display:block}
.audio{display:flex; align-items:center; gap:12px; background:var(--surface-2); border-radius:16px; padding:10px 14px}
.play{width:48px; height:48px; border-radius:50%; border:0; background:var(--brand); color:var(--brand-ink); cursor:pointer; flex:none; display:grid; place-items:center}
.play svg{width:20px; height:20px}
.track{flex:1; min-width:0}
.track .bar{margin-top:6px}
.time{font-variant-numeric:tabular-nums; font-size:.85rem; color:var(--ink-2)}
.steps{margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:8px}
.why{font-size:.95rem}
.done-btn{min-height:66px; font-size:1.2rem}
.tomorrow{display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px dashed var(--line); border-radius:16px; padding:12px 16px; margin-top:10px}
.footlinks{text-align:center; font-size:.85rem; color:var(--ink-2); line-height:1.8}
.footlinks button{background:none; border:0; font:inherit; color:var(--ink-2); text-decoration:underline; cursor:pointer; padding:0 2px}
.done-state{display:flex; gap:12px; align-items:center; background:var(--honey-soft); border-radius:16px; padding:14px 16px}
.done-state .ck{width:44px; height:44px; border-radius:50%; background:var(--honey); color:var(--honey-ink); display:grid; place-items:center; flex:none; font-size:1.3rem; font-weight:700}
.minirow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mini{background:var(--surface); box-shadow:var(--lift); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:2px; text-align:left; border:0; cursor:pointer}
.mini b{font-family:var(--f-display); font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums}

.tabs{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px); padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px)}
.tabs .in{max-width:440px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); align-items:end}
.tab{background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0 10px; font-size:.78rem; color:var(--ink-2)}
.tab svg{width:26px; height:26px}
.tab[aria-current="true"]{color:var(--brand); font-weight:700}
.tab.cam .camc{width:62px; height:62px; margin-top:-28px; border-radius:50%; background:var(--honey); color:var(--honey-ink); display:grid; place-items:center; box-shadow:var(--shadow); border:4px solid var(--surface)}

/* scan */
.modes{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mode{background:var(--surface); border:2px solid transparent; border-radius:16px; padding:14px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; font-weight:700; font-size:.95rem}
.mode svg{width:30px; height:30px; color:var(--brand)}
.mode-d{font-weight:500; font-size:.78rem; line-height:1.3; color:var(--ink-2); text-align:center}
.scanleft{margin:-6px 0 12px}
.mode[aria-pressed="true"]{border-color:var(--brand); background:var(--surface-2)}
.viewfinder{aspect-ratio:1/1; max-width:100%; border-radius:24px; background:var(--surface-2); display:grid; place-items:center; position:relative; overflow:hidden}
.viewfinder img{width:100%; height:100%; object-fit:cover}
.viewfinder .corners{position:absolute; inset:18px; border:3px dashed var(--line); border-radius:18px; pointer-events:none}
.viewfinder .hint{display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-2); text-align:center; padding:20px}
.viewfinder .hint svg{width:48px; height:48px}
.scanline{position:absolute; left:0; right:0; height:3px; background:var(--honey); top:0; animation:scan 1.4s ease-in-out infinite alternate}
@keyframes scan{to{top:calc(100% - 3px)}}
.filebtn{position:relative; overflow:hidden}
.linkbtn{background:none; border:0; color:var(--brand); font:inherit; font-weight:700; cursor:pointer; padding:10px; text-align:center; width:100%; text-decoration:underline; text-underline-offset:3px}
.linkbtn .small{text-decoration:none; display:inline-block}
.demo-note{display:flex; gap:10px; align-items:flex-start; background:color-mix(in srgb, #C9971C 16%, var(--surface)); border-radius:14px; padding:12px 14px; font-size:.95rem; margin-bottom:12px}
.demo-note svg{width:22px; height:22px; flex:none; color:#A87A10}
.filebtn input{position:absolute; inset:0; opacity:0; cursor:pointer}
.result .row{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:8px 0; font-variant-numeric:tabular-nums}
.result .row:last-child{border-bottom:0}
.flag{display:flex; gap:10px; align-items:flex-start; background:var(--warn-soft); border-radius:12px; padding:10px 12px; font-size:.95rem}
.flag b{color:var(--warn)}
.good{display:flex; gap:10px; align-items:flex-start; background:var(--surface-2); border-radius:12px; padding:10px 12px; font-size:.95rem}
.counter{font-size:.85rem; color:var(--ink-2); text-align:center}

/* progress */
.streak{display:flex; align-items:center; gap:16px}
.flame{width:72px; height:72px; flex:none}
.streak b{font-family:var(--f-display); font-weight:600; font-size:3rem; line-height:1; font-variant-numeric:tabular-nums}
.grid21{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.grid21 span{aspect-ratio:1; border-radius:10px; background:var(--surface-2); display:grid; place-items:center; font-size:.85rem; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.grid21 .d{background:var(--leaf); color:var(--brand-ink); font-weight:700}
.grid21 .t{outline:3px solid var(--honey); outline-offset:-3px; color:var(--ink); font-weight:700}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-2)}
.legend i{display:inline-block; width:12px; height:12px; border-radius:4px; vertical-align:-1px; margin-right:5px}
.scale{display:flex; flex-direction:column; gap:8px}
.scale .lab{display:flex; justify-content:space-between; font-weight:700; font-size:.98rem}
.dots{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.dots button{min-height:48px; border-radius:12px; border:2px solid var(--line); background:var(--surface); cursor:pointer; font-weight:700; font-variant-numeric:tabular-nums}
.dots button[aria-pressed="true"]{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.ends{display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-2)}
.chart svg{width:100%; height:auto; display:block}

/* library */
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-right:-16px; scrollbar-width:none}
.chip{flex:none; border-radius:99px; border:2px solid var(--line); background:var(--surface); padding:8px 16px; cursor:pointer; font-weight:700; font-size:.95rem}
.chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.items{display:flex; flex-direction:column; gap:10px}
.item{display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center; background:var(--surface); box-shadow:var(--lift); border-radius:18px; padding:10px; text-align:left; border:0; cursor:pointer; width:100%}
.item .th{width:76px; height:76px; border-radius:14px; overflow:hidden}
.item .th svg{width:100%; height:100%; display:block}
.item div{min-width:0}
.item .meta{font-size:.85rem; color:var(--ink-2)}

/* coach */
.chat{display:flex; flex-direction:column; gap:10px}
.msg{max-width:86%; padding:12px 14px; border-radius:18px; font-size:1rem; white-space:pre-line}
.msg.ai{background:var(--surface); border-top-left-radius:4px; align-self:flex-start}
.msg.me{background:var(--brand); color:var(--brand-ink); border-top-right-radius:4px; align-self:flex-end}
.typing{display:inline-flex; gap:4px}
.typing i{width:8px; height:8px; border-radius:50%; background:var(--ink-2); animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.25}}
.quick{display:flex; gap:8px; flex-wrap:wrap}
.quick button{border-radius:99px; border:2px solid var(--line); background:var(--surface); padding:8px 14px; cursor:pointer; font-size:.92rem; text-align:left}
.composer{position:fixed; left:0; right:0; bottom:calc(76px + env(safe-area-inset-bottom,0px)); z-index:19; background:var(--bg); padding-block:10px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
.composer form{max-width:408px; margin:0 auto; display:flex; gap:8px}
.composer input{flex:1; min-width:0; font:inherit; font-size:1.05rem; padding:14px 16px; border-radius:99px; border:2px solid var(--line); background:var(--surface); color:var(--ink)}
.composer button{width:54px; height:54px; border-radius:50%; border:0; background:var(--brand); color:var(--brand-ink); cursor:pointer; flex:none; display:grid; place-items:center}
.composer button svg{width:22px; height:22px}
.screen.coach{padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}

.tr-row{display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center}
.tr-row .th{width:72px; height:72px; border-radius:12px; overflow:hidden}
.tr-row div{display:flex; flex-direction:column; min-width:0}
.sheet-bg{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; display:flex; align-items:flex-end; justify-content:center}
.sheet{background:var(--bg); width:100%; max-width:440px; max-height:88vh; overflow:auto; border-radius:24px 24px 0 0; padding-block:18px calc(24px + env(safe-area-inset-bottom,0px)); padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); display:flex; flex-direction:column; gap:14px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(100px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:14px; z-index:50; font-weight:700; max-width:calc(100% - 32px); text-align:center}
.covers{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cover{border:0; padding:0; background:var(--surface); border-radius:16px; overflow:hidden; cursor:pointer; text-align:left; box-shadow:var(--lift)}
.cover .cv{height:96px}
.cover b{display:block; padding:8px 12px 10px; font-size:1rem}
.slot{position:relative; width:100%; height:100%}
.slot>svg{width:100%; height:100%; display:block}
.slot .slot-tag{position:absolute; left:8px; bottom:8px; display:flex; gap:5px; align-items:center; background:rgba(47,42,31,.8); color:#FFFCF6; font-family:var(--f-body); font-size:.7rem; font-weight:800; line-height:1.25; padding:4px 9px; border-radius:99px; max-width:calc(100% - 16px)}
.slot .slot-tag svg{width:13px; height:13px; flex:none}
.slot .slot-tag.ic{padding:4px; right:auto}
/* ---- quiz v2 ---- */
.screen.quiz{padding-bottom:40px}
.center{text-align:center}
.center-col{align-items:center; text-align:center}
.center-row{justify-content:center}
.qtop .logo{width:30px; height:30px}
.back svg{width:22px; height:22px}
.back{display:grid; place-items:center; color:var(--ink); box-shadow:var(--lift)}
.qhead{display:flex; flex-direction:column; gap:6px}
.qhead h2{font-size:1.65rem}
.ogrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ogrid.three{grid-template-columns:repeat(3,1fr)}
.ocard{background:var(--surface); border:2px solid transparent; border-radius:18px; cursor:pointer; box-shadow:var(--lift); padding:0; text-align:left; overflow:hidden; display:flex; flex-direction:column}
.ocard[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent)}
.ocard.num{align-items:center; justify-content:center; padding:18px 8px; gap:2px; text-align:center; min-height:108px}
.ocard.num b{font-family:var(--f-display); font-weight:600; font-size:2.1rem; line-height:1; color:var(--brand)}
.ocard.num span{color:var(--ink-2); font-size:.95rem}
.ocard .oph{display:block; height:92px}
.ocard .olab{display:flex; align-items:center; gap:8px; padding:10px 12px; font-weight:800; font-size:1rem}
.ocard .oic{width:28px; height:28px; border-radius:9px; background:var(--surface-2); display:grid; place-items:center; color:var(--brand); flex:none}
.ocard .oic svg{width:17px; height:17px}
.ocard[aria-pressed="true"] .oic{background:var(--brand); color:var(--brand-ink)}
.opt{box-shadow:var(--lift)}
.opt .otx{display:flex; flex-direction:column; flex:1; min-width:0}
.opt .ic.lvl{display:flex; gap:3px; align-items:flex-end; justify-content:center; padding:9px}
.opt .ic.lvl i{width:6px; border-radius:3px; background:var(--line)}
.opt .ic.lvl i:nth-child(1){height:8px}.opt .ic.lvl i:nth-child(2){height:14px}.opt .ic.lvl i:nth-child(3){height:20px}
.opt .ic.lvl i.on{background:var(--honey)}
.opt[aria-pressed="true"] .ic.lvl i.on{background:var(--brand-ink)}
.opt .box{width:26px; height:26px; border-radius:8px; border:2px solid var(--line); display:grid; place-items:center; color:transparent; flex:none}
.opt .box svg{width:16px; height:16px}
.opt[aria-pressed="true"] .box{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.info{display:flex; flex-direction:column; gap:12px}
.nora-big{width:96px; height:96px; margin:0 auto}
.nora-big.lg{width:132px; height:132px}
.nora-big svg{width:100%; height:100%}
.hero-art.tall{aspect-ratio:5/4}
.trust{display:flex; gap:8px 16px; flex-wrap:wrap; justify-content:center; font-size:.88rem; color:var(--ink-2)}
.trust span{display:flex; gap:6px; align-items:center}
.trust svg{width:17px; height:17px; color:var(--brand)}
.ring-wrap{position:relative; width:150px; height:150px; margin:10px auto 0}
.ring{width:100%; height:100%; transform:rotate(-90deg)}
.ring .rt{fill:none; stroke:var(--surface-2); stroke-width:10}
.ring .rf{fill:none; stroke:var(--honey); stroke-width:10; stroke-linecap:round}
.ring-wrap b{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-display); font-size:2rem; font-weight:600; font-variant-numeric:tabular-nums}
.loader{padding-top:4px}
.lstep .dot svg{width:15px; height:15px}
.lstep .dot{color:transparent}
.lstep.on .dot{color:var(--brand-ink)}
.profile{gap:4px}
.prow{display:flex; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow .ic{width:42px; height:42px; border-radius:12px; background:var(--surface-2); display:grid; place-items:center; color:var(--brand); flex:none}
.prow .ic svg{width:22px; height:22px}
.prow div{display:flex; flex-direction:column; min-width:0}
.routine{display:flex; flex-direction:column; gap:10px}
.rrow{display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; background:var(--surface); border-radius:16px; padding:10px; box-shadow:var(--lift); border:2px solid transparent}
.rrow.hi{border-color:var(--honey)}
.rrow .rth{width:72px; height:72px; border-radius:12px; overflow:hidden}
.rrow div{display:flex; flex-direction:column; min-width:0}
/* ---- sales v2 ---- */
.screen.sales{gap:28px}
.s-hero{display:flex; flex-direction:column; gap:14px}
.s-hero h1{font-size:2.05rem}
.lead{font-size:1.08rem; color:var(--ink-2)}
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.ticks li{display:flex; gap:10px; align-items:flex-start}
.tick{width:24px; height:24px; border-radius:50%; background:var(--brand); color:var(--brand-ink); display:grid; place-items:center; flex:none; margin-top:2px}
.tick svg{width:14px; height:14px}
a.btn{text-decoration:none}
.made{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; background:var(--surface-2); border-radius:18px; padding:14px}
.made div{display:flex; flex-direction:column; min-width:0}
.made b{font-size:.95rem; line-height:1.25}
.sec{display:flex; flex-direction:column; gap:12px}
.sec>h2{font-size:1.6rem}
.bens{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ben{background:var(--surface); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--lift); min-width:0}
.bic{width:44px; height:44px; border-radius:12px; background:var(--surface-2); display:grid; place-items:center; color:var(--brand); overflow:hidden}
.bic svg{width:24px; height:24px}
.bic svg[viewBox="0 0 80 80"]{width:44px; height:44px}
.steps3{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.steps3 li{display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start}
.sn{width:44px; height:44px; border-radius:50%; background:var(--honey); color:var(--honey-ink); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1.25rem}
.mphones{display:flex; gap:12px; overflow-x:auto; padding:4px 2px 10px; margin-right:-16px; scroll-snap-type:x mandatory}
.mph{margin:0; flex:none; scroll-snap-align:start; display:flex; flex-direction:column; gap:6px; align-items:center}
.mph figcaption{font-size:.85rem; font-weight:700; color:var(--ink-2)}
.mphone{width:168px; height:330px; border-radius:26px; border:6px solid var(--ink); background:var(--bg); padding:14px 10px; display:flex; flex-direction:column; gap:8px; font-size:.68rem; overflow:hidden}
.mphone .eyebrow{font-size:.55rem}
.mphone .mt{font-family:var(--f-display); font-size:.92rem; line-height:1.15}
.mimg{height:110px; border-radius:12px; overflow:hidden; flex:none}
.mimg.tall{height:150px}
.mimg svg{width:100%; height:100%; display:block}
.maud{display:flex; gap:6px; align-items:center; background:var(--surface-2); border-radius:10px; padding:6px}
.maud i{width:20px; height:20px; border-radius:50%; background:var(--brand); flex:none}
.maud span{flex:1; height:4px; border-radius:4px; background:linear-gradient(to right, var(--honey) 40%, var(--line) 40%)}
.mbtn{margin-top:auto; background:var(--honey); color:var(--honey-ink); border-radius:10px; text-align:center; padding:9px 4px; font-weight:800; font-size:.75rem}
.mbtn.ghost{background:var(--surface); color:var(--brand); border:2px solid var(--line)}
.mmodes{display:grid; grid-template-columns:repeat(3,1fr); gap:5px}
.mmodes span{background:var(--surface); border-radius:9px; display:grid; place-items:center; padding:7px 0; color:var(--brand); border:2px solid transparent}
.mmodes span.on{border-color:var(--brand)}
.mmodes svg{width:18px; height:18px}
.mstreak{background:var(--honey-soft); border-radius:12px; padding:10px; display:flex; flex-direction:column}
.mstreak b{font-family:var(--f-display); font-size:2rem; line-height:1}
.mgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.mgrid i{aspect-ratio:1; border-radius:4px; background:var(--surface-2)}
.mgrid i.d{background:var(--leaf)}
.cmp-wrap{overflow-x:auto; background:var(--surface); border-radius:18px; box-shadow:var(--lift)}
.cmp{width:100%; border-collapse:collapse; font-size:.95rem}
.cmp th,.cmp td{padding:11px 10px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle}
.cmp tr:last-child td{border-bottom:0}
.cmp td:first-child,.cmp th:first-child{text-align:left}
.cmp th{font-size:.82rem; color:var(--ink-2); font-weight:700}
.cmp .us{background:color-mix(in srgb, var(--brand) 9%, transparent); color:var(--brand); font-weight:800}
.cmp .y,.cmp .n{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%}
.cmp .y{background:var(--brand); color:var(--brand-ink)}
.cmp .n{background:var(--surface-2); color:var(--ink-2)}
.cmp .y svg,.cmp .n svg{width:15px; height:15px}
.meet{flex-direction:row; align-items:center; gap:14px; background:var(--surface-2); border-radius:18px; padding:16px}
.meet .nora-big{flex:none; margin:0}
.meet>div:last-child{display:flex; flex-direction:column; gap:4px; min-width:0}
.guar{display:flex; gap:16px; align-items:center; border:2px dashed var(--honey); border-radius:18px; padding:16px}
.guar>div:last-child{display:flex; flex-direction:column; gap:4px; min-width:0}
.seal{width:84px; height:84px; flex:none; border-radius:50%; background:var(--honey); color:var(--honey-ink); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 0 0 5px var(--honey-soft)}
.seal b{font-family:var(--f-display); font-size:1.9rem; line-height:1}
.seal span{font-size:.7rem; font-weight:800; letter-spacing:.12em}
.final{display:flex; flex-direction:column; gap:14px; text-align:center}
.sales .faq{gap:0}
.sales .faq h2{margin-bottom:12px}
@media (max-width:360px){.bens{grid-template-columns:1fr}.made{grid-template-columns:1fr}}
html{font-size:calc(100% * var(--scale,1))}
body{font-size:calc(18px * var(--scale,1))}
.avatar{width:44px; height:44px; border-radius:50%; border:0; background:var(--brand); color:var(--brand-ink); font-weight:800; font-size:1.05rem; cursor:pointer; flex:none; display:grid; place-items:center}
.top-r{display:flex; gap:8px; align-items:center}
.bell{width:96px; height:96px; margin:8px auto 0; border-radius:50%; background:var(--honey-soft); color:var(--honey); display:grid; place-items:center}
.bell svg{width:46px; height:46px}
.times{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.times .chip{text-align:center; font-variant-numeric:tabular-nums; min-height:48px}
.toggle{display:flex; gap:10px; align-items:center; font-weight:700; cursor:pointer}
.toggle input{width:22px; height:22px; accent-color:var(--brand)}
.notif-preview,.push{display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; background:var(--surface); border-radius:18px; padding:12px; box-shadow:var(--shadow); font-size:.92rem}
.notif-preview div,.push div{display:flex; flex-direction:column; min-width:0}
.np-ic .logo{width:40px; height:40px}
.push{position:fixed; z-index:60; left:50%; transform:translateX(-50%); top:calc(10px + env(safe-area-inset-top,0px)); width:min(408px, calc(100% - 32px)); grid-template-columns:40px 1fr; animation:pin .45s ease-out}
.push.out{opacity:0; transform:translate(-50%,-20px); transition:all .5s}
@keyframes pin{from{opacity:0; transform:translate(-50%,-30px)}}
.kv{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line)}
.kv:last-of-type{border-bottom:0}
.kv b{text-align:right}
.fsz{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.fsz button{min-height:58px; border-radius:14px; border:2px solid var(--line); background:var(--surface); cursor:pointer; font-family:var(--f-display); font-weight:700}
.fsz button[aria-pressed="true"]{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.links{gap:0; padding:6px 18px}
.links button{display:flex; gap:12px; align-items:center; background:none; border:0; border-bottom:1px solid var(--line); padding:14px 0; cursor:pointer; text-align:left; font-weight:700}
.links button:last-child{border-bottom:0}
.links svg{width:22px; height:22px; color:var(--brand)}
.md{position:relative; display:inline-block; width:64px; height:64px}
.md svg{width:100%; height:100%}
.md .mi{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); width:24px; height:24px; color:var(--ink-2)}
.md.on .mi{color:var(--mc, var(--honey))}
.md .mi svg{width:100%; height:100%}
.medal.big{display:flex; justify-content:center; margin-top:16px}
.medal.big .md{width:150px; height:150px; animation:pop .8s cubic-bezier(.2,1.6,.4,1)}
.medal.big .mi{width:56px; height:56px}
@keyframes pop{from{transform:scale(.3) rotate(-20deg); opacity:0}}
.badges{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.bdg{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; font-size:.78rem; min-width:0}
.bdg .md{width:56px; height:56px}
.bdg b{line-height:1.2}
.bdg.off{opacity:.7}
.celebrate{position:relative; overflow:hidden}
.confetti{position:absolute; inset:0; pointer-events:none; overflow:hidden; height:520px}
.confetti i{position:absolute; top:-20px; width:9px; height:14px; border-radius:2px; animation:fall linear infinite}
@keyframes fall{to{transform:translateY(560px) rotate(540deg)}}
@media (prefers-reduced-motion: reduce){.confetti{display:none}}
.opt .ic.nora-ic{padding:0; overflow:hidden; background:var(--surface-2)}
.opt .ic.nora-ic svg{width:40px; height:40px}
.pick{border:2px solid var(--honey)}
.shead{display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center}
.shead>div{display:flex; flex-direction:column; gap:2px; min-width:0}
.sring{position:relative; width:72px; height:72px; display:block}
.sring svg{width:100%; height:100%}
.sring b{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-display); font-size:1.4rem; font-variant-numeric:tabular-nums}
.sring small{font-size:.6em; color:var(--ink-2)}
.result h4{font-family:var(--f-body); font-size:.82rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); margin:6px 0 0; font-weight:800}
.items-sig{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.items-sig li{display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start}
.items-sig li>span:last-child{display:flex; flex-direction:column; min-width:0}
.sg{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800}
.sg svg{width:15px; height:15px}
.sg.ok{background:var(--leaf); color:var(--brand-ink)}
.sg.mid{background:var(--surface-2); color:var(--ink-2); font-size:1.4rem; line-height:1}
.sg.no{background:var(--warn-soft); color:var(--warn)}
.brow{display:flex; flex-direction:column; gap:4px}
.brow .bl{display:flex; justify-content:space-between; gap:10px; font-size:.95rem}
.brow .bt{height:9px; border-radius:9px; background:var(--surface-2); overflow:hidden}
.brow .bt i{display:block; height:100%; border-radius:9px}
.light{display:flex; gap:10px; align-items:center; background:var(--surface-2); border-radius:12px; padding:10px 12px; font-size:.95rem}
.light .on-y{width:18px; height:18px; border-radius:50%; background:#C9971C; box-shadow:0 0 0 4px color-mix(in srgb, #C9971C 25%, transparent); flex:none}
.ftags{display:flex; gap:6px; flex-wrap:wrap}
.tsp{display:flex; gap:12px; align-items:center; font-size:.92rem; background:var(--surface-2); border-radius:12px; padding:10px 12px}
.cubes{display:flex; gap:4px; flex:none}
.cubes i{width:16px; height:16px; border-radius:4px; background:var(--surface); border:2px solid var(--ink-2)}
.rules{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.rules span{background:var(--surface-2); border-radius:12px; padding:10px 8px; text-align:center; font-size:.85rem; display:flex; flex-direction:column; gap:2px}
.rules b{font-size:1rem; color:var(--brand)}
.vs{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.vs>div{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:6px; padding:9px 10px; align-items:center; font-size:.9rem}
.vs>div+div{border-top:1px solid var(--line)}
.vs>div b{text-align:center}
.vs .ch{background:var(--surface-2); font-size:.82rem; line-height:1.25}
.vs .win{color:var(--brand); background:var(--surface-2); border-radius:8px; padding:2px 0}
.usefirst{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.usefirst svg{width:18px; height:18px; color:#A87A10; margin-bottom:2px}
.usefirst>span{display:flex; flex-direction:column; background:color-mix(in srgb, #C9971C 14%, var(--surface)); border-radius:12px; padding:10px 12px}
.recipe{background:var(--surface-2); border-radius:12px; padding:10px 12px}
.recipe summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px}
.recipe summary::-webkit-details-marker{display:none}
.recipe summary::after{content:'+'; font-size:1.3rem; font-weight:700; color:var(--brand)}
.recipe[open] summary::after{content:'−'}
.recipe summary>span{display:flex; flex-direction:column}
.recipe ol{margin:8px 0 2px; padding-left:20px; display:flex; flex-direction:column; gap:4px; font-size:.95rem}
.recipe+.recipe{margin-top:8px}
.shop{display:flex; flex-direction:column; gap:8px}
.shop label{display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; cursor:pointer}
.shop input{width:22px; height:22px; accent-color:var(--brand); margin:2px 0 0}
.shop label>span{display:flex; flex-direction:column}
.shop input:checked+span b{text-decoration:line-through; color:var(--ink-2)}
.rlink{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; background:var(--surface-2); border:0; border-radius:14px; padding:8px; text-align:left; cursor:pointer; width:100%}
.rlink .th{width:64px; height:64px; border-radius:10px; overflow:hidden}
.rlink>span:last-child{display:flex; flex-direction:column; min-width:0}
.hist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.hist li{display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.hist li:last-child{border-bottom:0}
.hist li>span:nth-child(2){display:flex; flex-direction:column; min-width:0}
.hic{width:40px; height:40px; border-radius:12px; background:var(--surface-2); display:grid; place-items:center; color:var(--brand)}
.hic svg{width:22px; height:22px}
.hsc{font-weight:800; font-variant-numeric:tabular-nums; border-radius:99px; padding:3px 10px; font-size:.85rem}
.hsc.g{background:color-mix(in srgb, var(--leaf) 20%, transparent); color:var(--brand)}
.hsc.m{background:color-mix(in srgb, #C9971C 20%, transparent); color:#8A6510}
.hsc.b{background:var(--warn-soft); color:var(--warn)}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

/* ---- real app additions ---- */
html,body{margin:0}
body{-webkit-tap-highlight-color:transparent; overscroll-behavior-y:none}
.testbar{background:var(--ink); color:var(--bg); font-size:.78rem; text-align:center; padding:4px 16px; padding-top:calc(4px + env(safe-area-inset-top,0px))}
.testbar button{background:none; border:0; color:inherit; text-decoration:underline; font-size:inherit; cursor:pointer; padding:0 4px}
.nudge{display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:center; background:var(--honey-soft); border-radius:16px; padding:12px 14px}
.nudge .ic{width:40px; height:40px; border-radius:12px; background:var(--honey); color:var(--honey-ink); display:grid; place-items:center}
.nudge .ic svg{width:22px; height:22px}
.nudge div{display:flex; flex-direction:column; gap:6px; min-width:0}
.nudge .row2{display:flex; gap:14px; flex-wrap:wrap}
.nudge .row2 button{background:none; border:0; padding:0; font-weight:800; color:var(--brand); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.howto{display:flex; flex-direction:column; gap:10px}
.howto .shot{border-radius:16px; background:var(--surface-2); aspect-ratio:16/9; display:grid; place-items:center; color:var(--ink-2); font-size:.85rem; text-align:center; padding:12px}
.warnbox{background:var(--warn-soft); border-radius:14px; padding:12px 14px; font-size:.95rem}
.warnbox b{color:var(--warn)}
.foc{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* quiz step transitions: both steps share one grid cell while sliding, so the page height never jumps */
.qstage{display:grid; overflow:hidden; margin:-8px -16px; padding:8px 16px}
.qpane{grid-area:1/1; display:flex; flex-direction:column; gap:18px; min-width:0; will-change:transform,opacity}
.qpane.leaving{pointer-events:none}
.qtop .bar i{transition:width .32s cubic-bezier(.22,.61,.36,1)}
.opt,.ocard{transition:transform .14s ease-out, border-color .18s, background-color .18s, box-shadow .18s; -webkit-tap-highlight-color:transparent}
.opt:active,.ocard:active{transform:scale(.97)}
.opt[aria-pressed="true"],.ocard[aria-pressed="true"]{transform:scale(.985)}
.opt .ic,.ocard .oic,.opt .box{transition:background-color .18s, color .18s, border-color .18s}
.sticky-cta{transition:transform .25s cubic-bezier(.22,.61,.36,1), opacity .2s}
.sticky-cta.away{transform:translateY(110%); opacity:0; pointer-events:none}
.slot>img{width:100%; height:100%; object-fit:cover; display:block; background:var(--surface-2)}
.weekimg{border-radius:16px; overflow:hidden; aspect-ratio:16/9}