/* Quern: this page's own pieces. */
.lede{max-width:620px}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:1200px;pointer-events:none;filter:blur(90px);opacity:.9}
.b1{width:720px;height:520px;left:8%;top:6%;background:radial-gradient(closest-side,rgb(var(--sage-glow) / .22),transparent);animation:drift 18s ease-in-out infinite alternate}
.b2{width:620px;height:620px;right:4%;top:0;background:radial-gradient(closest-side,rgb(var(--k-35-87-75) / .7),transparent);animation:drift 22s ease-in-out infinite alternate-reverse}
.b3{width:420px;height:320px;left:46%;top:38%;background:radial-gradient(closest-side,rgb(var(--ink-rgb) / .16),transparent);animation:drift 26s ease-in-out infinite alternate}
.stage{position:relative;height:460px;margin-top:56px}
.stone-wrap{position:absolute;left:50%;top:50%;width:240px;height:240px;transform:translate(-50%,-50%)}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.r1{width:330px;height:330px;border:1px dashed rgb(var(--glow) / .28);animation:spin 40s linear infinite}
.r2{width:430px;height:430px;border:1px solid rgb(var(--fg) / .06);animation:spin 70s linear infinite reverse}
.r3{width:250px;height:250px;background:conic-gradient(from 0deg,transparent 0 70%,rgb(var(--glow) / .55) 85%,transparent 100%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:spin 4s linear infinite}
.stone{position:absolute;inset:16px;animation:spin 14s linear infinite;filter:drop-shadow(0 30px 60px rgb(var(--sage-600-rgb) / .45))}
.halo{position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgb(var(--sage-glow) / .35),transparent 70%);animation:breathe 3.6s ease-in-out infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.stone{transform-origin:center}
.stone{animation-name:spinS}
.orbit{position:absolute;left:50%;top:50%;width:330px;height:330px;margin:-165px 0 0 -165px;animation:spinS 9s linear infinite}
.orbit i{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;box-shadow:0 0 18px 4px rgb(var(--ink-rgb) / .6)}
.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}
.f1{animation:fly1 8s cubic-bezier(.5,0,.3,1) infinite}
.f2{animation:fly2 8s cubic-bezier(.5,0,.3,1) infinite 2s}
.f3{animation:fly3 8s cubic-bezier(.5,0,.3,1) infinite 4s}
.f4{animation:fly4 8s cubic-bezier(.5,0,.3,1) infinite 6s}
@keyframes fly1{0%{left:0%;top:8%;opacity:0;transform:scale(1)}8%{opacity:1}30%{left:6%;top:12%;opacity:1;transform:scale(1)}52%{left:44%;top:46%;opacity:0;transform:scale(.25) rotate(-20deg)}100%{left:44%;top:46%;opacity:0}}
@keyframes fly2{0%{left:2%;top:34%;opacity:0;transform:scale(1)}8%{opacity:1}30%{left:8%;top:36%;opacity:1;transform:scale(1)}52%{left:44%;top:46%;opacity:0;transform:scale(.25) rotate(14deg)}100%{left:44%;top:46%;opacity:0}}
@keyframes fly3{0%{left:0%;top:60%;opacity:0;transform:scale(1)}8%{opacity:1}30%{left:7%;top:58%;opacity:1;transform:scale(1)}52%{left:44%;top:46%;opacity:0;transform:scale(.25) rotate(-12deg)}100%{left:44%;top:46%;opacity:0}}
@keyframes fly4{0%{left:3%;top:82%;opacity:0;transform:scale(1)}8%{opacity:1}30%{left:9%;top:78%;opacity:1;transform:scale(1)}52%{left:44%;top:46%;opacity:0;transform:scale(.25) rotate(18deg)}100%{left:44%;top:46%;opacity:0}}
.spark-out{position:absolute;top:50%;left:55%;width:8px;height:8px;border-radius:50%;opacity:0}
.s1{animation:sparkout 2s ease-out infinite}
.s2{animation:sparkout 2s ease-out infinite .7s;top:46%}
.s3{animation:sparkout 2s ease-out infinite 1.4s;top:54%}
@keyframes sparkout{0%{left:55%;opacity:0;transform:scale(.6)}20%{opacity:1}100%{left:67%;opacity:0;transform:scale(1.2)}}
.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)}}
@media (max-width:860px){
  .stage{height:720px}
  .stone-wrap{top:26%}
  .halo,.r2{top:26%}
  .r1,.r3{top:26%}
  .orbit{top:26%}
  .chip,.spark-out{display:none}
  .note-out{left:50%;top:auto;bottom:0;width:min(330px,100%);transform:translateX(-50%);animation:none}
}
.marq{display:flex;gap:14px;width:max-content;animation:marq 44s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.mq{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid rgb(var(--fg) / .09);background:rgb(var(--fg) / .025);font-size:15px;color:var(--ink-2);white-space:nowrap}
.beam{position:absolute;left:0;right:0;top:-36px;height:2px;background:rgb(var(--fg) / .08);overflow:hidden;border-radius:2px}
.beam i{position:absolute;top:0;left:-30%;width:30%;height:2px;animation:beam 3.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes beam{to{left:100%}}
@media (max-width:860px){.beam{display:none}}
.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}}
.route{stroke-dasharray:6 7;animation:routeflow 1.6s linear infinite}
@keyframes routeflow{to{stroke-dashoffset:-26}}
.pin{animation:pinpop 600ms var(--ease-enter) both}
@keyframes pinpop{0%{transform:scale(0)}100%{transform:scale(1)}}
.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;height:60px;background:linear-gradient(180deg,transparent,rgb(var(--sage-glow) / .18),transparent);animation:scan 3s ease-in-out infinite;pointer-events:none}
@keyframes scan{0%{top:-60px}100%{top:100%}}
.lift{transition:transform 320ms var(--ease-enter),border-color 320ms,background 320ms}
@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}
.bhw{position:absolute;left:50%;top:-20px;width:1100px;height:540px;margin-left:-550px}
.annot{position:absolute;font-size:32px;line-height:1;color:var(--ink-2);transform:rotate(-5deg);white-space:nowrap}
@media (max-width:860px){.stage{height:340px !important}.bhw{transform:scale(.56);transform-origin:50% 0}.chip,.pt,.annot,.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}}
.sn-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sn-l{height:8px;border-radius:4px;background:rgb(var(--ink-rgb) / .22)}
.sn-ok{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:rgb(var(--glow) / .16);color:var(--accent);animation:okin 3s ease-in-out infinite}
@keyframes okin{0%,15%{opacity:0;transform:scale(.4)}30%,100%{opacity:1;transform:none}}
.sn-miss{font-size:10px;padding:4px 8px;border-radius:999px;border:1px dashed rgb(var(--ink-rgb) / .35);color:var(--ink-2);white-space:nowrap}
.sn-beam{position:absolute;left:0;right:0;height:50px;background:linear-gradient(180deg,transparent,rgb(var(--glow) / .16),transparent);animation:scan 3s ease-in-out infinite}
.offline{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 14px;border-radius:999px;border:1px solid rgb(var(--glow) / .3);font-size:13px;color:var(--accent)}
@keyframes memflush{0%{width:0}40%{width:85%}60%{width:85%}100%{width:0}}

.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}
/* 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){.stage{height:270px !important}.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)}