:root{--cream:#faf7f2;--ink:#2a1c2b;--muted:#71685f;--accent:#4b144c;--tint:#eee7f2;--line:#e9e1da;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #a878af;outline-offset:5px}img{max-width:100%;display:block}button,a{-webkit-tap-highlight-color:transparent}.wrap{width:min(1280px,calc(100% - 112px));margin:auto}header{display:flex;justify-content:space-between;align-items:center;min-height:110px;gap:24px}.brand{display:flex;align-items:center;gap:12px;font:44px/1 var(--serif);letter-spacing:-2px}.brand img{border-radius:12px}nav{display:flex;align-items:center;gap:34px;font-size:14px}.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:54px;padding:10px 25px;border-radius:9px;border:1px solid transparent;font-weight:500;white-space:nowrap;transition:transform .18s,box-shadow .18s}.button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2a1c2b16}.primary{background:var(--accent);color:#fffaf1}.secondary{border-color:#d9cfd7;background:#ffffff38}.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:56px;padding-top:44px;padding-bottom:70px}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:2.2px;font-weight:650;margin:0 0 28px}.hero h1{font:clamp(54px,6.1vw,91px)/1.04 var(--serif);letter-spacing:-4.5px;margin:0 0 30px}.hero h1 em{color:var(--accent);font-weight:400}.lead{font-size:19px;line-height:1.65;max-width:530px;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}.play{width:25px;height:25px;border:1px solid;border-radius:50%;font-size:11px;display:grid;place-items:center}.reassurance{font-size:12px;color:var(--muted);margin-top:17px}.hero-art{position:relative;min-height:660px;display:flex;justify-content:center;align-items:center;isolation:isolate}.phone{position:relative;flex-shrink:0;width:286px;padding:8px;background:linear-gradient(110deg,#9c9793,#222 10%,#050505 48%,#aea7a2 90%,#111);border:2px solid #383432;border-radius:45px;box-shadow:0 20px 28px #2a1c2b29,0 3px 3px #0004;z-index:2}.phone img{width:100%;height:auto;border-radius:35px;border:1px solid #151414}.hero-art>.phone{transform:rotate(-3deg);margin-left:-86px}.second-phone{position:absolute;right:-10px;top:76px;z-index:1;transform:rotate(6deg) scale(.89);transform-origin:top right}.halo{position:absolute;width:110%;height:78%;background:#ede6ef;border-radius:50%;z-index:-2;transform:rotate(-18deg)}.leaf{object-fit:contain}.hero-leaf{position:absolute;width:260px;right:-60px;top:90px;transform:rotate(30deg);z-index:-1;opacity:.22}.problem{background:var(--tint);padding:56px 0}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}.problem-grid>div{border-left:1px solid #cebfd1;padding-left:40px}.problem p{margin:0 0 14px}.problem p:last-child{margin:0}.statement{font:23px/1.45 var(--serif)}h2{font:clamp(34px,3.45vw,51px)/1.12 var(--serif);letter-spacing:-1.8px;margin:0}h2 em{font-weight:400;color:var(--accent)}.section{padding-top:70px;padding-bottom:64px}.section h2{margin-bottom:40px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.feature{min-width:0;padding-right:28px;position:relative}.feature:not(:last-child){border-right:1px solid var(--line)}.feature h3{font:27px/1.16 var(--serif);letter-spacing:-.65px;margin:16px 0 12px}.feature p{margin:0;color:var(--muted);font-size:16px;line-height:1.65}.art{width:170px;height:105px;background-image:url('feature-icons.webp');background-repeat:no-repeat;background-size:768px 512px;mix-blend-mode:multiply}.icon-0{background-position:-55px -78px}.icon-1{background-position:-315px -78px}.icon-2{background-position:-557px -78px}.icon-3{background-position:-55px -329px}.icon-4{background-position:-312px -329px}.icon-5{background-position:-545px -329px;width:190px}.trust{background:#fffdfb}.closing{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;padding-top:65px;min-height:470px;overflow:hidden}.closing h2{font-size:62px;letter-spacing:-2px}.closing p{max-width:410px;color:var(--muted)}.closing .reassurance{font-size:12px}.closing-art{position:relative;height:425px;padding-top:25px;padding-left:30px}.closing-art .phone{width:235px;transform:rotate(8deg)}.closing-art .leaf{position:absolute;width:325px;right:0;top:12px;transform:rotate(16deg)}footer{display:flex;align-items:center;gap:26px;padding:28px 0;border-top:1px solid var(--line);font-size:12px}footer .brand{font-size:30px}footer p{color:var(--muted)}footer nav{margin-left:auto;font-size:12px;gap:26px}.theme-d{--accent:#3e6657;--tint:#eee8f4}.theme-d .halo{background:#eaf2f8}.theme-d .hero-leaf{opacity:.65}.theme-e{--accent:#481345}.theme-e .hero-shell{background:radial-gradient(ellipse at 77% 48%,#694466 0%,#371136 45%,#240923 100%);color:#fff9ef}.theme-e .hero h1 em{color:#e3cfe8}.theme-e .hero .lead,.theme-e .hero .reassurance{color:#ebdfe8}.theme-e .hero-shell .primary{background:#fff9ed;color:#371136}.theme-e .secondary{border-color:#96718c;background:transparent}.theme-e .halo{display:none}.theme-e .hero-leaf{opacity:.32;right:-90px;top:-40px;width:330px}.theme-e .hero-art>.phone{transform:rotate(-2deg)}.theme-e .problem{background:#f8f3ed}.theme-e .problem-grid>div{border-color:var(--line)}dialog{max-width:480px;width:calc(100% - 40px);border:1px solid var(--line);border-radius:20px;padding:36px;background:var(--cream);color:var(--ink)}dialog::backdrop{background:#210b2699;backdrop-filter:blur(5px)}dialog h2{font-size:36px}dialog a{text-decoration:underline}dialog .close{float:right;background:none;border:0;font-size:28px;cursor:pointer}.skip{position:fixed;top:-80px;left:16px;padding:12px;background:white;z-index:10}.skip:focus{top:10px}@media(min-width:1500px){.hero h1{font-size:94px}}@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:26px}.hero h1{font-size:65px;letter-spacing:-3px}.hero-art{min-height:620px}.phone{width:260px}.second-phone{right:-5px;transform:rotate(6deg) scale(.8)}.hero-art>.phone{margin-left:-36px}.feature-grid{gap:24px}.feature{padding-right:20px}.closing h2{font-size:52px}}@media(max-width:760px){.wrap{width:calc(100% - 40px)}header{min-height:86px}.brand{font-size:34px}.brand img{width:40px;height:40px}header nav{gap:14px}header nav>a:not(.button){display:none}header .button{min-height:44px;padding:7px 17px}.hero{grid-template-columns:1fr;padding-top:34px;padding-bottom:30px;gap:20px}.hero h1{font-size:clamp(49px,10vw,74px);letter-spacing:-2.5px}.eyebrow{font-size:10px;letter-spacing:1.6px;margin-bottom:22px}.lead{font-size:17px}.actions{gap:10px}.button{padding:10px 18px;gap:12px;font-size:14px}.hero-art{min-height:610px;max-width:480px;width:100%;margin:auto}.phone{width:255px}.hero-art>.phone{margin-left:-35px}.second-phone{right:5px;top:60px;transform:rotate(6deg) scale(.79)}.hero-leaf{right:-15px;width:210px}.halo{width:95%;height:75%}.problem{padding:38px 0}.problem-grid{grid-template-columns:1fr;gap:24px}.problem-grid>div{border-left:0;padding-left:0}.statement{font-size:22px}.section{padding-top:44px;padding-bottom:40px}.section h2{margin-bottom:28px;font-size:36px}.feature-grid{grid-template-columns:1fr;gap:32px}.feature{padding:0 0 28px}.feature:not(:last-child){border-right:0;border-bottom:1px solid var(--line)}.feature:last-child{padding-bottom:0}.feature h3{font-size:28px}.art{margin-bottom:5px}.closing{grid-template-columns:1fr;padding-top:45px;gap:12px}.closing h2{font-size:52px}.closing-art{height:330px;margin:auto;width:100%;max-width:440px}.closing-art .phone{width:210px}.closing-art .leaf{width:270px;right:0}footer{flex-wrap:wrap;gap:12px 18px}footer nav{margin:0;width:100%;padding-top:8px}footer p{font-size:11px}h2{font-size:36px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
/* Keep image aspect ratios and crop the approved icon artwork without baked-in copy. */
img{height:auto}
.art{height:90px;background-position-y:-86px}
.icon-3,.icon-4,.icon-5{height:78px;background-position-y:-331px;margin-top:12px}
.hero-shell{overflow:hidden}

/* E shows one phone in the hero. Codex removed the second phone from e.html; one shared page
   expresses that per theme instead. */


/* Tap targets: the text links render 20-23px tall. Padding widens the hit area to 44px and the
   matching negative margin keeps the layout pixel-identical to the approved design. */
header nav a:not(.button),footer nav a{padding-block:12px;margin-block:-12px}

/* The "Review the moment" icon sits closer to its caption in the source artwork than the other five,
   so the shared 78px crop caught the top of the baked-in heading (artwork rows 331-409; the text
   starts at 402). A 9px transparent bottom border, with the background clipped to the padding box,
   shows only rows 331-400. The box stays 78px (border-box sizing) so the headings stay aligned. */
.icon-5{border-bottom:9px solid transparent;background-clip:padding-box}

/* Waitlist (2026-10-27): Fig is invite-only for now. Sits under the closing call to action. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.waitlist{margin-top:30px;padding:22px 24px 18px;max-width:470px;border:1px solid var(--line);border-radius:16px;background:#fffdfb}
.closing .waitlist p{max-width:none}
.waitlist-lead{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.waitlist-lead strong{color:var(--ink);font-weight:600}
.waitlist-row{display:flex;gap:10px;margin-top:16px}
.waitlist input{flex:1;min-width:0;min-height:54px;padding:0 16px;border:1px solid #d9cfd7;border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:16px}
.waitlist input::placeholder{color:#9a9089}
.waitlist input:focus-visible{outline:3px solid #a878af;outline-offset:2px;border-color:transparent}
.waitlist input[aria-invalid=true]{border-color:#b3412e}
.waitlist button[disabled]{opacity:.7;cursor:progress;transform:none;box-shadow:none}
.waitlist-status{min-height:1.5em;margin:10px 0 0;font-size:14px;line-height:1.5}
.waitlist-status.is-error{color:#9b2d1f}
.waitlist-status.is-done{color:var(--accent);font-weight:600}
.waitlist .button{font:inherit;font-weight:500}
.waitlist-status:empty{min-height:0;margin-top:0}
.waitlist-note{margin:12px 0 0;font-size:12px}
.waitlist-note a{text-decoration:underline}
.waitlist.is-joined .waitlist-row,.waitlist.is-joined .waitlist-note{display:none}
.waitlist.is-joined .waitlist-status{margin-top:12px;font-size:16px}
@media(max-width:520px){.waitlist{padding:18px 18px 14px}.waitlist-row{flex-direction:column}.waitlist .button{width:100%}}

/* Store row (2026-11-08): the official App Store badge, live; a matching Android chip, coming. Not Google's Play badge, which belongs to apps already on Google Play. */
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}.store-badge{display:inline-flex;border-radius:9px}.store-badge img{height:44px;width:auto}.badge-on-dark{display:none!important}.store-soon{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 10px;border:1px dashed #b9aab6;border-radius:9px;color:var(--ink);background:#ffffff59}.droid{width:26px;height:26px;flex:none}.store-soon-text{display:grid;line-height:1.05}.store-soon-text small{font-size:10px;letter-spacing:.3px;color:var(--muted)}.store-soon-text b{font-size:17px;font-weight:600;letter-spacing:-.2px}.closing .stores{margin-top:18px}.theme-e .hero-shell .badge-on-light{display:none!important}.theme-e .hero-shell .badge-on-dark{display:block!important}.theme-e .hero-shell .store-soon{color:#fff9ef;border-color:#96718c;background:transparent}.theme-e .hero-shell .store-soon-text small{color:#ebdfe8}footer{flex-wrap:wrap}footer .marks{flex-basis:100%;margin:4px 0 0;font-size:10.5px;line-height:1.5;color:var(--muted);max-width:760px}@media(max-width:760px){.stores{gap:10px}}

/* One button per platform (Rasel, 2026-11-08): the App Store badge IS the iOS button, at button height. */
.actions .store-badge img,.closing .store-badge img{height:54px}.actions .store-soon,.closing .store-soon{height:54px;padding:0 16px 0 12px}.actions .droid,.closing .droid{width:30px;height:30px}.actions .store-soon-text b,.closing .store-soon-text b{font-size:19px}.actions .store-soon-text small,.closing .store-soon-text small{font-size:11px}@media(max-width:760px){.actions .store-badge img,.closing .store-badge img{height:48px}.actions .store-soon,.closing .store-soon{height:48px}}

/* "See how it works" leaves the store row (Rasel, 2026-11-08): a quiet link under the two platform buttons. */
.how-link{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:15px;font-weight:500;color:inherit;border-bottom:1px solid transparent;padding-bottom:2px}.how-link:hover{border-bottom-color:currentColor}.how-link .play{width:22px;height:22px;font-size:9px}.hero-copy .reassurance{margin-top:12px}

/* 2026-11-08 (Rasel): the dark design shows the second phone too, now that it is the call screen rather than a copy of the list; same size and offset as the other two designs. */
/* The dark design's leaf moves up and right so the back phone doesn't hide it (Rasel, 2026-11-08). */
@media(max-width:760px){.theme-e .hero-leaf{right:-10px;top:-70px;width:220px}}

/* Android chip becomes a link (Rasel, 2026-11-11): "Coming soon" -> "In testing", and it opens /android, where
   anyone can join the Google Play test. Solid border once it is something you can press. */
a.store-soon{border-style:solid}

/* Store buttons on hover (Rasel, 2026-11-11): they stay where they are (the lean toward the pointer in motion.js and
   the old 2px lift both read as the button moving away), and glow instead, with two small sparkles at opposite corners
   that twinkle. Keyboard focus gets the same glow. --glow follows each design: plum, green, pale lilac on the dark hero.
   The sparkles are one ::before (::after is the festive light sweep in motion.css), masked by a data: SVG star twice
   (the CSP allows data: images). Reduced motion: glow and sparkles, no twinkle. */
.store-badge,a.store-soon{--glow:color-mix(in srgb,var(--accent) 60%,#fff);position:relative;transition:box-shadow .25s ease,border-color .25s ease}
.theme-e .hero-shell .store-badge,.theme-e .hero-shell a.store-soon{--glow:#f0d8f4}
.store-badge:hover,.store-badge:focus-visible,a.store-soon:hover,a.store-soon:focus-visible{box-shadow:0 0 0 1px color-mix(in srgb,var(--glow) 70%,transparent),0 0 18px 3px color-mix(in srgb,var(--glow) 45%,transparent)}
a.store-soon:hover,a.store-soon:focus-visible{border-color:var(--glow)}
.store-badge::before,a.store-soon::before{content:"";position:absolute;inset:-9px -8px;pointer-events:none;z-index:2;background:var(--glow);opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .35s ease;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0C5.4 3.2 6.8 4.6 10 5C6.8 5.4 5.4 6.8 5 10C4.6 6.8 3.2 5.4 0 5C3.2 4.6 4.6 3.2 5 0Z'/%3E%3C/svg%3E") right top/11px 11px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0C5.4 3.2 6.8 4.6 10 5C6.8 5.4 5.4 6.8 5 10C4.6 6.8 3.2 5.4 0 5C3.2 4.6 4.6 3.2 5 0Z'/%3E%3C/svg%3E") left bottom/7px 7px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0C5.4 3.2 6.8 4.6 10 5C6.8 5.4 5.4 6.8 5 10C4.6 6.8 3.2 5.4 0 5C3.2 4.6 4.6 3.2 5 0Z'/%3E%3C/svg%3E") right top/11px 11px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0C5.4 3.2 6.8 4.6 10 5C6.8 5.4 5.4 6.8 5 10C4.6 6.8 3.2 5.4 0 5C3.2 4.6 4.6 3.2 5 0Z'/%3E%3C/svg%3E") left bottom/7px 7px no-repeat}
.store-badge:hover::before,a.store-soon:hover::before{opacity:1;transform:scale(1);animation:fig-twinkle 2s ease-in-out .35s infinite}
@keyframes fig-twinkle{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.store-badge,a.store-soon,.store-badge::before,a.store-soon::before{transition:none}.store-badge:hover::before,a.store-soon:hover::before{animation:none}}

/* "Keep this look" (Rasel, 2026-11-11): a quiet footer toggle, last thing on the page, the size of the trademark line.
   Muted until hovered; pressed shows a filled pin in the design's accent. Hidden until app.js shows it. */
.pin-look{display:inline-flex;align-items:center;gap:6px;margin:-6px 0 0 auto;padding:6px 2px;border:0;background:none;font:inherit;font-size:11px;color:var(--muted);cursor:pointer;opacity:.75;transition:opacity .18s,color .18s}.pin-look[hidden]{display:none}.pin-look:hover,.pin-look:focus-visible{opacity:1;color:var(--ink)}.pin-look svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}.pin-look[aria-pressed="true"]{opacity:1;color:var(--accent)}.pin-look[aria-pressed="true"] svg{fill:currentColor}@media(prefers-reduced-motion:reduce){.pin-look{transition:none}}