:root{--bg:#F3F5F1;--ink:#1C1C1E;--muted:#4E5358;--graphite:#2C2C2E;--green:#34C759;--green-deep:#157A34;--screen:#FBFCFA;--line:#C9CFC7;--pw:clamp(128px,37vw,150px);--head:'Bricolage Grotesque','Trebuchet MS',sans-serif;--body:'Figtree','Segoe UI',sans-serif}*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='14' width='24' height='12' rx='3' stroke='%232C2C2E' stroke-opacity='.09' stroke-width='1.6'/%3E%3Cpath d='M35.5 18v4' stroke='%232C2C2E' stroke-opacity='.09' stroke-width='1.6'/%3E%3Crect x='13' y='17' width='12' height='6' rx='1.2' fill='%2334C759' fill-opacity='.16' stroke='none'/%3E%3Cpath d='M68 56l-6 10h6l-4 10 10-13h-6l4-7z' stroke='%2334C759' stroke-opacity='.3' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E");color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased}.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}header .wrap{display:flex;align-items:center;gap:10px;padding-top:clamp(12px,2.4vh,26px);padding-bottom:4px}.brand-logo{width:clamp(34px,4vw,42px);height:auto;border-radius:10px;display:block;animation:logoPulse .5s ease-out .15s both}.wordmark{font-family:var(--head);font-weight:700;font-size:clamp(1.1rem,2vw,1.3rem);letter-spacing:-.01em}main{flex:1;display:flex;align-items:center}.hero{display:grid;grid-template-columns:1fr;grid-template-areas:"copy" "diagram" "action";gap:clamp(14px,2.4vh,22px);padding-top:clamp(10px,2vh,28px);padding-bottom:clamp(16px,3vh,36px)}.copy{grid-area:copy;min-width:0}.diagram{grid-area:diagram;min-width:0}.action{grid-area:action;min-width:0}.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#E3F4E6;color:var(--green-deep);border:1px solid #BFE3C7;font-size:clamp(.72rem,1.6vw,.8rem);font-weight:600;animation:slideIn .5s cubic-bezier(.2,.8,.2,1) .2s both}.pill svg{width:14px;height:14px;flex:none}h1{font-family:var(--head);font-weight:700;font-size:clamp(1.85rem,5.4vw,3.5rem);line-height:1.04;letter-spacing:-.025em;margin:.45em 0 .35em;max-width:15ch}h1 .hl{color:var(--green-deep)}.lead{font-size:clamp(.95rem,1.6vw,1.15rem);color:var(--muted);margin:0;max-width:40ch}.cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:340px;min-height:54px;padding:0 28px;border-radius:999px;background:var(--green);color:var(--ink);font-family:var(--body);font-weight:600;font-size:clamp(1rem,1.8vw,1.1rem);text-decoration:none;isolation:isolate;box-shadow:0 1px 0 rgba(0,0,0,.08),inset 0 -2px 0 rgba(0,0,0,.08);transition:transform .15s ease}.cta::after{content:"";position:absolute;inset:-6px;border-radius:999px;z-index:-1;box-shadow:0 0 0 6px rgba(52,199,89,.28),0 8px 26px rgba(52,199,89,.45);opacity:.35;animation:breathe 2.8s ease-in-out infinite}.cta svg{width:18px;height:18px;flex:none}.cta:hover{transform:translateY(-1px)}.cta:active{transform:translateY(1px)}.cta:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.note{margin:10px 0 0;font-size:clamp(.8rem,1.4vw,.9rem);color:var(--muted)}.figure{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,48px)}.stage{position:relative;flex:none}.stage::before{content:"";position:absolute;inset:-18% -30%;z-index:0;background:radial-gradient(closest-side,var(--bg) 55%,rgba(243,245,241,0))}.phone{position:relative;z-index:1;display:block;width:var(--pw);height:calc(var(--pw) * 2.02);font-size:calc(var(--pw) / 15);padding:.55em;border:0;border-radius:2.1em;background:var(--graphite);cursor:pointer;box-shadow:0 1.6em 3em -1.2em rgba(28,28,30,.45),inset 0 0 0 .14em #48484C;font-family:var(--body);color:var(--ink);text-align:left;-webkit-tap-highlight-color:transparent}.phone:focus-visible{outline:3px solid var(--green-deep);outline-offset:5px}.screen{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:1.6em;overflow:hidden;background:var(--screen);padding:1.9em 1.1em 1em}.notch{position:absolute;top:.55em;left:50%;width:4.2em;height:1.05em;margin-left:-2.1em;border-radius:1em;background:var(--graphite)}.scr-title{display:block;font-weight:600;font-size:1em;color:var(--muted)}.pct{display:block;font-family:var(--head);font-weight:700;font-size:3.3em;line-height:1;letter-spacing:-.03em;margin-top:.25em;font-variant-numeric:tabular-nums}.pct-label{display:block;font-size:.9em;color:var(--muted);margin-top:.2em}.cell{position:relative;display:block;height:2.3em;margin:1em .5em 1.1em 0;border:.16em solid var(--graphite);border-radius:.55em;padding:.22em}.cell::after{content:"";position:absolute;right:-.62em;top:50%;width:.36em;height:.9em;margin-top:-.45em;border-radius:0 .25em .25em 0;background:var(--graphite)}.fill{display:block;width:100%;height:100%;border-radius:.32em;background:var(--green);transform-origin:left center;transform:scaleX(1);will-change:transform}.fill.pulse{animation:cellPulse 2.4s ease-in-out infinite}.rows{display:flex;flex-direction:column;gap:.62em;margin-top:auto}.row{display:flex;align-items:center;gap:.6em;font-size:.95em;font-weight:600;color:var(--ink)}.dot{position:relative;flex:none;width:1.55em;height:1.55em;border-radius:50%;border:.14em solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.85em;color:var(--muted);background:#fff}.dot b{font-weight:600}.dot svg{position:absolute;width:.95em;height:.95em;opacity:0;transform:scale(.4);transition:opacity .25s,transform .25s}.row[data-state="active"] .dot{border-color:var(--green)}.row[data-state="done"] .dot{border-color:var(--green);background:var(--green)}.row[data-state="done"] .dot b{opacity:0}.row[data-state="done"] .dot svg{opacity:1;transform:scale(1)}.row[data-state="active"] .dot::after{content:"";position:absolute;inset:-.3em;border-radius:50%;border:.14em solid var(--green);animation:ping 1s ease-out infinite}.replay{display:flex;align-items:center;justify-content:center;gap:.35em;margin-top:.9em;font-size:.8em;font-weight:600;color:var(--muted)}.replay svg{width:1em;height:1em}.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(12px,2.4vh,26px);max-width:250px}.legend li{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:start;transition:opacity .3s}.legend li::before{content:"";position:absolute;top:13px;right:100%;width:clamp(12px,3.4vw,40px);margin-right:clamp(4px,.6vw,8px);height:0;border-top:1.5px dashed var(--line)}.legend .num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid var(--graphite);font-weight:600;font-size:.8rem;color:var(--ink);transition:background-color .3s,color .3s,border-color .3s}.legend strong{display:block;font-family:var(--head);font-weight:700;font-size:clamp(.95rem,1.6vw,1.1rem);line-height:1.2;padding-top:3px}.legend span.txt{grid-column:2;font-size:clamp(.78rem,1.3vw,.92rem);color:var(--muted);line-height:1.35;margin-top:2px}.legend li[data-state="active"] .num,.legend li[data-state="done"] .num{background:var(--green);border-color:var(--green)}.legend li[data-state="active"]::before{border-top-color:var(--green)}footer{border-top:1px solid #DDE2DB}footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding-top:14px;padding-bottom:16px;font-size:.82rem;color:var(--muted)}footer .fname{font-family:var(--head);font-weight:700;color:var(--ink);font-size:.95rem}@media(max-width:420px){.legend .txt-long{display:none}.legend{max-width:190px}}@media(min-width:880px){:root{--pw:clamp(220px,21vw,262px)}.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"copy diagram" "action diagram";grid-template-rows:auto 1fr;column-gap:clamp(28px,4vw,64px);row-gap:26px;align-items:end}.action{align-self:start}.copy{align-self:end}.cta{width:auto}}@keyframes logoPulse{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}@keyframes breathe{0%,100%{opacity:.25}50%{opacity:.8}}@keyframes ping{from{opacity:.9;transform:scale(.8)}to{opacity:0;transform:scale(1.5)}}@keyframes cellPulse{0%,100%{opacity:1}50%{opacity:.72}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}html,body{max-width:100%;overflow-x:clip}