:root{
  --font-display:'Cabinet Grotesk',sans-serif;--font-body:'Satoshi',sans-serif;
  --paper:#f5f2eb;--panel:#eeebe3;--surface:#fffdf8;--ink:#1e201b;--muted:#686960;--rule:#25271d26;
  --lime:#c6ff3d;--black:#1e201b;--blue:#0864d9;--chat-bg:#fff;--bubble:#e9e9eb;--chat-text:#1c1c1e;--focus:#497200;--error:#ad3434;
  /* imessage mock uses ios light-mode system colors; prefers-contrast:more swaps in a darker blue */
  --imsg-sent:#007aff;--imsg-chrome:#f9f9f9;--imsg-meta:#8e8e93;--imsg-hairline:#3c3c4336;--imsg-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-heading:clamp(2rem,3.5vw,3.25rem);--text-hero:clamp(3.4rem,7.5vw,6.6rem);
  --text-step:clamp(2rem,3.1vw,2.75rem);--text-card:clamp(1.5rem,2.1vw,1.75rem);--section-space:clamp(3rem,6vw,5rem);
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;
  --r-sm:.5rem;--r-md:1rem;--r-lg:1.75rem;--r-full:999px;
}
[data-theme=dark]{--paper:#1e211b;--panel:#282c23;--surface:#30352a;--ink:#f3f0e8;--muted:#b7bcac;--rule:#f5f2eb26;--focus:#c6ff3d;--error:#ff9b8c}
/* apple's systemBlue only hits 3.1:1 behind white text, so trade exact realism for 4.7:1 here */
@media(prefers-contrast:more){:root{--imsg-sent:#0a6cf5}}
.wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}
html{scrollbar-gutter:stable;overflow-x:clip;overflow-y:auto}
body{overflow-x:clip;padding-bottom:env(safe-area-inset-bottom)}
html:has(dialog[open]){overflow:hidden}
.header{position:relative;z-index:2;margin-top:var(--s5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3) var(--s2) var(--s5);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:0 8px 24px #28291f07}
.logo{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:1;letter-spacing:-.04em}
.logo svg{width:34px;height:34px;flex-shrink:0;--logo-dot:#f5f2eb;color:var(--black);background:var(--lime);border-radius:7px;padding:3px}
.nav-links{display:flex;align-items:center;gap:var(--s6);margin-left:auto;margin-right:var(--s4);font-size:var(--text-sm);font-weight:700}
.nav-right{display:flex;align-items:center;gap:var(--s3);font-size:var(--text-sm);font-weight:700;flex-shrink:0}
.nav-link{padding-block:var(--s3);white-space:nowrap}
.nav-link:hover{opacity:.65}
.theme-toggle{width:44px;height:44px;display:grid;place-items:center;font-size:1.5rem;border-radius:var(--r-full)}
.theme-toggle:hover{background:var(--panel)}
.button{min-height:52px;background:var(--ink);color:var(--paper);border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s3) var(--s5);font-size:var(--text-sm);font-weight:700;white-space:nowrap}
.button span{font-size:1.25rem;line-height:1;color:var(--lime)}
[data-theme=dark] .button span{color:var(--black)}
.button:hover{transform:translateY(-2px);box-shadow:0 5px 14px #20271920}
.button:active{transform:translateY(0) scale(.98)}
.button:disabled{opacity:.7;cursor:wait;transform:none}
.button.small{min-height:44px}
.hero{text-align:center;padding-top:var(--s12)}
.eyebrow{font-size:var(--text-xs);font-weight:700;display:inline-flex;align-items:center;gap:var(--s2)}
.dot{display:inline-block;width:8px;height:8px;background:var(--lime);box-shadow:0 0 0 3px #719b2424;border-radius:50%}
.hero h1{font-size:var(--text-hero);line-height:.99;letter-spacing:-.045em;font-weight:800;margin:var(--s5) auto var(--s6)}
.highlight{position:relative;display:inline-block;isolation:isolate}
.highlight::after{content:'';position:absolute;bottom:.02em;left:-.02em;right:-.05em;height:.17em;background:var(--lime);z-index:-1;transform:rotate(-2deg)}
[data-theme=dark] .highlight::after{background:#7d9e23}
.hero-intro{font-size:var(--text-base);line-height:1.65;color:var(--muted);margin-inline:auto;max-width:520px}
.offer-chip{display:inline-flex;align-items:center;gap:var(--s2);margin:var(--s6) auto 0;padding:6px 14px 6px 6px;background:var(--lime);color:var(--black);border-radius:var(--r-full);font-size:var(--text-xs);font-weight:700}
.offer-chip span{background:var(--black);color:var(--lime);padding:4px 8px;border-radius:var(--r-full);letter-spacing:.04em;text-transform:uppercase;font-size:.65rem}
.signup-box{max-width:680px;margin:var(--s8) auto 0;scroll-margin-top:var(--s6)}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) 112px auto;gap:var(--s2)}
.form-row input{width:100%;min-width:0;border:1px solid var(--rule);border-radius:var(--r-sm);padding:var(--s3) var(--s4);background:var(--surface);min-height:52px;font-size:var(--text-base)}
.form-row input::placeholder{color:var(--muted)}
.form-row input:focus{outline:2px solid var(--focus);outline-offset:2px}
.form-row input[aria-invalid=true]{border-color:var(--error)}
.consent-note{font-size:var(--text-xs);line-height:1.6;color:var(--muted);margin:var(--s2) auto 0;max-width:650px}
.text-button{text-decoration:underline;text-underline-offset:3px;font-size:inherit;padding:var(--s2) var(--s1);min-height:44px}
.text-button:hover{color:var(--ink);text-decoration-thickness:2px}
.form-status{font-size:var(--text-sm);color:var(--error);margin:var(--s2) auto 0}
.form-status:empty{display:none}
.success{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s6);text-align:center;animation:fade .3s ease-out}
.success h2{font-size:var(--text-heading);margin-bottom:var(--s3)}
.success p{font-size:var(--text-sm);margin-inline:auto;overflow-wrap:anywhere}
.success-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--black);margin-bottom:var(--s3)}
.demo-stage{position:relative;max-width:940px;margin:0 auto;padding-bottom:var(--section-space)}
/* iphone 15 chassis: a 393pt screen behind the 55pt display mask, black bezel, aluminium band */
.conversation{--bezel:13px;box-sizing:content-box;position:relative;z-index:1;width:393px;margin-inline:auto;background:var(--chat-bg);color:var(--chat-text);border:var(--bezel) solid #0c0c0f;border-radius:calc(55px + var(--bezel));box-shadow:0 0 0 2px #4b4b52,0 0 0 3px #9c9ca4,0 26px 55px -14px #282c2455;overflow:hidden}
/* status bar is 54pt tall; time and icons sit in the ears beside the 125x36pt dynamic island */
.status-bar{position:relative;display:flex;align-items:center;justify-content:space-between;height:54px;padding-top:4px;background:var(--imsg-chrome);font-family:var(--imsg-font);font-size:17px;font-weight:600;letter-spacing:-.01em}
.status-bar::after{content:'';position:absolute;top:11px;left:50%;margin-left:-62.5px;width:125px;height:36px;border-radius:var(--r-full);background:#000 radial-gradient(circle 5px at calc(100% - 21px) 50%,#22262e,#000) no-repeat}
.status-time,.status-icons{width:calc(50% - 62.5px)}
.status-time{text-align:center}
.status-icons{display:flex;align-items:center;justify-content:flex-end;gap:5px;padding-right:20px}
.status-icons svg{height:11px;width:auto;fill:currentColor}
.status-icons svg:last-child{height:12.5px}
/* nav bar shares the status bar's material and sits on the ios hairline */
.conversation-top{display:flex;align-items:center;justify-content:space-between;background:var(--imsg-chrome);border-bottom:1px solid var(--imsg-hairline);padding:2px var(--s3) 10px}
.chat-contact{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--imsg-font)}
.chat-contact strong{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:400;line-height:1.1}
.chat-contact .avatar{width:50px;height:50px;padding:10px}
.chat-contact .avatar svg{width:30px;height:30px}
.avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--lime);color:var(--black);border-radius:50%;padding:var(--s2)}
.avatar svg{width:28px;height:28px}
/* chrome glyphs are stroked sf-symbol shapes, not text characters */
.chat-back svg,.chat-chevron,.replay svg,.composer-plus svg,.send-arrow svg{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.chat-chevron{width:6px;height:10px;color:var(--imsg-meta);stroke-width:2.4}
.chat-back{display:flex;align-items:center;width:44px;height:44px;color:var(--imsg-sent)}
.chat-back svg{width:13px;height:22px;stroke-width:2.6}
.replay{display:grid;place-items:center;width:44px;height:44px;color:var(--imsg-sent);border-radius:50%}
.replay svg{width:21px;height:21px}
.replay:hover{background:#007aff14}
.chat-day{font-family:var(--imsg-font);font-size:11px;color:var(--imsg-meta);text-align:center;margin:var(--s4) auto var(--s3)}
.chat-day strong{font-weight:600}
.messages{display:flex;flex-direction:column;gap:2px;min-height:436px;padding:0 var(--s4) var(--s3);position:relative;text-align:left}
.bubble{max-width:86%;border-radius:19px;padding:var(--s2) var(--s3);font-size:var(--text-sm);line-height:1.45;width:fit-content;color:var(--chat-text)}
.bubble.out{align-self:flex-end;background:var(--imsg-sent);color:white;border-bottom-right-radius:5px}
.bubble.in{align-self:flex-start;background:var(--bubble);border-bottom-left-radius:5px}
/* inside the phone the bubbles use real imessage metrics: sf text at 17px, 18px radius, curved tail */
.messages .bubble{position:relative;max-width:74%;border-radius:18px;padding:7px 13px 8px;font-family:var(--imsg-font);font-size:17px;line-height:1.29;letter-spacing:-.01em}
.messages .bubble.in+.bubble.out,.messages .bubble.out+.bubble.in,.messages .receipt+.bubble{margin-top:8px}
.messages .bubble:not(.message-photo){--tail:var(--bubble)}
.messages .bubble.out:not(.message-photo){--tail:var(--imsg-sent)}
.messages .bubble:not(.message-photo)::before,.messages .bubble:not(.message-photo)::after{content:'';position:absolute;bottom:0;height:20px}
.messages .bubble:not(.message-photo)::before{z-index:-1;width:20px;background:var(--tail)}
.messages .bubble:not(.message-photo)::after{width:24px;background:var(--chat-bg)}
.messages .bubble.out::before{right:-7px;border-bottom-left-radius:16px 14px}
.messages .bubble.out::after{right:-24px;border-bottom-left-radius:11px}
.messages .bubble.in::before{left:-7px;border-bottom-right-radius:16px 14px}
.messages .bubble.in::after{left:-24px;border-bottom-right-radius:11px}
/* ios groups a run of messages from one sender: only the run's last bubble keeps its tail */
.messages .bubble.out:has(+.bubble.out)::before,.messages .bubble.out:has(+.bubble.out)::after,
.messages .bubble.in:has(+.bubble.in)::before,.messages .bubble.in:has(+.bubble.in)::after{content:none}
.receipt{align-self:flex-end;margin:3px 3px 0 auto;font-family:var(--imsg-font);font-size:11px;color:var(--imsg-meta)}
/* photo attachments get no tail in imessage, just the 18pt mask over the image */
.message-photo.bubble{padding:0;width:248px;position:relative;overflow:hidden;border-radius:18px;flex-shrink:0;background:#deded6;box-shadow:inset 0 0 0 1px #00000014}
.message-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.message-photo>span{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:5px;padding:5px 10px;background:#00000059;backdrop-filter:blur(8px);color:#fff;border-radius:var(--r-full);font-family:var(--imsg-font);font-size:12px;font-weight:500;letter-spacing:-.01em}
.message-photo:hover{box-shadow:0 0 0 2px var(--blue);transform:translateY(-1px)}
.message-photo:focus-visible{outline-color:var(--blue);outline-offset:3px}
.messages.is-playing .bubble,.messages.is-playing .receipt{visibility:hidden}
.messages.is-playing .bubble.shown,.messages.is-playing .bubble.shown+.receipt{visibility:visible;animation:bubble-in .28s cubic-bezier(.16,1,.3,1)}
.typing{display:none;position:absolute;left:var(--s4);bottom:var(--s3);gap:5px;align-items:center;background:var(--bubble);border-radius:18px;padding:11px 14px}
.typing::before{content:'';position:absolute;z-index:-1;bottom:0;left:-7px;width:20px;height:20px;background:var(--bubble);border-bottom-right-radius:16px 14px}
.typing::after{content:'';position:absolute;bottom:0;left:-24px;width:24px;height:20px;background:var(--chat-bg);border-bottom-right-radius:11px}
.typing.active{display:flex}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--imsg-meta);animation:type-pulse .8s ease-in-out infinite alternate}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.composer{display:flex;align-items:flex-end;gap:8px;padding:8px var(--s4) 6px;font-family:var(--imsg-font)}
.composer-plus{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;background:var(--bubble);color:#7c7c80;border-radius:50%}
.composer-plus svg{width:17px;height:17px}
.composer-field{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex:1;min-width:0;min-height:34px;border:1px solid var(--imsg-hairline);border-radius:var(--r-full);padding:2px 3px 2px 13px;font-size:17px;letter-spacing:-.01em;color:#a9a9ae}
.send-arrow{display:grid;place-items:center;flex-shrink:0;background:var(--imsg-sent);color:white;border-radius:50%;width:28px;height:28px}
.send-arrow svg{width:16px;height:16px;stroke-width:2.4}
/* 139x5pt home indicator inside the 34pt bottom safe area */
.home-bar{width:139px;height:5px;margin:11px auto 9px;border-radius:var(--r-full);background:#000;opacity:.85}
.demo-disclaimer{margin:var(--s3) auto var(--s4);font-size:var(--text-xs);color:#666b60}
.side-note{position:absolute;text-align:left;max-width:210px}
.note-left{top:110px;left:0;transform:rotate(-5deg)}
.note-label{font-size:var(--text-xs);color:var(--muted)}
.note-title{font-size:1.6rem;font-family:var(--font-display);font-weight:700;line-height:1.2;margin-top:var(--s3)}
.note-foot{font-size:var(--text-xs);margin-top:var(--s3);color:var(--muted)}
.note-arrow{display:block;font-size:3rem;line-height:1;margin:var(--s2) 0 0 var(--s20)}
.note-right{right:0;top:240px;transform:rotate(4deg)}
.note-right p{font-size:var(--text-lg);line-height:1.4;margin-bottom:var(--s2)}
.note-right strong{font-size:var(--text-lg);font-weight:700}
.mini-logo{display:inline-grid;place-items:center;background:var(--lime);width:42px;height:42px;border-radius:var(--r-sm);margin-bottom:var(--s3);color:var(--black)}
.mini-logo svg{width:28px}
.demo-controls{margin:var(--s6) auto var(--s6);max-width:390px;scroll-margin-top:var(--s4)}
.demo-controls>span{font-size:var(--text-xs);color:var(--muted)}
.problem-tabs{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s2)}
.problem-tabs button{border:1px solid var(--rule);border-radius:var(--r-full);min-height:44px;padding:var(--s2) var(--s4);font-size:var(--text-sm);background:transparent;white-space:nowrap}
.problem-tabs button:hover{background:var(--panel)}
.problem-tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.no-more{padding:var(--s12) 0 var(--s10);border-block:1px solid var(--rule);text-align:center}
.no-more .eyebrow{color:var(--muted)}
.problem-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);margin-top:var(--s10);text-align:left}
.problem-card{display:flex;flex-direction:column;border-radius:var(--r-md);min-width:0}
.problem-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);transition:filter .2s;background:var(--panel)}
.problem-card>div{padding:var(--s5) var(--s1) var(--s3);display:flex;flex-direction:column;flex:1}
.problem-card h3{font-size:var(--text-card);line-height:1.15;margin:var(--s2) 0 var(--s5);letter-spacing:-.015em;color:var(--ink)}
.photo-link{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm);font-weight:700;width:150px;max-width:100%;min-height:32px;padding-bottom:var(--s2);border-bottom:1px solid var(--rule);margin-top:auto;color:var(--ink)}
.photo-link>span{font-size:1.25rem;transition:transform .2s}
.problem-card:hover>img{filter:brightness(1.06)}
.problem-card:hover .photo-link{border-color:var(--ink)}
.problem-card:hover .photo-link>span,.problem-card:focus-visible .photo-link>span{transform:translate(2px,-2px)}
.no-more>.photo-note{font-size:var(--text-xs);color:var(--muted);margin-top:var(--s3);margin-bottom:var(--s10)}
.crossouts{display:flex;justify-content:space-evenly;gap:var(--s8);font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.8rem);font-weight:700;color:var(--muted);margin-block:var(--s5)}
.crossouts span{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--muted)}
.no-more>p{margin-inline:auto;font-size:var(--text-sm)}
.how{padding-top:var(--section-space)}
.section-heading{text-align:center;max-width:700px;margin-inline:auto}
.section-heading h2{font-size:var(--text-heading);letter-spacing:-.025em;margin:var(--s4) auto var(--s5)}
.section-heading p{color:var(--muted);margin-inline:auto}
.flow-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s16);align-items:center;padding-block:var(--s12);border-bottom:1px solid var(--rule)}
.flow-copy{max-width:420px;min-width:0}
.step-label{font-size:var(--text-xs);font-weight:700;color:var(--muted)}
.flow-copy h3{font-size:var(--text-step);letter-spacing:-.025em;line-height:1.08;margin:var(--s4) 0 var(--s5)}
.flow-copy p{color:var(--muted)}
.flow-copy .aside-copy{font-size:var(--text-xs);margin-top:var(--s5);color:var(--ink)}
.reverse .flow-copy{grid-column:2;grid-row:1}
.reverse .visual-panel{grid-column:1;grid-row:1}
.visual-panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);height:330px;min-width:0;position:relative;overflow:hidden;padding:var(--s8)}
.panel-caption{position:absolute;bottom:var(--s4);left:var(--s4);right:var(--s4);text-align:center;color:var(--muted);font-size:var(--text-xs)}
.photo-attachment{width:220px;border-radius:var(--r-md);overflow:hidden;margin:0 0 0 var(--s10);position:relative;transform:rotate(-4deg)}
.photo-attachment img{width:100%;height:185px;object-fit:cover;object-position:center 46%}
.photo-attachment span{position:absolute;top:var(--s2);left:var(--s2);background:#fffef2ed;color:var(--black);padding:var(--s1) var(--s2);font-size:var(--text-xs);border-radius:var(--r-sm)}
.attachment-message{position:absolute;top:170px;right:var(--s6);max-width:230px;transform:rotate(3deg);box-shadow:0 5px 18px #27292212}
.attachment-reply{position:absolute;top:225px;left:var(--s8);transform:rotate(-2deg);background:#fff!important;box-shadow:0 5px 18px #27292212}
.search-panel{display:flex;flex-direction:column;justify-content:center;gap:var(--s8)}
.search-stack{margin-inline:var(--s4);transform:rotate(-3deg)}
.search-stack>div{height:46px;background:var(--surface);border:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--s4);font-size:var(--text-sm);color:var(--muted);border-radius:var(--r-sm);margin-top:calc(var(--s1)*-1)}
.search-stack>div:nth-child(2){margin-left:var(--s2)}.search-stack>div:nth-child(3){margin-left:var(--s4)}
.search-stack>div span{margin-left:var(--s2)}
.toby-shortcut{display:flex;gap:var(--s3);align-items:center;background:var(--surface);border:1px solid var(--rule);padding:var(--s4);border-radius:var(--r-md);box-shadow:0 8px 24px #252b1510;transform:rotate(2deg)}
.toby-shortcut .avatar{flex-shrink:0}.toby-shortcut>div{min-width:0}.toby-shortcut strong{font-size:var(--text-base)}.toby-shortcut p{font-size:var(--text-xs);color:var(--muted)}
.toby-shortcut>span:last-child{margin-left:auto;font-size:1.5rem}
.list-panel{display:grid;grid-template-columns:minmax(0,1fr);place-items:center}
.list-sheet{padding:var(--s5) var(--s6);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);width:100%;max-width:300px;min-width:0;box-shadow:0 10px 20px #33391f0a;transform:rotate(-3deg)}
.list-sheet>p{padding-top:var(--s3);font-size:var(--text-base);display:flex;align-items:center;gap:var(--s3)}
.list-sheet s{color:var(--muted)}
.list-check,.list-open{display:inline-grid;place-items:center;border:1px solid var(--rule);width:18px;height:18px;border-radius:50%;flex-shrink:0}
.list-check{background:var(--lime);color:var(--black);border:none;font-size:var(--text-xs)}
.list-bottom{border-top:1px solid var(--rule);margin-top:var(--s5);padding-top:var(--s3);font-size:var(--text-xs);display:flex;align-items:center;gap:var(--s2)}
.life{padding-top:var(--section-space)}
.life-image{margin-top:var(--s10);position:relative;border-radius:var(--r-lg);overflow:hidden}
.life-image img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 62%;background:var(--panel)}
.life-image figcaption{position:absolute;bottom:var(--s6);right:var(--s6);padding:var(--s3) var(--s4);background:var(--paper);font-size:var(--text-sm);border-radius:var(--r-sm);transform:rotate(-3deg);box-shadow:0 4px 20px #0002}
.faq{padding-block:var(--section-space);display:grid;grid-template-columns:1fr 1.5fr;gap:var(--s16)}
.faq h2{font-size:var(--text-heading);letter-spacing:-.025em;margin:var(--s4) 0 var(--s5)}
.faq>div>p{color:var(--muted)}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s5);min-height:70px;padding-block:var(--s4);cursor:pointer;font-size:var(--text-base);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover,.faq details[open] summary{color:var(--ink);background:var(--panel)}
.faq summary:hover,.faq details[open] summary{padding-inline:var(--s3)}
.faq summary{transition:background .18s,padding .18s}
.faq summary>span{font-size:1.5rem;transition:transform .2s}
.faq details[open] summary>span{transform:rotate(45deg)}
.faq details>p{color:var(--muted);padding:var(--s3) var(--s6) var(--s6) var(--s3);animation:fade .25s ease}
.closing{background:var(--panel);border-block:1px solid var(--rule)}
.closing-inner{text-align:center;padding-block:var(--s16)}
.closing-mark{background:var(--lime);color:var(--black);border-radius:var(--r-md);width:60px;height:60px;padding:var(--s3);display:block;margin:0 auto var(--s5);transform:rotate(-7deg)}
.closing h2{font-size:clamp(2.5rem,5.3vw,4.75rem);letter-spacing:-.03em;margin:var(--s4) auto var(--s5);line-height:1.02}
.closing p{color:var(--muted);margin-inline:auto}
.footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding-block:var(--s8)}
.footer p,.footer>div{font-size:var(--text-xs);color:var(--muted)}
.footer>div{display:flex;gap:var(--s6);align-items:center}
dialog{width:min(550px,calc(100% - 32px));max-height:85dvh;margin:auto;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--s10);box-shadow:0 25px 100px #0003;overflow:auto}
dialog::backdrop{background:#14170d70;backdrop-filter:blur(4px)}
dialog[open]{animation:bubble-in .2s ease-out}
dialog h2{font-size:var(--text-heading);margin:var(--s4) 0 var(--s5)}
dialog p{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--s5)}
dialog a{text-decoration:underline;text-underline-offset:3px}
#photo-viewer{width:min(780px,calc(100% - 32px));padding:var(--s8)}
#photo-viewer h2{font-size:clamp(1.5rem,3vw,2.3rem);margin-block:var(--s3) var(--s5)}
#expanded-photo{width:100%;height:auto;max-height:55dvh;object-fit:contain;border-radius:var(--r-sm);background:var(--panel)}
#photo-viewer p{margin:var(--s4) 0 0;font-size:var(--text-xs)}
.dialog-close{position:absolute;right:var(--s3);top:var(--s2);width:44px;height:44px;font-size:1.8rem}
[data-reveal].pending{opacity:0}
[data-reveal]{transition:opacity .6s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes bubble-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes type-pulse{from{opacity:.3}to{opacity:1}}
@media(max-width:950px){
  .side-note{max-width:175px}.note-left{left:0}.note-right{right:0}
  .note-title{font-size:1.3rem}.note-right p,.note-right strong{font-size:var(--text-sm)}
  .flow-row{gap:var(--s10)}.visual-panel{padding:var(--s5)}
  .photo-attachment{margin-left:var(--s4)}.faq{gap:var(--s10)}
}
@media(max-width:760px){
  .wrap{width:calc(100% - 32px)}.header{margin-top:var(--s3)}
  .nav{flex-wrap:wrap;padding:var(--s2) var(--s2) var(--s3) var(--s3)}.logo{font-size:1.8rem}.logo svg{width:30px;height:30px}
  .nav-links{order:3;width:100%;margin:var(--s2) 0 0;padding-top:var(--s2);border-top:1px solid var(--rule);justify-content:center;gap:var(--s8);font-size:var(--text-xs)}
  .nav-link{min-height:44px;display:inline-flex;align-items:center}
  .nav-right{gap:var(--s1)}.nav .button{padding-inline:var(--s3);gap:var(--s2);font-size:var(--text-xs)}
  .hero{padding-top:var(--s8)}.hero h1{margin-block:var(--s5);font-size:clamp(2.5rem,12vw,4.25rem)}
  .hero-intro{max-width:460px}.hero-intro br{display:none}.desktop-break{display:none}
  .signup-box{margin-top:var(--s6)}.form-row{grid-template-columns:minmax(0,1fr) 104px;gap:var(--s2)}
  .form-row .button{grid-column:1/-1;min-height:50px}.form-row input{min-height:50px;font-size:1rem}
  .consent-note{line-height:1.55;margin-top:var(--s3)}.consent-note .text-button{padding-block:0;min-height:24px}
  .demo-stage{padding-bottom:var(--s12)}
  .side-note{display:none}.conversation{--bezel:10px;width:min(393px,100% - 20px)}
  .messages{min-height:420px}.bubble{max-width:89%}.messages .bubble{max-width:78%}
  .demo-controls{margin-block:var(--s5) var(--s5);max-width:100%}
  .problem-tabs{gap:var(--s1);flex-wrap:wrap}.problem-tabs button{font-size:var(--text-xs);padding-inline:var(--s2);flex:1 1 auto}
  .crossouts{flex-direction:column;gap:var(--s3);font-size:1.5rem}.no-more{padding-block:var(--s8)}
  .problem-photos{grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s8)}
  .problem-card{display:grid;grid-template-columns:36% minmax(0,1fr);gap:var(--s4);align-items:center;padding-bottom:var(--s5);border-bottom:1px solid var(--rule);border-radius:0}
  .problem-card:last-child{border-bottom:0;padding-bottom:0}
  .problem-card>img{aspect-ratio:1;height:auto;object-position:center}
  .problem-card>div{padding:0}
  .problem-card h3{font-size:var(--text-card);margin-bottom:var(--s3);letter-spacing:-.02em}
  .problem-card h3 br{display:none}
  .problem-card .note-label{font-size:var(--text-xs)}
  .photo-link{font-size:var(--text-xs)}
  #photo-viewer{padding:var(--s6)}
  .how{padding-top:var(--s12)}.section-heading h2{font-size:clamp(1.9rem,8vw,2.35rem)}
  .flow-row{grid-template-columns:1fr;gap:var(--s6);padding-block:var(--s10)}
  .flow-copy{max-width:unset}.flow-copy h3{font-size:clamp(1.7rem,7vw,2.15rem)}.flow-copy h3 br{display:none}
  .reverse .flow-copy,.reverse .visual-panel{grid-column:auto;grid-row:auto}
  .visual-panel{height:300px;padding:var(--s5)}
  .photo-attachment{margin-left:var(--s3);width:min(200px,52%)}.photo-attachment img{height:160px}
  .attachment-message{top:150px;right:var(--s3);max-width:min(230px,58%)}.attachment-reply{top:210px;left:var(--s4)}
  .search-stack{margin-inline:0}.toby-shortcut{padding:var(--s3)}
  .life{padding-top:var(--s12)}.life-image{margin-top:var(--s6)}.life-image img{aspect-ratio:4/3;object-position:58% center}
  .life-image figcaption{bottom:var(--s5);right:var(--s3);left:var(--s3);max-width:fit-content;margin-left:auto;font-size:var(--text-xs)}
  .faq{grid-template-columns:1fr;gap:var(--s8);padding-block:var(--s16)}
  .faq h2{margin-bottom:var(--s3)}.faq summary{min-height:66px;font-size:var(--text-sm)}
  .closing-inner{padding-block:var(--s12)}.closing h2{font-size:clamp(2.2rem,10vw,3rem)}
  .footer{flex-wrap:wrap;gap:var(--s3);padding-block:var(--s6)}.footer p{margin-left:auto}.footer>div{width:100%;justify-content:space-between;flex-wrap:wrap;gap:var(--s3)}
  dialog{padding:var(--s8);width:min(550px,calc(100% - 24px))}
}
@media(max-width:430px){
  .form-row{grid-template-columns:1fr}
  .form-row .button{grid-column:auto}
  .problem-card{grid-template-columns:1fr;gap:var(--s3)}
  .problem-card>img{aspect-ratio:16/10;border-radius:var(--r-sm)}
  .visual-panel{height:auto;min-height:260px;padding-bottom:var(--s12)}
  .photo-attachment{width:min(180px,58%)}
}
@media(min-width:761px) and (max-width:900px){.side-note{display:none}.nav-links{gap:var(--s4);margin-right:var(--s3)}}
@media(max-width:360px){.nav .button span{display:none}.nav .logo{font-size:1.6rem}.nav .button{padding-inline:var(--s2)}}
@media(prefers-reduced-motion:reduce){[data-reveal].pending{opacity:1}.messages.is-playing .bubble,.messages.is-playing .receipt{visibility:visible}.typing{display:none!important}}