/* Stories LP1-LP5: the public pages. From the direction C mockup
   (mockups/landing/build.py); maintained here. */
:root{--bg:#F7F6FA;--paper:#FFFFFF;--paper-alt:#F1EFF5;--ink:#23202B;--muted:#67627A;--line:#E4E1EC;
--accent:#6B3FA0;--accent-ink:#55308A;--accent-soft:#EEE8F6;--science:#12726B;--science-soft:#E3F2F0;
--warm:#C2721A;--radius:16px;--shadow:0 1px 2px rgba(35,32,43,.05),0 18px 40px -18px rgba(35,32,43,.28);
--serif:'Fraunces',Georgia,'Times New Roman',serif;--serif-body:'Source Serif 4',Georgia,serif;
--sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--gutter:16px;--max:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--accent-ink)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.12}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
@media(min-width:720px){:root{--gutter:32px}}
section{padding:72px 0}
@media(max-width:719px){section{padding:52px 0}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;
border:1px solid var(--accent);border-radius:999px;padding:12px 22px;font:600 15px var(--sans);cursor:pointer;
text-decoration:none;transition:background .15s,transform .1s;white-space:nowrap}
.btn:hover{background:var(--accent-ink)}.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--accent-ink)}.btn-ghost:hover{background:var(--accent-soft)}
.btn-sm{padding:8px 16px;font-size:14px}
.link{color:var(--accent-ink);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.eyebrow{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--accent-ink);text-decoration:none}
.logo-mark{width:30px;height:30px;flex:none}
.logo-img{height:34px;width:auto;flex:none;display:block}
.nav .logo-img{height:36px}
.logo-holder{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border:1.5px dashed currentColor;
border-radius:8px;font:600 8px var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.logo-name,.wordmark{font:600 19px var(--serif);color:var(--ink);letter-spacing:-.01em}
.wm-r{position:relative;display:inline-block}
.wm-refl{position:absolute;left:0;top:62%;transform:scaleY(-1);opacity:.4;color:var(--accent);
-webkit-mask-image:linear-gradient(to top,#000 35%,transparent 95%);mask-image:linear-gradient(to top,#000 35%,transparent 95%)}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav .signin{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
@media(max-width:860px){.nav-links{display:none}.nav .signin{margin-left:auto}}
.nav .signin,.logo-name{white-space:nowrap}
@media(max-width:480px){.nav .wrap{gap:12px}.nav .logo-name,.nav .wordmark{font-size:15px}.nav .logo-mark{width:24px;height:24px}.nav .btn-sm{padding:7px 12px;font-size:13px}}
/* art */
.art{display:block;width:100%;height:auto}
.bars{display:grid;gap:9px;font-size:12px}
.bar-row{display:grid;grid-template-columns:7.2em 1fr 2em;align-items:center;gap:8px;color:var(--muted)}
.bar-row b{height:8px;border-radius:99px;background:var(--science-soft);overflow:hidden}
.bar-row i{display:block;height:100%;background:var(--science);border-radius:99px}
.bar-row em{font-style:normal;font-weight:600;color:var(--science);text-align:right}
.page{background:var(--paper);border-radius:6px;box-shadow:var(--shadow);font-family:var(--serif-body);color:var(--ink)}
.page-kicker{font:600 .62em var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.page h3{font-size:2em;margin:.2em 0 .15em}
.page-meta{font:500 .7em var(--sans);color:var(--muted);margin-bottom:1em;padding-bottom:.8em;border-bottom:1px solid var(--line)}
.page p{font-size:.92em;line-height:1.6}
.page p:first-of-type::first-letter{font-family:var(--serif);font-size:3.1em;float:left;line-height:.85;margin:.06em .04em 0 0;padding-right:.04em;color:var(--accent)}
/* systems */
.systems{display:grid;gap:20px}
@media(min-width:760px){.systems{grid-template-columns:1.6fr 1fr}}
.sys-group{border-radius:var(--radius);padding:22px}
.sys-group.refl{background:var(--accent-soft)}.sys-group.sci{background:var(--science-soft)}
.sys-group h4{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.refl h4{color:var(--accent-ink)}.sci h4{color:var(--science)}
.sys-group ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sys-group li{display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:500}
.glyph{width:22px;height:22px;flex:none}
/* promises */
.promises{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.promise{display:flex;gap:14px;align-items:flex-start}
.promise .icon{width:26px;height:26px;flex:none;color:var(--accent);margin-top:2px}
.promise h4{font:600 16px var(--sans);margin-bottom:4px;letter-spacing:0}
.promise p{color:var(--muted);font-size:14px;margin:0}
/* plans */
.plans{display:grid;gap:18px 14px;grid-template-columns:1fr}
@media(min-width:560px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;display:flex;flex-direction:column}
.plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan.family{background:linear-gradient(160deg,var(--paper),var(--accent-soft))}
.plan h4{font-size:20px}
.plan .price{font:600 26px var(--serif);margin:6px 0 12px}
.plan .price small{font:500 13px var(--sans);color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:0 0 18px;font-size:14px;color:var(--muted);display:grid;gap:6px;flex:1;align-content:start}
.plan li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin:0 8px 2px 0}
.plan-note{position:absolute;top:-10px;left:16px;background:var(--ink);color:#fff;font:600 11px var(--sans);letter-spacing:.06em;
text-transform:uppercase;padding:3px 9px;border-radius:99px}
.plan.family .plan-note{background:var(--accent)}
.soon{font:600 13px var(--sans);color:var(--muted);border:1px dashed var(--line);border-radius:99px;padding:9px;text-align:center}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.plan-table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px}
.plan-table th,.plan-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.plan-table thead th{font:600 17px var(--serif)}
.plan-table thead th span{display:block;font:500 13px var(--sans);color:var(--muted);margin-top:2px}
.plan-table tbody th{font:600 13px var(--sans);color:var(--muted);white-space:nowrap}
.plan-table tr:last-child>*{border-bottom:0}
.plan-table th:nth-child(7),.plan-table td:nth-child(7){background:var(--accent-soft)}
/* faq */
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font:600 17px var(--sans);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-weight:400;font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin:10px 0 0;max-width:62ch}
/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 56px;font-size:14px;color:var(--muted)}
footer .wrap{display:grid;gap:18px}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer nav a{color:var(--ink);text-decoration:none}
.fine{font-size:12px;max-width:70ch}
/* invite dialog (LP3) */
dialog{border:0;border-radius:20px;padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:0 30px 80px -20px rgba(35,32,43,.45)}
dialog::backdrop{background:rgba(35,32,43,.4)}
.dlg{padding:28px}
.dlg h3{font-size:24px;margin-bottom:6px}
.dlg p{color:var(--muted);font-size:14px}
.dlg label{display:block;font:600 13px var(--sans);margin:14px 0 6px}
.dlg input,.dlg textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper-alt);font:15px var(--sans);color:var(--ink)}
.dlg textarea{min-height:70px;resize:vertical}
.dlg .row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.dlg .done{display:none;text-align:center;padding:12px 0}
.dlg.sent form{display:none}.dlg.sent .done{display:block}


