/* Quern: this page's own pieces. */
.lede{max-width:620px}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:1200px;pointer-events:none;opacity:.9}
.b1{width:720px;height:520px;left:8%;top:6%;--c:var(--sage-glow);--a:.22;animation:drift 18s ease-in-out infinite alternate}
.b2{width:620px;height:620px;right:4%;top:0;--c:var(--k-35-87-75);--a:.7;animation:drift 22s ease-in-out infinite alternate-reverse}
.b3{--pk:.40;width:420px;height:320px;left:46%;top:38%;--c:var(--ink-rgb);--a:.16;animation:drift 26s ease-in-out infinite alternate}
.stage{position:relative;height:460px;margin-top:56px}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:var(--chip);border:1px solid rgb(var(--fg) / .12);box-shadow:0 12px 30px rgb(var(--shade) / calc(.4 * var(--shade-k)));font-size:13px;color:var(--ink);white-space:nowrap;opacity:0}
.chip > .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center}
.note-out{position:absolute;left:66%;top:50%;width:330px;transform:translateY(-50%);animation:noteloop 8s var(--ease-enter) infinite}
@keyframes noteloop{0%,8%{opacity:0;filter:blur(12px);transform:translateY(-46%) scale(.96)}22%,88%{opacity:1;filter:blur(0);transform:translateY(-50%) scale(1)}100%{opacity:0;filter:blur(6px);transform:translateY(-52%) scale(1)}}
.row-dev{animation:rowdev 8s var(--ease-enter) infinite}
@keyframes rowdev{0%,14%{opacity:0;filter:blur(6px)}30%,100%{opacity:1;filter:blur(0)}}
.marq{display:flex;gap:14px;width:max-content;animation:marq 44s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.prog{height:2px;border-radius:2px;background:rgb(var(--fg) / .1);overflow:hidden;margin-top:14px}
.prog i{display:block;height:100%;width:100%;transform-origin:left;animation:prog 6.5s linear both}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.phone{width:290px;height:590px;border-radius:48px;padding:10px;background:linear-gradient(160deg,var(--device-edge),var(--device-edge-2));box-shadow:0 0 0 1px rgb(var(--fg) / .1),0 40px 100px rgb(var(--shade) / calc(.6 * var(--shade-k))),0 0 120px rgb(var(--sage-glow) / .25);position:relative;flex:none}
.screen{width:100%;height:100%;border-radius:38px;background:var(--mist);overflow:hidden;position:relative;color:var(--paper-ink)}
@keyframes swap{0%{opacity:0;filter:blur(8px);transform:translateY(14px)}100%{opacity:1;filter:none;transform:none}}
.timer-ring{animation:dash 6.5s linear both}
@keyframes dash{from{stroke-dashoffset:0}to{stroke-dashoffset:302}}
.typing i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sage-600);margin-right:4px;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.packet{position:absolute;animation:packet 2.6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes packet{0%{transform:translate(0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(0,-150px);opacity:0}}
.pulse-dot{animation:breatheDot 2.4s ease-in-out infinite}
@keyframes breatheDot{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
.lang-a{animation:langA 7s ease-in-out infinite}
.lang-b{animation:langB 7s ease-in-out infinite}
@keyframes langA{0%,12%{opacity:1;filter:blur(0);transform:none}22%,92%{opacity:.16;filter:blur(2px);transform:translate(-18px,-18px) rotate(-3deg)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes langB{0%,12%{opacity:0;filter:blur(10px);transform:translateY(16px)}22%,92%{opacity:1;filter:blur(0);transform:none}100%{opacity:0;filter:blur(10px);transform:translateY(16px)}}
.strike{background:linear-gradient(transparent 55%,rgb(var(--ink-rgb) / .28) 55%)}
.scan{position:absolute;left:0;right:0;top:-60px;bottom:0;background:linear-gradient(180deg,transparent,rgb(var(--sage-glow) / .18),transparent) 0 0 / 100% 60px no-repeat;animation:scan 3s ease-in-out infinite;pointer-events:none}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(100%)}} /* the band is the box's top: from just above to just below, by transform (no layout shift) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv-scale{animation:rvs linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes rvs{from{opacity:.2;transform:scale(.9)}to{opacity:1;transform:none}}
  }
}
.rot-one{display:inline-block;white-space:nowrap;animation:develop 700ms var(--ease-enter) both;font-style:italic;color:var(--accent)}
.stage{height:520px !important;margin-top:24px !important;overflow:visible}
/* the mill is decoration (the stage is one role=img): it never takes a tap, so its glow can't swallow the hero buttons */
.bhw{position:absolute;left:50%;top:-20px;width:1100px;height:540px;margin-left:-550px;pointer-events:none}
/* tablet and phone: the whole mill scales down and keeps turning; chips get a bigger type so they read after the scale */
@media (max-width:860px){.stage{height:365px !important}.bhw{transform:scale(.65);transform-origin:50% 0}.chip{font-size:17px}}
@media (max-width:600px){.stage{height:300px !important}.bhw{transform:scale(.56)}.chip{font-size:21px;padding:14px 20px 14px 14px}.chip > .ic{width:40px;height:40px}.olab,.bhw .note-out{display:none !important}}
.journey{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.jpath{position:absolute;left:0;right:0;top:0;width:100%;height:220px;pointer-events:none}
.station{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative}
.orb{position:relative;width:220px;height:220px;border-radius:50%;display:grid;place-items:center;border:1px solid rgb(var(--fg) / .08);box-shadow:inset 0 1px 0 rgb(var(--fg) / .08),0 30px 60px rgb(var(--shade) / calc(.3 * var(--shade-k)));margin-bottom:14px;background-image:radial-gradient(circle at 50% 35%,rgb(var(--glow) / .14),rgb(var(--fg) / .02) 60%,transparent 70%),linear-gradient(var(--surface-2),var(--surface-2))}
.ghost{position:absolute;right:-6px;top:-18px;font-size:84px;font-weight:600;line-height:1;color:transparent;-webkit-text-stroke:1px rgb(var(--glow) / .35)}
.st-h{margin:0;font-size:24px;font-weight:500;letter-spacing:-.02em}
.st-p{margin:0;max-width:300px;font-size:var(--text-body);line-height:1.6;color:var(--ink-2b)}
.share-sheet{width:150px;padding:12px;border-radius:18px;background:#FFFFFF;box-shadow:0 14px 30px rgb(var(--shade) / calc(.35 * var(--shade-k)));display:flex;flex-direction:column;gap:10px}
.ss-t{font-size:9px;letter-spacing:.1em;color:var(--k-6e6f69);text-transform:uppercase}
.ss-row{display:flex;justify-content:space-between}
.ss-row i{position:relative;width:28px;height:28px;border-radius:9px;display:grid;place-items:center}
.ss-q{background:var(--sage-soft);box-shadow:0 0 0 2px var(--sage-600)}
.tap{position:absolute;inset:-6px;border-radius:12px;border:2px solid var(--sage-600);animation:tap 2.2s ease-out infinite}
@keyframes tap{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.5);opacity:0}}
.mini-note{position:relative;width:150px;padding:14px;border-radius:16px;background:#FFFFFF;color:var(--paper-ink);box-shadow:0 14px 30px rgb(var(--shade) / calc(.35 * var(--shade-k)));display:flex;flex-direction:column;gap:7px;text-align:left;animation:mnd 3.2s var(--ease-enter) infinite}
@keyframes mnd{0%{filter:blur(6px);opacity:.4}30%,90%{filter:blur(0);opacity:1}100%{filter:blur(0);opacity:1}}
.mn-pill{align-self:flex-start;font-size:8px;padding:3px 6px;border-radius:999px;background:var(--sage-soft);color:var(--sage-ink);letter-spacing:.06em;text-transform:uppercase}
.mn-t{font-size:15px;font-weight:500;letter-spacing:-.01em}
.mn-l{height:5px;width:100%;border-radius:3px;background:var(--paper-line)}
.mn-tag{position:absolute;right:-14px;bottom:-10px;font-size:10px;padding:4px 8px;border-radius:999px;color:var(--on-accent)}
.mini-ask{width:160px;display:flex;flex-direction:column;gap:8px;text-align:left}
.ma-q{align-self:flex-end;padding:8px 10px;border-radius:14px 14px 4px 14px;background:var(--bubble);color:var(--ink);font-size:11px}
.ma-a{padding:9px 11px;border-radius:14px 14px 14px 4px;background:#FFFFFF;color:var(--paper-ink);font-size:12px;display:flex;align-items:center;gap:6px}
.ma-a b{font-size:9px;padding:1px 5px;border-radius:5px;background:var(--sage-soft);color:var(--sage-ink);font-weight:500}
@media (max-width:860px){.journey{grid-template-columns:1fr;gap:40px}.jpath{display:none}}

.fold{min-height:814px;display:flex;flex-direction:column;justify-content:center}
.fold>.wrap{width:100%}
@media (max-width:860px){.fold{min-height:0}}
.meter{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.meter-bar{position:relative;height:12px;border-radius:6px;background:var(--k-efeee8);overflow:visible}
.meter-bar b{position:absolute;left:0;top:0;bottom:0;width:72%;border-radius:6px;background:linear-gradient(90deg,var(--accent-2),var(--sage-600));animation:meterfill 2.4s var(--ease-enter) both}
@keyframes meterfill{from{width:0}}
.meter-lim{position:absolute;left:86%;top:-6px;bottom:-6px;width:2px;border-radius:1px;background:var(--paper-ink)}
.meter-lab{display:flex;justify-content:space-between;font-size:13px;color:var(--paper-ink-2);padding-right:10%}
.meter-after{font-size:11px;color:var(--sage-text)}
.bh-cap{position:relative;z-index:2;margin:72px auto 0;max-width:980px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:18px;padding:18px 24px;border-radius:24px;border:1px solid rgb(var(--fg) / .08);background:var(--glass-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-align:left}
.bh-step{display:flex;flex-direction:column;gap:4px}
.bh-k{font:500 15px/1.2 var(--font-display);color:var(--ink)}
.bh-v{font-size:var(--text-small);line-height:1.45;color:var(--ink-2b)}
.bh-arr{color:var(--ink-4b)}
@media (max-width:860px){.bh-cap{grid-template-columns:1fr;gap:12px}.bh-arr{rotate:90deg;justify-self:center}}
.frost{background:linear-gradient(160deg,rgb(var(--k-254-254-252) / .84),rgb(var(--k-254-254-252) / .66)) !important;border:1px solid rgb(var(--k-254-254-252) / .75);backdrop-filter:blur(28px) saturate(1.9);-webkit-backdrop-filter:blur(28px) saturate(1.9);box-shadow:0 1px 0 rgb(var(--k-254-254-252) / .8) inset,0 20px 50px rgb(var(--shade) / calc(.35 * var(--shade-k))) !important}
.olab{position:absolute;z-index:4;display:flex;flex-direction:column;gap:2px;padding:9px 13px;border-radius:14px;border:1px solid rgb(var(--fg) / .12);background:var(--frost-2);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
.olab b{font:500 13px/1.2 var(--font-display);color:var(--ink)}
.olab span{font-size:11.5px;color:var(--ink-2b);white-space:nowrap}
:root[data-theme="light"] .olab{background:rgba(255,255,255,.62) !important;border-color:rgba(255,255,255,.8) !important}
.orbit-lab{left:0;top:0;offset-path:path("M 160 270 A 390 205 0 1 1 940 270 A 390 205 0 1 1 160 270");offset-rotate:0deg;offset-anchor:50% 50%;animation:labOrbit 30s linear infinite}
@keyframes labOrbit{from{offset-distance:0%}to{offset-distance:100%}}

/* the hero's turning word: every word sits in one cell sized by the widest ("voice note."), so "Share a" never slides */
.rot-stack{display:inline-grid;justify-items:start;vertical-align:bottom}
.rot-stack>*{grid-area:1 / 1}
.rot-size{visibility:hidden;white-space:nowrap}
/* where "Share a voice note." can't fit one line (under ~385 px) the turning word takes its own line, centred, instead
   of sitting left in a box sized for its longest form */
@media (max-width:384px){.rot-stack{display:grid;justify-items:center}.rot-stack+br{display:none}}
/* phones: the mill is drawn small, so its stage and the line under it close up (no dead band under the orb) */
@media (max-width:860px){.bh-cap{margin-top:28px}}
/* the language demo: the "Sample content." label rides under the note card it labels */
.lang-sample{position:absolute;left:0;top:100%;margin:10px 0 0;font-size:13px;color:var(--ink-4)}
/* moments, stacked on phones: the phone comes first, so tapping a moment changes the screen just above it */
@media (max-width:860px){.mo-row{gap:32px}.mo-phone{order:-1}}
/* "Save in Hindi, English or Hinglish." sits in a half-width column: a step smaller so it sets in two lines, not three with "English" alone */
.lang-h{font-size:clamp(38px,4vw,58px)}
/* under reduced motion the reset ends each loop on its last frame; for these the last frame is empty (the timer run
   out, the note faded away), so they hold a still, readable frame instead */
@media (prefers-reduced-motion: reduce){.timer-ring{animation:none !important;stroke-dashoffset:100}.note-out{animation:none !important}}

/* the final call: the web app (primary) beside the Android beta; what trying it in a browser means, under them */
.join-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.btn--big { min-height: 58px; padding: 0 34px; font-size: var(--text-body); }
.join-try { margin: 0; max-width: 460px; font-size: var(--text-small); line-height: 1.6; color: var(--ink-4); text-align: center; text-wrap: pretty; }
/* the hero's quiet second way in */
.hero-try { color: var(--ink-2b); text-underline-offset: 3px; }
.hero-try:hover { color: var(--ink); }
/* the moments' tabs (classes, once inline): the open one, its number, title, words and progress; a closed one's title */
.mo-tabs{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:6px}
.tab.tab--on{background:rgb(var(--fg) / .05);border-color:rgb(var(--fg) / .12)}
.tab-n{font-size:13px;padding-top:6px;color:var(--ink-4b)}
.tab-n--on{color:var(--accent)}
.tab-body{flex:1;min-width:0}
.tab-h{display:block;font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--ink-max)}
.tab-p{display:block;margin-top:10px;font-size:var(--text-body);line-height:1.6;color:var(--ink-2)}
.tab-body .prog{display:block}
.tab-body .prog i{background:var(--accent)}
.tab-t{flex:1;font-size:clamp(22px,2.2vw,26px);font-weight:500;letter-spacing:-.015em;color:var(--ink-4)}
/* moment 01's screen: a client call's voice note - its key points, then its to-dos, in the speaker's words */
.ls{padding:44px 18px 18px;height:100%;display:flex;flex-direction:column;gap:10px}
.ls-pill{align-self:flex-start;background:var(--sage-soft);color:var(--sage-ink);padding:5px 10px}
.ls-title{font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-bottom:4px}
.ls-k{font-size:10px;letter-spacing:.1em;color:var(--sage-600);margin-top:4px}
.ls-pts{display:flex;flex-direction:column;gap:8px}
.ls-pt{background:#FFFFFF;border-radius:16px;padding:11px 14px;display:flex;gap:10px;align-items:center;font-size:13px;line-height:1.35;box-shadow:0 1px 2px rgb(var(--paper-ink-rgb) / .05)}
.ls-box{flex:none;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--sage-600)}
.ls-note{margin-top:auto;font-size:12px;color:var(--paper-ink-2);text-align:center}
/* ways people use it: four short cards, what each person saves and what it becomes */
.uses-sec{padding:72px 0}
.uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px;margin-top:48px}
.use-who{display:flex;align-items:center;gap:12px}
.use-who .title-sm{margin:0}
.use-ic{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgb(var(--glow) / .1);color:var(--accent)}
.use-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.use-list li{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid rgb(var(--fg) / .08)}
.use-in{font-size:var(--text-body);font-weight:500;color:var(--ink)}
.use-out{font-size:var(--text-small);line-height:1.5;color:var(--ink-3)}
.use-out::before{content:"→ ";color:var(--accent)}
/* moment 02's screen: five saves merge into one trip; the pins drop in, the route draws between them, the days follow.
   It plays each time the moment opens (a shown .swap restarts its animations); off screen it pauses (.is-offscreen);
   under reduced motion site.css's reset shows the last frame: the saves merged, every pin, the whole route, every day. */
.tp{padding:44px 18px 18px;height:100%;display:flex;flex-direction:column;gap:10px}
.tp-head{display:flex;align-items:center;min-height:26px}
.tp-saves{position:relative;width:0;height:18px;flex:none}
.tp-saves i{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:6px;opacity:0;animation:tpmerge 900ms var(--ease-enter) both}
.tp-saves i:nth-child(1){--fx:-40px;animation-delay:0ms}
.tp-saves i:nth-child(2){--fx:30px;animation-delay:90ms}
.tp-saves i:nth-child(3){--fx:-20px;animation-delay:180ms}
.tp-saves i:nth-child(4){--fx:50px;animation-delay:270ms}
.tp-saves i:nth-child(5){--fx:10px;animation-delay:360ms}
@keyframes tpmerge{0%{opacity:0;transform:translate(var(--fx),-26px) scale(.7)}55%{opacity:1;transform:translate(calc(var(--fx) / 3),0)}100%{opacity:0;transform:translate(20px,0) scale(.3)}}
.tp-pill{background:var(--sage-soft);color:var(--sage-ink);padding:5px 10px;animation:develop var(--dur-screen) var(--ease-enter) 700ms both}
.tp-title{font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.tp-map{position:relative;height:170px;border-radius:20px;background:var(--k-e3ebe6);overflow:hidden;flex:none}
.tp-svg{display:block;width:100%;height:100%}
.tp-sea{fill:var(--k-cfe2ec)}
.tp-road{fill:none;stroke:var(--mist);stroke-width:6}
.tp-route{fill:none;stroke:var(--sage-600);stroke-width:2.4;stroke-dasharray:5 6;stroke-linecap:round}
.tp-draw{fill:none;stroke:#FFFFFF;stroke-width:8;stroke-dasharray:1 1;stroke-dashoffset:1;animation:tpdraw 1400ms var(--ease-enter) 1500ms both}
@keyframes tpdraw{to{stroke-dashoffset:0}}
.tp-pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--sage-600);border:3px solid #FFFFFF;box-sizing:border-box;transform:translate(-50%,-50%);animation:tpdrop 520ms var(--ease-enter) both}
.tp-pin b{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;font-size:9px;font-weight:600;line-height:1;padding:3px 6px;border-radius:999px;background:#FFFFFF;color:var(--paper-ink);box-shadow:0 1px 2px rgb(var(--paper-ink-rgb) / .12)}
.tp-pin--next{background:var(--accent)}
.tp-pin1{left:19.7%;top:26.5%;animation-delay:900ms}
.tp-pin2{left:45.3%;top:42.4%;animation-delay:1100ms}
.tp-pin3{left:64.5%;top:31.8%;animation-delay:1300ms}
.tp-pin4{left:79.5%;top:62.9%;animation-delay:1500ms}
@keyframes tpdrop{0%{opacity:0;transform:translate(-50%,-180%)}70%{opacity:1;transform:translate(-50%,-38%)}100%{opacity:1;transform:translate(-50%,-50%)}}
.tp-off{position:absolute;right:10px;bottom:10px;font-size:9px;padding:4px 8px;border-radius:999px;background:rgb(255 255 255 / .9);color:var(--sage-ink)}
.tp-days{display:flex;flex-direction:column;gap:8px}
.tp-day{display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:16px;background:#FFFFFF;font-size:13px;box-shadow:0 1px 2px rgb(var(--paper-ink-rgb) / .05);animation:develop var(--dur-screen) var(--ease-enter) both}
.tp-day:nth-child(1){animation-delay:1900ms}
.tp-day:nth-child(2){animation-delay:2050ms}
.tp-day:nth-child(3){animation-delay:2200ms}
.tp-d{font-size:10px;color:var(--sage-600);flex:none}
.tp-where{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tp-sub{font-size:11px;color:var(--paper-ink-2)}
.tp-go{flex:none;font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;background:var(--primary);color:#FFFFFF}