/* Light iOS presentation. Layers: artwork 0, device 1, notes 2, skip link 10. */
:root { color-scheme: light; --bg:#fffdfc; --surface:#fff; --text:#342d31; --muted:#786d73; --accent:#b84759; --soft:#fff7f6; --panel:#ffe9e9; --line:#f0e6e7; --shadow:#f0d9dd; --ease:cubic-bezier(.22,1,.36,1); }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
h1,h2,h3,h4,.brand { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; text-wrap:balance; font-weight:750; letter-spacing:-.045em; }
@font-face { font-family:'Balsamiq Sans';src:url('/assets/balsamiq-sans-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap; }
/* Rounded handwritten display type echoes the custom logo; app UI stays native. */
.hero h1,.section-intro h2,.demo-copy h2,.faq>h2,.launch h2 {
 font-family:'Balsamiq Sans',sans-serif;
 font-weight:700;
 letter-spacing:-.02em;
 line-height:1.12;
}
p { text-wrap:pretty; }
[hidden] { display:none!important; }
.svg-library { position:absolute;width:0;height:0;overflow:hidden; }
.icon { width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; }
.brand-mark { width:43px;height:43px;transform:none;background:var(--panel);box-shadow:inset 0 0 0 1px #f6d8da; }
.brand-mark img { width:39px;height:39px;object-fit:contain; }
.header-wordmark { flex-shrink:0; }
.header-wordmark img { width:220px;height:auto; }
@media(max-width:600px) { .header-wordmark img { width:160px; } }
.header nav { font-weight:600;font-size:13px; }
.button { background:#f58a98;border:0;color:#512331;border-radius:18px;font-weight:700;font-size:15px;box-shadow:0 3px 0 #d5687d,0 9px 24px #f29dab26;transition:transform .25s var(--ease),box-shadow .25s; }
.button:hover { transform:translateY(-3px);box-shadow:0 4px 0 #d5687d,0 13px 28px #f29dab40; }
.button:active { transform:translateY(2px) scale(.98);box-shadow:0 1px 0 #d5687d; }
.button.small { border-radius:13px;font-size:12px; }
.hero { grid-template-columns:1.05fr 1fr;min-height:690px;padding-block:24px 50px;gap:24px; }
h1 { font-size:clamp(46px,4.4vw,62px); line-height:1.08; }
.eyebrow { display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700; }
.eyebrow .icon { width:16px;height:16px; }
.hero-copy>p { line-height:1.8; }
.text-link { font-size:12px;font-weight:600; }
.hero-art { min-height:620px;display:grid;place-items:center; }
.orbit-art { position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none; }
.phone { position:relative;z-index:1;width:292px;height:568px;padding:9px;background:linear-gradient(125deg,#fefefe,#ccc7cb 50%,#fff);border:1px solid #cec9cc;border-radius:49px;box-shadow:0 28px 55px #a5778429,0 4px 12px #ae8f9926,inset 0 0 0 2px #fff;transform:rotate(5deg); }
.phone::before { content:'';position:absolute;inset:6px;border-radius:43px;background:#fffafa;border:1px solid #eee5e6;z-index:-1; }
.phone-status { height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px;font-size:10px;font-weight:700;color:#383038; }
.dynamic-island { width:81px;height:23px;background:#262126;border-radius:20px; }
.phone-body { height:436px;padding:15px 16px 0; }
.phone-screen { height:100%; }
.phone-greeting { display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:11px; }
.streak-pill { display:flex;align-items:center;gap:3px;padding:3px 8px;background:#fff0ed;color:var(--accent);border-radius:12px;font-weight:700; }
.streak-pill .icon { width:15px;height:15px; }
.phone-screen h2 { font-size:25px;letter-spacing:-.035em; }
.phone-pip { width:176px;height:176px;object-fit:contain;margin:4px auto 0; }
.phone-card { padding:16px;border:1px solid #f5e9e9;border-radius:21px;background:#fff;box-shadow:0 8px 18px #9b596912; }
.phone-kicker { display:block;font-size:8px;letter-spacing:.09em;font-weight:700;color:var(--accent);margin-bottom:8px; }
.phone-card h3 { font-size:16px;line-height:1.2;margin:0;letter-spacing:-.03em; }
.phone-card p { font-size:10px;margin-top:7px; }
.phone-cta { display:flex;align-items:center;justify-content:center;gap:14px;width:100%;border:0;background:#fb9da8;color:#542731;padding:10px;margin-top:13px;border-radius:12px;font-size:11px;font-weight:700;transition:transform .2s; }
.phone-cta:active { transform:scale(.97); }
.phone-cta .icon { width:15px;height:15px; }
.phone-tabs { display:grid;grid-template-columns:repeat(3,1fr);height:54px;padding-top:7px;margin-inline:10px;border-top:1px solid var(--line); }
.phone-tabs button { display:flex;align-items:center;flex-direction:column;gap:3px;border:0;background:none;color:#8b7b82;font-size:8px;padding:2px;border-radius:8px; }
.phone-tabs .icon { width:20px;height:20px; }
.phone-tabs [aria-selected="true"] { color:#b3455a; }
.home-indicator { width:87px;height:4px;background:#30272c;border-radius:10px;margin:6px auto 0; }
.study-pip { width:145px;height:145px; }
.flip-card { display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;min-height:142px;padding:15px;border:1px solid #f0d7dd;border-radius:19px;background:#fff;color:var(--text);box-shadow:0 5px 15px #ca9fa51a; }
.flip-card>span { font-size:9px;color:var(--muted); }
.flip-card strong { font:650 17px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.flip-card .icon { width:16px;height:16px;color:var(--accent); }
.streak-card { text-align:center; }
.streak-card>strong { font:750 42px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--accent); }
.streak-card>strong>span { font-size:14px; }
.phone-week { display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px;font-size:8px;color:var(--muted); }
.phone-week b { display:grid;place-items:center;border-radius:50%;aspect-ratio:1;background:#ffe9e9;color:var(--accent);margin-top:4px; }
.floating-note { position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:13px 17px;background:#ffffffeb;border:1px solid #f3e8e9;border-radius:19px;box-shadow:0 15px 35px #be8c9a20;backdrop-filter:blur(14px);pointer-events:none; }
.floating-note strong { display:block;font-size:12px; }
.floating-note span { display:block;font-size:9px;color:var(--muted);margin-top:3px; }
.floating-note .icon { color:#c15a6c;fill:#ffe2d9;width:31px;height:31px; }
.note-top { top:75px;right:-14px;transform:rotate(-5deg); }
.note-bottom { bottom:61px;left:-6px;transform:rotate(-5deg); }
.note-bottom img { width:61px;height:61px;object-fit:contain;margin:-11px 0; }
.concept-caption { position:absolute;bottom:-8px;font-size:10px;color:#89737d; }
.promise-strip>.wrap { min-height:84px;font-size:13px; }
.promise-strip strong { font-weight:600; }
.notes-art { min-height:390px;background:#fff4f2;padding:40px; }
.paper { border-radius:8px;width:235px;box-shadow:0 12px 28px #b3959926; }
.notes-pip { position:absolute;width:235px;right:-14px;bottom:10px;transform:rotate(5deg); }
.paper-label { font-size:10px; }
.step-icon { border:0;border-radius:15px;background:none; }
.step-icon .icon { width:34px;height:34px;stroke-width:1.4; }
.phone-tabs .icon { width:23px;height:23px;stroke-width:1.4; }
.phone-tabs button { color:#a06472; }
.phone-tabs [aria-selected="true"] { background:#fff0f2; }
.steps p { font-size:14px;line-height:1.8; }
.pip-coach img { width:175px;transform:none; }
.pip-coach>span { border:1px solid var(--line);border-radius:18px 18px 18px 3px;font-size:12px;font-weight:600;box-shadow:0 6px 18px #c798a412; }
.quiz { position:relative;border:1px solid var(--line);border-radius:30px;box-shadow:0 18px 45px #bb8d981a; }
.quiz-top { font-size:12px;font-weight:600; }
.sample-label { font-size:10px;font-weight:400; }
.answer { padding:13px;border-width:1.5px;border-radius:14px;font-weight:500;font-size:13px; }
.quiz-complete { padding:15px 0; }
.victory-pip { width:165px;margin:-10px auto 10px; }
.quiz-complete h3 { font-size:29px; }
.quiz-complete p { font-size:14px; }
.pip-story { border:0;border-radius:30px; }
.pip-story img { transform:none; }
.streak-story { border-radius:30px; }
.milestone-icon { width:42px;height:42px;color:#b86270;stroke-width:1.4; }
.button.launch-badge { display:inline-flex;background:#f58a98; }
.faq summary { font-size:14px;font-weight:600; }
.launch { border:0;background:#fff1f1;border-radius:36px; }
.launch img { width:320px;transform:rotate(5deg);margin-bottom:-50px; }
.launch-badge { border-width:1px;font-size:12px;font-weight:600; }
.confetti { pointer-events:none;position:absolute;inset:0;overflow:hidden;border-radius:inherit; }
.confetti i { position:absolute;top:12%;left:50%;width:7px;height:12px;background:#f493a4;border-radius:2px; }
@media(prefers-reduced-motion:no-preference) {
 .phone { animation:phone-enter 1s var(--ease) both; }
 .note-top { animation:note-enter .8s .2s var(--ease) both; }
 .note-bottom { animation:note-enter .8s .4s var(--ease) both; }
 .draw-path { stroke-dasharray:250;stroke-dashoffset:250;animation:draw 1s .15s forwards; }
 .revealing { animation:enter .7s var(--ease) both; }
 .screen-enter { animation:enter .3s var(--ease) both; }
 .card-flip { animation:card-turn .35s var(--ease); }
 .confetti i { animation:confetti 1.2s var(--ease) both; }
 @keyframes phone-enter { from{opacity:0;transform:translateY(35px) rotate(10deg)}to{opacity:1;transform:translateY(0) rotate(5deg)} }
 @keyframes note-enter { from{opacity:0;transform:translateY(18px) rotate(-9deg)}to{opacity:1;transform:translateY(0) rotate(-5deg)} }
 @keyframes draw { to{stroke-dashoffset:0} }
 @keyframes card-turn { 45%{transform:perspective(500px) rotateY(12deg) scale(.96)} }
 @keyframes confetti { from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--spin))} }
}
@media(max-width:1023px) { .hero{gap:8px}.hero h1{font-size:46px}.hero-art{min-height:600px}.note-top{right:-5px;top:48px;padding:10px}.note-bottom{left:-8px;bottom:35px}.notes-art{padding:30px}.notes-pip{width:200px} }
@media(max-width:767px) {
 .orbit-art .draw-path { display:none; }
 .hero{grid-template-columns:1fr;padding-top:32px;gap:25px;padding-bottom:30px}.hero-copy{text-align:center}.hero h1{font-size:clamp(36px,8.5vw,58px)}.hero .eyebrow{justify-content:center;font-size:8px;margin-bottom:20px}.hero-copy>p{max-width:370px;font-size:15px;margin:23px auto 26px}.hero-actions{justify-content:center}.hero-actions .button{font-size:12px}.hero-actions .text-link{font-size:10px}
 .hero-art{min-height:615px;max-width:430px}.phone{transform:rotate(3deg)}.note-top{top:68px;right:-8px;padding:10px 12px}.note-top span{display:none}.note-top strong{font-size:10px}.note-top .icon{width:23px;height:23px}.note-bottom{bottom:51px;left:-7px;padding:10px 14px}.note-bottom img{width:48px;height:48px}.note-bottom strong{font-size:11px}.concept-caption{bottom:0;font-size:9px}
 .promise-strip>.wrap{align-items:center;font-size:11px}.notes-art{min-height:370px;padding:35px}.paper{width:220px}.notes-pip{width:210px;right:-8px}.pip-coach img{width:130px}.launch{flex-direction:column;align-items:flex-start;padding:35px 25px 0;gap:10px;min-height:0}.launch>div{max-width:none}.launch img{position:static;opacity:1;width:230px;align-self:flex-end;margin-top:-45px;margin-bottom:-15px;margin-right:-25px}.launch-badge{font-size:11px;position:relative;z-index:1}
}
@media(max-width:380px) { .hero h1{font-size:34px}.hero-actions{align-items:center}.phone{width:268px}.hero-art{min-height:610px}.phone-screen h2{font-size:23px}.phone-card h3{font-size:14px}.notes-art{padding-left:22px}.notes-pip{width:185px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important} }
@media(prefers-reduced-transparency:reduce) { .floating-note{background:#fff;backdrop-filter:none} }