.c-hero{padding:56px 0 40px}
.c-hero .wrap{display:grid;gap:44px;align-items:center}
@media(min-width:960px){.c-hero .wrap{grid-template-columns:.85fr 1.15fr}}
.c-hero h1{font-size:clamp(38px,5.4vw,64px);letter-spacing:-.025em}
.c-hero .sub{font-size:19px;color:var(--muted);margin:18px 0 26px;max-width:38ch}
.c-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.c-chips span{font:500 13px var(--sans);padding:6px 12px;border-radius:99px;background:var(--paper);border:1px solid var(--line)}
.c-chips span.s{color:var(--science);border-color:color-mix(in srgb,var(--science) 35%,transparent)}
.devices{position:relative;container-type:inline-size;padding-bottom:6cqw}
.laptop{background:#2B2833;border-radius:2.2cqw 2.2cqw 0 0;padding:1.6cqw 1.6cqw 0;box-shadow:var(--shadow)}
.laptop-base{height:2.4cqw;background:linear-gradient(#D9D6E0,#B9B5C4);border-radius:0 0 3cqw 3cqw;margin:0 -4%}
.screen{background:var(--bg);border-radius:.8cqw .8cqw 0 0;display:grid;grid-template-columns:24% 1fr;aspect-ratio:16/10;overflow:hidden;font-size:1.25cqw}
.scr-side{background:var(--paper);border-right:1px solid var(--line);padding:2cqw 1.6cqw;display:grid;align-content:start;gap:.9cqw}
.scr-side .lg{font:600 1.6cqw var(--serif);margin-bottom:1cqw}
.scr-person{padding:.8cqw 1cqw;border-radius:.8cqw;font-weight:500}
.scr-person.on{background:var(--accent-soft);color:var(--accent-ink)}
.scr-main{padding:2cqw 2.4cqw;display:grid;grid-template-rows:auto auto 1fr;gap:1.4cqw;min-width:0}
.scr-main h4{font-size:2.4cqw}
.scr-tabs{display:flex;gap:.6cqw;flex-wrap:wrap}
.scr-tabs span{padding:.5cqw 1cqw;border-radius:99px;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.scr-tabs span.on{background:var(--accent);border-color:var(--accent);color:#fff}
.scr-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:1.6cqw;min-height:0}
.scr-card{background:var(--paper);border-radius:1cqw;padding:1.6cqw;box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden}
.scr-card p{font-family:var(--serif-body);font-size:1.3cqw;line-height:1.55;margin:0 0 .8em;color:var(--ink)}
.scr-card .t{font:600 1.1cqw var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.8cqw}
.phone{position:absolute;right:-1%;bottom:0;width:23%;background:#2B2833;border-radius:3.4cqw;padding:1cqw;box-shadow:var(--shadow)}
.phone-screen{background:var(--bg);border-radius:2.6cqw;aspect-ratio:9/19;padding:3.4cqw 1.8cqw;font-size:1.05cqw;display:grid;align-content:start;gap:1.4cqw}
.phone-screen h5{font:600 1.7cqw var(--serif);margin:0}
.phone-screen .mb{font:600 3cqw var(--serif);color:var(--science);background:var(--science-soft);border-radius:1.2cqw;text-align:center;padding:.8cqw;letter-spacing:.06em}
.phone-screen .bars{font-size:1cqw;gap:1cqw}
.phone-screen .bar-row{grid-template-columns:1fr;gap:.3cqw}
.phone-screen .bar-row em{display:none}

.c-logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--paper)}
.c-logos .wrap{display:flex;gap:16px 34px;flex-wrap:wrap;justify-content:center;font:500 15px var(--serif);color:var(--muted)}
.c-head{max-width:640px;margin-bottom:34px}
.c-head h2{font-size:clamp(30px,4vw,44px);margin:8px 0 10px}.c-head p{color:var(--muted);font-size:18px;margin:0}
.bento{display:grid;gap:14px;grid-template-columns:repeat(6,1fr)}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px;overflow:hidden;grid-column:span 6}
.tile h3{font-size:20px}.tile p{color:var(--muted);font-size:14px;margin:0}
.tile .tag{align-self:flex-start;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.tag.r{background:var(--accent-soft);color:var(--accent-ink)}.tag.s{background:var(--science-soft);color:var(--science)}
.tile .viz{margin-top:auto;display:flex;justify-content:center}
.tile .viz svg{max-height:170px}
@media(min-width:760px){.t-wide{grid-column:span 4}.t-tall{grid-column:span 2}.t-third{grid-column:span 2}.t-half{grid-column:span 3}}
.t-mbti .mb{font:600 46px var(--serif);color:var(--science);letter-spacing:.08em}
.t-mbti .dich{display:grid;gap:6px;font-size:12px;color:var(--muted)}
.t-mbti .dich div{display:grid;grid-template-columns:1.5em 1fr 1.5em;gap:8px;align-items:center}
.t-mbti .dich b{height:6px;border-radius:99px;background:var(--science-soft);position:relative}
.t-mbti .dich b i{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--science)}
.ennea{width:150px}
.c-steps{display:grid;gap:14px;counter-reset:s}
@media(min-width:780px){.c-steps{grid-template-columns:repeat(3,1fr)}}
.c-steps div{border-top:3px solid var(--accent);padding-top:16px}
.c-steps h3{font-size:20px;margin-bottom:6px}.c-steps p{color:var(--muted);margin:0}
.c-steps div::before{counter-increment:s;content:"Step " counter(s);font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.c-two{display:grid;gap:16px}
@media(min-width:860px){.c-two{grid-template-columns:1fr 1fr}}
.c-two .tile{grid-column:auto}
.c-two .tile .q{font:400 17px/1.65 var(--serif-body);color:var(--ink)}
.c-compare{display:grid;gap:14px}
@media(min-width:760px){.c-compare{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.c-compare .tile{grid-column:auto}
.tile .bar-row{grid-template-columns:8.8em 1fr 2em}
.c-compare .tile ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px}
.c-final{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(30px,6vw,64px);text-align:center}
.c-final h2{font-size:clamp(30px,4.4vw,50px);margin-bottom:22px}

/* Built (LP1-LP5) */
.nav .signin{padding:12px 4px}
.btn,.signin,summary,.link{min-height:44px}
.link{display:inline-flex;align-items:center}
.plan .btn{align-self:stretch}
.dlg .err{color:#B3261E;font-size:14px;min-height:1.2em;margin:8px 0 0}
.dlg .count{font-size:12px;color:var(--muted);text-align:right}
.sample-hero{padding:48px 0 8px}
.sample-hero h1{font-size:clamp(34px,5vw,54px);margin:10px 0 12px}
.sample-hero p{color:var(--muted);font-size:17px;max-width:60ch}
.sample-doc{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,5vw,56px);margin:28px 0;font-family:var(--serif-body);font-size:17px;line-height:1.7}
.sample-doc header{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px}
.sample-doc header h2{font-size:clamp(26px,3.6vw,36px);margin:8px 0 0}
.sample-doc header .meta{font:500 14px var(--sans);color:var(--muted);margin-top:6px}
.sample-doc h2,.sample-doc h3{font-family:var(--serif);margin:1.6em 0 .5em;font-size:1.35em}
.sample-doc h3{font-size:1.15em}
.sample-doc p,.sample-doc li{max-width:68ch}
.sample-doc em{color:var(--muted)}
.legal-doc{max-width:720px;margin:40px auto;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:32px}
.legal-doc h1{font-size:32px;margin-bottom:12px}
.legal-doc h2{font-size:20px;margin:28px 0 8px}.legal-doc h3,.legal-doc h4{font-size:17px;margin:20px 0 6px}
.legal-doc p,.legal-doc li{line-height:1.6;overflow-wrap:anywhere}.legal-doc ul{padding-left:22px}
.legal-doc hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.legal-doc .legal-note{background:var(--paper-alt);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--muted)}
.legal-table{overflow-x:auto;margin:12px 0}.legal-table table{border-collapse:collapse;font-size:14px;min-width:560px}
.legal-table th,.legal-table td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
@media(max-width:600px){.legal-doc{padding:20px;margin:20px auto;border-radius:14px}}

/* Story AD8: plan choice in the invite form */
.dlg select{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper-alt);font:15px var(--sans);color:var(--ink)}
.dlg .early{font-size:13px;color:var(--muted);margin:8px 0 0}

/* Stories DY1-DY2 on the landing page: "Every day" */
.daily-grid{display:grid;gap:14px}
@media(min-width:700px){.daily-grid{grid-template-columns:1fr 1fr}}
.daily-grid .tile{grid-column:auto}
.tag.free{background:var(--paper-alt);color:var(--ink)}.tag.paid{background:var(--ink);color:#fff}

.plan .yearly{font-size:13px;color:var(--muted);margin:-8px 0 10px}
/* Credits, under the plan cards (owner, 2026-10-08) */
.credits-panel{margin-top:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:grid;gap:12px 28px;grid-template-columns:1fr}
@media(min-width:760px){.credits-panel{grid-template-columns:3fr 2fr;align-items:center}}
.credits-panel h3{font-size:20px;margin-bottom:6px}
.credits-panel p{margin:0 0 8px;color:var(--ink)}
.credits-panel .credits-small{font-size:14px;color:var(--muted);margin:0}
.credits-panel ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:15px}
.credits-panel li::marker{color:var(--accent)}
/* Story OB8: "Show me" under each Help walkthrough runs the matching in-app tour */
.help-show-me-row{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.help-show-me{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--accent-soft);color:var(--accent-ink);font-size:14px;font-weight:600;text-decoration:none}
.help-show-me:hover{border-color:var(--accent)}