/* Latin+Georgian in one face, Cyrillic in the other, split by unicode-range so
   a page pays only for the scripts it prints. The Georgian TTFs these replace
   carried no Cyrillic at all, which left /ru/ on a system fallback. */
@font-face{font-family:WE Sans;src:url('/assets/fonts/we-sans-ge-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+10A0-10FF,U+1C90-1CBF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:WE Sans;src:url('/assets/fonts/we-sans-lc-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:WE Sans;src:url('/assets/fonts/we-sans-ge-600.woff2') format('woff2');font-weight:600 800;font-display:swap;unicode-range:U+0000-024F,U+10A0-10FF,U+1C90-1CBF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:WE Sans;src:url('/assets/fonts/we-sans-lc-600.woff2') format('woff2');font-weight:600 800;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:WE Serif;src:url('/assets/fonts/we-serif-ge-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+10A0-10FF,U+1C90-1CBF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:WE Serif;src:url('/assets/fonts/we-serif-lc-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0400-04FF}

:root{--cream:#FAFAF7;--pine:#4E5B4D;--deep:#263627;--sage:#8DAE88;--peach:#FDB68A;--ink:#2A2620;--muted:#63645F;--line:#DCE1D8;--sage-tint:#EFF2EC}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.75 'WE Sans',sans-serif;-webkit-font-smoothing:antialiased}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sprite{position:absolute;width:0;height:0;overflow:hidden}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}h1,h2,h3,p{margin:0}h1,h2{font-family:'WE Serif',serif;font-weight:400}p{overflow-wrap:break-word}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #9C5314;outline-offset:5px}.skip-link{position:absolute;top:-80px;left:20px;z-index:10;background:var(--pine);color:white;padding:12px}.skip-link:focus{top:10px}.site-header{position:sticky;top:0;z-index:20;background:rgba(250,250,247,.82);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 1px 0 transparent;transition:box-shadow .5s var(--ease)}.site-header.compact{box-shadow:0 1px 0 var(--line)}.header-inner{min-height:118px;display:flex;align-items:center;justify-content:space-between;gap:32px;transition:min-height .5s var(--ease)}.compact .header-inner{min-height:76px}.brand{display:flex;align-items:center;min-height:48px}.brand img{display:block}.site-header nav{display:flex;gap:32px;align-items:center;font-size:14px;color:var(--muted)}.site-header nav a{padding-block:12px;position:relative;transition:color .35s var(--ease)}.site-header nav a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--pine);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}.site-header nav a.active{color:var(--ink)}.site-header nav a.active::after{transform:scaleX(1)}.site-header nav a:hover,.text-link:hover,footer a:hover{text-decoration:underline;text-underline-offset:5px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:60px;border-radius:100px;padding:15px 27px;background:var(--pine);color:var(--cream);font-size:16px;font-weight:600;line-height:1.6;transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}.button:hover{background:#354434;transform:translateY(-1px);box-shadow:0 10px 24px #26362722}.button:active{transform:scale(.98);transition-duration:.15s}.button svg{transition:transform .35s var(--ease)}.button:hover svg{transform:translateX(3px)}.button-small{min-height:48px;font-size:14px;padding:10px 22px}.button svg{width:20px}.hero{padding:56px 0 86px;display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center}.intro-line{display:flex;align-items:center;gap:10px;color:var(--pine);font-size:14px;margin-bottom:26px}.intro-line>span{width:7px;height:7px;border-radius:50%;background:var(--pine)}h1{font-size:clamp(36px,3.7vw,54px);line-height:1.45;letter-spacing:-1.7px}.hero-description{max-width:460px;font-size:17px;line-height:1.95;color:var(--muted);margin-top:26px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:32px;flex-wrap:wrap}.text-link{font-size:14px;display:inline-flex;gap:14px;align-items:center;min-height:48px}.text-link span{font-size:25px}.hero-note{font-size:13px;color:var(--muted);margin-top:21px}.demo{position:relative;background:#E8EEE3;border-radius:32px;padding:28px 32px 18px;box-shadow:inset 0 0 0 1px #DFE6D9}.demo-heading{display:flex;justify-content:space-between;align-items:center;color:var(--pine);font-size:14px;padding:0 3px 21px}.demo-heading svg{width:22px}.demo-tabs{position:relative;display:flex;gap:6px;margin-bottom:25px;border:1px solid #CBD5C5;border-radius:100px;padding:4px}.demo-tabs button{position:relative;z-index:1;flex:1;border:0;background:transparent;color:var(--pine);border-radius:100px;padding:9px 5px;min-height:43px;font-size:14px;transition:color .35s var(--ease)}.demo-tabs button[aria-pressed=true]{background:var(--pine);color:white}html.js .demo-tabs button[aria-pressed=true]{background:transparent}.tab-indicator{position:absolute;top:4px;bottom:4px;left:var(--x,4px);width:var(--w,0px);border-radius:100px;background:var(--pine);opacity:0;transition:left .45s var(--ease),width .45s var(--ease),opacity .3s}.tab-indicator.ready{opacity:1}.demo-text{transition:opacity .18s var(--ease),transform .18s var(--ease)}.demo-text.swap{opacity:0;transform:translateY(4px)}.reminder-card{border-radius:24px;background:var(--cream);padding:26px;box-shadow:0 12px 28px #2636270a}.reminder-top{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}.reminder-top small{display:block;font-size:12px;margin-top:2px}.icon-tile{width:46px;height:46px;border-radius:15px;background:#FBE3D2;color:var(--pine);display:grid;place-items:center}.small-bell{margin-left:auto;width:20px}.reminder-card h2{font-family:'WE Sans',sans-serif;font-size:23px;font-weight:600;margin:26px 0 5px;line-height:1.5}.reminder-card>p{color:var(--muted);font-size:14px}.confirm-button{margin-top:25px;width:100%;min-height:64px;border:0;border-radius:100px;background:var(--pine);color:white;display:flex;justify-content:center;align-items:center;gap:12px;font-weight:600;font-size:18px}.confirm-button{transition:background .35s var(--ease),transform .35s var(--ease)}.confirm-button:hover{background:#354434}.confirm-button:active:not(:disabled){transform:scale(.98);transition-duration:.15s}.confirm-button:disabled{background:#DCE7DA;color:#3B5736;cursor:default}.connection-line{height:44px;display:flex;justify-content:center;align-items:center;color:var(--pine)}.connection-line>span{height:23px;border-left:1px dashed #9CAC94}.connection-line svg{transform:rotate(90deg);width:17px;position:absolute;margin-top:15px;background:#E8EEE3}.response-card{display:flex;align-items:center;gap:13px;padding:19px 21px;background:#F5F7F2;border:1px solid #D3DDCD;border-radius:20px;transition:background .5s var(--ease),border-color .5s var(--ease)}.response-symbol{transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}.response-symbol{width:40px;height:40px;border:1px solid #B6C3AE;border-radius:50%;display:grid;place-items:center;color:var(--pine)}.response-symbol svg{width:20px}.response-label{font-size:12px;color:var(--muted)}.response-card p{font-size:15px;color:var(--pine);font-weight:600}.response-card.confirmed{background:#DCE7DA}.response-card.confirmed .response-symbol{background:var(--pine);color:white;border-color:var(--pine)}.demo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding-top:8px;font-size:12px;color:var(--muted)}.demo-foot button{border:0;background:transparent;color:var(--pine);font-size:12px;min-height:34px;text-decoration:underline;text-underline-offset:4px}.demo-foot button[hidden]{display:none}.promise-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.promise-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:25px}.promise-strip p{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--pine)}.promise-strip svg{width:20px}.section{padding-block:100px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:55px}.section h2,.join-section h2{font-size:clamp(30px,3vw,42px);line-height:1.55;letter-spacing:-.7px}.section-heading>p{font-size:16px;color:var(--muted);padding-bottom:8px}.use-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.use-case+.use-case{border-left:1px solid var(--line);padding-left:42px}.case-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:#F9E4D5;color:var(--pine);margin-bottom:28px}.use-case:nth-child(2) .case-icon{background:#DCE7DA}.use-case:nth-child(3) .case-icon{background:#E9EAE2}.use-case h3{font-size:20px;font-weight:600;margin-bottom:14px;line-height:1.7}.use-case p{font-size:15px;color:var(--muted);line-height:1.9}.case-detail{display:block;color:var(--pine);font-size:12px;margin-top:25px}.how{background:var(--sage-tint)}.how-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px}.how-intro>p{max-width:390px;margin-top:24px;color:var(--muted);line-height:1.9}.together-mark{display:flex;align-items:center;gap:25px;margin-top:45px}.together-mark img{width:112px;height:auto}.together-mark span{font-size:13px;color:var(--pine);border-left:1px solid #C9D3C4;padding-left:24px}.steps{list-style:none;margin:0;padding:0}.steps li{display:flex;gap:24px;padding-bottom:30px;position:relative}.steps li+li{padding-top:28px;border-top:1px solid #D6DFD0}.steps li:last-child{padding-bottom:0}.step-number{width:39px;height:39px;display:grid;place-items:center;border:1px solid #B8C6B0;border-radius:50%;color:var(--pine);font-size:16px;flex-shrink:0;transition:background .6s var(--ease) .35s,color .6s var(--ease) .35s,border-color .6s var(--ease) .35s}html.motion .steps li.in .step-number{background:var(--pine);border-color:var(--pine);color:var(--cream)}.steps h3{font-size:18px;font-weight:600;margin-bottom:9px;padding-top:3px}.steps p{font-size:15px;color:var(--muted);line-height:1.9}.personal{display:grid;grid-template-columns:1fr 1fr;gap:100px;border-bottom:1px solid var(--line)}.personal-heading>svg{color:#9C5314;width:36px;height:36px;margin-bottom:24px}.personal-copy{align-self:center;color:var(--muted);font-size:17px;line-height:2}.personal-copy p+p{margin-top:22px}.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}.faq>h2{font-size:32px}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer;font-size:16px;font-weight:600}summary::-webkit-details-marker{display:none}summary span{font-family:system-ui;font-size:24px;font-weight:400;color:var(--pine)}summary span{transition:transform .4s var(--ease)}details[open] summary span{transform:rotate(45deg)}details p{padding:0 34px 25px 0;color:var(--muted);font-size:15px;line-height:1.9}.faq-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease)}.faq-body>div{overflow:hidden;min-height:0}html.js details:not(.open) .faq-body{grid-template-rows:0fr}.join-section{background:var(--deep);color:var(--cream);border-radius:32px;padding:57px 60px;display:flex;align-items:center;justify-content:space-between;gap:40px}.join-section p{color:#D6DED0;font-size:15px;margin-top:18px;line-height:1.9}.join-action{display:flex;flex-direction:column;align-items:center;gap:12px}.button-peach{background:var(--peach);color:#30382B;font-size:14px;white-space:nowrap}.button-peach:hover{background:#FFCAA7}.join-action>span{font-size:12px;color:#D6DED0}.email-link{font-size:13px;color:#D6DED0;text-decoration:underline;text-underline-offset:4px}.join-section :focus-visible{outline-color:var(--peach)}footer{padding-block:42px;display:flex;align-items:center;gap:30px}footer p{font-size:12px;color:var(--muted)}footer>div{margin-left:auto;display:flex;gap:24px;font-size:12px;color:var(--muted)}
.gallery-eyebrow{color:var(--pine);font-size:13px;margin-bottom:16px}.gallery-controls{display:flex;flex-direction:column;align-items:flex-end;gap:18px}.gallery-controls p,.gallery-note{font-size:12px;color:var(--muted)}.theme-switch{display:flex;gap:4px;border:1px solid var(--line);padding:4px;border-radius:100px}.theme-switch button{border:0;border-radius:100px;background:transparent;color:var(--pine);min-height:44px;padding:8px 25px;font-size:14px}.theme-switch button[aria-pressed=true]{background:var(--pine);color:var(--cream)}.screen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding:40px 44px 34px;background:var(--sage-tint);border-radius:32px}.app-screen{margin:0;min-width:0}.phone-frame{position:relative;display:block;max-width:280px;margin-inline:auto;border:7px solid #344034;border-radius:30px;overflow:hidden;background:var(--cream);box-shadow:0 16px 30px #26362714;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}.phone-frame:hover{transform:translateY(-8px);box-shadow:0 28px 44px #2636271f}.phone-frame img{display:block;width:100%;height:auto}.phone-frame .screen-alt{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}.screen-grid.dark .screen-alt{opacity:1}.theme-switch button{transition:background .35s var(--ease),color .35s var(--ease)}.app-screen figcaption{margin-top:28px}.app-screen figcaption>span{font-size:11px;color:var(--pine)}.app-screen h3{font-size:18px;font-weight:600;margin:7px 0}.app-screen p{font-size:13px;color:var(--muted)}.gallery-note{margin-top:22px;text-align:center}.gallery-note a{text-decoration:underline;text-underline-offset:4px;margin-left:12px}.app-gallery{border-bottom:1px solid var(--line)}.connection-line{position:relative}.connection-line::after{content:'';position:absolute;top:0;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--pine);opacity:0}.demo-confirmed .connection-line::after{animation:send-confirmation .5s ease-in both}.demo-confirmed .response-card{animation:receive-confirmation .35s .45s ease-out both}.demo-confirmed .confirm-button svg{animation:confirm-check .3s ease-out}.demo-confirmed .response-symbol{animation:confirm-check .3s .55s ease-out}
@keyframes send-confirmation{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(38px);opacity:0}}
@keyframes receive-confirmation{from{transform:translateY(-5px);background:#F5F7F2}to{transform:translateY(0);background:#DCE7DA}}
@keyframes confirm-check{from{transform:scale(.8)}to{transform:scale(1)}}
@media(max-width:800px){.gallery-controls{align-items:flex-start}.screen-grid{gap:24px;padding:30px 24px}.phone-frame{border-width:5px;border-radius:22px}.app-screen h3{font-size:16px}}
@media(max-width:600px){.screen-grid{grid-template-columns:1fr;padding:32px 24px;gap:44px}.app-screen{max-width:280px;margin-inline:auto}.app-screen figcaption{margin-top:20px}.app-screen h3{font-size:19px}.app-screen p{font-size:14px}.gallery-note a{display:block;margin:10px 0 0}}
@media(min-width:1440px){.hero{min-height:700px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.site-header nav{gap:20px;font-size:12px}.hero{gap:35px}h1{font-size:39px;letter-spacing:-1px}.demo{padding:24px}.hero-actions{gap:16px}.how-layout,.personal{gap:60px}.faq{gap:40px}.join-section{padding:45px}.button-peach{white-space:normal;text-align:center}}
@media(max-width:800px){.header-inner{min-height:95px}.site-header nav{display:none}.hero{grid-template-columns:1fr;padding-top:36px;gap:42px}.hero-copy{max-width:620px}.hero h1{font-size:clamp(36px,6.2vw,50px)}.hero-description{max-width:560px}.demo{max-width:500px;width:100%;margin-inline:auto}.promise-strip .wrap{flex-wrap:wrap;justify-content:center;gap:16px 26px}.promise-strip p{font-size:12px}.section{padding-block:65px}.section-heading{align-items:start;flex-direction:column;gap:20px;margin-bottom:38px}.use-cases{gap:23px}.use-case+.use-case{padding-left:23px}.use-case h3{font-size:17px}.how-layout,.personal,.faq{grid-template-columns:1fr;gap:40px}.how-intro>p{max-width:550px}.together-mark{margin-top:25px}.personal{gap:24px}.join-section{align-items:start;flex-direction:column;padding:38px}.join-action{align-items:start}footer{flex-wrap:wrap;gap:18px}footer>div{margin-left:0;width:100%}}
@media(max-width:520px){.wrap{width:calc(100% - 40px)}.brand img{width:64px;height:41px}.header-inner{gap:20px;min-height:86px}.compact .header-inner{min-height:64px}.button-small{font-size:13px;padding:10px 18px}.hero{padding:30px 0 45px}.intro-line{font-size:12px;margin-bottom:20px}.hero h1{font-size:34px;line-height:1.55;letter-spacing:-.8px}.hero-description{font-size:16px;margin-top:20px}.hero-actions{gap:14px;margin-top:26px}.hero-actions .button{min-height:54px;padding:13px 22px}.text-link{font-size:13px;gap:7px}.hero-note{font-size:12px}.demo{padding:20px 18px 10px;border-radius:24px}.demo-heading{font-size:12px}.demo-tabs{margin-bottom:19px}.reminder-card{padding:22px 20px}.reminder-card h2{font-size:21px}.promise-strip .wrap{align-items:start;flex-direction:column;padding-block:22px;gap:14px}.promise-strip p{font-size:13px}.section{padding-block:52px}.section h2,.join-section h2{font-size:30px;letter-spacing:-.5px}.section-heading>p{font-size:15px}.use-cases{grid-template-columns:1fr;gap:28px}.use-case+.use-case{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:28px}.case-icon{float:left;margin:0 18px 10px 0;width:44px;height:44px;border-radius:13px}.use-case h3{font-size:19px;margin:4px 0 14px}.use-case p{clear:both}.case-detail{margin-top:13px}.steps li{gap:18px}.steps h3{font-size:17px}.personal-copy{font-size:16px}.faq{gap:25px}summary{font-size:15px;padding-block:21px}.join-section{border-radius:24px;padding:32px 24px;gap:28px}.join-action{width:100%;align-items:center}.button-peach{width:100%;gap:12px;padding:15px 18px}.join-section h2{font-size:29px}footer{padding-block:30px}footer p{max-width:220px}footer>div{gap:18px;flex-wrap:wrap}}
:root{--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1)}
html.motion .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}html.motion .reveal-scale{transform:translateY(28px) scale(.975)}html.motion .reveal.in{opacity:1;transform:none}
html.motion .hero-copy{transform:translateY(calc(var(--sy,0) * .1px))}html.motion .demo.in{transition:opacity .9s var(--ease-out),transform .3s linear;transform:translateY(calc(var(--sy,0) * -.05px)) scale(calc(1 - var(--sy,0) * .00006))}
html.motion .screen-grid .app-screen{transform:translateY(calc((1 - var(--p,1)) * var(--drift,60px)));opacity:min(1,calc(var(--p,1) * 2.6))}.screen-grid .app-screen:nth-child(1){--drift:90px}.screen-grid .app-screen:nth-child(2){--drift:30px}.screen-grid .app-screen:nth-child(3){--drift:120px}
html.motion .personal-heading .w{opacity:clamp(.16,calc((var(--p,1) * 1.6 - var(--t,0)) * 5),1)}
html.motion .join-section{transform:scale(calc(.94 + min(var(--p,1),.45) * .1333));opacity:min(1,calc(var(--p,1) * 3))}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media(forced-colors:active){.button,.confirm-button,.demo-tabs button,.response-card,.icon-tile{border:1px solid ButtonText}.demo-tabs button[aria-pressed=true]{outline:2px solid Highlight}svg{forced-color-adjust:auto}}

/* ── scroll-driven motion ──────────────────────────────────────────────
   Native scroll timelines where the browser has them: these run on the
   compositor instead of the main thread, and they also mean a reveal no
   longer depends on landing.js — if the script fails to load, the sections
   below the fold are still readable rather than stuck at opacity 0.
   The IntersectionObserver in landing.js remains the fallback. */

@keyframes we-reveal { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
@keyframes we-reveal-scale { from { opacity: 0; transform: translateY(28px) scale(.975) } to { opacity: 1; transform: none } }
@keyframes we-progress { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes we-draw { to { stroke-dashoffset: 0 } }
@keyframes we-bell { 0%,62%,100% { transform: rotate(0) } 68% { transform: rotate(11deg) } 74% { transform: rotate(-9deg) } 80% { transform: rotate(6deg) } 86% { transform: rotate(-3deg) } }
@keyframes we-fill { from { transform: scaleY(0) } to { transform: scaleY(1) } }

/* How far the reader has come. A page this long earns a position indicator,
   and it is the one thing on it that is pure status. */
.read-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 60;
  background: var(--sage); transform: scaleX(0); transform-origin: 0 50%;
}
html:not(.motion) .read-progress { display: none }

@supports (animation-timeline: view()) {
  html.motion .reveal {
    transition: none;
    animation: we-reveal linear both;
    animation-timeline: view();
    /* --i is the stagger index landing.js writes; with a scroll timeline the
       offset is a slice of the range rather than a delay in milliseconds. */
    animation-range: entry calc(4% + var(--i, 0) * 3%) cover calc(26% + var(--i, 0) * 3%);
  }
  html.motion .reveal-scale { animation-name: we-reveal-scale }

  .read-progress { animation: we-progress linear both; animation-timeline: scroll(root) }

  /* The three setup steps draw their own spine as you pass them, so the line
     shows how far through the sequence the reader is. */
  html.motion .how .steps { position: relative }
  html.motion .how .steps::before,
  html.motion .how .steps::after {
    content: ""; position: absolute; inset-block: .6rem; inset-inline-start: 0;
    width: 2px; border-radius: 2px;
  }
  html.motion .how .steps::before { background: var(--line) }
  html.motion .how .steps::after {
    background: var(--sage); transform-origin: 50% 0;
    animation: we-fill linear both; animation-timeline: view(); animation-range: entry 24% cover 62%;
  }
  html.motion .how .steps > li { padding-inline-start: 1.6rem }
}

/* The tick is drawn rather than swapped in — the one moment on the page that
   should feel like a decision landing. */
html.motion .confirm-button svg path { stroke-dasharray: 22; stroke-dashoffset: 0 }
html.motion .demo-confirmed .confirm-button svg path {
  stroke-dashoffset: 22;
  animation: we-draw .42s cubic-bezier(.2, .9, .3, 1) forwards;
}

/* An unanswered reminder leans on its bell; a confirmed one stops. */
html.motion .small-bell { transform-origin: 50% 18%; animation: we-bell 6s ease-in-out infinite }
html.motion .demo-confirmed .small-bell { animation: none }

@media (prefers-reduced-motion: reduce) {
  .read-progress { display: none }
  .small-bell, .confirm-button svg path { animation: none !important }
}

/* Language switcher. Real links to real URLs, not a script that swaps text —
   otherwise the three pages are one page as far as a crawler is concerned. */
.langs { display: flex; align-items: center; gap: .1rem; font-size: .9rem }
.langs a {
  color: var(--muted); text-decoration: none; padding: .35rem .6rem; border-radius: 999px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.langs a:hover { color: var(--ink); background: var(--sage-tint) }
.langs [aria-current="true"] { color: var(--ink); background: var(--sage-tint); font-weight: 600 }
@media (max-width: 860px) { .langs { order: 3 } }