:root{--bg:#f9faf8;--paper:#fff;--fg:#202821;--muted:#626b64;--accent:#1764df;--blue-pale:#e9f0fb;--line:#dde2dc;--soft:#edf0e9;--serif:"EB Garamond",Georgia,serif;--sans:"Inter",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button:active,.button:active{transform:translateY(1px)}button:disabled{cursor:default}p,h1,h2,h3,blockquote{margin:0}p{text-wrap:pretty}svg{display:block}.wrap{width:min(1160px,calc(100% - 96px));margin-inline:auto}.skip{position:absolute;left:24px;top:-100px;z-index:10;padding:12px;background:var(--paper)}.skip:focus{top:12px}.nav{height:110px;display:flex;align-items:center;justify-content:space-between;gap:32px}.logo{display:flex;align-items:center;gap:10px;font:600 38px/1 var(--serif);letter-spacing:-2px}.logo svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}.nav nav{display:flex;gap:32px;font-size:14px}.nav nav a:hover,.text-link:hover{color:var(--accent)}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--fg);color:var(--paper);padding:16px 23px;border-radius:9px;font-size:15px;font-weight:500;transition:background .2s,transform .2s}.button:hover{background:var(--accent);transform:translateY(-2px)}.button span{font-size:20px;line-height:1}.button.compact{padding:12px 17px;font-size:13px;gap:16px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding-block:74px 96px}.hero h1{font:400 clamp(52px,5.4vw,78px)/.99 var(--serif);letter-spacing:-3.5px;white-space:nowrap}.hero-copy>p{font-size:18px;line-height:1.65;max-width:395px;margin-top:32px;margin-bottom:28px}.hero-note{display:block;margin-top:17px;font-size:13px;color:var(--muted)}.demo-stage{background:var(--blue-pale);border-radius:34px 34px 7px 34px;padding:32px 28px 23px;position:relative}.conversation{background:var(--paper);border-radius:15px;overflow:hidden}.chat-header{display:flex;align-items:center;gap:11px;padding:18px 20px;border-bottom:1px solid var(--line)}.avatar{display:grid;place-items:center;width:38px;height:38px;background:var(--soft);border-radius:50%;font:600 30px/1 var(--serif);flex-shrink:0;padding-bottom:5px}.chat-header b{font-size:16px;font-weight:600}.chat-header small{display:block;font-size:12px;color:var(--muted);line-height:1.4}.demo-label{margin-left:auto;font-size:12px;color:var(--muted)}.tg-chat{height:290px;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:16px 18px 20px;scrollbar-width:thin;overscroll-behavior:contain}.tg-date{font-size:11px;color:var(--muted);align-self:center;margin-bottom:2px}.m{max-width:88%;padding:11px 14px;font-size:14px;line-height:1.45;border-radius:14px;animation:message-in .28s ease-out both}.m.out{align-self:flex-end;background:var(--accent);color:var(--paper);border-bottom-right-radius:3px}.m.in{align-self:flex-start;background:var(--soft);border-bottom-left-radius:3px}.m .t{display:none}.demo-bottom{padding:14px 16px 16px;border-top:1px solid var(--line)}.demo-bottom>span{font-size:11px;color:var(--muted)}.reply-kb{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}.reply-kb button{border:0;padding:9px 2px;border-radius:5px;font-size:11px;color:var(--muted);background:var(--bg);min-height:40px;transition:background .2s,color .2s}.reply-kb button:hover{color:var(--accent)}.reply-kb button[aria-pressed=true]{color:var(--accent);background:var(--blue-pale)}.demo-caption{margin-top:18px;text-align:center;font:400 18px/1.3 var(--serif);color:var(--fg)}.dots{display:flex;gap:4px;background:var(--soft);padding:14px;border-radius:12px;align-self:flex-start}.dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}.m.voice-message{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:8px}.play{width:29px;height:29px;border-radius:50%;background:var(--paper);position:relative}.play:after{content:"";position:absolute;left:11px;top:9px;border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}.wave{display:flex;align-items:center;gap:2px;height:24px}.wave i{display:block;width:3px;border-radius:2px;background:var(--paper)}.transcript{grid-column:1/-1;font-size:13px;line-height:1.5}.meal-attachment{display:block;background:var(--blue-pale);color:var(--fg);border-radius:6px;padding:14px;font-size:13px}.kbd{display:flex;gap:6px;font-size:12px}.kbd span{padding:8px;background:var(--soft);border-radius:6px}.kbd .hit{background:var(--accent);color:var(--paper)}
h2{font:400 clamp(40px,4vw,56px)/1.02 var(--serif);letter-spacing:-1.8px;text-wrap:balance}h3{font:500 31px/1.12 var(--serif);letter-spacing:-.6px}.features{padding-block:35px 95px}.section-intro{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-bottom:40px}.section-intro>p{font-size:15px;line-height:1.7;color:var(--muted)}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px}.feature-art{height:320px;background:var(--soft);border-radius:13px;display:flex;flex-direction:column;justify-content:center;padding:30px 40px}.feature h3{margin-top:25px}.feature>p{margin-top:12px;max-width:475px;font-size:16px;color:var(--muted)}.log-art{gap:16px}.mini-message{align-self:flex-end;background:var(--accent);color:var(--paper);font-size:13px;padding:10px 15px;border-radius:12px 12px 3px 12px}.mini-message span{margin-left:20px;opacity:.7}.log-sheet{background:var(--paper);padding:17px 20px;border-radius:8px;transform:rotate(-2deg)}.sheet-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}.sheet-heading>span{font-size:11px;color:var(--muted)}.table-row{display:grid;grid-template-columns:1fr 2fr 1fr;font-size:13px;padding:5px 0;font-variant-numeric:tabular-nums}.table-row>span:not(:first-child){text-align:right}.table-head{font-size:11px;color:var(--muted);margin-top:12px;border-bottom:1px solid var(--line)}.sheet-foot{font-size:11px;color:var(--muted);margin-top:7px}.progress-art{background:var(--blue-pale)}.progress-sheet{background:var(--paper);padding:22px;border-radius:8px;transform:rotate(2deg)}.progress-numbers{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.progress-numbers div>span{display:block;font-size:11px;color:var(--muted)}.progress-numbers b{font-size:30px;font-weight:500;letter-spacing:-1px}.progress-numbers small{font-size:13px;letter-spacing:0;font-weight:400}.progress-arrow{color:var(--accent);font-size:25px}.chart{width:100%;height:75px;margin-top:14px;overflow:visible;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}.chart .chart-grid{stroke:var(--line);stroke-width:1}.chart circle{fill:var(--accent);stroke:var(--paper)}.progress-sheet>p{font-size:11px;line-height:1.5;color:var(--muted);margin-top:12px}.nutrition{margin-top:42px;display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}.nutrition>p{color:var(--muted)}.nutrition h3{margin-bottom:10px}.nutrition-sample{background:var(--soft);padding:22px 25px;border-radius:13px 13px 3px 13px;font-size:15px}.nutrition-sample span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.checkin-band{background:var(--blue-pale)}.checkin{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding-block:80px}.checkin-copy>p{max-width:390px;margin-top:22px}.checkin-copy>p+p{color:var(--muted);font-size:14px;margin-top:16px}.text-link{display:inline-block;margin-top:25px;font-size:14px}.checkin-demo{padding:10px 0}.checkin-day{font-size:12px;color:var(--muted);display:block;margin-bottom:14px}.later{margin-top:26px}.note{background:var(--paper);padding:20px 24px;border-radius:15px 15px 15px 3px}.note-head{display:flex;align-items:center;gap:10px;font-size:14px}.note-head .avatar{width:29px;height:29px;font-size:23px}.note-head small{margin-left:auto;color:var(--muted);font-size:11px}.note>p{font-size:16px;line-height:1.55;margin-top:13px}.quiet-note{display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:23px}.coaches{padding-block:105px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.coach-copy>p{max-width:390px;margin-top:22px}.coach-copy .secondary{font-size:14px;color:var(--muted);margin-top:15px}.coach-demo{min-width:0}.voices{display:flex;gap:4px;flex-wrap:wrap}.voice{border:0;background:transparent;color:var(--muted);font-size:13px;padding:10px 13px;border-radius:6px;transition:color .2s,background .2s}.voice:hover{background:var(--soft)}.voice.active{background:var(--fg);color:var(--paper)}.quote-context{font-size:12px;color:var(--muted);margin:26px 0 15px}blockquote{font:400 30px/1.2 var(--serif);letter-spacing:-.3px;min-height:116px;transition:opacity .15s}blockquote.out{opacity:0}.quote-sign{font-size:12px;color:var(--muted)}.privacy{background:var(--soft);padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:70px;border-radius:14px}.privacy p{max-width:300px;margin-top:20px;color:var(--muted)}.cmds{display:flex;flex-direction:column;gap:24px;justify-content:center}.cmds>div{display:grid;grid-template-columns:95px 1fr;gap:20px;align-items:start}.cmds code{font:500 15px var(--sans);color:var(--accent);padding-top:3px}.cmds span{font-size:14px;color:var(--muted)}.faq{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;padding-block:105px}.faq>div>p{color:var(--muted);margin-top:20px}.list{min-width:0}details{border-bottom:1px solid var(--line)}summary{list-style:none;display:flex;justify-content:space-between;gap:16px;cursor:pointer;padding:18px 0;font-size:15px;font-weight:500}summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--muted);font-size:22px;line-height:1}details[open] summary:after{content:"−"}details p{font-size:14px;color:var(--muted);padding:0 24px 22px 0}.closing{padding-block:35px 70px;text-align:center}.closing h2{font-size:clamp(48px,6.7vw,88px);letter-spacing:-3px}.closing p{margin-top:20px;color:var(--muted)}.closing .button{margin-top:26px}.footer{padding-bottom:30px}.footer-wordmark{font:500 clamp(125px,23.3vw,320px)/.85 var(--serif);letter-spacing:-.065em;display:block;text-align:center;padding-bottom:40px}.footer-wordmark span{color:var(--accent)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.footer-bottom a:hover{text-decoration:underline}.reveal{animation:section-in .65s ease-out both}.typing{color:var(--accent)!important}@keyframes message-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes section-in{from{opacity:.4;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes blink{50%{opacity:.3}}
@media(min-width:1600px){.hero{padding-block:95px 115px}}@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.hero{gap:30px}.hero h1{font-size:60px;letter-spacing:-2.5px}.hero-copy>p{font-size:16px}.demo-stage{padding:24px 18px 20px}.feature-art{padding:24px}.checkin{gap:50px}.coaches{gap:38px}.privacy{padding:38px;gap:40px}.faq{gap:40px}.nav nav{gap:20px}}@media(max-width:800px){.wrap{width:calc(100% - 48px)}.nav{height:90px}.nav nav{gap:15px;font-size:12px}.button.compact{font-size:12px;gap:8px}.hero{padding-block:48px 70px;gap:26px}.hero h1{font-size:47px;letter-spacing:-1.8px}.demo-stage{padding:18px 12px}.hero-copy>p{margin-top:24px}.chat-header{padding:13px}.tg-chat{padding:13px;height:300px}.m{font-size:12px;padding:9px 11px}.reply-kb{grid-template-columns:1fr 1fr}.demo-caption{font-size:16px}.hero-note{font-size:11px}.feature-grid{gap:26px}.feature-art{padding:18px;height:290px}.feature h3{font-size:26px}.progress-sheet{padding:16px}.progress-numbers b{font-size:26px}.section-intro{gap:25px}.section-intro>p{font-size:13px}.checkin{gap:30px;padding-block:60px}.coaches{padding-block:75px;gap:30px}.voice{padding:9px;font-size:12px}.privacy{padding:30px;gap:25px}.cmds>div{grid-template-columns:1fr;gap:5px}.faq{padding-block:75px;gap:25px}blockquote{font-size:27px;min-height:140px}.nutrition{gap:26px}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.nav{height:83px;gap:16px}.logo{font-size:33px}.logo svg{width:25px}.nav nav{display:none}.button.compact{font-size:11px;padding:11px 12px}.hero{grid-template-columns:1fr;padding-block:38px 60px;gap:38px}.hero h1{font-size:clamp(43px,11.7vw,66px);letter-spacing:-1.9px}.hero-copy>p{font-size:16px;max-width:350px;margin-block:24px}.hero .button{padding:14px 20px}.hero-note{font-size:12px}.demo-stage{padding:24px 19px 20px;border-radius:24px 24px 5px 24px}.chat-header{padding:15px}.tg-chat{height:285px;padding:14px}.m{font-size:13px}.reply-kb{grid-template-columns:repeat(4,1fr)}.reply-kb button{font-size:10px;min-height:42px}.demo-bottom{padding:12px}.hero-note{margin-top:13px}.section-intro{display:block;margin-bottom:26px}.section-intro>p{font-size:15px;margin-top:20px}.features{padding-block:15px 60px}.feature-grid{grid-template-columns:1fr;gap:35px}.feature-art{height:300px;padding:28px}.feature h3{font-size:29px;margin-top:22px}.feature>p{font-size:15px;margin-top:10px}.nutrition{grid-template-columns:1fr;gap:20px;margin-top:35px}.nutrition h3{font-size:29px}.nutrition p{font-size:15px;color:var(--muted)}.checkin{grid-template-columns:1fr;gap:35px;padding-block:52px}.checkin-copy h2 br{display:none}.checkin-copy h2{max-width:290px}.checkin-copy>p{font-size:16px}.checkin-demo{padding:0}.checkin-day{margin-bottom:10px}.note{padding:18px 20px}.note>p{font-size:15px}.coaches{grid-template-columns:1fr;gap:30px;padding-block:60px}.coach-copy>p{font-size:16px}.voices{gap:3px}.voice{font-size:12px;padding:10px 11px}.quote-context{margin-top:22px}blockquote{font-size:30px;min-height:130px}.privacy{grid-template-columns:1fr;padding:30px 25px;gap:30px}.privacy h2 br{display:none}.privacy h2{font-size:38px}.privacy p{margin-top:16px}.cmds{gap:24px}.cmds>div{grid-template-columns:80px 1fr;gap:12px}.cmds code{font-size:14px}.cmds span{font-size:13px}.faq{grid-template-columns:1fr;gap:20px;padding-block:60px}.faq>div>p{font-size:15px;margin-top:16px}.faq>div>p br{display:none}summary{font-size:14px;min-height:58px}.closing{padding-block:15px 55px}.closing h2{font-size:50px;letter-spacing:-2px}.closing p{font-size:14px;margin-top:17px}.footer-wordmark{font-size:25vw;padding-bottom:28px}.footer-bottom{font-size:11px;gap:12px}.footer-bottom>span{width:100%}h2{font-size:42px;letter-spacing:-1.4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Expressive product stage — one blue world, conversation as the focal point. */
:root { --ease-expo: cubic-bezier(.16,1,.3,1); --hero-ink: #f5f8ff; --hero-ground: #143fd0; }
.nav { height: 94px; }
.hero-world { margin: 0 18px; border-radius: 24px; background: var(--hero-ground); color: var(--hero-ink); position: relative; overflow: clip; }
.hero-world::before { content: 's.'; position: absolute; right: -50px; bottom: -250px; font: 600 950px/.8 var(--serif); letter-spacing: -.1em; color: #2450dc; pointer-events: none; transform: rotate(-12deg); }
.hero { position: relative; min-height: 720px; padding-block: 85px 75px; grid-template-columns: 1.12fr 1fr; gap: 55px; }
.hero h1 { font-size: clamp(60px,6.3vw,92px); letter-spacing: -3.8px; }
.headline-line { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.headline-line>span { display: block; }
.hero-copy>p { color: #e0e8ff; max-width: 385px; font-size: 18px; margin-top: 32px; }
.hero .button { color: #143fd0; background: white; padding: 18px 25px; }
.hero .button:hover { background: #dce8ff; }
.hero-note { color: #cfdaff; }
.demo-stage { margin: 15px 17px 0; padding: 0; background: transparent; border-radius: 20px; perspective: 1200px; }
.conversation { color: var(--fg); border: 6px solid #7696ed; border-radius: 25px; position: relative; z-index: 1; transform: rotate(-3deg); transition: transform 700ms var(--ease-expo); }
.demo-stage:hover .conversation { transform: rotate(0deg); }
.chat-header { padding: 18px; }
.tg-chat { height: 315px; }
.demo-caption { color: #e2eaff; font: 400 15px/1.4 var(--sans); margin-top: 32px; }
.orbit-note { position: absolute; z-index: 3; background: #f4f7fc; color: var(--fg); border-radius: 14px; padding: 19px 22px; pointer-events: none; }
.orbit-top { right: -42px; top: -39px; transform: rotate(8deg); }
.orbit-top>span { display: block; font-size: 11px; color: var(--muted); }
.orbit-top>strong { display: block; font-size: 40px; letter-spacing: -2px; line-height: 1.3; font-weight: 500; }
.orbit-top small { font-size: 15px; font-weight: 400; letter-spacing: -.4px; }
.orbit-top .rep-gain { color: var(--accent); margin-top: 6px; }
.orbit-bottom { left: -45px; bottom: 99px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; transform: rotate(4deg); background: #e2edbc; }
.orbit-bottom strong { display: block; font-size: 14px; }
.orbit-bottom div>span { display: block; font-size: 10px; color: #526037; }
.orbit-check { border: 1px solid #7b8a58; border-radius: 50%; width: 27px; height: 27px; display: grid; place-items: center; font-size: 14px; }
.hero-bottom { display: flex; align-items: center; gap: 25px; justify-content: space-between; padding-block: 0 25px; position: relative; font-size: 12px; color: #cfdaff; }
.motion-toggle { border: 0; background: transparent; color: inherit; font-size: 12px; display: flex; gap: 12px; align-items: center; padding: 12px; margin-left: auto; }
.motion-toggle:hover { color: white; }
.explore-link { width: 40px; height: 40px; border: 1px solid #6d8aed; border-radius: 50%; display: grid; place-items: center; font-size: 22px; transition: background .2s; }
.explore-link:hover { background: #315ce1; }
.features { padding-block: 100px 80px; }
.section-intro { margin-bottom: 50px; }
.section-intro h2 { font-size: 67px; letter-spacing: -2.5px; }
.feature-art { height: 355px; border-radius: 22px; }
.log-art { background: #e7edda; }
.progress-art { background: #e0eafb; }
.feature-art .log-sheet, .feature-art .progress-sheet { transition: transform 650ms var(--ease-expo); }
.feature-art:hover .log-sheet { transform: rotate(1deg) translateY(-8px); }
.feature-art:hover .progress-sheet { transform: rotate(-1deg) translateY(-8px); }
.button { overflow: hidden; }
.button>span { transition: transform 350ms var(--ease-expo); }
.button:hover>span { transform: translate(3px,-3px); }
.nav nav a { position: relative; }
.nav nav a::after { content: ''; height: 1px; position: absolute; left: 0; right: 0; bottom: -5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-expo); }
.nav nav a:hover::after { transform: scaleX(1); }
.training-story { background: #e9eddf; padding: 85px 0 100px; }
.story-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: start; }
.story-copy h2 { font-size: 72px; }
.story-copy>p { margin-top: 24px; font-size: 18px; }
.story-steps { margin-top: 42px; }
.story-step { padding: 26px 0; opacity: .45; transition: opacity .4s; }
.story-step.is-current { opacity: 1; }
.story-step>span { font: 400 30px/1.15 var(--serif); }
.story-step>p { margin-top: 10px; font-size: 14px; color: var(--muted); }
.story-visual { position: sticky; top: 160px; margin-top: 75px; padding: 30px 0; perspective: 1000px; }
.training-card { border-radius: 18px; padding: 32px; }
.training-back { background: #b8c2a1; position: absolute; inset: 0 15px 20px; transform: rotate(-9deg); }
.training-back>span { font-size: 12px; }
.training-back>b { display: block; font: 400 40px/1 var(--serif); margin-top: 20px; }
.training-front { background: #fcfdf8; position: relative; transform: rotate(4deg); transition: transform .5s var(--ease-expo); }
.story-weight { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.story-weight>span { font: 500 100px/1 var(--serif); letter-spacing: -4px; }
.story-weight>small { font-size: 22px; }
.story-chart { width: 100%; height: 130px; margin-top: 12px; overflow: visible; }
.story-baseline { fill: none; stroke: #dce1d3; stroke-width: 1; }
.story-line { fill: none; stroke: #486428; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .8; transition: stroke-dashoffset .65s var(--ease-expo); }
.story-visual[data-stage='1'] .story-line { stroke-dashoffset: .42; }
.story-visual[data-stage='2'] .story-line { stroke-dashoffset: 0; }
.story-visual[data-stage='1'] .training-front { transform: rotate(1deg) translateY(-8px); }
.story-visual[data-stage='2'] .training-front { transform: rotate(-2deg) translateY(-15px); }
.story-card-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-top: 20px; }
.story-mark { font: 600 36px/1 var(--serif); color: #486428; }
.checkin-band { background: #14261e; color: #f3f6ee; margin: 0; }
.checkin-copy>p+p,.checkin-day,.quiet-note { color: #b9c6b9; }
.checkin-demo .note { color: var(--fg); background: #eff3e9; }
.checkin { padding-block: 95px; }
.note { transition: transform 450ms var(--ease-expo); }
.note:hover { transform: translateX(-8px); }
.coaches { padding-block: 110px; }
.quote-sign { display: inline-block; }
.footer { overflow: clip; }
.footer-wordmark { transition: color .4s; }
.footer-wordmark:hover { color: var(--accent); }
.reveal { animation: none; }
@media(prefers-reduced-motion:no-preference) {
  .headline-line>span { animation: headline-rise 1000ms var(--ease-expo) both; }
  .headline-line:nth-child(2)>span { animation-delay: 100ms; }
  .hero-copy>p,.hero-copy>.button,.hero-note { animation: hero-arrival 900ms var(--ease-expo) both; }
  .demo-stage { animation: stage-arrival 1150ms var(--ease-expo) both; }
  .orbit-top { animation: receipt-drift 7s ease-in-out infinite; }
  .orbit-bottom { animation: saved-drift 8s ease-in-out infinite; }
  .hero-world:not(.is-visible) .orbit-note { animation-play-state: paused; }
  .reveal h2,.reveal.feature h3,.reveal.coach-copy h2 { animation: headline-rise 850ms var(--ease-expo) both; }
  .feature-art.reveal { animation: panel-open 1000ms var(--ease-expo) both; }
  .log-art.reveal .table-row { animation: row-enter 650ms var(--ease-expo) both; }
  .log-art.reveal .table-row:nth-child(3) { animation-delay: 150ms; }
  .log-art.reveal .table-row:nth-child(4) { animation-delay: 250ms; }
  .log-art.reveal .table-row:nth-child(5) { animation-delay: 350ms; }
  .progress-art.reveal .chart>path:not(.chart-grid) { stroke-dasharray: 400; animation: draw-chart 1.6s var(--ease-expo) both; }
  .note.reveal { animation: notification-arrival 900ms var(--ease-expo) both; }
  .note.reveal:nth-of-type(2) { animation-delay: 180ms; }
  .coach-demo.reveal { animation: panel-open 900ms var(--ease-expo) both; }
  .privacy.reveal .cmds>div { animation: row-enter 800ms var(--ease-expo) both; }
  .privacy.reveal .cmds>div:nth-child(2) { animation-delay: 100ms; }
  .privacy.reveal .cmds>div:nth-child(3) { animation-delay: 200ms; }
  .footer-wordmark.reveal { animation: wordmark-rise 1200ms var(--ease-expo) both; }
  .m { animation: message-in 500ms var(--ease-expo) both; }
  @supports(animation-timeline:view()) {
    .hero-world { view-timeline-name: --hero-exit; }
    .hero-world::before { animation: hero-letter linear both; animation-timeline: --hero-exit; animation-range: exit 0% exit 100%; }
  }
}
@keyframes headline-rise { from { transform: translateY(95%); opacity: .2; } to { transform: translateY(0); opacity: 1; } }
@keyframes hero-arrival { from { transform: translateY(20px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes stage-arrival { from { transform: translateY(50px) rotate(6deg) scale(.94); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes receipt-drift { 0%,100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-14px) rotate(5deg); } }
@keyframes saved-drift { 0%,100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(12px) rotate(1deg); } }
@keyframes panel-open { from { clip-path: inset(12% 3% 4% 3% round 20px); transform: translateY(30px) scale(.96); opacity: .4; } to { clip-path: inset(0 round 20px); transform: none; opacity: 1; } }
@keyframes row-enter { from { transform: translateX(18px); opacity: .15; } to { transform: none; opacity: 1; } }
@keyframes draw-chart { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes notification-arrival { from { transform: translateX(50px) rotate(3deg); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes wordmark-rise { from { transform: translateY(30%) rotate(-4deg); } to { transform: none; } }
@keyframes hero-letter { from { transform: translateY(0) rotate(-12deg); } to { transform: translateY(-110px) rotate(0deg); } }
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation: none!important; }
.motion-paused .story-line,.motion-paused .training-front { transition: none; }
@media(min-width:1600px) { .hero { min-height: 760px; } }
@media(max-width:1050px) {
 .hero { gap: 30px; min-height: 670px; }
 .hero h1 { font-size: 65px; letter-spacing: -3px; }
 .demo-stage { margin-inline: 10px; }
 .orbit-top { right: -20px; top: -40px; padding: 14px 17px; }
 .orbit-top>strong { font-size: 31px; }
 .orbit-bottom { left: -24px; bottom: 110px; padding: 12px 14px; }
 .story-layout { gap: 45px; }
}
@media(max-width:800px) {
 .hero-world { margin-inline: 10px; }
 .hero { grid-template-columns: 1fr; padding-block: 55px 40px; gap: 50px; }
 .hero-copy { text-align: center; }
 .hero h1 { font-size: 76px; }
 .hero-copy>p { margin-inline: auto; max-width: 430px; }
 .demo-stage { width: 410px; max-width: calc(100% - 40px); justify-self: center; }
 .hero-bottom { font-size: 11px; }
 .hero-bottom>span { max-width: 230px; }
 .section-intro h2 { font-size: 55px; }
 .story-layout { gap: 30px; }
 .story-copy h2 { font-size: 58px; }
 .story-copy>p { font-size: 16px; }
 .training-card { padding: 23px; }
 .story-weight>span { font-size: 80px; }
 .story-weight>small { font-size: 16px; }
 .story-step>span { font-size: 25px; }
}
@media(max-width:600px) {
 .nav { height: 80px; }
 .hero-world { border-radius: 18px; margin-inline: 8px; }
 .hero-world::before { font-size: 650px; right: -120px; bottom: -100px; }
 .hero { width: calc(100% - 40px); padding-block: 45px 25px; gap: 58px; }
 .hero h1 { font-size: clamp(42px,11.7vw,66px); letter-spacing: -2px; }
 .hero-copy>p { font-size: 16px; margin-top: 25px; }
 .hero .button { padding: 16px 22px; }
 .hero-note { font-size: 11px; }
 .demo-stage { max-width: calc(100% - 8px); width: 100%; margin: 0; }
 .conversation { border-width: 4px; border-radius: 20px; transform: rotate(-2deg); }
 .orbit-top { right: -9px; top: -35px; padding: 10px 13px; border-radius: 10px; }
 .orbit-top>strong { font-size: 27px; }
 .orbit-top>span { font-size: 9px; }
 .orbit-top small { font-size: 12px; }
 .orbit-bottom { left: -10px; bottom: 105px; padding: 10px 12px; }
 .orbit-bottom strong { font-size: 12px; }
 .orbit-bottom div>span { font-size: 9px; }
 .tg-chat { height: 315px; padding-bottom: 60px; }
 .demo-caption { font-size: 12px; margin-top: 25px; }
 .hero-bottom { width: calc(100% - 40px); padding-bottom: 18px; gap: 8px; }
 .hero-bottom>span { font-size: 10px; max-width: 160px; }
 .motion-toggle { font-size: 10px; padding: 10px 4px; gap: 7px; }
 .explore-link { width: 30px; height: 30px; font-size: 18px; flex-shrink: 0; }
 .features { padding-block: 60px; }
 .section-intro h2 { font-size: 48px; }
 .feature-art { height: 320px; }
 .training-story { padding-block: 55px 65px; }
 .story-layout { display: flex; flex-direction: column; gap: 25px; }
 .story-copy h2 { font-size: 58px; }
 .story-steps { margin-top: 22px; }
 .story-step { padding-block: 18px; }
 .story-step>span { font-size: 28px; }
 .story-visual { position: relative; top: auto; margin-top: 0; width: calc(100% - 20px); align-self: center; }
 .training-card { padding: 25px; }
 .checkin { padding-block: 60px; }
 .coaches { padding-block: 65px; }
}
@media(prefers-reduced-motion:reduce) {
 .orbit-note { animation: none; }
 .story-line { stroke-dashoffset: 0; }
 .story-step { opacity: 1; }
 .motion-toggle { display: none; }
 .headline-line>span { transform: none; }
}
/* Keep the animated receipt outside the chat's reading and control area. */
.hero { padding-block: 60px; }
.demo-caption { margin-top: 92px; }
.orbit-bottom { bottom: 36px; left: -20px; }
@media(max-width:600px) {
 .hero { padding-block: 45px 25px; }
 .demo-caption { margin-top: 83px; }
 .orbit-bottom { bottom: 34px; left: 4px; }
}
/* Spotter: a light, product-led visual system. */
:root { --bg:#fafbfc; --paper:#fff; --fg:#141b22; --muted:#67737e; --accent:#2786d8; --blue-pale:#e8f5ff; --line:#e1e9ef; --soft:#f0f5f7; --serif:"Inter",Arial,sans-serif; --sans:"Inter",Arial,sans-serif; }
body { background:#fafbfc; }
.wrap { width:min(1180px,calc(100% - 96px)); }
.nav { height:88px; position:absolute; z-index:10; left:0; right:0; color:#142432; }
.logo { font:700 24px/1 var(--sans); letter-spacing:-1.3px; }
.logo svg { width:27px; height:27px; }
.nav nav { font-size:13px; gap:32px; }
.button { border-radius:12px; background:#1a232b; color:white; font-weight:600; font-size:14px; }
.button:hover { background:#2c7cbb; }
.hero-world { margin:0; border-radius:0; background:#bde5fb; color:#15212b; min-height:1050px; }
.hero-world::before { content:""; inset:0; transform:none; background:linear-gradient(180deg,rgba(182,226,250,.12),rgba(250,252,254,0) 58%,#fafbfc 99%),url('/img/spotter-sky.png') center top/cover no-repeat; }
.hero-world::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent calc(50% - 590px),rgba(255,255,255,.25) calc(50% - 590px),rgba(255,255,255,.25) calc(50% - 589px),transparent calc(50% - 589px),transparent calc(50% + 589px),rgba(255,255,255,.25) calc(50% + 589px),rgba(255,255,255,.25) calc(50% + 590px),transparent calc(50% + 590px)); }
.hero { min-height:0; display:flex; flex-direction:column; gap:68px; padding:165px 0 0; align-items:center; text-align:center; }
.hero-copy { text-align:center; position:relative; z-index:2; }
.hero h1 { color:#121e28; font:650 clamp(52px,6vw,82px)/1.02 var(--sans); letter-spacing:-.065em; white-space:normal; }
.headline-line { padding:0 0 .08em; margin:0 0 -.08em; }
.hero-copy>p { color:#405968; font-size:17px; line-height:1.65; max-width:470px; margin:24px auto 28px; }
.hero .button { background:#16212a; color:white; padding:16px 22px; }
.hero .button:hover { background:#2b80bf; }
.hero-note { color:#637b88; margin-top:15px; }
.demo-stage { width:min(700px,100%); max-width:none; margin:0; padding:0; }
.conversation { transform:none; border:1px solid rgba(40,80,102,.16); border-radius:21px; box-shadow:0 25px 90px rgba(49,111,143,.17),0 3px 12px rgba(49,111,143,.08); text-align:left; }
.demo-stage:hover .conversation { transform:none; }
.chat-header { padding:18px 24px; }
.tg-chat { height:260px; padding:20px 25px; background:#f7fafc; }
.m { font-size:14px; }
.m.out { background:#3293e4; }
.demo-bottom { padding:15px 22px 20px; }
.reply-kb button { font-size:12px; }
.orbit-note { box-shadow:0 10px 45px rgba(50,100,130,.15); }
.orbit-top { right:-55px; top:35px; transform:none; }
.orbit-bottom { left:-58px; bottom:100px; transform:none; background:#fff; }
.orbit-top,.orbit-bottom { animation:none!important; }
.orbit-check { background:#e0f6ef; border:0; color:#188b65; }
.demo-caption { display:none; }
.hero-bottom { padding-top:45px; color:#66818e; }
.hero-bottom>span { visibility:hidden; }
.motion-toggle { color:#526f80; }
.explore-link { color:#526f80; border-color:#abc8d8; }
.features { padding-block:130px 120px; }
h2 { font-family:var(--sans); font-weight:600; letter-spacing:-.055em; }
h3 { font-family:var(--sans); font-weight:600; font-size:25px; letter-spacing:-.04em; }
.section-intro h2 { font-size:clamp(42px,4.5vw,62px); letter-spacing:-.06em; }
.feature-art { background:#edf6fa; border-radius:18px; }
.progress-art { background:#e5f4fb; }
.log-sheet,.progress-sheet,.training-back,.training-front { transform:none!important; }
.feature-art:hover .log-sheet,.feature-art:hover .progress-sheet { transform:translateY(-4px)!important; }
.training-story { background:#e9f5fb; }
.story-copy h2 { font-size:clamp(46px,5vw,68px); }
.story-step>span { font:600 25px/1.25 var(--sans); letter-spacing:-.04em; }
.training-back { background:#cbe4f0; }
.training-front { box-shadow:0 16px 55px rgba(61,105,128,.1); }
.story-line { stroke:#2786d8; }
.story-mark { color:#2786d8; }
.checkin-band { background:#142d40; }
.checkin-demo .note { background:#f4f9fc; }
.coaches { padding-block:125px; }
blockquote { font:500 27px/1.38 var(--sans); letter-spacing:-.04em; }
.privacy { background:#eaf4f9; }
.closing { padding-block:90px; }
.closing h2 { font-size:clamp(45px,5.5vw,76px); }
.footer-wordmark { font-family:var(--sans); font-weight:700; font-size:clamp(115px,19vw,255px); letter-spacing:-.08em; }
@media(max-width:800px) { .wrap { width:calc(100% - 48px); } .hero { padding-top:150px; gap:60px; } .hero-world { min-height:1050px; } .hero h1 { font-size:64px; } .demo-stage { width:min(620px,calc(100% - 30px)); } .orbit-top { right:-15px; } .orbit-bottom { left:-15px; } }
@media(max-width:600px) { .wrap { width:calc(100% - 40px); } .nav { height:76px; } .hero-world { margin:0; min-height:900px; } .hero { width:calc(100% - 40px); padding-top:130px; gap:60px; } .hero h1 { font-size:clamp(39px,10.5vw,58px); letter-spacing:-.06em; } .hero-copy>p { font-size:15px; max-width:325px; margin:20px auto 24px; } .hero-note { font-size:11px; } .demo-stage { width:100%; max-width:100%; } .conversation { border-radius:18px; } .chat-header { padding:15px; } .tg-chat { height:270px; padding:15px; } .demo-bottom { padding:12px; } .reply-kb button { font-size:10px; } .orbit-top { right:-9px; top:-30px; } .orbit-bottom { left:-8px; bottom:-37px; } .hero-bottom { padding-top:65px; } .hero-bottom>span { display:none; } .features { padding-block:80px; } .section-intro h2 { font-size:43px; } .feature-art { height:300px; } .story-copy h2 { font-size:50px; } .story-step>span { font-size:23px; } .closing { padding-block:60px; } .footer-wordmark { font-size:25vw; } }
@media(prefers-reduced-motion:no-preference) { .hero-world::before { animation:none; } .demo-stage { animation:stage-arrival 1s var(--ease-expo) both; } }

/* Typography and motion */
:root { --sans: "Plus Jakarta Sans", Arial, sans-serif; --serif: "Plus Jakarta Sans", Arial, sans-serif; }
.hero h1 { font-weight: 700; letter-spacing: -.065em; }
.hero-bottom { justify-content: flex-end; }
.hero-bottom>span { display: none; }
.explore-link { transition: color .25s,background .25s,transform .3s cubic-bezier(.16,1,.3,1); }
.explore-link:hover { color: #fff; background: #2786d8; transform: translateY(4px); }
.conversation { transition: box-shadow .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1); }
.demo-stage:hover .conversation { transform: translateY(-4px); box-shadow: 0 32px 100px rgba(49,111,143,.23), 0 4px 16px rgba(49,111,143,.1); }
.reply-kb button { transition: background .2s,color .2s,transform .2s; }
.reply-kb button:hover { transform: translateY(-2px); }
.feature-art { overflow: hidden; }
.log-sheet,.progress-sheet { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.feature-art:hover .log-sheet,.feature-art:hover .progress-sheet { transform: translateY(-7px)!important; }
.voice { transition: background .2s,color .2s,transform .2s; }
.voice:hover { transform: translateY(-2px); }
summary { transition: color .2s; }
summary:hover { color: #2786d8; }
summary::after { transition: transform .3s cubic-bezier(.16,1,.3,1); }
details[open] summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
 .hero-copy>p { animation: spotter-appear .8s cubic-bezier(.16,1,.3,1) .12s both; }
 .hero-copy>.button { animation: spotter-appear .8s cubic-bezier(.16,1,.3,1) .2s both; }
 .hero-note { animation: spotter-appear .8s cubic-bezier(.16,1,.3,1) .28s both; }
 .demo-stage { animation: spotter-device 1.05s cubic-bezier(.16,1,.3,1) .16s both; }
 .orbit-top { animation: spotter-float-in 1s cubic-bezier(.16,1,.3,1) .4s both!important; }
 .orbit-bottom { animation: spotter-float-in 1s cubic-bezier(.16,1,.3,1) .52s both!important; }
 .feature-art.reveal { animation: spotter-panel-in .85s cubic-bezier(.16,1,.3,1) both; }
 .note.reveal { animation: spotter-note-in .85s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes spotter-appear { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spotter-device { from { opacity: 0; transform: translateY(36px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes spotter-float-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spotter-panel-in { from { opacity: .45; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spotter-note-in { from { opacity: .3; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .demo-stage:hover .conversation,.feature-art:hover .log-sheet,.feature-art:hover .progress-sheet { transform: none!important; } }
:root { --muted: #4e5c66; }
.hero-copy>p { color: #283e4c; }
.hero-note, .explore-link { color: #38566a; }
.story-step { opacity: .7; }
.footer { overflow: visible; }
.footer-wordmark { line-height: 1.1; padding-top: .12em; }
.hero { padding-bottom: 30px; }
@media(max-width:600px) { .hero { padding-bottom: 35px; } }

/* Calm, human product sections */
:root { --bg:#fff; --paper:#fff; --fg:#17191b; --muted:#5d636a; --line:#e8eaec; --soft:#f6f7f8; --accent:#287fc4; }
body { background:#fff; }
.features { padding-block: 118px 110px; }
.section-intro { align-items:end; padding-bottom:4px; margin-bottom:38px; }
.section-intro h2 { max-width:740px; font-size:clamp(40px,4vw,57px); letter-spacing:-.055em; }
.section-intro p { margin-top:15px; color:var(--muted); font-size:16px; }
.section-link { white-space:nowrap; color:#5d636a; font-size:13px; padding:12px 0; transition:color .2s; }
.section-link:hover { color:var(--accent); }
.section-link span { display:inline-block; transition:transform .3s; }
.section-link:hover span { transform:translate(3px,-3px); }
.feature-grid { gap:20px; }
.feature { border:1px solid #ebedef; border-radius:22px; background:#fff; overflow:hidden; padding-bottom:27px; box-shadow:0 8px 25px rgba(17,30,41,.035); }
.feature-art { height:310px; border-radius:0; margin:8px 8px 0; }
.log-art { background:#f3f6f8; }
.progress-art { background:#eaf4fb; }
.feature h3 { margin:25px 26px 0; font-size:22px; }
.feature>p { margin:10px 26px 0; color:var(--muted); font-size:14px; line-height:1.7; }
.nutrition { border:1px solid #ebedef; border-radius:22px; padding:28px; margin-top:20px; gap:32px; box-shadow:0 8px 25px rgba(17,30,41,.035); }
.nutrition h3 { font-size:22px; }
.nutrition>div>p { color:var(--muted); font-size:14px; line-height:1.7; max-width:450px; }
.nutrition-sample { background:#f6f8f9; border-radius:14px; }
.training-story { background:#f8f9fa; padding-block:110px; }
.story-layout { align-items:center; }
.story-copy h2 { font-size:clamp(40px,4.2vw,58px); }
.story-copy>p { font-size:16px; color:var(--muted); }
.story-steps { margin-top:35px; }
.story-step { padding:18px 0; opacity:.58; border-top:1px solid #e5e8eb; }
.story-step.is-current { opacity:1; }
.story-step>span { font-size:20px; }
.story-visual { position:relative; top:auto; margin-top:0; border-radius:22px; padding:30px; background:#e8f3fa; }
.training-back { display:none; }
.training-front { box-shadow:0 8px 24px rgba(31,60,80,.07); border:1px solid rgba(255,255,255,.9); }
.story-weight>span { font-size:82px; }
.checkin-band { background:#fff; color:var(--fg); }
.checkin { padding-block:110px; }
.checkin-copy h2,.coach-copy h2,.privacy h2,.faq h2 { font-size:clamp(40px,4vw,55px); }
.checkin-copy>p { color:var(--muted); }
.checkin-copy>p+p { color:var(--muted); }
.checkin-demo { padding:28px; border:1px solid #ebedef; background:#f8fafb; border-radius:22px; }
.checkin-day,.quiet-note { color:var(--muted); }
.checkin-demo .note { background:#fff; border:1px solid #edf0f2; box-shadow:0 4px 12px rgba(20,40,55,.035); }
.note:hover { transform:none; }
.coaches { padding:75px 40px; margin-top:0; margin-bottom:110px; border:1px solid #e9ecee; border-radius:24px; box-shadow:0 8px 28px rgba(20,40,55,.04); }
.coach-copy { padding-left:20px; }
.coach-copy p { color:var(--muted); }
.coach-demo { border-radius:18px; background:#f7f9fa; padding:28px; border:1px solid #edf0f2; }
.coach-demo-heading { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.coach-demo-heading b,.coach-demo-heading small { display:block; }
.coach-demo-heading b { font-size:14px; }
.coach-demo-heading small { font-size:12px; color:var(--muted); }
.voices { display:flex; background:#fff; padding:4px; border:1px solid #e9ecee; border-radius:10px; }
.voice { flex:1 1 auto; border-radius:7px; }
.voice.active { background:#1b2024; }
.quote-context { margin-top:24px; }
blockquote { font-size:clamp(22px,2.1vw,28px); min-height:112px; }
.privacy { background:#f6f8f9; border:1px solid #edf0f2; border-radius:24px; padding:60px; }
.cmds>div { border-bottom:1px solid #e4e9ec; padding-bottom:17px; }
.cmds>div:last-child { border-bottom:0; padding-bottom:0; }
.faq { padding-block:115px; }
.list { border-top:1px solid var(--line); }
summary { padding-block:21px; }
.closing { background:#eaf5fc; border-radius:24px; padding:80px 24px; margin-bottom:60px; }
.closing h2 { font-size:clamp(40px,4.5vw,64px); }
.footer-wordmark { letter-spacing:-.075em; }
@media(max-width:800px) { .coaches { padding:38px 28px; gap:30px; } .coach-copy { padding-left:0; } .privacy { padding:38px; } .story-layout { gap:35px; } }
@media(max-width:600px) {
 .features { padding-block:75px; }
 .section-intro { display:block; margin-bottom:25px; }
 .section-intro h2 { font-size:39px; }
 .section-intro p { font-size:15px; margin-top:14px; }
 .section-link { display:inline-block; margin-top:7px; }
 .feature-grid { gap:16px; }
 .feature { padding-bottom:23px; border-radius:18px; }
 .feature-art { height:265px; }
 .feature h3 { margin:21px 21px 0; font-size:21px; }
 .feature>p { margin:9px 21px 0; }
 .nutrition { padding:24px; gap:18px; margin-top:16px; border-radius:18px; }
 .nutrition h3 { font-size:21px; }
 .training-story { padding-block:65px; }
 .story-copy h2 { font-size:41px; }
 .story-copy>p { font-size:15px; }
 .story-step>span { font-size:19px; }
 .story-visual { width:100%; padding:18px; margin-top:0; }
 .story-weight>span { font-size:72px; }
 .checkin { padding-block:70px; gap:28px; }
 .checkin-demo { padding:17px; }
 .coaches { padding:28px 22px; margin-bottom:70px; gap:25px; border-radius:20px; }
 .coach-demo { padding:18px; }
 .voices { flex-wrap:nowrap; gap:0; }
 .voice { padding:10px 7px; font-size:11px; }
 blockquote { font-size:24px; min-height:120px; }
 .privacy { padding:28px 24px; border-radius:20px; }
 .faq { padding-block:70px; }
 .closing { padding:65px 20px; margin-bottom:35px; }
 .closing h2 { font-size:40px; }
}
/* A quieter, conversation-first Spotter. */
:root { --bg:#fff; --fg:#111113; --muted:#747479; --line:#e9e9eb; --soft:#f5f5f5; --accent:#2788df; --sans:"DM Sans",Arial,sans-serif; --serif:"DM Serif Display",Georgia,serif; }
html { scroll-behavior:auto; }
body { color:var(--fg); background:#fff; font-family:var(--sans); }
.wrap { width:min(1120px,calc(100% - 64px)); }
.nav { position:relative; height:85px; }
.logo { font:400 27px/1 var(--serif); letter-spacing:-.8px; }
.logo svg { width:29px; height:29px; border-radius:8px; padding:5px; background:#111; stroke:#fff; }
.nav nav { margin-left:auto; border:1px solid #ededee; padding:6px; border-radius:15px; gap:0; }
.nav nav a { padding:9px 15px; font-size:13px; }
.button,.button.compact { border-radius:999px; background:#0a0a0c; color:#fff; font-weight:600; }
.button:hover { background:#303034; }
.hero-world { min-height:0; background:white; color:var(--fg); overflow:clip; }
.hero-world::before,.hero-world::after { display:none; }
.hero { width:min(1000px,calc(100% - 48px)); padding:58px 0 0; gap:65px; }
.hero h1 { font:400 clamp(55px,5.1vw,78px)/.99 var(--serif); letter-spacing:-.03em; color:#0c0c0e; }
.hero-copy>p { color:#737379; font-size:15px; line-height:1.6; max-width:390px; margin:23px auto 24px; }
.hero .button { background:#09090b; color:white; padding:15px 23px; }
.hero-note { color:#929297; font-size:12px; }
.hero-bottom { display:none; }
.demo-stage { width:360px; max-width:100%; }
.phone-shell { position:relative; padding:9px; border-radius:51px; background:#171719; border:2px solid #909096; box-shadow:0 0 0 2px #e5e5e7,0 20px 45px rgba(0,0,0,.10); }
.phone-island { position:absolute; width:103px; height:23px; top:20px; left:50%; transform:translateX(-50%); border-radius:20px; background:#09090b; z-index:2; }
.conversation { border:0; border-radius:40px; background:#fff; box-shadow:none; transform:none!important; overflow:hidden; }
.demo-stage:hover .conversation { box-shadow:none; }
.chat-header { padding:51px 20px 15px; border:0; flex-direction:column; text-align:center; gap:4px; }
.chat-header .avatar { width:44px; height:44px; background:#111; color:white; font:400 24px/1 var(--serif); }
.chat-header small { font-size:11px; }
.demo-label { display:none; }
.tg-chat { height:310px; padding:16px 13px; background:white; }
.tg-date { color:#a5a5aa; }
.m { font-size:13px; max-width:87%; }
.m.out { background:#2b91e9; }
.m.in { background:#efeff0; }
.demo-bottom { padding:10px 14px 22px; border-top:0; }
.reply-kb { grid-template-columns:1fr 1fr; }
.reply-kb button { font-size:11px; background:#f4f4f5; border-radius:10px; }
.features { padding:120px 0 100px; }
.section-intro { display:block; text-align:center; margin-bottom:38px; }
h2,.section-intro h2,.story-copy h2,.checkin-copy h2,.coach-copy h2,.privacy h2,.faq h2 { font:400 clamp(38px,3.3vw,50px)/1.04 var(--serif); letter-spacing:-.025em; }
.section-intro h2 { max-width:none; }
.section-intro p { font-size:14px; color:var(--muted); margin:14px auto 0; }
.feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.feature { padding:15px 19px 24px; min-height:270px; background:#f4f4f4; border:0; border-radius:24px; box-shadow:none; }
.feature-art { position:relative; height:110px; padding:0; margin:0 0 13px; background:transparent; overflow:visible; display:block; }
.feature-art img { position:absolute; top:0; left:0; width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 4px 4px rgba(0,0,0,.13)); transform:rotate(-8deg); }
.feature-bubble { position:absolute; top:50px; right:0; max-width:86%; padding:7px 10px; border:1px solid #a4c7e4; border-radius:11px 11px 11px 3px; color:#1c3b55; background:linear-gradient(#eaf6ff,#cfe8fc); font-size:11px; line-height:1.3; }
.feature h3 { font:400 23px/1.08 var(--serif); letter-spacing:-.02em; margin:0 0 9px; }
.feature>p { font-size:13px; line-height:1.5; margin:0; color:#74747a; }
.training-story { background:#fff; padding:40px 0 100px; }
.story-layout { max-width:850px; grid-template-columns:1fr 1fr; gap:60px; }
.story-copy>p { color:var(--muted); font-size:15px; }
.story-step>span { font:400 21px/1.2 var(--serif); }
.story-visual { background:#f5f5f5; border-radius:22px; }
.training-front { box-shadow:none; }
.checkin-band { background:#f7f7f7; color:var(--fg); }
.checkin { max-width:1000px; padding-block:90px; }
.checkin-demo { background:#fff; }
.coaches { margin-top:100px; margin-bottom:100px; padding:50px; box-shadow:0 8px 30px rgba(0,0,0,.04); }
.coach-demo { background:#f7f7f7; }
blockquote { font:400 28px/1.25 var(--serif); }
.privacy { background:white; border:0; padding:30px 0; max-width:850px; }
.privacy p { font-size:15px; }
.faq { padding-block:110px; grid-template-columns:.8fr 1fr; gap:70px; }
.list { border:1px solid #ececee; border-radius:20px; padding:0 24px; box-shadow:0 10px 30px rgba(0,0,0,.045); }
.list details:last-child { border-bottom:0; }
summary { font-size:14px; font-weight:500; }
.closing { background:#f5f5f5; padding:70px 20px; }
.closing h2 { font:400 clamp(40px,4vw,58px)/1.05 var(--serif); }
.footer-wordmark { font:400 clamp(100px,18vw,230px)/1.1 var(--serif); }
.reveal,.reveal h2,.reveal.feature h3,.feature-art.reveal,.note.reveal,.coach-demo.reveal,.privacy.reveal .cmds>div,.footer-wordmark.reveal { animation:none!important; transform:none; opacity:1; }
@media(max-width:900px) { .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .story-layout { gap:35px; } }
@media(max-width:600px) {
 .wrap { width:calc(100% - 40px); }
 .nav { height:72px; }
 .nav nav { display:none; }
 .logo { font-size:25px; }
 .button.compact { font-size:11px; padding:11px 14px; }
 .hero { width:calc(100% - 40px); padding-top:42px; gap:45px; }
 .hero h1 { font-size:clamp(43px,11.5vw,59px); letter-spacing:-.03em; }
 .hero-copy>p { font-size:14px; max-width:320px; }
 .demo-stage { width:310px; }
 .phone-shell { border-radius:43px; }
 .phone-island { top:17px; }
 .conversation { border-radius:33px; }
 .tg-chat { height:270px; }
 .features { padding:80px 0 65px; }
 .section-intro h2 { font-size:39px; }
 .feature-grid { gap:10px; }
 .feature { padding:13px 14px 20px; min-height:260px; border-radius:18px; }
 .feature-art { height:100px; }
 .feature-art img { width:63px; height:63px; }
 .feature-bubble { font-size:10px; padding:6px; top:45px; }
 .feature h3 { font-size:20px; margin:0 0 8px; }
 .feature>p { font-size:12px; margin:0; }
 .training-story { padding:35px 0 70px; }
 .story-layout { gap:24px; }
 .story-copy h2,.checkin-copy h2,.coach-copy h2,.privacy h2,.faq h2 { font-size:39px; }
 .checkin { padding-block:65px; }
 .coaches { margin-block:65px; padding:25px; }
 .privacy { padding:0; }
 .faq { gap:24px; padding-block:75px; }
 .list { padding:0 18px; }
 .closing { padding:60px 20px; }
 .footer-wordmark { font-size:25vw; }
}

.story-step { opacity:1; }
.story-line { stroke-dashoffset:0; }

@media(max-width:600px) { .faq { grid-template-columns:1fr; } }
/* Stickers respond to the card rather than to scrolling. */
.feature-grid { isolation:isolate; }
.feature { position:relative; overflow:visible; transition:background .25s ease, box-shadow .32s ease; }
.feature:hover, .feature:focus-visible { z-index:2; background:#f0f0f1; box-shadow:0 13px 30px rgba(0,0,0,.08); }
.feature:focus-visible { outline:3px solid #2788df; outline-offset:4px; }
.feature-art { position:relative; }
.feature-art img.feature-sticker { z-index:2; transform-origin:50% 80%; transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .4s; will-change:transform; }
.feature-art img.feature-sticker-extra { top:7px; left:45px; width:52px; height:52px; z-index:1; opacity:0; transform:translate(-20px,22px) scale(.55) rotate(-20deg); transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .25s ease; }
.feature-bubble { z-index:3; transform-origin:10% 100%; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .feature:hover .feature-sticker:not(.feature-sticker-extra),.feature:focus-visible .feature-sticker:not(.feature-sticker-extra) { transform:translate(-10px,-20px) rotate(-15deg) scale(1.12); filter:drop-shadow(0 10px 8px rgba(0,0,0,.18)); }
 .feature:hover .feature-sticker-extra,.feature:focus-visible .feature-sticker-extra { opacity:1; transform:translate(24px,-15px) scale(1) rotate(13deg); }
 .feature:hover .feature-bubble,.feature:focus-visible .feature-bubble { transform:translate(4px,-4px) rotate(2deg); }
}
@media (hover:none), (pointer:coarse) {
 .feature-art img.feature-sticker-extra { opacity:1; transform:translate(20px,-8px) scale(.85) rotate(12deg); }
}
@media (prefers-reduced-motion:reduce) {
 .feature-art img.feature-sticker-extra { opacity:1; transform:translate(20px,-8px) scale(.85) rotate(12deg); }
 .feature-art img.feature-sticker,.feature-bubble { transition:none; }
}
@media(max-width:600px) { .feature-art img.feature-sticker-extra { width:43px; height:43px; left:39px; } }
/* A little burst from each card, based on its own feature. */
.sticker-burst { position:absolute; z-index:4; inset:0; pointer-events:none; overflow:visible; }
.feature-art .sticker-burst img { position:absolute; top:0; left:38px; width:31px; height:31px; opacity:0; transform:translate(0,20px) scale(.3) rotate(0); filter:drop-shadow(0 3px 3px rgba(0,0,0,.12)); transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .25s ease; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .feature:hover .sticker-burst img,.feature:focus-visible .sticker-burst img { opacity:1; }
 .feature:hover .sticker-burst img:nth-child(1),.feature:focus-visible .sticker-burst img:nth-child(1) { transform:translate(-42px,-65px) rotate(-24deg) scale(.86); }
 .feature:hover .sticker-burst img:nth-child(2),.feature:focus-visible .sticker-burst img:nth-child(2) { transform:translate(-9px,-100px) rotate(14deg) scale(.75); transition-delay:.04s; }
 .feature:hover .sticker-burst img:nth-child(3),.feature:focus-visible .sticker-burst img:nth-child(3) { transform:translate(28px,-70px) rotate(-11deg) scale(1); transition-delay:.08s; }
 .feature:hover .sticker-burst img:nth-child(4),.feature:focus-visible .sticker-burst img:nth-child(4) { transform:translate(64px,-104px) rotate(22deg) scale(.73); transition-delay:.12s; }
 .feature:hover .sticker-burst img:nth-child(5),.feature:focus-visible .sticker-burst img:nth-child(5) { transform:translate(107px,-58px) rotate(-12deg) scale(.87); transition-delay:.16s; }
}
@media (prefers-reduced-motion:reduce) { .feature-art .sticker-burst img { display:none; } }
/* A short page: hero, benefits, coach voices, questions. */
.features { padding-bottom:105px; }
.coaches { margin-top:0; margin-bottom:0; }
.faq { padding-top:110px; padding-bottom:110px; }
.footer { border-top:1px solid #ededee; padding-top:45px; }
@media(max-width:600px) { .features { padding-bottom:70px; } .coaches { margin-top:0; margin-bottom:0; } .faq { padding-block:70px; } .footer { padding-top:30px; } }
/* Spotter's own direction: the training log, not a generic assistant. */
:root { --bg:#f8fafb; --fg:#102434; --muted:#5e7180; --accent:#0676c5; --line:#dbe5eb; --soft:#eef5f8; --sans:"Manrope",Arial,sans-serif; --serif:"Manrope",Arial,sans-serif; }
body { background:var(--bg); color:var(--fg); }
.wrap { width:min(1152px,calc(100% - 80px)); }
.nav { height:100px; }
.logo { font:800 25px/1 var(--sans); letter-spacing:-1.5px; }
.logo svg { border-radius:9px; background:#0c344e; }
.nav nav { border:0; background:transparent; }
.nav nav a { color:#405c6c; font-size:13px; }
.button,.button.compact,.hero .button { background:#113d58; border-radius:12px; }
.button:hover,.hero .button:hover { background:#006eaf; }
.hero-world { background:#f8fafb; }
.hero { width:min(1152px,calc(100% - 80px)); display:grid; grid-template-columns:1fr 1fr; text-align:left; gap:70px; padding:78px 0 120px; align-items:center; }
.hero-copy { text-align:left; }
.hero-copy::before { content:'YOUR TRAINING COMPANION'; display:block; color:#527387; font:700 11px/1 var(--sans); letter-spacing:.12em; margin-bottom:24px; }
.hero h1 { font:800 clamp(56px,6vw,84px)/1.04 var(--sans); letter-spacing:-.07em; color:#102f43; }
.hero-copy>p { margin:26px 0; max-width:445px; font-size:17px; color:#526b79; }
.hero-note { color:#6c8492; }
.demo-stage { width:100%; max-width:490px; justify-self:end; padding:25px; border-radius:28px; background:#e2f0f7; }
.phone-shell { border:0; border-radius:18px; padding:0; background:transparent; box-shadow:0 20px 55px rgba(19,78,111,.13); }
.phone-island { display:none; }
.conversation { border:1px solid #dceaf1; border-radius:18px; }
.chat-header { padding:18px 22px; flex-direction:row; text-align:left; gap:11px; border-bottom:1px solid #e8eff3; }
.chat-header .avatar { width:42px; height:42px; background:#d9eff9; color:#066ba7; font:800 15px/1 var(--sans); padding:0; }
.chat-header b { font-size:15px; }
.tg-chat { height:260px; background:#fbfdfe; padding:16px; }
.m.out { background:#097ac4; }
.m.in { background:#eaf1f4; }
.demo-bottom { padding:15px 17px 18px; background:#fff; border-top:1px solid #e8eff3; }
.reply-kb { grid-template-columns:repeat(4,1fr); }
.reply-kb button { border-radius:7px; }
.features { padding:25px 0 125px; }
.section-intro { text-align:left; display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:38px; }
.section-intro h2,h2,.coach-copy h2,.faq h2 { font:800 clamp(37px,4vw,53px)/1.1 var(--sans); letter-spacing:-.06em; color:#102f43; }
.section-intro h2 { max-width:560px; }
.section-intro p { margin:0; text-align:left; max-width:270px; color:#607988; line-height:1.6; }
.feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.feature { min-height:190px; padding:28px 180px 28px 30px; background:#eef4f7; border-radius:16px; }
.feature:nth-child(2),.feature:nth-child(3) { background:#e7f2f7; }
.feature-art { position:absolute; top:30px; right:28px; width:130px; height:125px; margin:0; }
.feature-art img.feature-sticker { width:76px; height:76px; }
.feature h3 { font:800 22px/1.22 var(--sans); letter-spacing:-.045em; margin:6px 0 10px; }
.feature>p { max-width:320px; font-size:14px; color:#536c7a; }
.feature-bubble { right:-10px; top:70px; font-size:10px; }
.feature:hover,.feature:focus-visible { background:#e1eff5; }
.coaches { background:#fff; border-color:#e1ebf0; border-radius:18px; box-shadow:none; margin-bottom:25px; }
.coach-copy p { color:#5b7280; }
.coach-demo { background:#f1f7fa; border:0; border-radius:12px; }
.coach-demo-heading .avatar { background:#d9eff9; color:#066ba7; font:800 15px/1 var(--sans); padding:0; }
blockquote { font:700 23px/1.4 var(--sans); letter-spacing:-.035em; }
.voice.active { background:#123d57; }
.faq { padding-top:120px; }
.list { box-shadow:none; border-color:#dfe9ee; border-radius:14px; background:white; }
.footer { border-top:1px solid #dbe6ec; }
.footer-wordmark { text-align:left; font:800 clamp(82px,13vw,180px)/1.1 var(--sans); letter-spacing:-.085em; }
@media(max-width:850px) { .hero { gap:35px; } .hero h1 { font-size:57px; } .feature { padding-right:145px; } .feature-art { right:16px; width:112px; } }
@media(max-width:600px) {
 .wrap { width:calc(100% - 40px); }
 .nav { height:78px; }
 .hero { width:calc(100% - 40px); grid-template-columns:1fr; gap:40px; padding:45px 0 80px; }
 .hero h1 { font-size:clamp(48px,12vw,68px); }
 .hero-copy>p { margin:22px 0; font-size:15px; }
 .hero-copy::before { margin-bottom:20px; }
 .demo-stage { width:100%; max-width:none; padding:15px; }
 .tg-chat { height:250px; }
 .reply-kb { grid-template-columns:repeat(2,1fr); }
 .features { padding:15px 0 75px; }
 .section-intro { display:block; }
 .section-intro h2,.coach-copy h2,.faq h2 { font-size:38px; }
 .section-intro p { margin-top:14px; }
 .feature-grid { grid-template-columns:1fr; gap:12px; }
 .feature { min-height:165px; padding:23px 135px 23px 22px; }
 .feature-art { top:22px; right:16px; width:105px; }
 .feature-art img.feature-sticker { width:64px; height:64px; }
 .feature h3 { font-size:20px; }
 .feature>p { font-size:13px; }
 .feature-bubble { top:60px; right:-5px; }
 .coaches { margin:0 auto 10px; }
 .faq { padding-block:75px; }
 .footer-wordmark { font-size:25vw; }
}
/* Center the conversation beneath the hero copy. */
.hero { display:flex; flex-direction:column; text-align:center; gap:52px; padding:68px 0 110px; }
.hero-copy { text-align:center; }
.hero-copy>p { margin:24px auto; }
.demo-stage { width:min(490px,100%); max-width:490px; justify-self:auto; }
@media(max-width:600px) { .hero { padding:45px 0 75px; gap:38px; } .hero-copy>p { margin:20px auto; } .demo-stage { width:100%; } }
.demo-stage { width:min(360px,100%); padding:0; background:transparent; }
.phone-shell { position:relative; padding:9px; border-radius:51px; background:#171719; border:2px solid #909096; box-shadow:0 0 0 2px #e5e5e7,0 20px 45px rgba(0,0,0,.10); }
.phone-island { display:block; position:absolute; width:103px; height:23px; top:20px; left:50%; transform:translateX(-50%); border-radius:20px; background:#09090b; z-index:2; }
.conversation { border:0; border-radius:40px; overflow:hidden; box-shadow:none; }
.chat-header { padding:51px 20px 15px; border:0; flex-direction:column; text-align:center; gap:4px; }
.chat-header .avatar { width:44px; height:44px; }
.tg-chat { height:310px; }
.reply-kb { grid-template-columns:1fr 1fr; }
@media(max-width:600px) { .demo-stage { width:min(310px,100%); padding:0; } .phone-shell { border-radius:43px; } .phone-island { top:17px; } .conversation { border-radius:33px; } .tg-chat { height:270px; } }
/* Phone: a clear conversation first, examples just below the screen. */
.demo-stage { width:min(370px,100%); }
.phone-shell { padding:8px; border-radius:53px; border:1px solid #92999c; background:linear-gradient(135deg,#3e4244,#090b0c 22%,#696e70 48%,#090b0c 72%,#4f5355); box-shadow:0 0 0 1px #d9dddf,0 22px 45px rgba(19,39,52,.12); }
.phone-island { width:105px; height:27px; top:17px; background:#080909; box-shadow:inset 0 1px 2px rgba(255,255,255,.14); }
.phone-island span { position:absolute; right:12px; top:8px; width:8px; height:8px; border-radius:50%; background:#142b3e; box-shadow:inset 0 0 0 2px #0b1116; }
.conversation { display:flex; flex-direction:column; border-radius:44px; background:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; color:#17191b; }
.phone-status { height:49px; padding:15px 25px 0 28px; display:flex; align-items:flex-start; justify-content:space-between; font-size:13px; line-height:1; font-weight:650; flex:none; }
.status-icons { display:flex; gap:4px; align-items:center; }
.status-icons svg { height:11px; width:16px; fill:currentColor; }
.status-icons svg:last-child { width:24px; }
.chat-header { position:relative; display:flex; align-items:center; justify-content:center; padding:0 16px 14px; border:0; min-height:88px; }
.chat-person { display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1.1; }
.chat-person .avatar { width:46px; height:46px; padding:0; background:#123d58; border-radius:50%; display:grid; place-items:center; }
.chat-person .avatar svg { width:27px; height:27px; fill:none; stroke:#fff; stroke-width:2.8; stroke-linecap:round; }
.chat-person b { font-size:12px; font-weight:600; border-radius:20px; padding:4px 8px; background:#f3f4f5; }
.chat-person b span { font-size:16px; line-height:0; color:#8a9297; }
.chat-person small { color:#92999d; font-size:10px; min-height:11px; }
.chat-person small.typing { color:#2688d5!important; }
.chat-back,.chat-more { display:grid; place-items:center; position:absolute; top:7px; width:33px; height:33px; border-radius:50%; background:#f6f7f8; color:#4b555a; }
.chat-back { left:16px; }.chat-more { right:16px; font-size:12px; letter-spacing:1px; }
.chat-back svg { width:10px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tg-chat { height:320px; min-height:0; padding:12px 13px 16px; gap:9px; background:#fff; }
.tg-chat > :first-child { margin-top:auto; }
.tg-date { align-self:center; margin:0 0 4px; font-size:10px; color:#9aa1a5; }
.m { max-width:82%; padding:10px 12px; font-size:14px; line-height:1.3; letter-spacing:-.01em; border-radius:17px; }
.m.out { background:#178ded; color:white; border-bottom-right-radius:5px; }
.m.in { background:#eceef0; color:#17191b; border-bottom-left-radius:5px; }
.dots { background:#eceef0; }
.phone-compose { display:flex; align-items:center; gap:9px; padding:8px 15px 6px; color:#899399; flex:none; }
.compose-plus { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f0f2f3; color:#6c767b; font-size:21px; line-height:1; }
.compose-field { flex:1; padding:8px 12px; border:1px solid #e5e9eb; border-radius:20px; font-size:12px; color:#a9b0b4; text-align:left; }
.phone-compose svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.phone-home { width:110px; height:4px; border-radius:8px; background:#181b1d; margin:8px auto 9px; flex:none; }
.demo-bottom { background:transparent; border:0; text-align:center; padding:22px 0 0; }
.demo-bottom>span { font:500 12px var(--sans); color:#778892; }
.reply-kb { grid-template-columns:repeat(4,1fr); gap:5px; padding:0; margin-top:10px; background:transparent; }
.reply-kb button { font:600 10px/1.25 var(--sans); min-height:38px; padding:8px 3px; border-radius:9px; background:#edf4f7; color:#536d7a; }
.reply-kb button[aria-pressed="true"] { background:#dcedf7; color:#126b9e; }
@media(max-width:600px) {
 .demo-stage { width:min(330px,100%); }
 .phone-shell { border-radius:48px; }
 .conversation { border-radius:39px; }
 .phone-island { top:16px; }
 .phone-status { height:46px; }
 .tg-chat { height:300px; }
 .m { font-size:13px; }
 .demo-bottom { padding-top:18px; }
 .reply-kb button { font-size:9px; }
}
@media(max-width:600px) { .reply-kb { grid-template-columns:repeat(2,1fr); gap:6px; } .reply-kb button { font-size:11px; min-height:40px; } }
/* Give the conversation the proportions of a phone screen. */
.tg-chat { height:460px; }
@media(max-width:600px) { .tg-chat { height:390px; } }

/* Voice notes are messages, not coach-voice selector buttons. */
.tg-chat > .m, .tg-chat > .dots, .tg-chat > .kbd { flex: 0 0 auto; }
.tg-chat .m.voice-message { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; column-gap:8px; row-gap:9px; width: min(250px, 84%); padding:10px 12px 11px; }
.voice-message .play { width:29px; height:29px; flex:none; }
.voice-message .wave { min-width:0; overflow:hidden; }
.voice-message .voice-duration { color:rgba(255,255,255,.85); font-size:11px; line-height:1; }
.voice-message .transcript { grid-column:1 / -1; padding-top:8px; border-top:1px solid rgba(255,255,255,.28); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.logo img { width:32px; height:32px; display:block; }
.chat-person .avatar { background:transparent; }
.chat-person .avatar img { width:46px; height:46px; display:block; }