/* =======================================================================
   Kaalchakra — the home page (index.html only; site.css carries the
   header, footer and the generated pages).

   Feature-first (the user, 2026-09-25): each feature is shown working, in a
   phone redrawn from the app itself, with a finger that taps and the next
   screen that appears. Few words; the pictures carry it. The chapters rise
   over one another like cards (the site's own scroll effect), and the two
   engines assemble as the page scrolls.

   Colour carries meaning exactly as it does in the app: lavender is the
   left nostril, coral the right, cream both; air, fire, earth, water and
   space keep the app's own element colours.
   ===================================================================== */

:root{
  /* the app, as the phones draw it */
  --a-bg:#08090C; --a-card:rgba(22,23,30,.78); --a-card-2:rgba(30,31,40,.72);
  --a-line:rgba(238,232,220,.1); --a-line-2:rgba(238,232,220,.16);
  --a-ink:#EEE8D8; --a-ink-2:#C2BCCB; --a-dim:#8E89A3;
  --a-brass:#D9B84C; --a-brass-hi:#F2D98A;
  --a-left:#A093DB; --a-right:#EC7760; --a-both:#EDCB6B; --a-jade:#62C19E;
  --a-blue:#7EB6DE; --a-rose:#E47D93; --a-amber:#EDA552; --a-cyan:#5CC9C9;
  --e-air:#78AEE0; --e-fire:#E25B3F; --e-earth:#E9BE4C; --e-water:#EFE8D8; --e-space:#B39AE8;
  --deck-top:72px;
}

/* ---- scaffolding ------------------------------------------------------ */
.rv{opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.rv.in{opacity:1; transform:none}
.kick{display:inline-flex; align-items:center; gap:12px; font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--acc, var(--gold))}
.kick::before{content:''; width:22px; height:1px; background:currentColor; opacity:.6}
h1, h2, h3{text-wrap:balance}
section[id]{scroll-margin-top:72px}

/* ---- hero (kept from the first site) ------------------------------------ */
.hero{position:relative; min-height:calc(100svh - 72px); display:flex; flex-direction:column; justify-content:space-between;
  max-width:var(--wrap); margin:0 auto; padding:clamp(30px,6vh,80px) var(--gutter) 0}
.hero::before{content:''; position:absolute; z-index:-1; right:-20%; top:-30%; width:1100px; height:1100px; border-radius:50%;
  background:radial-gradient(circle,rgba(214,177,115,.10),rgba(143,134,214,.05) 40%,transparent 68%); pointer-events:none}
.hero-grid{display:grid; grid-template-columns:1fr; gap:48px; align-items:center; flex:1}
@media(min-width:1040px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.hero-copy{min-width:0}
.hero h1{margin-top:30px; overflow-wrap:break-word; font:300 clamp(44px,5.6vw,90px)/1 var(--serif); letter-spacing:-.015em}
/* the question (2026-09-27): longer lines than the old three words, so a size that keeps each line whole */
.hero h1.hero-q{font-size:clamp(34px,4.2vw,68px); line-height:1.02}
@media(max-width:1039px){ .hero h1.hero-q{font-size:clamp(32px,10.4vw,62px)} }   /* one column: the question grows with the screen */
.mask > span{display:block; overflow:hidden; padding:.1em .04em .22em; margin:-.1em -.04em -.22em}
.mask > span > span{display:block; transform:translateY(135%); transition:transform 1.4s var(--ease-out)}
.mask > span:nth-child(2) > span{transition-delay:.12s}
.mask > span:nth-child(3) > span{transition-delay:.24s}
body.ready .mask > span > span{transform:none}
.hero .lead{margin-top:40px; max-width:40ch; opacity:0; transform:translateY(16px); transition:all 1.2s var(--ease-out) .5s}
.herocta{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:42px; opacity:0; transform:translateY(16px); transition:all 1.2s var(--ease-out) .65s}
.hero .eyebrow{opacity:0; transition:opacity 1.2s var(--ease) .1s}
body.ready .hero .lead, body.ready .herocta, body.ready .hero .eyebrow{opacity:1; transform:none}

.scope{position:relative; display:block; width:min(100%,600px); aspect-ratio:1; margin:0 auto; text-decoration:none;
  opacity:0; transform:scale(.94); transition:opacity 1.8s var(--ease) .3s, transform 2s var(--ease-out) .3s}
body.ready .scope{opacity:1; transform:none}
.scope::before{content:''; position:absolute; inset:9%; border-radius:50%; box-shadow:0 0 0 1px var(--line), 0 40px 120px -30px rgba(214,177,115,.25)}
.scope-ticks{position:absolute; inset:0; width:100%; height:100%; animation:spin 180s linear infinite; will-change:transform}
.scope-ticks line{stroke:var(--line-2); stroke-width:1}
.scope-ticks line.big{stroke:var(--gold-lo); stroke-width:1.2}
.scope-ticks .rim{fill:none; stroke:var(--line); stroke-width:1}
.scope iframe{position:absolute; inset:9%; width:82%; height:82%; border:0; border-radius:50%; pointer-events:none; background:transparent; opacity:0; transition:opacity .9s var(--ease)}
.scope-still{position:absolute; inset:9%; width:82%; height:82%; border-radius:50%; object-fit:contain; transition:opacity .9s var(--ease)}
.scope.live iframe{opacity:1}
.scope.live .scope-still{opacity:0; transition-delay:.25s}
.scope-veil{position:absolute; inset:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* the live numbers: here now, and downloads */
.live{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:30px; opacity:0; transform:translateY(8px);
  transition:opacity .8s var(--ease), transform .8s var(--ease-out)}
.live.on{opacity:1; transform:none}
.live[hidden]{display:none}
.live-n{display:inline-flex; align-items:baseline; gap:8px; font:400 13px/1 var(--sans); color:var(--dim)}
.live-n b{font:400 19px/1 var(--mono); color:var(--ink); letter-spacing:-.02em}
.live-dot{position:relative; width:8px; height:8px; border-radius:50%; background:#7DDDB0; box-shadow:0 0 12px rgba(125,221,176,.7)}
.live-dot::after{content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(125,221,176,.6); animation:livering 2.4s var(--ease-out) infinite}
@keyframes livering{0%{transform:scale(.4); opacity:1}100%{transform:scale(1.6); opacity:0}}
.live-sep{width:1px; height:14px; background:var(--line-2)}
.live-n{white-space:nowrap}
.live.wrapped .live-sep{visibility:hidden}   /* a row that wraps (numbers that have boomed) drops its divider from sight */
/* an odometer: each digit is a strip of 0–9 that rolls */
.od{display:inline-flex; height:1em; overflow:hidden; line-height:1; vertical-align:baseline}
.od-d{display:inline-block; height:1em; overflow:hidden}
.od-r{display:flex; flex-direction:column; transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.od-r i{display:block; height:1em; font-style:normal; text-align:center; font-variant-numeric:tabular-nums}
.od-c{display:inline-block}

.steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:clamp(40px,6vh,72px); border-top:1px solid var(--line)}
.steps li{position:relative; border-right:1px solid var(--line)}
.steps li:last-child{border-right:0}
.steps li::before{content:''; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--gold); transition:width .6s var(--ease-out)}
.steps li:hover::before{width:100%}
.steps a{display:flex; flex-direction:column; gap:6px; padding:24px 22px 30px; text-decoration:none}
.steps li:first-child a{padding-left:0}
.steps em{font:500 10.5px/1 var(--mono); font-style:normal; letter-spacing:.14em; color:var(--gold-lo)}
.steps b{margin-top:10px; font:300 26px/1 var(--serif); letter-spacing:-.01em}
.steps span{font:400 13px/1.4 var(--sans); color:var(--dim)}
@media(max-width:860px){
  .steps{grid-template-columns:1fr}
  .steps li{border-right:0; border-bottom:1px solid var(--line)}
  .steps a{flex-direction:row; align-items:baseline; gap:16px; padding:16px 0}
  .steps li:first-child a{padding-left:0}
  .steps b{margin:0; font-size:22px} .steps span{margin-left:auto; text-align:right}
}

/* ---- the promise ------------------------------------------------------------ */
/* ---- your inner engineering dashboard, the flagship (the user, 2026-09-27): a scene played by the scroll. At rest
   (no script, or less motion asked for) it simply stands revealed. With .pm-live (home.js, the dashboard) it is held
   on screen while the scroll plays it: darkness, one line glowing in it, the dark cloud parting with gold at its
   edges, Shiva's face and breath in the light, his verse, then the scene receding into the next section. The scroll
   sets the stage's variables: --intro-o/-y/-b, --clear, --light, --scene, --shiva, --verse, --exit. ---- */
.promise{position:relative; text-align:center}
.pm-dusk, .pm-fog{display:none}
.pm-stage{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center;
  padding:clamp(96px,14vh,160px) 0 clamp(96px,14vh,160px); background:#07080B}
/* the light behind Shiva (the user, 2026-09-27: "cloud like", not a bright disc, and round on a phone, never an oval):
   home.js draws a luminous cloud in .pm-glow and sets .pm-cloud. Without WebGL these round lobes stand in, sized by the
   face (--nw), never by the screen */
.pm-stage{--nw:min(300px,62vw)}
.pm-light{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:var(--light,1);
  background:
    radial-gradient(circle calc(var(--nw) * .6) at 50% 39%, rgba(255,236,204,.085), rgba(236,202,150,.035) 45%, transparent 72%),
    radial-gradient(circle calc(var(--nw) * .42) at calc(50% - var(--nw) * .3) 43%, rgba(255,232,200,.045), transparent 72%),
    radial-gradient(circle calc(var(--nw) * .46) at calc(50% + var(--nw) * .32) 41%, rgba(255,232,200,.045), transparent 72%),
    radial-gradient(circle calc(var(--nw) * .38) at calc(50% + var(--nw) * .05) 31%, rgba(255,240,214,.04), transparent 72%),
    radial-gradient(circle calc(var(--nw) * 1.25) at 50% 42%, rgba(120,100,170,.05), transparent 70%);
  -webkit-mask:linear-gradient(180deg,#000 62%,transparent); mask:linear-gradient(180deg,#000 62%,transparent)}   /* feathered below: no band where the stage lets go */
.pm-glow{display:none}
.pm-cloud .pm-light{background:none}
.pm-cloud .pm-glow{display:block; position:absolute; inset:0; width:100%; height:100%}
.pm-intro{position:relative; z-index:5; order:-1; display:grid; justify-items:center; padding:0 var(--gutter)}
.pm-h{max-width:16ch; margin:clamp(18px,2.6vh,28px) auto 0; font:300 clamp(34px,4.6vw,68px)/1.04 var(--serif); letter-spacing:-.022em; color:var(--ink); text-wrap:balance}
.pm-h em{font-style:normal; color:var(--gold-hi)}
.pm-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.pm-scene{position:relative; z-index:2; display:grid; justify-items:center; width:100%; padding:0 var(--gutter);
  opacity:var(--scene,1); transform:translateY(calc(var(--exit,0) * -2.5vh)) scale(calc(1 - var(--exit,0) * .05)); filter:blur(calc(var(--exit,0) * 7px))}
/* the face: Shiva's features in faint gold around the nose, a halo of light rings behind the third eye */
.nose{position:relative; width:var(--nw); aspect-ratio:240/340; margin-top:calc(var(--nw) * .36)}
.nose-art{position:absolute; z-index:2; left:0; top:0; width:100%; height:auto; overflow:visible}
/* Shiva: his own layer behind the nose; lit while the breath flows, dim between breaths (--br, set by the nose's clock).
   Only this layer's opacity moves, so the browser composites it without repainting the drawing */
.shiva-art{position:absolute; z-index:1; left:0; top:0; width:100%; height:auto; overflow:visible; pointer-events:none;
  opacity:calc(var(--shiva,1) * (.2 + var(--br,.75) * .76)); filter:drop-shadow(0 0 4px rgba(255,220,160,.45)); will-change:opacity}
.shiva-art path{fill:none; stroke:url(#shivaInk); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.shiva-art .sv-moon{fill:rgba(235,211,162,.16)}
.shiva-art .sv-eye{stroke-width:1.35; fill:rgba(255,227,174,.12)}
/* the tripund as the app's Mahakaal card wears it (the user, 2026-10-08): three lines of ash in cream, the red bindu breathing */
.shiva-art .sv-tri path{stroke:#EDE6D6; stroke-width:1.6}
.shiva-art .sv-bindu{fill:#D9452B}
.shiva-art .sv-bindu-glow{fill:rgba(217,69,43,.45); animation:svBindu 4.6s ease-in-out infinite}
@keyframes svBindu{0%,100%{opacity:.25} 50%{opacity:.9}}
@media (prefers-reduced-motion: reduce){ .shiva-art .sv-bindu-glow{animation:none} }
.nose-art .n-halo{opacity:.6}
.nose-art .n-faint{opacity:.5}
.nose-art .n-faint2{opacity:.3}
.nose-art .n-tip{opacity:.62}
.nose-art .n-nos{fill:#07060F; fill-opacity:.92; stroke:url(#noseInk); stroke-width:1; stroke-opacity:.45; vector-effect:non-scaling-stroke; transition:stroke-opacity .7s var(--ease), filter .7s var(--ease)}   /* soft rims: nostrils, not eyes */
.nose[data-ex="left"] .n-l, .nose[data-ex="right"] .n-r, .nose[data-ex="both"] .n-nos{stroke-opacity:.95; filter:drop-shadow(0 0 3px rgba(255,236,200,.75))}
.nose-mist{position:absolute; z-index:1; top:0; left:-25%; width:150%; height:100%; pointer-events:none}   /* wider than the nose: a plume is never cut */
/* under the face, only the verse */
/* the verse, the scene's last word (the user, 2026-09-27: "gradient fill with bg shining effect … more dramatic"): an
   ornament, then each line inked in from the left out of a blur (--v1, --v2), gold with a light passing over it and a
   glow breathing behind; then its meaning (--v3) and its source (--v4) */
.pm-verse{position:relative; z-index:3; display:grid; justify-items:center; gap:clamp(12px,1.8vh,18px); max-width:760px; margin:calc(var(--nw) * -.26) auto 0; opacity:var(--verse,1)}
.pm-verse::before{content:''; position:absolute; z-index:-1; left:50%; top:34%; width:118%; height:82%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,222,160,.17), rgba(255,222,160,.05) 45%, transparent 70%); opacity:var(--v2,1); animation:pvglow 7s ease-in-out infinite}
@keyframes pvglow{0%,100%{filter:brightness(.85)} 50%{filter:brightness(1.25)}}
.pv-orn{display:flex; align-items:center; gap:10px; opacity:var(--v1,1); transform:scaleX(calc(.4 + var(--v1,1) * .6))}
.pv-orn::before, .pv-orn::after{content:''; width:56px; height:1px; background:linear-gradient(90deg,transparent,var(--gold))}
.pv-orn::after{background:linear-gradient(90deg,var(--gold),transparent)}
.pv-orn i{width:6px; height:6px; transform:rotate(45deg); background:var(--gold-hi); box-shadow:0 0 12px rgba(235,211,162,.8)}
.pv-sa{display:grid; gap:0; margin:0; font:400 clamp(22px,2.7vw,38px)/1.5 var(--deva); letter-spacing:0; text-wrap:balance}
.pv-sa span{display:block; padding:.08em .1em; color:transparent; -webkit-background-clip:text; background-clip:text;
  background:linear-gradient(100deg,#D6B06A 0%,#EBD09A 38%,#FFF8E6 50%,#EBD09A 62%,#D6B06A 100%) 100% 0 / 300% 100%; -webkit-background-clip:text; background-clip:text;
  animation:pvshine 6.5s ease-in-out infinite; filter:drop-shadow(0 0 18px rgba(235,200,140,.28)) blur(calc((1 - var(--vl,1)) * 6px));
  clip-path:inset(-30% calc((1 - var(--vl,1)) * 100%) -30% 0)}
.pv-sa span:nth-child(1){--vl:var(--v1,1)}
.pv-sa span:nth-child(2){--vl:var(--v2,1); animation-delay:.5s}
@keyframes pvshine{0%{background-position:100% 0} 60%,100%{background-position:0% 0}}
.pv-en{max-width:38ch; margin:0; font:300 clamp(16px,1.5vw,22px)/1.5 var(--serif); color:var(--ink-2); text-wrap:balance;
  opacity:var(--v3,1); transform:translateY(calc((1 - var(--v3,1)) * 12px)); filter:blur(calc((1 - var(--v3,1)) * 4px))}
.pv-en em{color:var(--ink); font-style:normal}     /* upright, as the line itself (the user, 2026-10-02) */
.pv-src{display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; font:500 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lo); opacity:var(--v4,1)}
/* "Shiva to Parvati", online (the user, 2026-09-27): the hero's green live dot, and the words blinking slowly — the
   conversation still going on */
.pv-live{display:inline-flex; align-items:center; gap:9px; color:#8EDDBD; animation:pvlive 3.2s ease-in-out infinite}
.pv-live b{position:relative; flex:none; width:7px; height:7px; border-radius:50%; background:#7DDDB0; box-shadow:0 0 10px rgba(125,221,176,.75)}
.pv-live b::after{content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(125,221,176,.6); animation:livering 2.4s var(--ease-out) infinite}
@keyframes pvlive{0%,100%{opacity:1} 50%{opacity:.38}}
@media (prefers-reduced-motion:reduce){ .pv-live, .pv-live b::after{animation:none} }
.pv-src i{flex:none; width:4px; height:4px; border-radius:50%; background:var(--gold)}
/* live: held while the scroll plays it */
/* the hold, lengthened (the user, 2026-09-28: the cloud "vanishes rapidly and is very sensitive to scroll"): 230vh was
   300vh's worth of scene; the cloud's parting now takes about 140vh of it (home.js, the dashboard) */
.promise.pm-live{--pm-dusk:18vh; --pm-run:300vh; height:calc(var(--pm-dusk) + 100vh + var(--pm-run))}
.pm-live .pm-dusk{display:block; height:var(--pm-dusk); background:linear-gradient(180deg, rgba(7,8,11,0), rgba(5,5,8,.7) 55%, #050508); pointer-events:none}
.pm-live .pm-stage{position:sticky; top:0; height:100vh; height:100svh; padding:0; justify-content:center; background:rgba(5,5,8,calc(1 - var(--clear,0)))}   /* dark while the cloud is there, the page's own ground once it has gone: no seam with the next section */
.pm-live .pm-fog{display:block; position:absolute; inset:0; z-index:4; width:100%; height:100%; pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 24%); mask:linear-gradient(180deg,transparent 0,#000 24%)}   /* the hero melts into the cloud, no edge */
.pm-live.pm-nofog .pm-stage::after{content:''; position:absolute; inset:0; z-index:4; pointer-events:none; background:#050508; opacity:calc(1 - var(--clear,1))}   /* no WebGL: a plain veil lifts instead */
.pm-live .pm-intro{position:absolute; inset:0; align-content:center; padding:72px var(--gutter) 0; pointer-events:none;
  opacity:var(--intro-o,0); transform:translateY(var(--intro-y,0px)); filter:blur(var(--intro-b,0px))}
.pm-live .pm-h{text-shadow:0 0 38px rgba(235,211,162,.18)}
.pm-live .pm-stage{--nw:min(300px,62vw,30svh)}
.pm-live .pm-scene{padding-top:72px}
@media(max-width:760px){ .promise.pm-live{--pm-dusk:14vh; --pm-run:260vh} }
@media(max-width:560px){
  .pv-src{font-size:9px; letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){ .pv-sa span, .pm-verse::before{animation:none} }

/* ---- the two engines: they assemble as the page scrolls ------------------------ */
.engines{position:relative; isolation:isolate}
.engines::before{content:''; position:absolute; z-index:-1; inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 70% 30%,rgba(214,177,115,.16),transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 70%,rgba(143,134,214,.10),transparent 70%),
    linear-gradient(180deg,transparent 0%,#120E07 10%,#15100A 50%,#0F0C08 90%,transparent 100%)}
.eng-track{position:relative; height:300vh}
.eng-stage{position:sticky; top:72px; height:calc(100vh - 72px); max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,4vw,70px); align-items:center}
.eng-copy{min-width:0}
.eng-badge{display:inline-flex; align-items:center; gap:10px; height:30px; padding:0 14px; border-radius:999px;
  font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:#1A1307;
  background:linear-gradient(100deg,var(--gold-hi),var(--gold)); box-shadow:0 10px 30px -10px rgba(235,211,162,.6)}
.eng-badge i{width:6px; height:6px; border-radius:50%; background:#1A1307}
/* "Presenting", the title card above the engines (the user, 2026-09-27): heading size; each letter rises out of a blur in
   turn, fine gold lines draw out from the word, a glow warms behind it, then a band of light passes over the gold — the
   light is a second copy of the word, clipped to its letters, so only the gold shines. home.js adds .in in view. */
.eng-title{display:grid; place-items:center; min-height:clamp(240px,42vh,420px); padding:clamp(48px,9vh,110px) var(--gutter) clamp(8px,2vh,24px); text-align:center}
.eng-present{display:inline-flex; align-items:center; gap:clamp(14px,2.2vw,32px); margin:0;
  transform:translate3d(0,var(--pty,0px),0); opacity:var(--pto,1); will-change:transform,opacity}   /* the site's parallax: rises in, drifts slower than the page, fades as it passes (home.js, presentScroll) */
.eng-present::before, .eng-present::after{content:''; flex:none; width:clamp(34px,9vw,140px); height:1px; background:linear-gradient(90deg,transparent,var(--gold));
  transform:scaleX(var(--plx,1)); transform-origin:right}   /* the lines stretch out as the word arrives */
.eng-present::after{background:linear-gradient(90deg,var(--gold),transparent); transform-origin:left}
.ep-w{position:relative; display:inline-block; font:300 clamp(40px,5.2vw,84px)/1.12 var(--serif); letter-spacing:.02em; white-space:nowrap}   /* upright (the user, 2026-09-27) */
.ep-w::before{content:''; position:absolute; z-index:-1; inset:-55% -18%; background:radial-gradient(ellipse at center, rgba(235,200,140,.16), transparent 68%);
  opacity:0; transition:opacity 2.2s var(--ease) .5s; pointer-events:none}
.eng-present.in .ep-w::before{opacity:1}
.ep-word span{display:inline-block; color:#E7CD96; text-shadow:0 0 .45em rgba(235,200,140,.28); opacity:0; filter:blur(12px); transform:translateY(.32em);
  transition:opacity 1.2s var(--ease) calc(var(--i,0) * 85ms), filter 1.3s var(--ease) calc(var(--i,0) * 85ms), transform 1.5s var(--ease-out) calc(var(--i,0) * 85ms)}
.eng-present.in .ep-word span{opacity:1; filter:none; transform:none}
.ep-shine{position:absolute; inset:0; color:transparent; pointer-events:none;
  background:linear-gradient(100deg, transparent 42%, rgba(255,249,234,.95) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat; -webkit-background-clip:text; background-clip:text}
.eng-present.in .ep-shine{animation:epshine 7s ease-in-out 1.9s infinite}
@keyframes epshine{0%{background-position:130% 0} 34%,100%{background-position:-30% 0}}
@media(max-width:760px){ .eng-title{min-height:clamp(180px,30vh,300px)} }
@media (prefers-reduced-motion:reduce){ .ep-word span{opacity:1; filter:none; transform:none; transition:none} .eng-present .ep-w::before{opacity:1} .eng-present.in .ep-shine{animation:none} }
.eng-name{margin-top:22px; font:300 clamp(36px,4.2vw,68px)/1 var(--serif); letter-spacing:-.02em;
  background:linear-gradient(100deg,#FFF3D6 0%,var(--gold-hi) 40%,var(--gold) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:.06em .04em .16em; margin-bottom:-.12em}
.eng-name i{font-style:normal; color:var(--gold-lo); -webkit-text-fill-color:var(--gold-lo)}
.eng-name em{display:block; font-style:normal; color:var(--ink); -webkit-text-fill-color:var(--ink)}
.eng-h{margin-top:22px; max-width:30ch; font:300 clamp(17px,1.5vw,22px)/1.45 var(--sans); color:var(--ink-2)}
.eng-steps{margin-top:clamp(20px,4vh,40px); border-top:1px solid rgba(235,211,162,.14)}
.eng-steps li{display:grid; grid-template-columns:30px minmax(0,1fr); gap:4px 12px; padding:14px 0; border-bottom:1px solid rgba(235,211,162,.1);
  opacity:.36; transition:opacity .5s var(--ease)}
.eng-steps li.on{opacity:1}
.eng-steps li i{grid-row:span 2; align-self:start; margin-top:2px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font:500 10px/1 var(--mono); font-style:normal; color:var(--gold-hi); box-shadow:inset 0 0 0 1px rgba(235,211,162,.4); transition:all .5s var(--ease)}
.eng-steps li.on i{background:var(--gold-hi); color:#1A1307; box-shadow:0 0 16px rgba(235,211,162,.55)}
.eng-steps b{font:400 17px/1.25 var(--sans); color:var(--ink)}
.eng-steps span{font:400 13px/1.45 var(--sans); color:var(--dim)}
.eng-note{margin-top:18px; max-width:48ch; font:400 12px/1.6 var(--sans); color:var(--dim)}
.eng-viz{position:relative; min-width:0; display:grid; place-items:center}
.eng-svg{width:min(100%, calc(100vh - 150px), 640px); height:auto; overflow:visible}
.eng-svg .tick{stroke:rgba(235,211,162,.18); stroke-width:1}
.eng-svg .tick.big{stroke:rgba(235,211,162,.45)}
.eng-svg .hour{font:500 11px var(--mono); fill:rgba(235,211,162,.45); text-anchor:middle; dominant-baseline:middle}
.eng-svg .trk{fill:none; stroke:rgba(238,232,220,.05)}
.eng-svg .kd{fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linejoin:round}
.eng-svg .kd-lab{font:500 10px var(--mono); letter-spacing:.2em; fill:var(--gold-lo); text-anchor:middle}
.eng-svg .gr circle{fill:#15120C; stroke:rgba(235,211,162,.5); stroke-width:1}
.eng-svg .gr text{font:400 14px var(--sans); fill:var(--gold-hi); text-anchor:middle; dominant-baseline:central}
.eng-svg .orbit{transform-origin:300px 300px; animation:spin 90s linear infinite}
.eng-svg .orbit .gr{transform-box:fill-box; transform-origin:center}
.eng-svg .ray{stroke:rgba(235,211,162,.35); stroke-width:1; stroke-dasharray:2 4}
.eng-svg .needle{stroke:#FFF6E0; stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(255,246,224,.8))}
.eng-svg .needle-dot{fill:#FFF6E0}
.eng-svg .ringlab{font:500 10px var(--mono); letter-spacing:.24em; text-transform:uppercase}
.eng-now{position:absolute; left:50%; bottom:2%; transform:translate(-50%,8px); display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:999px; white-space:nowrap;
  background:rgba(12,10,6,.82); box-shadow:inset 0 0 0 1px rgba(235,211,162,.28), 0 20px 50px -20px #000; font:400 13px/1 var(--sans); color:var(--ink-2);
  opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease-out)}
.eng-now.on{opacity:1; transform:translate(-50%,0)}
.eng-now b{font-weight:500; color:var(--ink)}
.eng-now .k{font:500 10px/1 var(--mono); letter-spacing:.18em; color:var(--gold)}
.eng-now i{width:8px; height:8px; border-radius:50%}
.eng-key{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin-top:12px; font:400 12px/1 var(--sans); color:var(--dim)}
.eng-key span{display:inline-flex; align-items:center; gap:7px}
.eng-key i{width:10px; height:10px; border-radius:3px}
@media(max-width:980px){
  .eng-track{height:260vh}
  .eng-stage{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); align-content:start; gap:10px; padding-top:18px}
  .eng-viz{order:-1}
  .eng-svg{width:min(100%, 44vh, 520px)}
  .eng-kick-row{display:none}
  .eng-name{margin-top:0; font-size:clamp(28px,7vw,44px)}
  .eng-name em{display:inline}
  .eng-h{display:none}
  .eng-steps{margin-top:14px}
  .eng-steps li{display:none; border-bottom:0; padding:8px 0 0}
  .eng-steps li.on{display:grid}
  .eng-note{display:none}
  .eng-now{bottom:-4px; font-size:12px}
  .eng-key{display:none}
}
@media (prefers-reduced-motion:reduce){
  .eng-track{height:auto}
  .eng-stage{position:relative; top:auto; height:auto; padding-top:80px; padding-bottom:80px}
  .eng-steps li{opacity:1}
}

/* ---- the feature deck: each chapter rises over the one before ------------------- */
.deck{position:relative}
.slide{position:sticky; top:var(--deck-top); isolation:isolate; overflow:clip}
.slide + .slide{border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0; box-shadow:0 -30px 70px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06)}
.slide-dim{position:absolute; inset:0; z-index:20; background:#05060A; opacity:0; pointer-events:none; will-change:opacity}
.slide::before{content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:var(--slide-bg, var(--ground))}
.slide::after{content:''; position:absolute; z-index:-1; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--acc-line, rgba(235,211,162,.4)),transparent)}
.slide:first-child::after{display:none}
@media (prefers-reduced-motion:reduce){ .slide{position:relative; top:auto !important} .slide-dim{display:none} }
.measuring .slide{position:relative !important; top:auto !important}

/* a chapter: the words beside a phone that does the thing */
.feat{--acc:var(--gold); max-width:var(--wrap); margin:0 auto; padding:clamp(84px,12vh,140px) var(--gutter) clamp(90px,13vh,150px);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,90px); align-items:center; min-height:calc(100vh - var(--deck-top))}
.feat.flip .feat-copy{order:2}
.feat-copy{min-width:0}
.feat h2{margin-top:26px; font:300 clamp(34px,4vw,62px)/1.04 var(--serif); letter-spacing:-.02em; max-width:14ch}
.feat h2 em{font-style:normal; color:var(--acc-hi, var(--gold-hi))}
.taps{margin-top:clamp(28px,5vh,48px); counter-reset:tap}
.taps li{position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:14px; padding:14px 0;
  border-top:1px solid var(--line); color:var(--dim); transition:color .5s var(--ease)}
.taps li:last-child{border-bottom:1px solid var(--line)}
.taps li::after{content:''; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--acc); transition:width 1.6s linear}
.taps li.on{color:var(--ink)}
.taps li.on::after{width:100%}
.taps li.done::after{width:100%; transition:none; opacity:.35}
.taps i{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:500 11px/1 var(--mono); font-style:normal;
  color:var(--acc); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent); transition:all .5s var(--ease)}
.taps li.on i{background:var(--acc); color:#0B0A08; box-shadow:0 0 18px color-mix(in srgb, var(--acc) 60%, transparent)}
.taps b{font:400 clamp(16px,1.3vw,19px)/1.35 var(--sans)}
.feat-note{margin-top:22px; max-width:44ch; font:400 12.5px/1.6 var(--sans); color:var(--dim)}
.feat-note b{font-weight:500; color:var(--ink-2)}
.feat-stage{position:relative; min-width:0; display:flex; justify-content:center; align-items:center; min-height:600px}
.feat-stage::before{content:''; position:absolute; z-index:-1; left:50%; top:50%; width:min(760px,120%); aspect-ratio:1; transform:translate(-50%,-50%) translateY(var(--par,0px)); border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--acc) 22%, transparent),transparent 62%); pointer-events:none}
@media(max-width:900px){
  .feat{grid-template-columns:1fr; gap:30px; padding-top:clamp(64px,9vh,100px); padding-bottom:70px; min-height:0}
  .feat.flip .feat-copy{order:0}
  .feat h2{margin-top:18px; max-width:18ch}
  .taps{margin-top:22px}
  .taps li{padding:10px 0}
  .feat-stage{min-height:0}
}

/* each chapter's own light */
#s-code{--slide-bg:radial-gradient(ellipse 70% 60% at 75% 45%,rgba(214,177,115,.10),transparent 70%),linear-gradient(180deg,#0B0A08,#08090C)}
#s-body{--slide-bg:radial-gradient(ellipse 70% 60% at 72% 45%,rgba(126,182,222,.14),transparent 70%),linear-gradient(180deg,#081019,#070A10); --acc-line:rgba(126,182,222,.5)}
#s-realign{--slide-bg:radial-gradient(ellipse 70% 60% at 28% 50%,rgba(98,193,158,.14),transparent 70%),linear-gradient(180deg,#07110E,#070B0A); --acc-line:rgba(98,193,158,.5)}
#s-plan{--slide-bg:radial-gradient(ellipse 70% 60% at 72% 45%,rgba(237,165,82,.13),transparent 70%),linear-gradient(180deg,#130D07,#0B0907); --acc-line:rgba(237,165,82,.5)}
#s-match{--slide-bg:radial-gradient(ellipse 70% 60% at 28% 50%,rgba(228,125,147,.14),transparent 70%),linear-gradient(180deg,#130A0E,#0A080A); --acc-line:rgba(228,125,147,.5)}
#body{--acc:var(--a-blue); --acc-hi:#B7D8F0}
#realign{--acc:var(--a-jade); --acc-hi:#A8E3CC}
#plan{--acc:var(--a-amber); --acc-hi:#F6CB94}
#match{--acc:var(--a-rose); --acc-hi:#F2B3C1}
#s-every{--slide-bg:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(214,177,115,.10),transparent 70%),linear-gradient(180deg,#0D0C0A,#08090C 40%); --acc-line:rgba(235,211,162,.45)}
#s-every .everyday{padding-top:clamp(84px,12vh,140px); padding-bottom:clamp(80px,12vh,140px)}

/* ---- the phone ----------------------------------------------------------------------- */
.ph{--pw:300px; position:relative; width:var(--pw); flex:none; container-type:inline-size; z-index:2}
@media(max-width:900px){ .ph{--pw:min(300px,78vw)} }
.ph-body{position:relative; padding:3.3cqw; border-radius:15.5cqw;
  background:linear-gradient(145deg,#3A3B42 0%,#15161B 22%,#0C0D10 55%,#1D1E24 85%,#34353C 100%);
  box-shadow:inset 0 0 0 .4cqw rgba(255,255,255,.08), inset 0 0 0 1.1cqw #060608, 0 0 0 .35cqw #000,
    0 7cqw 18cqw -5cqw rgba(0,0,0,.9), 0 0 16cqw -6cqw color-mix(in srgb, var(--acc, #D6B173) 55%, transparent)}
.ph-body::before, .ph-body::after{content:''; position:absolute; width:.9cqw; border-radius:.5cqw; background:linear-gradient(90deg,#2A2B30,#101114)}
.ph-body::before{left:-.8cqw; top:24%; height:9%}
.ph-body::after{right:-.8cqw; top:30%; height:15%}
.ph-scr{position:relative; aspect-ratio:300/650; border-radius:12.4cqw; overflow:hidden; isolation:isolate; font-size:3.1cqw; line-height:1.3;
  color:var(--a-ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; user-select:none;
  background:radial-gradient(90% 45% at 80% 8%,rgba(214,177,115,.12),rgba(143,134,214,.05) 45%,transparent 70%),#08090C}
.ph-scr *{box-sizing:border-box}
.ph-scr svg{display:block}
.a-status{position:absolute; z-index:40; left:0; right:0; top:0; height:4.4em; display:flex; justify-content:space-between; align-items:center; padding:.2em 2.5em 0 2.9em; font:600 1.15em/1 var(--sans); color:#fff; pointer-events:none}
.a-status b{font-weight:600; letter-spacing:.01em}
.a-isl{position:absolute; left:50%; top:1.05em; width:8.8em; height:2.6em; border-radius:2em; background:#000; transform:translateX(-50%)}
.a-sig{display:flex; align-items:center; gap:.35em}
.a-sig svg{width:1.35em; height:1em; fill:#fff}
.a-bat{width:2.1em; height:1em; border-radius:.3em; border:.12em solid rgba(255,255,255,.55); padding:.12em}
.a-bat::before{content:''; display:block; width:78%; height:100%; border-radius:.12em; background:#fff}

/* views and sheets */
.a-v{position:absolute; inset:4.6em 0 0; padding:0 1.25em; opacity:0; transform:translateX(10%); pointer-events:none;
  transition:opacity .5s var(--ease), transform .7s var(--ease-out)}
.a-v.on{opacity:1; transform:none}
.a-v.gone{transform:translateX(-10%)}
.a-v.fade{transform:none}
.a-v.full{inset:0; padding:4.6em 1.25em 0}
.a-sheet{position:absolute; z-index:30; left:0; right:0; bottom:0; transform:translateY(102%); transition:transform .75s cubic-bezier(.22,.9,.24,1);
  border-radius:2.4em 2.4em 0 0; padding:1em 1.25em 2em;
  background:linear-gradient(180deg,rgba(40,33,20,.9),rgba(22,19,13,.94) 30%,rgba(16,15,13,.96)); box-shadow:inset 0 .1em 0 rgba(240,213,126,.3), 0 -2em 4em -1em rgba(0,0,0,.7)}
.a-sheet.on{transform:none}
.a-sheet.tall{top:5.6em; border-radius:2.4em 2.4em 0 0}
.a-grip{display:block; width:4.2em; height:.42em; margin:.1em auto 1em; border-radius:1em; background:linear-gradient(90deg,rgba(240,213,126,.3),rgba(240,213,126,.8),rgba(240,213,126,.3))}
.a-scroll{transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}

/* ---- the deck's phones from the app's own screens (the user, 2026-10-02: "update the mobile device animation screen from
   01-Your swara Code section to 08-Sankalpa as per the updated real UI/UX" · "show starting from the home screens … to go to
   their swipe page and then detailed page"): each frame captured from the app at 390 × 784, the screen under the drawn status
   bar (4.4em of the screen's 3.565cqw: 7.24% of its height at every size). A frame fades in; after a swipe it slides in from
   the right while the page it leaves slides out (data-tr / data-out "swipe"); a sheet rises a little (data-tr "sheet"). ---- */
.fr-scr{background:#08080B}
.fr{position:absolute; left:0; top:7.24%; width:100%; height:92.76%; object-fit:cover; object-position:50% 0; opacity:0; z-index:1;
  transition:opacity .42s var(--ease), transform .62s cubic-bezier(.3,.7,.2,1); will-change:opacity, transform; user-select:none; -webkit-user-drag:none; pointer-events:none}
.fr.tall{height:auto; object-fit:fill}
.fr.on{opacity:1; z-index:3}
.fr.gone{opacity:0; z-index:2}
.fr[data-tr="swipe"]{opacity:1; transform:translateX(100%)}
.fr[data-tr="swipe"].on{transform:none}
.fr[data-out="swipe"].gone{opacity:1; transform:translateX(-100%)}
.fr[data-tr="sheet"]{transform:translateY(5%)}
.fr[data-tr="sheet"].on{transform:none}
/* a page to the left of the one shown (the Today and Time table pages) comes in from the left, the page it leaves goes right */
.fr[data-tr="back"]{opacity:1; transform:translateX(-100%)}
.fr[data-tr="back"].on{transform:none}
.fr[data-out="back"].gone{opacity:1; transform:translateX(100%)}
/* a token moment settles over the screen it lands on, as the app's own overlay does */
.fr[data-tr="pop"]{transform:scale(1.035)}
.fr[data-tr="pop"].on{transform:none}
/* the page scrolled on under the finger: the next stretch of it rises into place as the last one rises away */
.fr[data-tr="up"]{transform:translateY(14%)}
.fr[data-tr="up"].on{transform:none}
.fr[data-out="up"].gone{transform:translateY(-14%)}
@media (prefers-reduced-motion:reduce){ .fr{transition:none} }

/* the finger */
.ph-tap{position:absolute; z-index:60; left:0; top:0; width:4.6em; height:4.6em; margin:-2.3em 0 0 -2.3em; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.62) 0%,rgba(255,255,255,.26) 55%,rgba(255,255,255,.06) 70%);
  box-shadow:0 0 0 .12em rgba(255,255,255,.55), 0 .6em 1.6em rgba(0,0,0,.45); opacity:0;
  transition:transform .75s cubic-bezier(.3,.7,.2,1), opacity .35s var(--ease), scale .18s var(--ease)}
.ph-tap.on{opacity:1}
.ph-tap.down{scale:.78}
.ph-tap::after{content:''; position:absolute; inset:-.25em; border-radius:50%; border:.16em solid rgba(255,255,255,.75); opacity:0}
.ph-tap.down::after{animation:tapring .65s var(--ease-out)}
@keyframes tapring{0%{opacity:.9; transform:scale(.6)}100%{opacity:0; transform:scale(1.9)}}
.pressed{filter:brightness(1.35); scale:.97; transition:scale .15s, filter .15s}

/* the app's own pieces */
.a-top{display:flex; align-items:center; justify-content:space-between; height:4.4em; padding:0 .7em; margin:0 -.2em; border-radius:2.4em;
  background:rgba(16,17,23,.72); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.11)}
.a-top .grp{display:flex; align-items:center; gap:.45em}
.a-ic{width:3em; height:3em; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 .08em rgba(238,232,220,.14); color:var(--a-ink-2)}
.a-ic svg{width:1.4em; height:1.4em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.a-ic.gold{background:rgba(217,184,76,.16); box-shadow:inset 0 0 0 .08em rgba(242,217,138,.45); color:var(--a-brass-hi)}
.a-ic.plain{box-shadow:none}
.a-brand{display:flex; align-items:center; gap:.5em; font:400 1.45em/1 var(--sans); letter-spacing:.015em; color:#A09BB5}
.a-brand b{font-weight:600; color:#F2D98A}
.a-brand svg{width:1.45em; height:1.45em; color:var(--a-brass)}
.a-eye{display:block; font:600 .82em/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--a-brass)}
.a-card{position:relative; border-radius:1.9em; padding:1.25em 1.3em; background:linear-gradient(180deg,rgba(28,29,37,.8),rgba(18,19,25,.82)); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1), 0 1em 2em -1em rgba(0,0,0,.6)}
.a-card + .a-card{margin-top:.9em}
.a-h{margin-top:.35em; font:400 1.75em/1.15 var(--sans); letter-spacing:-.01em; color:var(--a-ink)}
.a-h.gold{color:var(--a-brass-hi)}
.a-p{font:400 1.02em/1.4 var(--sans); color:var(--a-ink-2)}
.a-sm{font:400 .88em/1.35 var(--sans); color:var(--a-dim)}
.a-pill{display:inline-flex; align-items:center; gap:.45em; height:2.2em; padding:0 .9em; border-radius:2em; font:500 .88em/1 var(--sans); color:var(--a-ink-2);
  background:rgba(238,232,220,.06); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.12)}
.a-btn{display:flex; align-items:center; justify-content:center; gap:.5em; height:4.2em; border-radius:2.1em; font:500 1.15em/1 var(--sans); color:#1B1407;
  background:linear-gradient(180deg,#F6E0A0,#D8B458); box-shadow:inset 0 .1em 0 rgba(255,255,255,.5), 0 .8em 1.6em -.6em rgba(217,184,76,.6)}
.a-btn.small{height:3em; padding:0 1.2em; font-size:1em; display:inline-flex}
.a-btn.ghost{color:var(--a-ink); background:rgba(238,232,220,.06); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.16)}
.a-seg{display:flex; gap:.2em; padding:.3em; border-radius:1.6em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1)}
.a-seg > span{flex:1; display:flex; align-items:center; justify-content:center; gap:.4em; height:3.2em; border-radius:1.3em; font:500 1em/1 var(--sans); color:var(--a-ink-2); transition:all .4s var(--ease)}
.a-seg > span.on{color:var(--a-ink); background:linear-gradient(180deg,rgba(242,217,138,.2),rgba(217,184,76,.1)); box-shadow:inset 0 0 0 .08em rgba(242,217,138,.5)}
.a-seg.blue > span.on{background:linear-gradient(180deg,rgba(126,182,222,.24),rgba(126,182,222,.1)); box-shadow:inset 0 0 0 .08em rgba(126,182,222,.6)}
.a-seg.jade > span.on{background:linear-gradient(180deg,rgba(98,193,158,.24),rgba(98,193,158,.1)); box-shadow:inset 0 0 0 .08em rgba(98,193,158,.6)}
.a-seg.amber > span.on{background:linear-gradient(180deg,rgba(237,165,82,.24),rgba(237,165,82,.1)); box-shadow:inset 0 0 0 .08em rgba(237,165,82,.6)}
.a-seg.rose > span.on{background:linear-gradient(180deg,rgba(228,125,147,.24),rgba(228,125,147,.1)); box-shadow:inset 0 0 0 .08em rgba(228,125,147,.6)}
.a-seg svg{width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.6}
.a-tabs{display:flex; gap:1.3em; margin:1em .2em .9em; font:500 1.05em/1 var(--sans); color:var(--a-dim); white-space:nowrap; overflow:hidden}
.a-tabs span{position:relative; padding-bottom:.7em; transition:color .4s}
.a-tabs span.on{color:var(--a-ink)}
.a-tabs span::after{content:''; position:absolute; left:0; right:0; bottom:0; height:.16em; border-radius:1em; background:var(--tab, var(--a-brass)); transform:scaleX(0); transition:transform .45s var(--ease-out)}
.a-tabs span.on::after{transform:none}
.a-row{display:flex; align-items:center; justify-content:space-between; gap:.8em}
.a-dot{display:inline-block; width:.8em; height:.8em; border-radius:50%; flex:none}
.a-toast{position:absolute; z-index:45; left:1.4em; right:1.4em; bottom:2.6em; display:flex; align-items:center; gap:.7em; padding:1em 1.2em; border-radius:1.4em;
  background:rgba(22,24,20,.94); box-shadow:inset 0 0 0 .08em rgba(98,193,158,.5), 0 1em 2.4em -.5em rgba(0,0,0,.8); font:500 1.02em/1.2 var(--sans); color:var(--a-ink);
  opacity:0; transform:translateY(1.2em); transition:opacity .4s var(--ease), transform .5s var(--ease-out)}
.a-toast.on{opacity:1; transform:none}
.a-toast i{width:1.9em; height:1.9em; border-radius:50%; display:grid; place-items:center; background:rgba(98,193,158,.2); color:var(--a-jade); font-style:normal; font-weight:600}
.a-stageswitch{display:flex; gap:.3em; padding:.35em; border-radius:1.7em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1)}
.a-stageswitch span{flex:1; display:flex; align-items:center; justify-content:center; gap:.45em; height:3.5em; border-radius:1.4em; font:500 1.05em/1 var(--sans); color:var(--a-ink-2)}
.a-stageswitch span svg{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.6}
.a-stageswitch .rec.on{color:var(--a-ink); background:linear-gradient(180deg,rgba(242,217,138,.22),rgba(217,184,76,.1)); box-shadow:inset 0 0 0 .08em rgba(242,217,138,.5)}
.a-stageswitch .dia.on{color:var(--a-ink); background:linear-gradient(180deg,rgba(126,182,222,.26),rgba(126,182,222,.1)); box-shadow:inset 0 0 0 .08em rgba(126,182,222,.6)}
.a-stageswitch .rea.on{color:var(--a-ink); background:linear-gradient(180deg,rgba(98,193,158,.26),rgba(98,193,158,.1)); box-shadow:inset 0 0 0 .08em rgba(98,193,158,.6)}
.a-stageswitch .rec i{width:.5em; height:.5em; border-radius:50%; background:var(--a-jade)}

/* bands: the swara code as the app draws it, revealed left to right */
.a-band{position:relative; height:1.5em; border-radius:.75em; overflow:hidden; display:flex; background:rgba(238,232,220,.06); clip-path:inset(0 100% 0 0 round .75em);
  transition:clip-path 1.8s cubic-bezier(.4,.1,.2,1)}
.a-band.thin{height:1.1em}
.drawn .a-band, .a-band.drawn{clip-path:inset(0 0 0 0 round .75em)}
.a-band i{display:block; height:100%; flex:none}
.a-band .now{position:absolute; top:0; bottom:0; width:.16em; background:#fff; box-shadow:0 0 .6em #fff}
.a-bandlab{display:flex; justify-content:space-between; margin:.35em 0 .6em; font:600 .78em/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--a-ink-2)}
.a-axis{display:flex; justify-content:space-between; margin-top:.45em; font:400 .85em/1 var(--sans); color:var(--a-ink-2)}
.a-key{display:flex; flex-wrap:wrap; gap:.4em 1em; margin-top:.9em; padding-top:.8em; border-top:.08em solid rgba(238,232,220,.08); font:400 .88em/1 var(--sans); color:var(--a-ink-2)}
.a-key span{display:inline-flex; align-items:center; gap:.4em}
.a-key i{width:1.2em; height:.6em; border-radius:.3em}

/* ---- scene: your code ---- */
.sc-form{padding-top:.6em}
.sc-form .a-card{padding:1.2em 1.3em 1.4em}
.sc-form .a-h{font-size:2em; margin:.2em 0 .8em}
.a-fields{border-radius:1.6em; overflow:hidden; box-shadow:inset 0 0 0 .08em rgba(238,232,220,.12); background:rgba(238,232,220,.02)}
.a-field{padding:.85em 1.1em .9em; border-top:.08em solid rgba(238,232,220,.09)}
.a-field:first-child{border-top:0}
.a-field.two{display:grid; grid-template-columns:1fr 1fr; padding:0}
.a-field.two > div{padding:.85em 1.1em .9em}
.a-field.two > div + div{border-left:.08em solid rgba(238,232,220,.09)}
.a-field label{display:block; font:600 .74em/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--a-dim)}
.a-in{display:block; min-height:1.35em; margin-top:.5em; font:400 1.2em/1.1 var(--sans); color:var(--a-ink); white-space:nowrap; overflow:hidden}
.a-in:empty::before{content:attr(data-ph); color:rgba(194,188,203,.4)}
.a-in.typing::after{content:''; display:inline-block; width:.08em; height:1em; margin-left:.05em; vertical-align:-.12em; background:var(--a-brass-hi); animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.a-gps{display:flex; align-items:center; gap:.6em; margin-top:.55em; padding:.55em .7em; border-radius:1em; background:rgba(98,193,158,.08); box-shadow:inset 0 0 0 .08em rgba(98,193,158,.3);
  font:400 .86em/1.25 var(--sans); color:var(--a-ink-2); opacity:0; transform:translateY(.4em); transition:all .5s var(--ease)}
.a-gps.on{opacity:1; transform:none}
.a-gps b{font-weight:600; color:var(--a-jade)}
.a-gps svg{width:1.3em; height:1.3em; flex:none; fill:var(--a-jade)}
.a-gps em{display:block; font-style:normal; color:var(--a-dim)}
.sc-form .a-btn{margin-top:1.1em}
.sc-home .a-scroll{padding-top:.8em}
.a-dial{position:relative; width:23.4em; height:23.4em; margin:.6em auto 0; border-radius:50%}
.a-dial img{width:100%; height:100%; border-radius:50%; display:block; transform:rotate(-120deg) scale(.7); opacity:0; transition:transform 1.8s cubic-bezier(.2,.8,.2,1), opacity 1s var(--ease)}
.sc-home.on .a-dial img{transform:none; opacity:1}
.a-who{text-align:center; margin-top:.8em}
.a-who b{display:block; font:300 1.7em/1.1 var(--sans); color:var(--a-ink)}
.a-who span{display:block; margin-top:.35em; font:400 .92em/1 var(--sans); color:var(--a-dim)}
.a-codecard{margin-top:1.2em}
.a-codecard .a-h{margin:.25em 0 .7em; font-size:1.7em}
.a-codecard .info{position:absolute; right:1.1em; top:1.1em; width:1.8em; height:1.8em; border-radius:50%; box-shadow:inset 0 0 0 .08em rgba(238,232,220,.3); display:grid; place-items:center; font:500 .8em/1 var(--sans); color:var(--a-dim)}
.a-breathe{margin-top:.9em; border-radius:1.6em; padding:1.1em 1.3em; background:linear-gradient(180deg,rgba(236,119,96,.16),rgba(236,119,96,.06)); box-shadow:inset 0 0 0 .08em rgba(236,119,96,.35)}
.a-breathe .a-eye{color:#F2A08E}
.a-breathe b{display:block; margin-top:.35em; font:400 1.75em/1.1 var(--sans); color:#F08C77}
.a-breathe span{display:block; margin-top:.35em; font:400 .92em/1.3 var(--sans); color:var(--a-ink-2)}

/* ---- scene: check ---- */
.sc-dim{position:absolute; inset:0; padding:0 1.25em}
.sc-dim .a-dial{width:24em; height:24em}
.sc-dim .a-dial img{opacity:1; transform:none}
.a-halfsheet .a-card{padding:1em 1.1em 1.1em; background:rgba(238,232,220,.04)}
.a-breath-hd{display:flex; justify-content:space-between; align-items:flex-start}
.a-breath-hd .a-eye{font-size:.8em}
.a-next{display:flex; align-items:center; gap:.45em; margin-top:.5em; font:400 .95em/1 var(--sans); color:var(--a-ink-2)}
.a-next i{width:.65em; height:.65em; border-radius:50%; background:var(--a-jade); box-shadow:0 0 .5em var(--a-jade)}
.a-minseg{display:flex; padding:.2em; border-radius:1.2em; background:rgba(238,232,220,.05); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1)}
.a-minseg span{padding:.55em .8em; border-radius:1em; font:500 .88em/1 var(--sans); color:var(--a-ink-2)}
.a-minseg span.on{color:#1B1407; background:linear-gradient(180deg,#F6E0A0,#D8B458)}
.a-three{display:grid; grid-template-columns:repeat(3,1fr); gap:.55em; margin-top:.9em}
.a-three span{display:flex; align-items:center; justify-content:center; gap:.6em; height:4em; border-radius:1.2em; font:500 1.15em/1 var(--sans); color:var(--a-ink);
  background:linear-gradient(180deg,#1E1F26,#131419); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1), 0 .5em 1em -.4em rgba(0,0,0,.7); transition:all .35s var(--ease)}
.a-three span.lit{background:linear-gradient(180deg,rgba(236,119,96,.36),rgba(236,119,96,.14)); box-shadow:inset 0 0 0 .1em rgba(236,119,96,.85), 0 0 1.6em -.2em rgba(236,119,96,.6)}
.a-dots{display:inline-flex; gap:.25em}
.a-dots i{width:.75em; height:.75em; border-radius:50%; background:#3A3B44}
/* the app's dock as a phone shows it (2026-09-26): four actions, "Guidance" for Expert Guidance, SwaraTantra marked
   Soon; each cell from the top, so the icons and the labels sit on one line whatever a label's length */
.a-dock{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:.8em; border-radius:1.6em; overflow:hidden; box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1); background:rgba(238,232,220,.03)}
.a-dock span{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.45em; min-width:0; padding:.9em .2em; font:500 .88em/1.15 var(--sans); color:var(--a-ink); text-align:center}
.a-dock span + span{box-shadow:-.08em 0 0 rgba(238,232,220,.1)}
.a-dock i{width:2.6em; height:2.6em; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 .08em rgba(238,232,220,.25)}
.a-dock i svg{width:1.3em; height:1.3em; fill:none; stroke:currentColor; stroke-width:1.6}
.a-dock span:first-child i{background:radial-gradient(circle at 35% 30%,#FBE7A8,#C99A2E); box-shadow:0 0 1em rgba(217,184,76,.5); color:#3A2A08}
.a-dock i{position:relative}
.a-dock span.soon{color:var(--a-ink-2)}
.a-dock span.soon i{color:#C7DDFF; box-shadow:inset 0 0 0 .08em rgba(199,221,255,.38); background:radial-gradient(circle at 40% 30%,rgba(199,221,255,.14),transparent 70%)}
.a-dock i b{position:absolute; top:-.75em; right:-1.9em; padding:.25em .5em .2em; border-radius:1em; font:700 .62em/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:#0C1A26; background:linear-gradient(180deg,#DCEBFF,#A9C8F2); box-shadow:0 .3em .9em -.3em rgba(159,194,242,.7)}
.a-rec{display:flex; align-items:center; gap:.8em; margin-top:.8em; padding:.9em 1em; border-radius:1.3em; background:rgba(236,119,96,.1); box-shadow:inset 0 0 0 .08em rgba(236,119,96,.4);
  opacity:0; max-height:0; margin-top:0; padding-top:0; padding-bottom:0; overflow:hidden; transition:all .55s var(--ease)}
.a-rec.on{opacity:1; max-height:6em; margin-top:.8em; padding-top:.9em; padding-bottom:.9em}
.a-rec b{display:block; font:400 1.25em/1.1 var(--sans); color:#F29A86}
.a-rec span{display:block; margin-top:.25em; font:400 .86em/1 var(--sans); color:var(--a-ink-2)}
.a-rec .ok{margin-left:auto; width:2.2em; height:2.2em; border-radius:50%; display:grid; place-items:center; background:rgba(98,193,158,.2); color:var(--a-jade); font-weight:600}
.a-tune{display:grid; grid-template-columns:auto 1fr; gap:1em; align-items:center; margin-top:.8em}
.a-ring{position:relative; width:6.4em; height:6.4em}
.a-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.a-ring .t{fill:none; stroke:rgba(238,232,220,.08); stroke-width:3}
.a-ring .f{fill:none; stroke:var(--a-jade); stroke-width:3; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1)}
.a-ring b{position:absolute; inset:0; display:grid; place-items:center; font:300 1.6em/1 var(--sans)}
.a-ring b small{font-size:.5em}
/* the figure and its % as one line: in the grid above, the bare figure and the <small> were two items, so two rows
   (the user, 2026-09-25: "82 and % … line breaking"). One span, one baseline */
.a-ring b > span{white-space:nowrap}
.sc-rec .a-rbar{display:flex; gap:.3em; margin-top:.6em}
.sc-rec .a-rbar i{flex:1; height:.4em; border-radius:1em; background:rgba(238,232,220,.1)}
.sc-rec .a-rbar i.on{background:linear-gradient(90deg,#F6E0A0,#D8B458)}

/* ---- scene: the full-body reading ---- */
.a-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:.5em; margin-top:.9em}
.a-stats span{padding:.8em .8em .7em; border-radius:1.1em; box-shadow:inset 0 0 0 .08em rgba(98,193,158,.28); background:rgba(98,193,158,.04)}
.a-stats b{display:block; font:300 1.9em/1 var(--sans); color:var(--a-ink)}
.a-stats em{display:block; margin-top:.3em; font:400 .82em/1 var(--sans); font-style:normal; color:var(--a-ink-2)}
.a-firm{display:inline-flex; align-items:center; gap:.4em; margin-top:.8em; padding:.45em .75em; border-radius:1em; background:rgba(98,193,158,.1); font:500 .85em/1 var(--sans); color:var(--a-ink)}
.a-firm i{width:.6em; height:.6em; border-radius:50%; background:var(--a-jade)}
.a-codechip{display:flex; align-items:center; gap:.5em; margin-top:.9em; padding:.8em 1em; border-radius:1.1em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.12);
  font:400 .95em/1.3 var(--sans); color:var(--a-ink-2)}
.a-codechip .a-eye{color:var(--a-blue); font-size:.72em}
.a-fig{position:relative; margin:.4em auto 0; width:18em}
.a-fig svg{width:100%; height:auto}
.a-fig .skin{fill:url(#phskin); stroke:rgba(238,232,220,.18); stroke-width:.8}
.a-fig .spine{stroke:rgba(242,217,138,.55); stroke-width:2.2; stroke-linecap:round}
.a-fig .pt{opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.2); transition:opacity .5s var(--ease), transform .6s var(--ease-out)}
.drawn .a-fig .pt{opacity:1; transform:none}
.a-fig .ck{stroke:#0A0B10; stroke-width:1.2}
.a-fabrep{position:absolute; right:1.1em; bottom:1.6em; z-index:35; display:flex; align-items:center; gap:.6em; height:3.6em; padding:0 1.2em 0 .5em; border-radius:2em;
  background:rgba(24,22,16,.94); box-shadow:inset 0 0 0 .08em rgba(242,217,138,.45), 0 1em 2em -.6em #000; font:500 1.05em/1 var(--sans); color:var(--a-ink)}
.a-fabrep i{width:2.7em; height:2.7em; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%,#FBE7A8,#C99A2E); color:#3A2A08}
.a-fabrep i svg{width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.8}
.a-making{text-align:center; padding:.6em 0 .4em}
.a-making .a-spin{width:5em; height:5em; margin:1.2em auto .9em; border-radius:50%; box-shadow:inset 0 0 0 .14em rgba(242,217,138,.4); position:relative}
.a-making .a-spin::before{content:''; position:absolute; inset:.7em; border-radius:50%; border:.18em solid transparent; border-top-color:var(--a-brass-hi); border-right-color:var(--a-brass); animation:spin 1.1s linear infinite}
.a-making .a-spin::after{content:''; position:absolute; left:50%; top:50%; width:.7em; height:.7em; margin:-.35em; border-radius:50%; background:var(--a-brass-hi)}
.a-making b{display:block; font:500 1.2em/1.2 var(--sans)}
.a-prog{height:.5em; margin:1em 1em .9em; border-radius:1em; background:rgba(238,232,220,.1); overflow:hidden}
.a-prog i{display:block; height:100%; width:0; border-radius:1em; background:linear-gradient(90deg,#D8B458,#F6E0A0); transition:width 2.6s linear}
.a-prog.go i{width:100%}

/* the report's pages, fanning out of the phone */
.pdfs{position:absolute; z-index:1; left:50%; top:50%; width:0; height:0}
.pdf{position:absolute; left:-95px; top:-130px; width:190px; aspect-ratio:1/1.414; border-radius:6px; padding:16px 15px; background:linear-gradient(180deg,#FBF8F1,#EFE9DC);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.2); color:#2A2620; opacity:0; transform:translate(0,0) rotate(0) scale(.7);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .5s var(--ease)}
.pdf b{display:block; font:600 7px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:#9A7A18}
.pdf h4{margin:6px 0 8px; font:500 13px/1.15 var(--sans); color:#1E1A14}
.pdf p{height:3px; margin:4px 0; border-radius:2px; background:#D9D1C1}
.pdf p.s{width:62%}
.pdf .pdf-fig{height:92px; margin:8px 0; border-radius:4px; background:radial-gradient(circle at 50% 40%,#E6DCC7,#D9CDB3); position:relative; overflow:hidden}
.pdf .pdf-fig::before{content:''; position:absolute; left:50%; top:10px; width:30px; height:74px; margin-left:-15px; border-radius:15px 15px 8px 8px; background:rgba(60,50,30,.18)}
.pdf .pdf-fig::after{content:''; position:absolute; left:50%; top:14px; bottom:10px; width:2px; margin-left:-1px; background:#C9A227}
.pdf .pdf-bars{display:flex; align-items:flex-end; gap:4px; height:56px; margin:10px 0 6px}
.pdf .pdf-bars i{flex:1; border-radius:2px 2px 0 0; background:#9FC4DD}
.pdf .pdf-bars i:nth-child(2n){background:#E8A48F}
.pdf .pdf-foot{position:absolute; left:15px; right:15px; bottom:10px; display:flex; justify-content:space-between; font:500 6px/1 var(--mono); color:#9A907E}
.pdfs.out .pdf{opacity:1}
.pdfs.out .pdf:nth-child(1){transform:translate(150px,-40px) rotate(8deg) scale(1)}
.pdfs.out .pdf:nth-child(2){transform:translate(110px,10px) rotate(-3deg) scale(1); transition-delay:.12s}
.pdfs.out .pdf:nth-child(3){transform:translate(70px,60px) rotate(-12deg) scale(1); transition-delay:.24s}
@media(min-width:1100px){
  .pdfs.out .pdf:nth-child(1){transform:translate(260px,-70px) rotate(8deg) scale(1)}
  .pdfs.out .pdf:nth-child(2){transform:translate(210px,10px) rotate(-3deg) scale(1)}
  .pdfs.out .pdf:nth-child(3){transform:translate(160px,90px) rotate(-11deg) scale(1)}
}
@media(max-width:900px){
  .pdf{width:140px; left:-70px; top:-99px; padding:11px} .pdf h4{font-size:10px} .pdf .pdf-fig{height:60px} .pdf .pdf-bars{height:36px}
  /* on a phone the pages settle over the phone's corner, as the calendar does */
  .pdfs{z-index:3}
  .pdfs.out .pdf:nth-child(1){transform:translate(96px,110px) rotate(9deg) scale(1)}
  .pdfs.out .pdf:nth-child(2){transform:translate(78px,142px) rotate(-2deg) scale(1)}
  .pdfs.out .pdf:nth-child(3){transform:translate(58px,176px) rotate(-10deg) scale(1)}
}

/* ---- scene: realign ---- */
.a-warn{display:flex; align-items:flex-start; gap:.6em; margin-top:.8em; padding:.8em .9em; border-radius:1.2em; background:rgba(226,91,63,.1); box-shadow:inset 0 0 0 .08em rgba(226,91,63,.45);
  font:400 .86em/1.3 var(--sans); color:var(--a-ink-2)}
.a-warn b{color:#F0876F; font-weight:500}
.a-warn svg{width:1.3em; height:1.3em; flex:none; fill:none; stroke:#F0876F; stroke-width:1.6}
.a-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:.5em; margin-top:.9em}
.a-tiles span{position:relative; display:flex; flex-direction:column; gap:.6em; padding:.8em .75em .9em; border-radius:1.1em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.12);
  font:500 .9em/1.2 var(--sans); color:var(--a-ink)}
.a-tiles span.cur{box-shadow:inset 0 0 0 .1em rgba(98,193,158,.65); background:rgba(98,193,158,.08)}
.a-tiles i{width:1.9em; height:1.9em; border-radius:50%; display:grid; place-items:center; font:600 .85em/1 var(--sans); font-style:normal; background:#E5C766; color:#2A1F05}
.a-tiles span.cur i{background:transparent; color:var(--a-jade); box-shadow:inset 0 0 0 .12em var(--a-jade)}
.a-tiles u{display:block; height:.32em; border-radius:1em; background:rgba(238,232,220,.1); overflow:hidden}
.a-tiles u::before{content:''; display:block; height:100%; width:var(--w,100%); border-radius:1em; background:var(--a-jade); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease-out)}
.drawn .a-tiles u::before{transform:none}
.a-big{display:flex; align-items:baseline; gap:.2em; margin-top:.5em; font:300 3em/1 var(--sans)}
.a-big small{font-size:.4em; color:var(--a-ink-2)}
.a-meter{height:.7em; margin-top:.7em; border-radius:1em; background:rgba(238,232,220,.1); overflow:hidden}
.a-meter i{display:block; height:100%; width:var(--w,70%); border-radius:1em; background:linear-gradient(90deg,#3E9C7C,var(--a-jade)); transform:scaleX(0); transform-origin:left; transition:transform 1.6s var(--ease-out)}
.drawn .a-meter i{transform:none}
.a-list{margin-top:.6em}
.a-li{display:grid; grid-template-columns:4.6em minmax(0,1fr) auto; align-items:center; gap:.7em; padding:.85em 0; border-top:.08em solid rgba(238,232,220,.09)}
.a-li:first-child{border-top:0}
.a-li .t{font:500 1.05em/1 var(--mono); color:var(--a-ink)}
.a-li b{display:block; font:500 1.05em/1.15 var(--sans); color:var(--a-ink)}
.a-li em{display:block; margin-top:.25em; font:400 .84em/1.2 var(--sans); font-style:normal; color:var(--a-dim)}
.a-add{width:2.5em; height:2.5em; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 .1em rgba(242,217,138,.55); color:var(--a-brass-hi); font:300 1.5em/1 var(--sans); transition:all .3s}
.a-add.done{background:rgba(98,193,158,.2); box-shadow:inset 0 0 0 .1em var(--a-jade); color:var(--a-jade); font-size:1em; font-weight:600}
.a-spark{margin-top:.8em}
.a-spark svg{width:100%; height:6em; overflow:visible}
.a-spark .ln{fill:none; stroke:var(--a-jade); stroke-width:1.6; stroke-linejoin:round; stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset 2.2s var(--ease-out)}
.drawn .a-spark .ln{stroke-dashoffset:0}
.a-spark .base{stroke:rgba(242,217,138,.6); stroke-width:1; stroke-dasharray:3 3}
.a-up{display:inline-flex; align-items:center; gap:.3em; padding:.35em .7em; border-radius:1em; background:rgba(98,193,158,.14); box-shadow:inset 0 0 0 .08em rgba(98,193,158,.4); font:500 .9em/1 var(--sans); color:#9FE0C6}

/* ---- scene: plan your day ---- */
.a-acts{display:flex; flex-direction:column; align-items:flex-start; gap:.5em; margin-top:.9em}
.a-act{display:inline-flex; align-items:center; gap:.55em; height:3em; padding:0 .5em 0 .9em; border-radius:1.6em; background:rgba(238,232,220,.05); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.12);
  font:500 1em/1 var(--sans); color:var(--a-ink); transition:all .35s var(--ease)}
.a-act::before{content:''; width:.6em; height:.6em; border-radius:50%; background:var(--a-jade)}
.a-act u{text-decoration:none; display:inline-flex; align-items:center; gap:.3em; height:2.1em; padding:0 .6em; border-radius:1em; background:rgba(160,147,219,.14); font:500 .82em/1 var(--sans); color:#C4BAF0}
.a-act u::before{content:''; width:.5em; height:.5em; border-radius:.1em; background:var(--e-earth)}
.a-act.lit{background:linear-gradient(180deg,rgba(237,165,82,.3),rgba(237,165,82,.12)); box-shadow:inset 0 0 0 .1em rgba(237,165,82,.75)}
.a-dayband{position:relative; height:3.6em; border-radius:.9em; overflow:hidden; display:flex; margin-top:.9em; clip-path:inset(0 100% 0 0 round .9em); transition:clip-path 1.6s cubic-bezier(.4,.1,.2,1)}
.drawn .a-dayband{clip-path:inset(0 0 0 0 round .9em)}
.a-dayband i{height:100%; flex:none}
.a-dayband .now{position:absolute; top:-.2em; bottom:-.2em; width:.18em; background:#fff; box-shadow:0 0 .6em #fff}
.a-win{display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:.6em; padding:.8em 0; border-top:.08em solid rgba(238,232,220,.09)}
.a-win b{display:block; font:600 1.15em/1 var(--sans); color:var(--a-ink)}
.a-win em{display:block; margin-top:.3em; font:400 .82em/1 var(--sans); font-style:normal; color:var(--a-dim)}
.a-win .q{padding:.4em .7em; border-radius:1em; font:500 .8em/1 var(--sans); background:rgba(98,193,158,.16); color:#9FE0C6}
.a-win .q.good{background:rgba(242,217,138,.14); color:var(--a-brass-hi)}
.a-win .pc{font:500 1em/1 var(--sans); color:var(--a-jade)}
.a-tthead{display:flex; justify-content:space-between; align-items:flex-start; padding:.2em .1em 0}
.a-tthead b{display:block; font:400 2em/1 var(--sans)}
.a-tthead span{display:block; margin-top:.3em; font:500 .88em/1 var(--sans); color:var(--a-brass)}
.a-next2{margin-top:.9em; padding:1em 1.2em; border-radius:1.6em; background:linear-gradient(180deg,rgba(237,165,82,.18),rgba(237,165,82,.05)); box-shadow:inset 0 0 0 .08em rgba(237,165,82,.4)}
.a-next2 .a-eye{color:var(--a-amber)}
.a-next2 b{display:block; margin-top:.35em; font:400 1.55em/1.1 var(--sans)}
.a-next2 span{display:block; margin-top:.3em; font:400 .95em/1 var(--sans); color:var(--a-ink-2)}
.a-ttrow{display:grid; grid-template-columns:4.2em minmax(0,1fr) auto; align-items:center; gap:.6em; padding:.75em 0; border-top:.08em solid rgba(238,232,220,.09); font:400 1em/1.2 var(--sans)}
.a-ttrow .t{font:500 1em/1 var(--mono); color:var(--a-ink-2)}
.a-ttrow svg{width:1.3em; height:1.3em; fill:none; stroke:var(--a-brass); stroke-width:1.6}
.a-ttrow.new{background:linear-gradient(90deg,rgba(237,165,82,.14),transparent); border-radius:.8em; padding-left:.4em; margin-left:-.4em}
.a-calbtn{display:flex; align-items:center; gap:.8em; margin-top:.9em; padding:.9em 1em; border-radius:1.5em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.12)}
.a-calbtn i{width:2.8em; height:2.8em; border-radius:.9em; display:grid; place-items:center; background:rgba(238,232,220,.06)}
.a-calbtn i svg{width:1.4em; height:1.4em; fill:none; stroke:var(--a-ink-2); stroke-width:1.6}
.a-calbtn b{display:block; font:500 1.02em/1.2 var(--sans)}
.a-calbtn em{display:block; margin-top:.2em; font:400 .8em/1.25 var(--sans); font-style:normal; color:var(--a-dim)}
.a-calbtn .a-btn{margin-left:auto}

/* the calendar the time table lands in */
.cal{position:absolute; z-index:3; width:236px; border-radius:20px; padding:16px 14px 14px; background:linear-gradient(180deg,#FBFAF7,#EFEBE3); color:#26221C;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.15); opacity:0; transform:translateY(20px) scale(.96); transition:opacity .6s var(--ease), transform .8s var(--ease-out)}
.cal.on{opacity:1; transform:none}
.cal-hd{display:flex; flex-direction:column; gap:6px}
.cal-hd span{font:600 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#D0453A}
.cal-hd b{font:600 15px/1.1 var(--sans); letter-spacing:-.01em; color:#1E1A14}
.cal-list{display:grid; gap:7px; margin-top:12px}
.cal-ev{display:flex; gap:10px; align-items:stretch; padding:8px 10px; border-radius:11px; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 6px 14px -8px rgba(0,0,0,.25);
  opacity:0; transform:translateY(-16px) scale(.96); transition:opacity .4s var(--ease), transform .7s cubic-bezier(.3,1.4,.4,1)}
.cal-ev i{width:4px; border-radius:2px; background:var(--c); flex:none}
.cal-ev b{display:block; font:600 12.5px/1.2 var(--sans); color:#1E1A14}
.cal-ev small{display:block; margin-top:2px; font:500 10.5px/1 var(--sans); color:#7A7266}
.cal.go .cal-ev{opacity:1; transform:none}
.cal-ev:nth-child(2){transition-delay:.22s} .cal-ev:nth-child(3){transition-delay:.44s} .cal-ev:nth-child(4){transition-delay:.66s}
.cal-foot{margin-top:10px; font:500 9.5px/1 var(--mono); letter-spacing:.06em; color:#9A9388}
#plan .cal{left:calc(50% + 122px); top:70px}
@media(max-width:1099px){ #plan .cal{left:auto; right:0; top:auto; bottom:6%; width:200px} }
@media(max-width:900px){ #plan .cal{right:max(0px, calc(50% - 250px)); bottom:4%; width:180px; padding:12px 10px 10px} .cal-ev{padding:6px 8px} .cal-ev b{font-size:11.5px} }
@media(max-width:480px){ #plan .cal{right:-4px; width:160px} }

/* ---- scene: match-making ---- */
.a-person{display:flex; align-items:center; gap:.8em; padding:.9em 1em; border-radius:1.4em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.12)}
.a-person + .a-person{margin-top:.6em}
.a-person.one{box-shadow:inset 0 0 0 .1em rgba(160,147,219,.55); background:rgba(160,147,219,.07)}
.a-person i{width:2.3em; height:2.3em; border-radius:50%; display:grid; place-items:center; flex:none; font:600 1em/1 var(--sans); font-style:normal; background:#E5C766; color:#2A1F05}
.a-person b{display:block; font:500 1.15em/1.1 var(--sans)}
.a-person em{display:block; margin-top:.3em; font:400 .84em/1 var(--sans); font-style:normal; color:var(--a-dim)}
.a-gauge{position:relative; width:13em; height:13em; margin:.6em auto 0}
.a-gauge svg{width:100%; height:100%; transform:rotate(-90deg)}
.a-gauge .t{fill:none; stroke:rgba(238,232,220,.08); stroke-width:2.6}
.a-gauge .f{fill:none; stroke:url(#phgauge); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 2s cubic-bezier(.3,.7,.2,1)}
.drawn .a-gauge .f{stroke-dashoffset:26.4}
.a-gauge div{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.a-gauge b{font:300 3em/1 var(--sans)}
.a-gauge b small{font-size:.4em; color:var(--a-ink-2)}
.a-gauge em{margin-top:.3em; font:600 .72em/1 var(--sans); font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:var(--a-dim)}
.a-kootas{display:grid; grid-template-columns:repeat(4,1fr); gap:.45em; margin-top:.9em}
.a-koota{padding:.55em .5em .6em; border-radius:.9em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1)}
.a-koota b{display:block; font:500 .8em/1.1 var(--sans); color:var(--a-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.a-koota em{display:block; margin-top:.3em; font:500 1em/1 var(--sans); font-style:normal; color:var(--a-ink)}
.a-koota em small{color:var(--a-dim); font-size:.75em}
.a-koota u{display:block; height:.28em; margin-top:.45em; border-radius:1em; background:rgba(238,232,220,.08); overflow:hidden; text-decoration:none}
.a-koota u::before{content:''; display:block; height:100%; width:var(--w); background:var(--c,var(--a-jade)); border-radius:1em; transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease-out) .4s}
.drawn .a-koota u::before{transform:none}
.a-parts .a-part{padding:.7em 0; border-top:.08em solid rgba(238,232,220,.09)}
.a-parts .a-part:first-child{border-top:0}
.a-part div{display:flex; justify-content:space-between; font:500 1em/1 var(--sans)}
.a-part div em{font-style:normal; color:var(--a-rose)}
.a-part u{display:block; height:.45em; margin-top:.5em; border-radius:1em; background:rgba(238,232,220,.08); overflow:hidden; text-decoration:none}
.a-part u::before{content:''; display:block; height:100%; width:var(--w); border-radius:1em; background:linear-gradient(90deg,#B0526A,var(--a-rose)); transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease-out)}
.drawn .a-part u::before{transform:none}
.a-tiles2{display:grid; grid-template-columns:1fr 1fr; gap:.5em; margin-top:.8em}
.a-tiles2 span{padding:.9em .9em .8em; border-radius:1.1em; background:rgba(228,125,147,.07); box-shadow:inset 0 0 0 .08em rgba(228,125,147,.3)}
.a-tiles2 b{display:block; font:300 1.8em/1 var(--sans)}
.a-tiles2 em{display:block; margin-top:.35em; font:400 .82em/1.2 var(--sans); font-style:normal; color:var(--a-ink-2)}
.a-matrix{display:grid; grid-template-columns:4.4em repeat(4,1fr); gap:.3em; margin-top:.9em; font:500 .82em/1 var(--sans); color:var(--a-ink-2)}
.a-matrix > span{display:grid; place-items:center; height:3.2em}
.a-matrix > span.n{justify-content:start; padding-left:.2em}
.a-matrix > i{display:block; height:3.2em; border-radius:.6em; opacity:0; transform:scale(.6); transition:opacity .4s var(--ease), transform .5s var(--ease-out)}
.drawn .a-matrix > i{opacity:1; transform:none}
.a-matrix > i.self{background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.08)}

/* ---- the everyday things: a bento of small, living pictures ---------------------------- */
.everyday{max-width:var(--wrap); margin:0 auto; padding:clamp(70px,10vh,120px) var(--gutter) clamp(40px,8vh,90px)}
.ev-head{max-width:760px}
.ev-head h2{margin-top:24px; font:300 clamp(34px,4vw,62px)/1.04 var(--serif); letter-spacing:-.02em}
.ev-head h2 em{font-style:normal; color:var(--gold-hi)}
.bento{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin-top:clamp(40px,7vh,70px)}
.tile{position:relative; grid-column:span 2; min-height:390px; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; border-radius:26px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,rgba(238,232,220,.035),rgba(238,232,220,.012)); box-shadow:inset 0 0 0 1px rgba(238,232,220,.08)}
.tile.wide{grid-column:span 4}
.tile.half{grid-column:span 3}
.tile h3{font:400 clamp(20px,1.7vw,25px)/1.15 var(--sans); letter-spacing:-.01em; color:var(--ink)}
.tile p{margin-top:8px; max-width:36ch; font:300 14.5px/1.55 var(--sans); color:var(--ink-2)}
/* The drawing has a band of its own at the top of the tile, and the words sit under it, at the foot. When the
   words wrap to more lines (a phone, a tablet) the tile grows, instead of the words running into the drawing
   (the user, 2026-09-25: the location and privacy tiles collided). */
.tile .art{position:relative; flex:none; height:210px; margin:-26px -26px 14px; display:grid; place-items:center}
.tile > h3{margin-top:auto}
/* width:auto, not .geo's 100%: with left at 40% that ran the map past the tile's edge, and the GPS panel with it */
.tile.wide .art{position:absolute; z-index:-1; inset:0 0 0 40%; width:auto; height:auto; margin:0}
.tile.wide{justify-content:flex-end; padding-right:62%}
@media(max-width:1000px){
  .bento{grid-template-columns:1fr 1fr}
  .tile, .tile.half{grid-column:span 1}
  .tile.wide{grid-column:span 2; padding-right:26px; min-height:0}
  .tile.wide .art{position:relative; z-index:auto; inset:auto; width:auto; height:290px; margin:-26px -26px 14px}
}
@media(max-width:640px){
  .bento{grid-template-columns:1fr}
  .tile, .tile.half, .tile.wide{grid-column:auto; min-height:0}
  .tile.wide .art{height:280px}
}
/* location: a pin that follows you, and the sunrise that moves with it */
.geo{width:100%; height:100%}
.geo svg{width:100%; height:100%}
.geo .grid line{stroke:rgba(238,232,220,.06)}
.geo .land{fill:rgba(126,182,222,.07); stroke:rgba(126,182,222,.22); stroke-width:1}
.geo .path{fill:none; stroke:rgba(98,193,158,.55); stroke-width:1.5; stroke-dasharray:4 5}
.geo .pin{transition:transform 1.6s cubic-bezier(.4,.1,.2,1)}
.geo .pin circle.halo{fill:rgba(98,193,158,.18); transform-box:fill-box; transform-origin:center; animation:halo 2.2s var(--ease-out) infinite}
@keyframes halo{0%{transform:scale(.4); opacity:1}100%{transform:scale(1.8); opacity:0}}
.geo .pin circle.dot{fill:#7DDDB0; stroke:#08090C; stroke-width:2}
.geo .city{font:500 10px var(--mono); letter-spacing:.14em; fill:var(--ink-2); text-transform:uppercase}
.geo-read{position:absolute; right:22px; top:22px; display:grid; gap:6px; padding:14px 16px; border-radius:16px; background:rgba(8,9,12,.72); box-shadow:inset 0 0 0 1px rgba(98,193,158,.3);
  font:400 12px/1.2 var(--sans); color:var(--ink-2); min-width:190px}
.geo-read b{font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#7DDDB0}
.geo-read span{display:flex; justify-content:space-between; gap:18px}
.geo-read em{font:400 13px/1 var(--mono); font-style:normal; color:var(--ink)}
/* on a phone the map is narrow, and the top right is where Pune and the route sit: the panel takes the free corner */
@media(max-width:640px){ .geo-read{top:auto; bottom:14px; left:14px; right:auto} }
/* privacy: a lock the orbits cannot touch */
.orb svg{width:62%; max-width:170px; display:block; overflow:visible}
.orb .o1, .orb .o2, .orb .o3{fill:none; stroke:var(--line-2)}
.orb .o2{stroke-dasharray:2 5}
.orb .o3{fill:rgba(125,185,158,.05); stroke:rgba(125,185,158,.4)}
.orb .spin1{transform-origin:120px 120px; animation:spin 16s linear infinite}
.orb .spin2{transform-origin:120px 120px; animation:spin 9s linear infinite reverse}
.orb .p1{fill:var(--gold-hi)} .orb .p2{fill:var(--ida)}
.orb .lock{fill:none; stroke:#7DDDB0; stroke-width:1.8; stroke-linejoin:round}
.privs{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.privs span{display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px; border-radius:999px; font:500 11.5px/1 var(--sans); color:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(238,232,220,.12)}
.privs span::before{content:'✓'; color:#7DDDB0; font-size:11px}
/* backup: a sealed copy crossing from one phone to the next */
.xfer{position:relative; width:260px; height:170px}
.xfer .mini{position:absolute; top:18px; width:74px; height:140px; border-radius:16px; background:#101116; box-shadow:inset 0 0 0 2px #26272D, 0 20px 40px -20px #000}
.xfer .mini::before{content:''; position:absolute; left:50%; top:7px; width:22px; height:6px; margin-left:-11px; border-radius:4px; background:#000}
.xfer .mini.a{left:6px} .xfer .mini.b{right:6px}
.xfer .mini i{position:absolute; left:10px; right:10px; height:5px; border-radius:3px; background:rgba(238,232,220,.1)}
.xfer .mini.b i{opacity:0; transition:opacity .4s}
.xfer.done .mini.b i{opacity:1}
.xfer .mini i:nth-child(1){top:30px} .xfer .mini i:nth-child(2){top:44px; right:26px} .xfer .mini i:nth-child(3){top:58px} .xfer .mini i:nth-child(4){top:72px; right:32px}
.xfer .mini.b i:nth-child(1){transition-delay:.1s} .xfer .mini.b i:nth-child(2){transition-delay:.2s} .xfer .mini.b i:nth-child(3){transition-delay:.3s} .xfer .mini.b i:nth-child(4){transition-delay:.4s}
.xfer .file{position:absolute; left:40px; top:62px; width:40px; height:48px; border-radius:6px; background:linear-gradient(180deg,#F2D98A,#C9A24A); box-shadow:0 10px 24px -8px rgba(217,184,76,.7);
  display:grid; place-items:center; transition:transform 1.6s cubic-bezier(.45,.05,.25,1), opacity .3s}
.xfer .file svg{width:18px; height:18px; fill:none; stroke:#3A2A08; stroke-width:1.8}
.xfer.go .file{transform:translate(140px,0) rotate(360deg)}
.xfer .arc{position:absolute; left:60px; right:60px; top:40px; height:60px; border:1.5px dashed rgba(242,217,138,.35); border-bottom:0; border-radius:80px 80px 0 0}
/* install: an icon settling onto a home screen */
.home-grid{display:grid; grid-template-columns:repeat(4,38px); gap:14px; padding:18px; border-radius:26px; background:rgba(238,232,220,.03); box-shadow:inset 0 0 0 1px rgba(238,232,220,.08)}
.home-grid i{width:38px; height:38px; border-radius:11px; background:rgba(238,232,220,.07)}
.home-grid i.app{position:relative; background:radial-gradient(circle at 50% 50%,#1A1710,#0B0A07); box-shadow:inset 0 0 0 1px rgba(242,217,138,.5), 0 0 22px rgba(217,184,76,.35);
  transform:translateY(-60px) scale(.4); opacity:0; transition:transform 1s cubic-bezier(.3,1.5,.4,1), opacity .4s}
.home-grid i.app svg{position:absolute; inset:7px; width:24px; height:24px; color:var(--gold)}
.tile.go .home-grid i.app{transform:none; opacity:1}
.tile .ctainstall{align-self:flex-start; margin-top:14px; height:44px; font-size:14px}
/* an expert, one tap away */
.chat{display:flex; flex-direction:column; gap:8px; width:250px}
.chat span{max-width:82%; padding:10px 13px; border-radius:16px; font:400 12.5px/1.35 var(--sans); opacity:0; transform:translateY(8px); transition:all .5s var(--ease)}
.chat span.me{align-self:flex-end; background:#1F5C49; color:#E8FFF6; border-bottom-right-radius:5px}
.chat span.them{align-self:flex-start; background:#1C1D22; color:var(--ink-2); border-bottom-left-radius:5px; box-shadow:inset 0 0 0 1px rgba(238,232,220,.08)}
.tile.go .chat span{opacity:1; transform:none}
.tile.go .chat span:nth-child(2){transition-delay:.9s} .tile.go .chat span:nth-child(3){transition-delay:1.8s}

/* ---- also inside: the rest of the app, named once each ---- */
.inside{margin-top:clamp(56px,9vh,96px)}
.inside-list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:24px; border-top:1px solid var(--line)}
.inside-list li{display:grid; grid-template-columns:36px minmax(0,1fr); gap:3px 12px; align-items:start; padding:22px 22px 24px 0; border-bottom:1px solid var(--line)}
.inside-list li:not(:nth-child(4n+1)){padding-left:22px; box-shadow:inset 1px 0 0 var(--line)}
.inside-list i{grid-row:span 2; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(214,177,115,.35); color:var(--gold-hi)}
.inside-list i svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.inside-list b{font:400 17px/1.25 var(--sans); color:var(--ink)}
.inside-list span{font:400 13px/1.45 var(--sans); color:var(--dim)}
/* the two that lead somewhere: the whole item is the link, laid out as the others are */
.inside-list li.go > a, .inside-list li.go > button{display:contents; font:inherit; color:inherit; text-decoration:none; cursor:pointer}
.inside-list li.go > button{background:none; border:0; padding:0; text-align:left}
.inside-list li.go b::after{content:' →'; color:var(--gold-hi); transition:margin .25s var(--ease-out)}
.inside-list li.go:hover b{color:var(--gold-hi)}
.inside-list li.go:hover b::after{margin-left:4px}
.inside-list li.go > a:focus-visible b, .inside-list li.go > button:focus-visible b{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
@media(max-width:1000px){ .inside-list{grid-template-columns:1fr 1fr} .inside-list li:not(:nth-child(4n+1)){padding-left:0; box-shadow:none} .inside-list li:nth-child(2n){padding-left:22px; box-shadow:inset 1px 0 0 var(--line)} }
@media(max-width:560px){ .inside-list{grid-template-columns:1fr} .inside-list li:nth-child(2n){padding-left:0; box-shadow:none} .inside-list li{padding:16px 0} }

/* ---- proof ------------------------------------------------------------------------------- */
.proof{max-width:var(--wrap); margin:0 auto; padding:clamp(90px,14vh,170px) var(--gutter) clamp(90px,14vh,160px)}
.proof h2{margin-top:24px; font:300 clamp(34px,4vw,62px)/1.04 var(--serif); letter-spacing:-.02em; max-width:18ch}
.proof h2 em{font-style:normal; color:var(--gold-hi)}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(40px,7vh,70px); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
@media(max-width:960px){.stats{grid-template-columns:1fr 1fr}}
.stat{padding:34px 24px 34px 0}
.stat + .stat{padding-left:24px; border-left:1px solid var(--line)}
@media(max-width:960px){.stat:nth-child(3){padding-left:0; border-left:0} .stat:nth-child(n+3){border-top:1px solid var(--line)}}
.stat b{display:flex; align-items:baseline; gap:6px; font:300 clamp(54px,5.4vw,84px)/.95 var(--serif); letter-spacing:-.012em}
.stat b em{font-style:normal; font-variant-numeric:tabular-nums}
.stat small{font:400 18px/1 var(--sans); color:var(--dim); letter-spacing:0}
.stat span{display:block; margin-top:18px; font:300 14px/1.5 var(--sans); color:var(--ink-2); max-width:24ch}

/* ---- contact and the closing card (kept) ------------------------------------------------ */
.stack{position:relative}
.stack > .stack-prev{position:sticky; top:72px; z-index:0}
.stack > .stack-card{position:relative; z-index:2; box-shadow:0 -24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04)}
.stack-dim{position:fixed; left:0; right:0; top:0; height:100vh; z-index:1; display:block; pointer-events:none;
  background:#06070A; opacity:0; transform:translate3d(0,-100vh,0); will-change:transform, opacity}
@media (prefers-reduced-motion:reduce){ .stack > .stack-prev{position:relative; top:auto} .stack-dim{display:none} }
.measuring .stack > .stack-prev{position:relative !important; top:auto !important}
.ch{position:relative; max-width:var(--wrap); margin:0 auto; padding:clamp(110px,16vh,190px) var(--gutter) 0}
#contact.stack-prev{padding-bottom:clamp(160px,26vh,300px)}
@media(max-width:700px){ #contact.stack-prev{padding-bottom:clamp(110px,18vh,180px)} }
.contact{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,6vw,100px); align-items:start;
  padding-top:28px; border-top:1px solid var(--line)}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.contact > *{min-width:0}
.contact-say h2{margin-top:24px; font:300 clamp(34px,4.2vw,64px)/1.06 var(--serif); letter-spacing:-.01em; max-width:15ch}
.contact-say h2 em{font-style:normal; color:var(--gold-hi)}
.contact-say .lead{margin-top:22px}
.direct{display:flex; flex-direction:column; gap:8px; margin-top:40px; padding-top:22px; border-top:1px solid var(--line)}
.direct a{font:300 26px/1.1 var(--serif); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; transition:color .3s}
.direct a:hover{color:var(--gold-hi)}
.direct span{font:400 13px/1 var(--sans); color:var(--dim)}
.cgrid{display:grid; gap:30px 36px}
@media(min-width:620px){.cgrid.two{grid-template-columns:1fr 1fr}}
.cfield{display:block; min-width:0}
.cfield > span{display:block; margin-bottom:10px; font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.cfield > span i{font-style:normal; color:var(--gold)}
.cfield input, .cfield select, .cfield textarea{
  width:100%; padding:10px 0 14px; border-radius:0; background:transparent; border:0; border-bottom:1px solid var(--line-2); color:var(--ink);
  font:300 19px/1.4 var(--serif); -webkit-appearance:none; appearance:none; transition:border-color .4s}
.cfield select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 6px) 50%,calc(100% - 1px) 50%; background-size:5px 5px; background-repeat:no-repeat}
.cfield select option{background:#111217; color:var(--ink)}
.cfield textarea{min-height:120px; resize:vertical}
.cfield input:focus, .cfield select:focus, .cfield textarea:focus{outline:none; border-color:var(--gold)}
.cfield input::placeholder, .cfield textarea::placeholder{color:#55524C}
.cpot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.csend{margin-top:26px; display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center}
.csend button{height:52px; padding:0 28px; border-radius:999px; background:var(--ink); color:var(--ground); border:0; font:500 15px/1 var(--sans); cursor:pointer; transition:background .3s}
.csend button:hover{background:var(--gold-hi)}
.csend button[disabled]{opacity:.5; cursor:default}
.csend .note{flex:1; min-width:min(210px,100%)}
.cmsg{margin-top:18px; padding:14px 16px; border-radius:14px; font:400 14px/1.6 var(--sans)}
.cmsg.err{color:#E89A7B; background:rgba(216,115,77,.08); border:1px solid rgba(216,115,77,.35)}
.cdone h3{margin:18px 0 12px; font:300 36px/1.05 var(--serif)}
.cdone p{color:var(--ink-2)}
.close{position:relative; padding:clamp(140px,22vh,240px) var(--gutter); text-align:center; overflow:hidden;
  border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0; border-top:1px solid rgba(235,211,162,.4);
  background:
    radial-gradient(ellipse 60% 45% at 50% 70%,rgba(235,211,162,.18),transparent 70%),
    radial-gradient(ellipse 45% 40% at 20% 20%,rgba(143,134,214,.14),transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 30%,rgba(216,115,77,.10),transparent 70%),
    linear-gradient(180deg,#0E0D1A 0%,#16121F 45%,#17120F 78%,var(--ground) 100%)}
.close-in{position:relative}
.close h2{margin:40px auto 44px; font:300 clamp(44px,5.6vw,90px)/1.02 var(--serif); letter-spacing:-.015em}
.close h2 em{font-style:normal; color:var(--gold-hi)}
.close .note{margin-top:22px}
.close .herocta{justify-content:center; opacity:1; transform:none; margin-top:0}
.breath{position:relative; width:110px; height:110px; margin:0 auto}
.breath i{position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 1px var(--ida); animation:breathe 8s var(--ease) infinite}
.breath i:nth-child(2){box-shadow:inset 0 0 0 1px var(--pin); animation-delay:-4s}
.breath i:nth-child(3){inset:46%; background:var(--gold-hi); box-shadow:0 0 24px var(--gold)}
@keyframes breathe{0%,100%{transform:scale(.5); opacity:.15}50%{transform:scale(1.15); opacity:1}}

/* ---- the progress rail ----------------------------------------------------------------- */
.rail{position:fixed; left:clamp(10px,1.4vw,26px); top:50%; transform:translateY(-50%); z-index:40; display:none;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease)}
@media(min-width:1180px){ .rail{display:block} }
.rail.show{opacity:1; pointer-events:auto}
.rail ol{position:relative; display:flex; flex-direction:column; gap:clamp(8px,1.6vh,14px); margin:0; padding:0; list-style:none}
.rail-track{position:absolute; left:4px; top:4px; bottom:4px; width:2px; border-radius:2px; background:rgba(238,232,220,.12); overflow:hidden}
.rail-fill{position:absolute; inset:0; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); transform-origin:top; transform:scaleY(0); will-change:transform}
.rail a{position:relative; display:flex; align-items:center; gap:12px; height:10px; text-decoration:none}
.rail a i{position:relative; flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--ground); border:1.5px solid rgba(238,232,220,.28); transition:border-color .4s, background .4s, box-shadow .4s, transform .4s}
.rail a:hover i{border-color:var(--gold-hi)}
.rail a.on i{background:var(--gold-hi); border-color:var(--gold-hi); box-shadow:0 0 0 4px rgba(214,177,115,.18), 0 0 12px rgba(235,211,162,.6); transform:scale(1.15)}
.rail a span{padding:5px 10px; border-radius:999px; background:rgba(8,9,12,.88); border:1px solid rgba(238,232,220,.1);
  font:500 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
  opacity:0; transform:translateX(-6px); transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); pointer-events:none}
.rail a:hover span, .rail a:focus-visible span{opacity:1; transform:none; color:var(--ink)}
@media(min-width:1440px){ .rail.moving a.on span{opacity:1; transform:none; color:var(--gold-hi); border-color:rgba(214,177,115,.35)} }

/* satellites: small pieces of the app that float beside a phone, a little slower than the page */
.sat{position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; white-space:nowrap;
  background:rgba(14,15,20,.86); box-shadow:inset 0 0 0 1px rgba(238,232,220,.1), 0 24px 50px -20px rgba(0,0,0,.9);
  font:400 12.5px/1.2 var(--sans); color:var(--ink-2); transform:translate3d(0,var(--par,0px),0); will-change:transform}
.sat b{display:block; font:500 13.5px/1.15 var(--sans); color:var(--ink)}
.sat em{display:block; margin-top:3px; font:400 11px/1 var(--mono); font-style:normal; color:var(--dim)}
.sat i{width:10px; height:10px; border-radius:50%; flex:none}
.sat.l{right:calc(50% + 118px)}
.sat.r{left:calc(50% + 118px)}
@media(max-width:1099px){ .sat{display:none} }

/* ---- motion, paused and reduced -------------------------------------------------------- */
.paused, .paused *, .paused *::before, .paused *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  .rv, .scope, .hero .lead, .herocta, .hero .eyebrow, .live{opacity:1; transform:none}
  .mask > span > span{transform:none}
  .a-v, .a-sheet, .a-band, .a-dayband, .pdf, .cal, .cal-ev{transition:none !important}
}

/* ---- pieces the scenes switch on ---- */
.a-cbars{display:grid; gap:.5em; margin-top:.8em}
.a-cbar{display:grid; grid-template-columns:6.8em minmax(0,1fr) 2.6em; align-items:center; gap:.6em; font:500 .85em/1 var(--sans); color:var(--a-ink-2)}
.a-cbar b{font-weight:500}
.a-cbar u{display:block; height:.5em; border-radius:1em; background:rgba(238,232,220,.08); overflow:hidden; text-decoration:none}
.a-cbar u::before{content:''; display:block; height:100%; width:var(--w); border-radius:1em; background:var(--c)}
.a-cbar em{font-style:normal; text-align:right; color:var(--a-ink)}
.a-breathe{transition:box-shadow .6s var(--ease)}
.a-breathe.glow{box-shadow:inset 0 0 0 .1em rgba(236,119,96,.75), 0 0 2.6em -.2em rgba(236,119,96,.6)}
.a-ring .f.go{stroke-dashoffset:18}
.a-fig{width:15em}
.a-fig.drawn .pt{opacity:1; transform:none}

/* ---- pricing: free to use, and two guided plans (the app's own, lite/src/ui-lite-guide.js) ---- */
#s-price{--slide-bg:radial-gradient(ellipse 70% 50% at 50% 12%,rgba(214,177,115,.14),transparent 70%),radial-gradient(ellipse 50% 40% at 85% 80%,rgba(200,135,46,.10),transparent 70%),linear-gradient(180deg,#120E08,#0B0A08 55%,#08090C)}
.pricing{max-width:var(--wrap); margin:0 auto; padding:clamp(84px,12vh,140px) var(--gutter) clamp(90px,13vh,150px)}
.pr-head h2{margin-top:24px; font:300 clamp(34px,4vw,62px)/1.04 var(--serif); letter-spacing:-.02em; max-width:18ch}
.pr-head h2 em{font-style:normal; color:var(--gold-hi)}
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(40px,7vh,70px); border-radius:30px; overflow:hidden;
  background:linear-gradient(180deg,rgba(238,232,220,.035),rgba(238,232,220,.012)); box-shadow:inset 0 0 0 1px rgba(238,232,220,.09), 0 40px 90px -50px rgba(0,0,0,.9)}
.plan{position:relative; display:flex; flex-direction:column; min-width:0; padding:30px 30px 32px}
.plan + .plan{box-shadow:inset 1px 0 0 rgba(238,232,220,.08)}
.plan.complete{background:radial-gradient(ellipse 90% 55% at 50% 0%,rgba(214,177,115,.16),transparent 72%),linear-gradient(180deg,rgba(214,177,115,.06),transparent 60%)}
.plan.complete::before{content:''; position:absolute; left:14%; right:14%; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-hi),transparent)}
.plan-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.plan-k{font:500 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.plan-tag{display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px; font:500 11.5px/1 var(--sans); color:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(238,232,220,.14); white-space:nowrap}
.plan.complete .plan-tag{color:#1A1307; background:linear-gradient(100deg,var(--gold-hi),var(--gold)); box-shadow:0 8px 22px -10px rgba(235,211,162,.7)}
.plan-art{display:grid; place-items:center; margin:22px 0 6px}
.plan-art svg{width:118px; height:118px; overflow:visible}
.pa-rim{fill:none; stroke:rgba(235,211,162,.5); stroke-width:1.2}
.pa-rim.dim{stroke:rgba(235,211,162,.2); stroke-dasharray:2 4}
.pa-tick{stroke:rgba(235,211,162,.7); stroke-width:1.6; stroke-linecap:round}
.pa-hand{stroke:var(--gold-hi); stroke-width:2.2; stroke-linecap:round; transform-origin:60px 60px; animation:spin 40s linear infinite}
.pa-hub{fill:var(--gold-hi)}
.pw-trk{fill:none; stroke:rgba(238,232,220,.07); stroke-width:9; stroke-linecap:round}
.pw-arc{fill:none; stroke-width:9; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.3s var(--ease-out) var(--d,0s)}
.plans.in .pw-arc{stroke-dashoffset:0}
.pw-mo{font:500 8px var(--mono); fill:rgba(238,232,220,.3); text-anchor:middle; dominant-baseline:central}
.pw-mo.on{fill:var(--gold-hi)}
.pw-n{font:300 24px var(--serif); fill:var(--ink); text-anchor:middle; dominant-baseline:central}
.pw-k{font:500 7px var(--mono); letter-spacing:.2em; fill:var(--gold-lo); text-anchor:middle; text-transform:uppercase}
.plan-price{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:10px; text-align:center}
.plan-price b{font:300 clamp(38px,3.4vw,50px)/1 var(--serif); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.plan.complete .plan-price b{background:linear-gradient(100deg,#FFF3D6,var(--gold-hi) 55%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; padding:0 .04em .1em; margin-bottom:-.1em}
.plan-price em{font:400 12.5px/1 var(--mono); font-style:normal; color:var(--dim)}
.plan-line{margin-top:14px; text-align:center; font:300 16px/1.45 var(--sans); color:var(--ink-2)}
.plan-gets{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin:24px 0 26px; padding-top:22px; border-top:1px solid rgba(238,232,220,.08)}
.plan-gets li{display:flex; align-items:center; gap:10px; min-width:0; font:400 13.5px/1.3 var(--sans); color:var(--ink)}
.plan-gets i{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--gold-hi); background:rgba(214,177,115,.08); box-shadow:inset 0 0 0 1px rgba(214,177,115,.25)}
.plan-gets i svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.plan.free .plan-gets i{color:#9FE0C6; background:rgba(98,193,158,.08); box-shadow:inset 0 0 0 1px rgba(98,193,158,.28)}
.plan-cta{margin-top:auto; display:flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 clamp(14px,4vw,22px); border-radius:999px; text-decoration:none;
  font:500 15px/1 var(--sans); color:#1B1407; background:linear-gradient(180deg,#F6E0A0,#D8B458); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -14px rgba(217,184,76,.7);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out)}
.plan-cta em{font:500 12px/1 var(--sans); font-style:normal; opacity:.7}
.plan-cta:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 20px 40px -14px rgba(217,184,76,.8)}
.plan-cta.ghost{color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1px rgba(238,232,220,.2)}
.plan-cta.ghost:hover{background:rgba(238,232,220,.05); box-shadow:inset 0 0 0 1px rgba(238,232,220,.35)}
.pr-path{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 28px; margin-top:26px; font:400 13px/1.3 var(--sans); color:var(--ink-2)}
.pr-path-k{font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lo)}
.pp{display:inline-flex; align-items:center; gap:9px}
.pp i{width:26px; height:6px; border-radius:6px}
.pp b{font:500 12px/1 var(--mono); color:var(--ink); margin-right:2px}
.pp.s1 i{background:#F3DFA6} .pp.s2 i{background:#D9B84C} .pp.s3 i{background:#C8872E}
.pr-talk{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; max-width:620px; margin:38px auto 0; padding:16px 18px 16px 16px; border-radius:24px; text-decoration:none;
  background:radial-gradient(120% 140% at 0% 50%,rgba(214,177,115,.16),transparent 60%),rgba(238,232,220,.025); box-shadow:inset 0 0 0 1px rgba(214,177,115,.3);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out)}
.pr-talk:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(214,177,115,.55)}
.pr-talk-art{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#3A2A08; background:radial-gradient(circle at 35% 30%,#FBE7A8,#C99A2E); box-shadow:0 0 26px rgba(217,184,76,.45)}
.pr-talk-art svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.pr-talk-tx{display:flex; flex-direction:column; gap:5px; min-width:0}
.pr-talk-tx i{align-self:flex-start; font:500 10px/1 var(--mono); font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:#1A1307; background:var(--gold-hi); padding:5px 9px; border-radius:999px}
.pr-talk-tx b{font:400 20px/1.1 var(--sans); color:var(--ink)}
.pr-talk-tx em{font:400 13px/1 var(--sans); font-style:normal; color:var(--dim)}
.pr-talk-go{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--gold-hi); box-shadow:inset 0 0 0 1px rgba(214,177,115,.4)}
.pr-talk-go svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.pr-fine{max-width:70ch; margin:26px auto 0; text-align:center; font:400 12.5px/1.6 var(--sans); color:var(--dim)}
.pr-fine a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2); white-space:nowrap}
.pr-fine a:hover{color:var(--gold-hi)}
@media(max-width:1060px){
  .plans{grid-template-columns:1fr 1fr}
  .plan.free{grid-column:1 / -1; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:30px; align-items:center; box-shadow:inset 0 -1px 0 rgba(238,232,220,.08)}
  .plan.free .plan-top{grid-column:1 / -1}
  .plan.free .plan-art{grid-row:2 / span 2; margin:16px 0 0}
  .plan.free .plan-price, .plan.free .plan-line{align-items:flex-start; text-align:left}
  .plan.free .plan-gets{grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr))}
  .plan.free .plan-cta{grid-column:1 / -1}
  .plan.basic{box-shadow:none}
}
@media(max-width:680px){
  .plans{grid-template-columns:1fr}
  .plan{padding:26px 22px 26px}
  .plan + .plan{box-shadow:inset 0 1px 0 rgba(238,232,220,.08)}
  /* a column again, and its button the card's full width: the tablet layout's align-items:center held on here,
     and shrank "Open your dashboard" to its words with no room at either end (the user, 2026-09-25) */
  .plan.free{display:flex; align-items:stretch; box-shadow:none}
  .plan.free .plan-price, .plan.free .plan-line{align-items:center; text-align:center}
  .plan.free .plan-gets{grid-template-columns:1fr 1fr}
  .pr-talk{grid-template-columns:auto minmax(0,1fr); gap:14px}
  .pr-talk-go{display:none}
  .pr-talk-tx b{font-size:18px}
}
@media(max-width:360px){ .plan-gets{grid-template-columns:1fr} }

/* ---- the engines' dial, trued (the user, 2026-09-25): the hand from the exact centre, and the present and the key
   as rows of their own under the ring — the pill was pinned over the key and the two collided ---- */
.eng-viz{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px}
.eng-svg{width:min(100%, calc(100vh - 250px), 600px)}
.eng-svg .needle-hub{fill:#15120C; stroke:#FFF6E0; stroke-width:2}
.eng-svg .needle-pin{fill:#FFF6E0}
.eng-now{position:static; left:auto; bottom:auto; transform:translateY(6px)}
.eng-now.on{transform:none}
.eng-key{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px; margin-top:0}
.eng-key .ek-g{display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px}
.eng-key .ek-g > em{font:500 10px/1 var(--mono); font-style:normal; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lo)}
.eng-key .ek-g > span{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
@media(max-width:980px){
  .eng-viz{gap:12px}
  .eng-svg{width:min(100%, 42vh, 500px)}
  .eng-now{bottom:auto}
}
/* ---- "Our innovation" on a phone or tablet (the user, 2026-09-27: "too tight and little far below the animation
   ring"): the words sit just under the key instead of in the middle of what is left, with room between the label, the
   title and the step; and a name never breaks at its own hyphen ---- */
.eng-name .nw{white-space:nowrap}
.eng-name{text-wrap:balance}
@media(max-width:980px){
  .eng-stage{align-items:start}
  .eng-copy{padding-top:clamp(8px,2.4vh,26px)}
  .eng-name{margin-top:clamp(8px,1.7vh,16px); line-height:1.1}
  .eng-steps{margin-top:clamp(12px,2.3vh,24px)}
  .eng-steps li{gap:6px 14px; padding-top:12px}
  .eng-steps span{line-height:1.5}
}
@media(max-width:980px) and (max-height:700px){
  .eng-copy{padding-top:0}
  .eng-name{margin-top:6px; line-height:1.04}
  .eng-steps{margin-top:10px}
  .eng-steps li{padding-top:6px}
}

/* ---- under Download WebApp: every kind of device it installs on (the user, 2026-09-25) — a caption, not a row of
   badges: tiny type, gold points between, centred under its own button ---- */
.hero .herocta{align-items:flex-start}
.dl-wrap{display:inline-flex; flex-direction:column; align-items:center; gap:11px}
.platforms{display:inline-flex; align-items:center; gap:7px; font:500 10.5px/1 var(--mono); letter-spacing:.06em; color:var(--dim); white-space:nowrap}
.platforms span{transition:color .4s var(--ease)}
.dl-wrap:hover .platforms span{color:var(--ink-2)}
.platforms i{flex:none; width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:.75}
@media(max-width:360px){ .platforms{gap:6px; font-size:10px; letter-spacing:.03em} }
/* the platforms by their marks (the user, 2026-09-27): Android, iOS, Windows, Mac, Linux, each named on hover */
.platforms{gap:13px}
.platforms .pf{position:relative; display:inline-grid; place-items:center; width:20px; height:20px; color:var(--dim)}
.platforms .pf svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.platforms .pf:hover{color:var(--gold-hi)}
.platforms .pf::after{content:attr(data-name); position:absolute; left:50%; bottom:calc(100% + 7px); transform:translate(-50%,4px); padding:5px 8px; border-radius:7px;
  font:500 9.5px/1 var(--mono); letter-spacing:.08em; color:var(--ink); background:rgba(20,19,32,.95); box-shadow:inset 0 0 0 1px rgba(235,211,162,.22);
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease)}
.platforms .pf:hover::after{opacity:1; transform:translate(-50%,0)}
@media(max-width:360px){ .platforms{gap:11px} }
/* stacked under Open your dashboard (a phone), the button and its caption keep to the same left edge */
@media(max-width:560px){ .dl-wrap{align-items:flex-start} }

/* ---- share: a disc beside Download WebApp (the user, 2026-09-25), the caption still centred under its own button.
   A phone or tablet opens its own share sheet (WhatsApp, Telegram and every app it has); a computer, the card below. ---- */
.dl-wrap{display:inline-grid; grid-template-columns:auto auto; column-gap:12px; row-gap:11px; align-items:center; justify-items:center}
/* the caption centred under the pair, the button and the disc together (the user, 2026-09-25). It has no width of its
   own, so however long it runs it never widens a column and pushes the disc off the button */
@media(max-width:560px){ .dl-wrap{justify-items:start} }
/* ---- where it runs (the user, 2026-09-27): every popular browser, a gold rule, then every kind of device, in one row
   under the three buttons and centred on them taken together. The buttons are a grid as wide as themselves: side by
   side where the column has room for them, stacked where it has not (a container query on the hero's words, so the
   narrow two-column desktop is caught too). The row spans that grid with no width of its own (width 0, min-width
   100%), so it is centred on the buttons, and however long it runs it never widens their grid ---- */
.hero-copy{container-type:inline-size}
.hero .herocta{display:grid; grid-template-columns:auto; justify-items:start; align-items:center; gap:16px 22px; width:fit-content; max-width:100%}
@container (min-width:520px){ .hero .herocta{grid-template-columns:auto auto} }
.hero .herocta > .platforms{grid-column:1 / -1; justify-self:stretch; width:0; min-width:100%; justify-content:center; gap:12px; padding:0; margin-top:2px}
.platforms .pf-bar{flex:none; width:1px; height:18px; margin:0 5px; border-radius:0; opacity:1; background:linear-gradient(180deg, transparent, rgba(235,211,162,.6), transparent)}
@container (max-width:519.98px){
  .hero .herocta > .platforms{gap:5px}
  .hero .herocta > .platforms .pf{width:16px; height:16px}
  .hero .herocta > .platforms .pf svg{width:15px; height:15px}
  .hero .herocta > .platforms .pf-bar{height:15px; margin:0 4px}
}
/* ---- what it costs, and where it runs (the user, 2026-09-28: "Free | No Ads | Full access", then "Runs Locally |
   Private", with more room above it): a line under the buttons, centred on them the way the platforms row is and with
   no width of its own; a gold tick before each, a gold rule for each bar. Two groups: one line where the buttons sit side
   by side, the second group under the first where they stack (a phone), so no bar is left hanging at a line's end.
   26px under the buttons; the platforms row and the counters keep their own gaps below it ---- */
.hero .herocta > .perks{grid-column:1 / -1; justify-self:stretch; width:0; min-width:100%; display:flex; justify-content:center; align-items:center;
  gap:12px; margin-top:10px; font:500 12.5px/1 var(--body); letter-spacing:.02em; color:var(--ink-2); white-space:nowrap}
.perks .pk-g{display:inline-flex; align-items:center; gap:12px}
.perks .pk-g > span{display:inline-flex; align-items:center; gap:6px}
.perks svg{flex:none; width:13px; height:13px; fill:none; stroke:var(--gold); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.perks i{flex:none; width:1px; height:13px; background:linear-gradient(180deg, transparent, rgba(235,211,162,.6), transparent)}
@container (max-width:519.98px){
  .hero .herocta > .perks{flex-direction:column; gap:10px; font-size:12px}
  .perks .pk-g{gap:9px}
  .perks > .pk-gb{display:none}
}
@media(max-width:340px){ .hero .herocta > .perks{font-size:11.5px} .perks .pk-g{gap:7px} .perks .pk-g > span{gap:4px} }
/* the closing section's pair: the button and its disc as one, the same 12px apart as in the hero */
.dl-pair{display:inline-flex; align-items:center; gap:12px}
.ctashare{grid-column:2; grid-row:1; flex:none; width:52px; height:52px; padding:0; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  color:var(--gold-hi); background:rgba(214,177,115,.07); border:1px solid rgba(214,177,115,.42);
  transition:transform .5s var(--ease-out), background .35s var(--ease), color .35s var(--ease)}
.ctashare:hover{transform:translateY(-2px); background:rgba(214,177,115,.16); color:var(--ink)}
.ctashare:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.ctashare svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.sharesheet{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; opacity:0; transition:opacity .22s var(--ease)}
.sharesheet.in{opacity:1}
.sharesheet-veil{position:absolute; inset:0; background:rgba(4,5,7,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.sharesheet-card{position:relative; width:min(420px, 100%); display:grid; gap:18px; padding:22px 22px 20px; border-radius:24px; color:var(--ink);
  background:radial-gradient(120% 80% at 0% 0%, rgba(214,177,115,.12), transparent 60%), linear-gradient(180deg, #14151B, #0B0C10);
  box-shadow:inset 0 0 0 1px rgba(214,177,115,.24), 0 40px 80px -30px rgba(0,0,0,.8); transform:translateY(10px); transition:transform .3s var(--ease-out)}
.sharesheet.in .sharesheet-card{transform:none}
.sharesheet-hd{display:flex; align-items:center; justify-content:space-between; gap:14px}
.sharesheet-k{display:block; margin-bottom:6px; font:500 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.sharesheet-hd h3{margin:0; font:500 19px/1.25 var(--sans); letter-spacing:-.01em}
.sharesheet-x{flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); cursor:pointer}
.sharesheet-x svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.sharesheet-x:hover{color:var(--ink); border-color:var(--line-3)}
.sharesheet-grid{display:flex; flex-wrap:wrap; justify-content:center; row-gap:16px}
.sh-t{flex:0 0 25%; display:grid; justify-items:center; gap:8px; padding:0; border:0; background:none; color:var(--ink-2); text-decoration:none; cursor:pointer; font:500 11.5px/1.2 var(--sans); text-align:center}
.sh-t i{width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:var(--gold-hi); background:rgba(214,177,115,.07);
  box-shadow:inset 0 0 0 1px rgba(214,177,115,.3); transition:transform .35s var(--ease-out), background .3s var(--ease), color .3s var(--ease)}
.sh-t i svg{width:20px; height:20px}
.sh-t i svg.fill{fill:currentColor}
.sh-t i svg.line{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.sh-t:hover i, .sh-t:focus-visible i{transform:translateY(-2px); background:rgba(214,177,115,.16); color:var(--ink)}
.sh-t:hover, .sh-t:focus-visible{color:var(--ink)}
.sh-t:focus-visible{outline:none}
.sh-t:focus-visible i{box-shadow:inset 0 0 0 1px rgba(214,177,115,.3), 0 0 0 2px var(--gold)}
.sh-t.done i{color:#9FE0C6; box-shadow:inset 0 0 0 1px rgba(98,193,158,.45)}
.sharesheet-url{display:flex; align-items:center; gap:10px; min-width:0; padding:11px 14px; border-radius:14px; font:400 12.5px/1.2 var(--mono); color:var(--dim);
  background:rgba(238,232,220,.03); box-shadow:inset 0 0 0 1px var(--line)}
.sharesheet-url span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:560px){
  .sharesheet{place-items:end stretch; padding:0}
  .sharesheet-card{width:100%; border-radius:24px 24px 0 0; padding-bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateY(24px)}
}
@media(prefers-reduced-motion:reduce){ .sharesheet, .sharesheet-card, .ctashare, .sh-t i{transition:none} }

/* ---- the hero's eyebrow on one line on every phone (the user, 2026-09-25): it never wraps, and on a narrow screen
   the spacing and the rule before it give way first ---- */
.hero .eyebrow{white-space:nowrap; max-width:100%}
@media(max-width:430px){ .hero .eyebrow{font-size:10.5px; letter-spacing:.15em; gap:10px} }
@media(max-width:380px){ .hero .eyebrow{font-size:10px; letter-spacing:.1em; gap:8px} .hero .eyebrow::before{width:14px} }
@media(max-width:330px){ .hero .eyebrow{letter-spacing:.06em} .hero .eyebrow::before{display:none} }


/* ---- the share disc wears Download's white (the user, 2026-09-25: "make bg of share button white too") ---- */
.ctashare{color:#0B0A08; background:var(--ink); border-color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 12px 40px -12px rgba(235,211,162,.35)}
.ctashare:hover{color:#0B0A08; background:#FFF8EA; border-color:#FFF8EA; box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 18px 50px -12px rgba(235,211,162,.5)}

/* ==== 07 · THE TIME TABLE and 08 · SANKALPA — two chapters redrawn from Lite's own screens (the user, 2026-09-25:
   "must show the real UI/UX design of their respective features in the web app"): ui-timetable.js (.tst-*) and
   ui-lite-sankalpa.js (.lsk-*), their colours, shapes and words, at the phone's scale ==== */
#s-tt{--slide-bg:radial-gradient(ellipse 70% 60% at 72% 45%,rgba(242,217,138,.12),transparent 70%),linear-gradient(180deg,#110F09,#0A0907); --acc-line:rgba(242,217,138,.5)}
#s-sank{--slide-bg:radial-gradient(ellipse 70% 60% at 28% 50%,rgba(88,204,210,.14),transparent 70%),linear-gradient(180deg,#071011,#08090B); --acc-line:rgba(88,204,210,.5)}
#timetable{--acc:var(--a-brass-hi); --acc-hi:#F6E3AE}
#sankalpa{--acc:#58CCD2; --acc-hi:#A6E6EA}

/* -- the time table: a full screen of its own, as in the app -- */
.t-scr{background:radial-gradient(90% 40% at 80% 0%,rgba(242,217,138,.07),transparent 70%),#07080B}
.t-top{position:absolute; z-index:20; left:0; right:0; top:4.4em; padding:.5em 1.1em .9em; background:#07080B; border-bottom:.08em solid rgba(238,232,220,.08)}
.t-titlerow{display:flex; align-items:center; gap:.6em}
.t-title{flex:1; min-width:0; display:grid; gap:.35em}
.t-title b{font:500 1.95em/1 var(--sans); letter-spacing:-.02em; color:var(--a-ink)}
.t-title span{font:500 .95em/1 var(--sans); color:var(--a-brass-hi)}
.t-days{display:flex; padding:.22em; border-radius:2em; background:rgba(238,232,220,.03); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.14)}
.t-days span{padding:.62em .8em; border-radius:2em; font:500 .9em/1 var(--sans); color:var(--a-ink-2)}
.t-days span.on{color:#1B1406; background:linear-gradient(180deg,#F8E9B8,#E1BF62)}
.t-x{flex:none; width:3.1em; height:3.1em; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 .08em rgba(238,232,220,.18); color:var(--a-ink-2)}
.t-x svg{width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.t-seg{display:flex; margin-top:.9em; padding:.3em; border-radius:1.5em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1)}
.t-seg span{flex:1; display:grid; place-items:center; height:3.1em; border-radius:1.2em; font:500 .96em/1 var(--sans); color:var(--a-ink-2); white-space:nowrap; transition:color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease)}
.t-seg span.on{color:var(--a-ink); font-weight:600; background:linear-gradient(180deg,rgba(242,217,138,.2),rgba(150,120,50,.12)); box-shadow:inset 0 0 0 .1em rgba(242,217,138,.55), 0 .6em 1.4em -.7em rgba(242,217,138,.5)}
.t-views{position:absolute; inset:13.9em 0 0; overflow:hidden}
.t-views .a-v{inset:0; padding:.9em 1.1em 0}
.t-card{position:relative; display:grid; gap:.8em; padding:1.15em 1.15em 1.2em; border-radius:1.7em; background:linear-gradient(180deg,rgba(24,25,30,.96),rgba(17,18,22,.96)); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.09)}
.t-card + .t-card, .t-tiles + .t-card, .t-card + .t-tiles{margin-top:.75em}
.t-card.t-lead{background:radial-gradient(120% 70% at 20% 0%,rgba(242,217,138,.09),transparent 60%),linear-gradient(180deg,rgba(29,28,25,.98),rgba(18,18,20,.98)); box-shadow:inset 0 0 0 .1em rgba(242,217,138,.3)}
.t-k{font:600 .76em/1.25 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--a-brass-hi)}
.t-k.dim{color:var(--a-dim)}
.t-big{display:block; margin-top:-.25em; font:500 1.75em/1.1 var(--sans); letter-spacing:-.01em; color:var(--a-ink)}
.t-range{margin-top:-.4em; font:500 1em/1 var(--sans); font-style:normal; color:var(--a-ink-2); font-variant-numeric:tabular-nums}
.t-state{display:flex; align-items:center; gap:.8em; padding:.8em .95em; border-radius:1.15em; background:rgba(238,232,220,.04); font:400 1em/1.3 var(--sans); color:var(--a-ink-2)}
.t-state.ok{box-shadow:inset 0 0 0 .08em rgba(98,193,158,.4)}
.t-state.ok span{color:#7FD6B4}
.t-cap{flex:none; display:block; width:.55em; height:1.8em; border-radius:.3em; background:var(--nc,#4A4B52); box-shadow:0 0 .8em color-mix(in srgb, var(--nc,#4A4B52) 45%, transparent)}
.t-cap.l, .t-strip i.l, .t-key i.l{--nc:var(--a-left)}
.t-cap.r, .t-strip i.r, .t-key i.r{--nc:var(--a-right)}
.t-cap.b, .t-strip i.b, .t-key i.b{--nc:var(--a-both)}
.t-cap.n, .t-strip i.n, .t-key i.n{--nc:#4A4B52}
.t-el{display:flex; gap:.6em; align-items:flex-start; font:400 .96em/1.38 var(--sans); color:var(--a-ink-2)}
.t-sw{flex:none; display:inline-block; width:.8em; height:.8em; border-radius:.2em; background:var(--sw)}
.t-el .t-sw{margin-top:.28em}
.t-sw.air{--sw:var(--e-air)} .t-sw.fire{--sw:var(--e-fire)} .t-sw.earth{--sw:var(--e-earth)} .t-sw.water{--sw:var(--e-water)} .t-sw.space{--sw:var(--e-space)}
.t-prep{display:grid; gap:.75em; padding-top:.9em; border-top:.08em solid rgba(238,232,220,.08)}
.t-prep ol{display:grid; gap:.6em}
.t-prep li{display:flex; align-items:center; gap:.8em}
.t-prep li i{flex:none; width:1.85em; height:1.85em; border-radius:50%; display:grid; place-items:center; font:700 .8em/1 var(--sans); font-style:normal; color:#1B1406; background:var(--a-brass-hi)}
.t-prep li b{font:600 1em/1.2 var(--sans); color:var(--a-ink)}
.t-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55em; margin-top:.75em}
.t-tiles > div{display:grid; gap:.45em; align-content:start; padding:.9em .7em; border-radius:1.2em; background:rgba(238,232,220,.035); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.08)}
.t-tiles b{font:500 1.75em/1 var(--sans); color:var(--a-ink); font-variant-numeric:tabular-nums}
.t-tiles span{font:500 .78em/1.2 var(--sans); color:var(--a-dim)}
.t-tiles .ok b{color:var(--a-jade)} .t-tiles .warn b{color:var(--a-brass-hi)} .t-tiles .bad b{color:var(--a-right)}
.t-hd{display:flex; align-items:baseline; justify-content:space-between; gap:.6em}
.t-aside{font:500 .82em/1.2 var(--sans); color:var(--a-dim); text-align:right}
/* the day at a glance: each activity in the nostril it wants, drawn in along the day */
.t-strip{position:relative; height:2.6em; border-radius:.8em; overflow:hidden; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.08)}
.t-night{position:absolute; top:0; bottom:0; right:0; background:rgba(0,0,0,.3)}
.t-strip i{position:absolute; top:.62em; bottom:.62em; min-width:.32em; border-radius:.22em; background:var(--nc); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease-out)}
.t-strip i.n{opacity:.6}
.t-strip i.needs{top:.4em; bottom:.4em; box-shadow:0 0 0 .12em var(--a-brass-hi)}
.t-strip.drawn i{transform:none}
.t-strip i:nth-of-type(n+5){transition-delay:.12s} .t-strip i:nth-of-type(n+9){transition-delay:.24s} .t-strip i:nth-of-type(n+13){transition-delay:.36s}
.t-nowmark{position:absolute; top:0; bottom:0; width:.16em; margin-left:-.08em; background:#fff; box-shadow:0 0 .6em #fff}
.a-band.t-lane{height:.42em; margin-top:-.2em}
.t-lane .now{display:none}
.t-axis{position:relative; display:flex; justify-content:space-between; height:1em; font:500 .8em/1 var(--sans); color:var(--a-dim); font-variant-numeric:tabular-nums}
.t-axis .mid{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap}
.t-key{display:flex; flex-wrap:wrap; gap:.5em .85em; font:500 .8em/1 var(--sans); color:var(--a-dim)}
.t-key span{display:inline-flex; align-items:center; gap:.4em}
.t-key i{width:.8em; height:.8em; border-radius:.22em; background:var(--nc)}
.t-key i.needs{background:none; box-shadow:inset 0 0 0 .12em var(--a-brass-hi)}
/* the rows of the day */
.t-card.list{gap:0; padding-bottom:.6em}
.t-card.list .t-hd{margin-bottom:.5em}
.t-row{display:grid; grid-template-columns:4.1em .5em minmax(0,1fr) 2.3em; align-items:center; column-gap:.8em; padding:.55em .35em; border-top:.08em solid rgba(238,232,220,.07)}
.t-hd + .t-row{border-top-color:transparent}
.t-time{display:grid; gap:.3em; min-width:0}
.t-time b{font:600 1.1em/1 var(--sans); color:var(--a-ink); font-variant-numeric:tabular-nums}
.t-time em{font:400 .8em/1 var(--sans); font-style:normal; color:var(--a-dim)}
.t-row .t-cap{width:.5em; height:2.5em}
.t-what{display:grid; gap:.3em; min-width:0}
.t-what b{font:600 1.06em/1.2 var(--sans); color:var(--a-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.t-what em{display:block; font:400 .88em/1.3 var(--sans); font-style:normal; color:var(--a-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.t-what em .t-sw{margin-right:.45em; vertical-align:-.05em}
.t-what em.ok{color:#8FD5B8}
.t-what em.warn{color:var(--a-brass-hi)}
.t-what em.now{display:none}
.t-tick{width:2.3em; height:2.3em; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 .08em rgba(238,232,220,.16); color:var(--a-dim)}
.t-tick svg{width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.t-row.past .t-what b{color:var(--a-dim)}
/* my table: the times are yours to set; a better minute is offered when there is one */
.mine .t-row{grid-template-columns:5.3em .5em minmax(0,1fr) 2.3em}
.t-in{display:flex; align-items:center; justify-content:space-between; gap:.2em; padding:.45em .4em .45em .55em; border-radius:.7em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.18); font:600 1em/1 var(--sans); color:var(--a-ink); font-variant-numeric:tabular-nums; transition:box-shadow .4s var(--ease)}
.t-in svg{flex:none; width:.9em; height:.9em; fill:none; stroke:var(--a-dim); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.t-row .t-more{grid-column:1 / -1; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s var(--ease-out), opacity .4s var(--ease), margin .4s var(--ease)}
.t-row.open{border-radius:1.2em; background:rgba(238,232,220,.045); border-top-color:transparent}
.t-row.open + .t-row{border-top-color:transparent}
.t-row.open .t-more{max-height:6em; opacity:1; margin-top:.55em}
.t-sugbox{display:flex; align-items:center; justify-content:space-between; gap:.7em; padding:.6em .6em .6em .85em; border-radius:1em; background:rgba(242,217,138,.08); font:400 .9em/1.3 var(--sans); color:var(--a-ink-2)}
.t-sugbox b{color:var(--a-ink)}
.t-row.fixed .t-what em.was{display:none}
.t-row.fixed .t-what em.now{display:block}
.t-row.fixed .t-in{box-shadow:inset 0 0 0 .12em rgba(242,217,138,.65)}
.t-btn{display:inline-flex; align-items:center; justify-content:center; height:2.9em; padding:0 1.2em; border-radius:2em; font:500 .95em/1 var(--sans); color:var(--a-ink); background:rgba(238,232,220,.05); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.2); white-space:nowrap}
.t-btn.sm{height:2.5em; padding:0 1em; font-size:.88em}
.t-btn.primary{color:#1B1406; font-weight:600; background:linear-gradient(180deg,#F8E9B8,#D6B24A); box-shadow:0 .9em 1.8em -1.2em rgba(214,178,74,.95)}
/* alarms */
.t-alrow{display:flex; align-items:center; justify-content:space-between; gap:.9em; margin-top:-.2em}
.t-lede{margin-top:.35em; font:400 .96em/1.4 var(--sans); color:var(--a-ink-2)}
.t-card.al .on{display:none}
.t-card.al.on .off{display:none}
.t-card.al.on .on{display:inline}
.t-card.al.on{box-shadow:inset 0 0 0 .1em rgba(98,193,158,.5)}
.t-card.al.on .t-big{color:var(--a-jade)}
.t-card.al.on .t-btn{color:var(--a-ink-2); background:none; box-shadow:inset 0 0 0 .08em rgba(238,232,220,.2)}
.t-fields{display:grid; grid-template-columns:1fr 1fr; gap:.65em}
.t-sel{display:grid; gap:.45em; min-width:0}
.t-sel em{font:400 .86em/1 var(--sans); font-style:normal; color:var(--a-dim)}
.t-sel span{display:flex; align-items:center; justify-content:space-between; gap:.4em; height:3em; padding:0 .8em; border-radius:1em; background:rgba(238,232,220,.035); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.16); font:400 .9em/1 var(--sans); color:var(--a-ink-2); white-space:nowrap; overflow:hidden}
.t-sel svg{flex:none; width:.95em; height:.95em; fill:none; stroke:var(--a-ink-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.t-up li{display:grid; grid-template-columns:3.6em minmax(0,1fr) auto; align-items:center; gap:.6em; padding:.72em 0; border-top:.08em solid rgba(238,232,220,.07); font:400 1em/1.2 var(--sans); color:var(--a-ink-2)}
.t-up li:first-child{border-top:0}
.t-up b{font:600 1.05em/1 var(--sans); color:var(--a-ink); font-variant-numeric:tabular-nums}
.t-up span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.t-up em{font:400 .86em/1 var(--sans); font-style:normal; color:var(--a-dim); white-space:nowrap}
/* the phone's own notification, at the start: title, the app's words, Done and Snooze */
.t-notif{position:absolute; z-index:50; left:.8em; right:.8em; top:.9em; padding:1em 1.1em; border-radius:1.9em; background:rgba(36,37,44,.95); -webkit-backdrop-filter:blur(1.2em); backdrop-filter:blur(1.2em);
  box-shadow:inset 0 0 0 .08em rgba(255,255,255,.1), 0 1.4em 3em -1em rgba(0,0,0,.85); transform:translateY(-135%); opacity:0; transition:transform .7s cubic-bezier(.2,.9,.25,1.08), opacity .3s var(--ease)}
.t-notif.on{transform:none; opacity:1}
.t-nhd{display:flex; align-items:center; gap:.55em; font:500 .85em/1 var(--sans); color:var(--a-ink-2)}
.t-nhd em{margin-left:auto; font-style:normal; color:var(--a-dim)}
.t-nico{width:1.9em; height:1.9em; border-radius:.5em; display:grid; place-items:center; background:linear-gradient(145deg,#1E1B12,#0C0B08); box-shadow:inset 0 0 0 .08em rgba(242,217,138,.35); color:var(--a-brass-hi)}
.t-nico svg{width:1.3em; height:1.3em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.t-notif > b{display:block; margin-top:.6em; font:600 1.08em/1.2 var(--sans); color:#fff}
.t-notif p{margin-top:.3em; font:400 .9em/1.38 var(--sans); color:rgba(255,255,255,.72)}
.t-nact{display:grid; grid-template-columns:1fr 1fr; gap:.5em; margin-top:.8em}
.t-nact span{display:grid; place-items:center; height:2.7em; border-radius:1em; background:rgba(255,255,255,.08); font:500 .95em/1 var(--sans); color:#fff}

/* -- sankalpa: the Predictions studio's misted sheet, in Sankalpa's teal -- */
.s-sheet{background:radial-gradient(120% 40% at 50% 0%,rgba(88,204,210,.14),transparent 70%),linear-gradient(180deg,rgba(40,50,53,.97),rgba(26,29,32,.98) 35%,rgba(20,22,25,.99)); box-shadow:inset 0 .1em 0 rgba(88,204,210,.45), 0 -2em 4em -1em rgba(0,0,0,.7)}
.s-grip{background:linear-gradient(90deg,rgba(88,204,210,.3),rgba(88,204,210,.9),rgba(88,204,210,.3))}
.a-seg.teal > span.on{background:linear-gradient(180deg,rgba(88,204,210,.26),rgba(88,204,210,.1)); box-shadow:inset 0 0 0 .08em rgba(88,204,210,.65)}
.s-tabs{--tab:#58CCD2; margin-bottom:.7em}
.s-align{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.45em .8em; padding:0 .15em .9em; border-bottom:.08em solid rgba(238,232,220,.07); font:500 .88em/1.2 var(--sans); color:var(--a-ink-2)}
.s-align b{font:600 1em/1 var(--sans); color:var(--a-ink)}
.s-align i{grid-column:1 / -1; height:.42em; border-radius:.3em; background:rgba(238,232,220,.08); overflow:hidden}
.s-align u{display:block; width:56%; height:100%; border-radius:.3em; background:var(--a-brass-hi)}
.s-views{position:relative; height:42em; margin-top:.8em; overflow:hidden}
.s-views .a-v{inset:0; padding:0}
.s-card{position:relative; display:grid; gap:.65em; padding:1.1em 1.15em 1.2em; border-radius:1.7em; background:linear-gradient(180deg,rgba(48,52,56,.7),rgba(31,33,37,.78)); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1)}
.s-card + .s-card, .s-card + .s-go{margin-top:.75em}
.s-card.s-lead{background:radial-gradient(120% 60% at 10% 0%,rgba(88,204,210,.13),transparent 60%),linear-gradient(180deg,rgba(44,55,58,.8),rgba(30,34,37,.84)); box-shadow:inset 0 0 0 .1em rgba(88,204,210,.28)}
.s-card.slim{gap:.35em; padding:.9em 1.1em}
.s-k{font:600 .76em/1.25 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#58CCD2}
.s-h{display:block; font:400 1.6em/1.15 var(--sans); letter-spacing:-.01em; color:var(--a-ink)}
.s-h.sm{font-size:1.25em}
.s-p{font:400 1em/1.4 var(--sans); color:var(--a-ink-2)}
.s-p i{font-style:italic; color:var(--a-ink)}
.s-f{display:grid; gap:.3em}
.s-l{font:600 .74em/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--a-ink-2)}
.s-f > em{margin-top:-.1em; font:400 .86em/1.25 var(--sans); font-style:normal; color:var(--a-dim)}
.s-in{position:relative; display:block; min-height:3.5em; margin-top:.25em; padding:.8em .95em; border-radius:1.15em; background:rgba(0,0,0,.18); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.16); font:400 1.02em/1.3 var(--sans); color:var(--a-ink)}
.s-in.one{min-height:2.9em}
.s-in.a-in{min-height:3.5em; margin-top:.25em; font:400 1.02em/1.3 var(--sans); white-space:normal}
.s-in .s-ph{color:rgba(194,188,203,.42); transition:opacity .3s var(--ease)}
.s-in .s-val{position:absolute; left:.95em; right:.95em; top:.8em; color:var(--a-ink); opacity:0; transition:opacity .45s var(--ease)}
.s-card.filled .s-in .s-ph{opacity:0}
.s-card.filled .s-in .s-val{opacity:1}
.s-card.filled .s-f:nth-of-type(3) .s-val{transition-delay:.15s} .s-card.filled .s-f:nth-of-type(4) .s-val{transition-delay:.3s}
.s-card.filled .s-f:nth-of-type(5) .s-val{transition-delay:.45s} .s-card.filled .s-f:nth-of-type(6) .s-val{transition-delay:.6s}
.s-kl{margin-top:.35em}
.s-kinds{display:grid; grid-template-columns:1fr 1fr; gap:.55em}
.s-kind{display:grid; gap:.3em; align-content:start; padding:.85em .85em .9em; border-radius:1.2em; background:rgba(238,232,220,.035); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.16); transition:background .35s var(--ease), box-shadow .35s var(--ease)}
.s-kind b{font:600 .96em/1.2 var(--sans); color:var(--a-ink)}
.s-kind em{font:400 .8em/1.3 var(--sans); font-style:normal; color:var(--a-dim)}
.s-kind.on{background:rgba(88,204,210,.14); box-shadow:inset 0 0 0 .1em rgba(88,204,210,.6)}
.s-switch{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9em; align-items:start; padding:.85em; border-radius:1.2em; background:rgba(238,232,220,.035)}
.s-switch i{position:relative; width:3em; height:1.8em; margin-top:.1em; border-radius:2em; background:rgba(238,232,220,.14)}
.s-switch i::after{content:''; position:absolute; top:.22em; left:.22em; width:1.36em; height:1.36em; border-radius:50%; background:var(--a-ink-2)}
.s-switch b{display:block; font:600 1em/1.2 var(--sans); color:var(--a-ink)}
.s-switch em{display:block; margin-top:.25em; font:400 .84em/1.3 var(--sans); font-style:normal; color:var(--a-dim)}
.s-go{display:flex; align-items:center; justify-content:center; height:3.9em; border-radius:2em; font:600 1.06em/1 var(--sans); color:#0B1B1C; background:#58CCD2; box-shadow:0 .9em 2em -1em rgba(88,204,210,.8)}
.s-score{display:flex; align-items:baseline; gap:.6em}
.s-score b{font:300 3.4em/1 var(--sans); color:#6FCFA5}
.s-score span{font:400 1em/1 var(--sans); color:var(--a-ink-2)}
.s-why{display:grid; gap:.65em}
.s-why li{display:grid; grid-template-columns:.6em minmax(0,1fr); gap:.8em; align-items:start; font:400 .96em/1.42 var(--sans); color:var(--a-ink)}
.s-why li i{width:.6em; height:.6em; margin-top:.45em; border-radius:50%; background:#6FCFA5}
.s-why u{display:inline-block; margin-left:.3em; padding:.15em .55em; border-radius:1em; font:600 .72em/1.35 var(--sans); text-decoration:none; color:var(--a-dim); background:rgba(238,232,220,.08); white-space:nowrap}
.s-hd{display:flex; align-items:center; justify-content:space-between; gap:.6em}
.s-cnt{flex:none; padding:.4em .75em; border-radius:1em; font:500 .84em/1 var(--sans); color:var(--a-ink-2); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.2)}
.s-win{display:flex; align-items:center; justify-content:space-between; gap:.6em; padding:.7em 0; border-top:.08em solid rgba(238,232,220,.08)}
.s-win b{display:block; font:600 1.08em/1 var(--sans); color:var(--a-ink); font-variant-numeric:tabular-nums}
.s-win em{display:block; margin-top:.3em; font:400 .86em/1 var(--sans); font-style:normal; color:var(--a-dim)}
.s-str{padding:.45em .8em; border-radius:1em; font:500 .86em/1 var(--sans); color:#7FD6B4; background:rgba(98,193,158,.16)}
.s-note{font:400 .88em/1.45 var(--sans); color:var(--a-dim)}
.s-sides{display:grid; grid-template-columns:repeat(3,1fr); gap:.55em}
.s-sides span{display:grid; justify-items:center; gap:.25em; padding:.75em 0; border-radius:1.2em; background:rgba(238,232,220,.03); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.16); transition:background .35s var(--ease), box-shadow .35s var(--ease)}
.s-sides b{font:600 1.04em/1 var(--sans); color:var(--a-ink)}
.s-sides em{font:400 .84em/1 var(--sans); font-style:normal; color:var(--a-dim)}
.s-sides span.on{background:rgba(88,204,210,.14); box-shadow:inset 0 0 0 .1em rgba(88,204,210,.6)}
.s-p .now{display:none}
.s-card.left .s-p .was{display:none}
.s-card.left .s-p .now{display:inline}
/* the settle: eight beats of 1.25 s, a ten-second breath (as the app's pacer) */
.s-pacer{position:relative; height:7.4em; display:grid; place-items:center}
.s-pacer i{width:5.2em; height:5.2em; border-radius:50%; background:radial-gradient(circle at 50% 45%,rgba(88,204,210,.55),rgba(88,204,210,.18) 60%,rgba(88,204,210,.05)); box-shadow:inset 0 0 0 .08em rgba(88,204,210,.5), 0 0 2.4em rgba(88,204,210,.3); animation:skpace 10s ease-in-out infinite}
@keyframes skpace{0%,100%{transform:scale(.72)}50%{transform:scale(1.12)}}
.s-pacer span{position:absolute; top:50%; margin-top:-.5em; font:500 .8em/1 var(--sans); color:var(--a-dim)}
.s-pacer .s-pin{left:.6em}
.s-pacer .s-pout{right:.6em}
.s-recw{display:block; margin-top:.15em; font:600 1.08em/1.25 var(--sans); color:var(--a-ink)}
.s-gas{display:grid; gap:.5em}
.s-gas span{display:grid; grid-template-columns:2.5em minmax(0,1fr); align-items:center; gap:.3em; min-height:3.2em; padding:.55em .9em; border-radius:1.2em; background:rgba(238,232,220,.035); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.16); transition:background .35s var(--ease), box-shadow .35s var(--ease)}
.s-gas b{font:600 1.08em/1 var(--sans); color:var(--a-ink); text-align:center}
.s-gas em{font:400 .92em/1.3 var(--sans); font-style:normal; color:var(--a-ink-2)}
.s-gas span.on{background:rgba(88,204,210,.16); box-shadow:inset 0 0 0 .1em rgba(88,204,210,.65)}
@media (prefers-reduced-motion:reduce){ .t-strip i, .t-notif, .s-in .s-val, .s-in .s-ph, .t-row .t-more{transition:none} .s-pacer i{animation:none; transform:none} }
.t-acts{display:flex; flex-wrap:wrap; gap:.5em; margin-top:.8em}
.t-note{margin-top:.7em; padding:0 .2em; font:400 .88em/1.45 var(--sans); color:var(--a-dim)}
.t-cal{justify-self:start}
/* recorded: the waiting card empties and the result joins the last few, as the app does after a tap */
.s-rec .s-none{display:none}
.s-rec.done .s-none{display:block}
.s-rec.done .s-recw, .s-rec.done .s-gas, .s-rec.done .s-cnt{display:none}
.s-done{opacity:0; transform:translateY(.8em); transition:opacity .5s var(--ease), transform .6s var(--ease-out)}
.s-rec.done + .s-done{opacity:1; transform:none}
.s-drow{display:flex; align-items:center; justify-content:space-between; gap:.7em; padding:.75em 0 .2em; border-top:.08em solid rgba(238,232,220,.08)}
.s-drow b{display:block; font:600 1em/1.25 var(--sans); color:var(--a-ink)}
.s-drow em{display:block; margin-top:.25em; font:400 .86em/1 var(--sans); font-style:normal; color:var(--a-dim)}
.s-g{flex:none; padding:.4em .7em; border-radius:1em; font:600 .95em/1 var(--sans); color:#7FD6B4; background:rgba(98,193,158,.16)}
@media (prefers-reduced-motion:reduce){ .s-done{transition:none} }
.s-card.filled .s-f:nth-of-type(3) .s-ph{transition-delay:.15s} .s-card.filled .s-f:nth-of-type(4) .s-ph{transition-delay:.3s}
.s-card.filled .s-f:nth-of-type(5) .s-ph{transition-delay:.45s} .s-card.filled .s-f:nth-of-type(6) .s-ph{transition-delay:.6s}

/* ---- Accuracy arrives as it is reached (the user, 2026-09-25: "appearing too slow on scroll"): a shorter rise and a
   quicker fade than the chapters', the figures a beat after the heading ---- */
.proof .rv{transform:translateY(14px); transition:opacity .5s var(--ease-out), transform .55s var(--ease-out)}
.proof .rv.in{transform:none}
.proof .stats.rv{transition-delay:.08s}

/* ==== COMING SOON · SWARTANTRA (the user, 2026-09-25) — cold, lighter glass that arrives from the right as the page
   reaches it (home.js swtScroll), breath-mist forming on it in the mirror test's five tattva shapes, faint and slow ==== */
.swt{position:relative; overflow:clip; isolation:isolate; padding:clamp(80px,13vh,160px) var(--gutter) clamp(96px,15vh,180px)}
.swt::before{content:''; position:absolute; inset:0; z-index:-2; pointer-events:none; background:
  radial-gradient(ellipse 55% 50% at 68% 52%, rgba(159,194,242,.16), transparent 72%),
  radial-gradient(ellipse 38% 40% at 24% 60%, rgba(201,192,242,.10), transparent 72%),
  linear-gradient(180deg, #08090C, #0A0D13 50%, #08090C)}
/* the name again, huge and hollow, drifting the other way behind the glass */
.swt-wm{position:absolute; z-index:-1; left:0; right:0; top:50%; margin-top:-.5em; font:200 clamp(120px,22vw,340px)/1 var(--serif); white-space:nowrap; pointer-events:none; user-select:none}
.swt-wm span{display:inline-block; letter-spacing:-.045em; color:transparent; -webkit-text-stroke:1px rgba(207,224,255,.10); transform:translate3d(var(--wx,6%),0,0); will-change:transform}
/* the glass */
.swt-card{position:relative; max-width:1120px; min-height:clamp(380px,54vh,520px); margin:0 auto; display:grid; align-items:center; overflow:hidden; border-radius:clamp(28px,3.6vw,46px);
  background:radial-gradient(80% 70% at 88% 10%, rgba(196,226,255,.17), transparent 62%), linear-gradient(135deg, rgba(226,238,255,.22), rgba(178,204,242,.09) 46%, rgba(210,228,255,.15));
  -webkit-backdrop-filter:blur(26px) saturate(145%); backdrop-filter:blur(26px) saturate(145%);
  box-shadow:inset 0 0 0 1px rgba(226,236,255,.30), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -60px 90px -50px rgba(159,194,242,.28),
    0 60px 120px -44px rgba(0,0,0,.85), 0 0 100px -30px rgba(159,194,242,.34);
  transform:translate3d(var(--cx,0px),0,0) perspective(1400px) rotateY(var(--cr,0deg)); opacity:var(--co,1); will-change:transform, opacity}
/* a cold sheen that crosses the glass as the page moves */
.swt-card::before{content:''; position:absolute; z-index:3; inset:-30% -60%; pointer-events:none;
  background:linear-gradient(104deg, transparent 42%, rgba(255,255,255,.13) 48.5%, rgba(255,255,255,.03) 51.5%, transparent 58%); transform:translate3d(var(--sx,-25%),0,0)}
/* and a fine bead, as breath leaves on glass */
.swt-card::after{content:''; position:absolute; z-index:0; inset:0; opacity:.16; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the mist: soft white forms that gather, hold and lift away, one after another — the shapes of the mirror test */
.swt-mist{position:absolute; inset:0; z-index:1; pointer-events:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.2 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.2 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.swt-mist .fog{position:absolute; border-radius:50%; filter:blur(40px); background:radial-gradient(closest-side, rgba(232,242,255,.34), rgba(232,242,255,0)); animation:swtdrift 26s ease-in-out infinite alternate}
.swt-mist .f1{width:52%; height:78%; right:-6%; top:6%}
.swt-mist .f2{width:40%; height:60%; right:26%; top:34%; animation-duration:31s; animation-delay:-9s}
.swt-mist .m{position:absolute; opacity:0; filter:blur(12px); transform-origin:50% 60%; animation:swtbreath 11s ease-in-out infinite; animation-delay:-1s; will-change:opacity, transform}
.swt-mist .m, .swt-mist .m b{--mc:rgba(236,244,255,.62)}
.swt-mist .ci{width:clamp(96px,11vw,140px); aspect-ratio:1; right:33%; top:11%; border-radius:50%; background:radial-gradient(closest-side, var(--mc), rgba(236,244,255,.2) 72%, transparent)}
.swt-mist .sq{width:clamp(96px,11vw,138px); aspect-ratio:1; right:9%; top:13%; border-radius:16%; background:var(--mc); animation-delay:1.2s}
.swt-mist .cr{width:clamp(110px,12.5vw,160px); aspect-ratio:1; right:21%; top:46%; border-radius:50%; background:var(--mc); animation-delay:3.4s;
  -webkit-mask-image:radial-gradient(circle at 66% 38%, transparent 47%, #000 49%); mask-image:radial-gradient(circle at 66% 38%, transparent 47%, #000 49%)}
.swt-mist .tr{width:clamp(104px,12vw,150px); aspect-ratio:1.08; right:4%; top:52%; animation-delay:5.6s}
.swt-mist .tr b{position:absolute; inset:0; background:var(--mc); clip-path:polygon(50% 4%, 97% 92%, 3% 92%)}
.swt-mist .sp{width:clamp(110px,12vw,150px); aspect-ratio:1.3; right:40%; top:56%; animation-delay:7.8s}
.swt-mist .sp b{position:absolute; width:18%; aspect-ratio:1; border-radius:50%; background:var(--mc)}
.swt-mist .sp b:nth-child(1){left:6%; top:12%} .swt-mist .sp b:nth-child(2){left:38%; top:4%; width:14%} .swt-mist .sp b:nth-child(3){left:70%; top:18%}
.swt-mist .sp b:nth-child(4){left:18%; top:58%; width:15%} .swt-mist .sp b:nth-child(5){left:52%; top:50%} .swt-mist .sp b:nth-child(6){left:80%; top:68%; width:12%}
@keyframes swtbreath{
  0%{opacity:0; transform:scale(.84) translateY(4px)}
  12%{opacity:.62; transform:scale(.97)}
  22%{opacity:.5; transform:scale(1)}
  34%{opacity:0; transform:scale(1.07) translateY(-10px)}
  100%{opacity:0; transform:scale(1.07) translateY(-10px)}}
@keyframes swtdrift{0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-7%,4%,0) scale(1.12)}}
/* the words */
.swt-body{position:relative; z-index:2; padding:clamp(34px,6vw,84px); max-width:760px}
.swt-soon{display:inline-flex; align-items:center; gap:10px; padding:9px 15px 9px 13px; border-radius:999px; font:500 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:#EEF3FF;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(226,236,255,.32), 0 10px 30px -14px rgba(159,194,242,.5)}
.swt-soon i{position:relative; width:7px; height:7px; border-radius:50%; background:#CFE6FF; box-shadow:0 0 12px #BFE2FF}
.swt-soon i::after{content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(191,226,255,.7); animation:swtping 2.6s var(--ease-out) infinite}
@keyframes swtping{0%{transform:scale(.4); opacity:1} 100%{transform:scale(1.7); opacity:0}}
.swt-deva{display:block; margin-top:30px; font:400 clamp(16px,1.5vw,21px)/1.3 var(--deva); letter-spacing:0; color:rgba(226,236,255,.5)}
.swt-name{margin-top:10px; padding-bottom:.06em; font:300 clamp(58px,9.4vw,138px)/.95 var(--serif); letter-spacing:-.04em;
  background:linear-gradient(100deg, #FFFFFF 0%, #E4EDFF 34%, #B4CDF4 70%, #CFC6F4 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translate3d(var(--tx,0px),0,0); will-change:transform}
.swt-line{margin-top:20px; font:300 clamp(19px,2vw,28px)/1.3 var(--sans); letter-spacing:-.01em; color:rgba(232,240,255,.78); transform:translate3d(var(--lx,0px),0,0); will-change:transform}
.swt-line em{font-style:normal; color:#fff}
@media(max-width:760px){
  .swt-card{min-height:420px; align-items:end}
  .swt-body{padding:30px 26px 34px}
  .swt-mist .ci{right:auto; left:52%; top:7%} .swt-mist .sq{right:7%; top:22%} .swt-mist .cr{right:40%; top:24%}
  .swt-mist .tr{right:6%; top:4%} .swt-mist .sp{right:58%; top:6%}
  .swt-mist .f1{width:90%; height:60%; right:-20%; top:-6%}
}
@media(prefers-reduced-motion:reduce){
  .swt-card, .swt-name, .swt-line, .swt-wm span{transform:none !important; opacity:1 !important}
  .swt-mist .m, .swt-mist .fog, .swt-soon i::after{animation:none}
  .swt-mist .sq{opacity:.36} .swt-mist .cr{opacity:.28}
}
/* the name whole at every width: its box as wide as its letters (the gradient paints only inside the box), sized to fit */
.swt-body{max-width:none}
.swt-name{display:inline-block; max-width:100%; font-size:clamp(38px,10.4vw,138px); padding-right:.04em}
@media(max-width:760px){ .swt-body{padding:30px 22px 32px} }
@media(max-width:760px){ .swt-name{font-size:clamp(38px,14.5vw,110px)} }

/* ---- the Ghatana phone (the user, 2026-09-27): Lite's Predictions → Ghatana redrawn, in its rose — the matters on now,
   one read (the four-bar signal, the tier, the facts), its lifetime band, and the act that begins it ---- */
.g-meter{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.45em .8em; margin:0 .2em .9em; font:400 .9em/1.2 var(--sans); color:var(--a-ink-2)}
.g-meter b{font:600 1.05em/1 var(--sans); color:var(--a-ink)}
.g-meter i{grid-column:1 / -1; height:.42em; border-radius:1em; background:rgba(238,232,220,.1); overflow:hidden}
.g-meter u{display:block; width:64%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#E9C35A,#F2D98A)}
.g-chips{display:flex; flex-wrap:wrap; gap:.5em; margin-top:.9em}
.g-chip{display:inline-flex; align-items:center; gap:.5em; height:2.7em; padding:0 .95em; border-radius:1.5em; font:500 .95em/1 var(--sans); color:var(--a-ink);
  background:rgba(238,232,220,.05); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.12); transition:background .35s var(--ease), box-shadow .35s var(--ease)}
.g-chip.hi::before, .g-chip.lo::before{content:''; width:.6em; height:.6em; border-radius:50%}
.g-chip.hi::before{background:var(--a-jade)}
.g-chip.lo::before{background:var(--a-right)}
.g-chip.lit{background:linear-gradient(180deg,rgba(228,125,147,.32),rgba(228,125,147,.12)); box-shadow:inset 0 0 0 .1em rgba(228,125,147,.8)}
.g-key{display:flex; flex-wrap:wrap; gap:.45em 1em; margin-top:1em; font:400 .82em/1 var(--sans); color:var(--a-dim)}
.g-key span{display:inline-flex; align-items:center; gap:.4em}
.g-key i{width:.75em; height:.75em; border-radius:.2em; background:#6B5A2E}
.g-key i.hi{background:var(--a-jade)} .g-key i.lo{background:var(--a-right)} .g-key i.cf{height:.3em; border-radius:1em; background:#F4ECD6}
.g-pick{display:inline-flex; align-items:center; gap:.5em; margin-top:.7em; height:2.9em; padding:0 1.1em; border-radius:1.6em; font:500 1.25em/1 var(--sans); color:var(--a-ink);
  background:rgba(228,125,147,.1); box-shadow:inset 0 0 0 .1em rgba(228,125,147,.55)}
.g-pick svg{width:.75em; height:.75em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.g-tier{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9em; align-items:center; margin-top:1em}
.g-tier b{display:block; font:500 1.3em/1.1 var(--sans); color:var(--a-jade)}
.g-tier span{display:block; margin-top:.3em; font:400 .88em/1.35 var(--sans); color:var(--a-ink-2)}
.g-sig{display:flex; align-items:flex-end; gap:.25em; height:3.4em; padding:.6em .75em; border-radius:1em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.1)}
.g-sig i{width:.55em; border-radius:.3em; background:rgba(238,232,220,.14); transform-origin:bottom; transform:scaleY(.25); transition:transform .5s var(--ease-out), background .5s var(--ease)}
.g-sig i:nth-child(1){height:30%} .g-sig i:nth-child(2){height:55%} .g-sig i:nth-child(3){height:78%} .g-sig i:nth-child(4){height:100%}
.g-sig.drawn i{transform:none; background:var(--a-jade)}
.g-sig.drawn i:nth-child(2){transition-delay:.12s} .g-sig.drawn i:nth-child(3){transition-delay:.24s} .g-sig.drawn i:nth-child(4){transition-delay:.36s}
.g-facts{display:grid; grid-template-columns:1fr 1fr; gap:.55em; margin-top:1em}
.g-facts > div{padding:.8em .85em; border-radius:1em; background:rgba(238,232,220,.035); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.09)}
.g-facts em{display:block; font:600 .66em/1.25 var(--sans); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--a-dim)}
.g-facts b{display:block; margin-top:.35em; font:500 1.05em/1.15 var(--sans); color:var(--a-ink)}
.g-facts span{display:block; margin-top:.25em; font:400 .8em/1.3 var(--sans); color:var(--a-dim)}
.g-band{position:relative; height:4.6em; margin-top:1em; border-radius:1em; background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.09); overflow:hidden}
.g-band::before{content:''; position:absolute; top:0; bottom:0; left:16%; width:54%; background:rgba(228,125,147,.07)}   /* the ages usually read, 16–70 */
.g-band s{position:absolute; top:24%; bottom:22%; border-radius:.3em; transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease-out)}
.g-band s.hi{background:var(--a-jade)} .g-band s.lo{background:var(--a-right)} .g-band s.bg{background:#6B5A2E}
.g-band.drawn s{transform:none}
.g-band s:nth-of-type(3n+2){transition-delay:.1s} .g-band s:nth-of-type(3n){transition-delay:.2s}
.g-band u{position:absolute; top:10%; width:.55em; height:.22em; margin-left:-.27em; border-radius:1em; background:#F4ECD6; opacity:0; transition:opacity .4s var(--ease) .7s}
.g-band b{position:absolute; top:5%; bottom:5%; left:34%; width:.2em; margin-left:-.1em; border-radius:.2em; background:#FFF6E6; box-shadow:0 0 .8em rgba(255,246,230,.85); opacity:0; transition:opacity .4s var(--ease) .55s}
.g-band.drawn u, .g-band.drawn b{opacity:1}
.g-axis{display:flex; justify-content:space-between; margin-top:.5em; font:400 .8em/1 var(--sans); color:var(--a-dim)}
.g-act{display:flex; flex-wrap:wrap; align-items:center; gap:.5em .9em; margin-top:.8em; font:400 .9em/1.2 var(--sans); color:var(--a-ink-2)}
.g-act b{display:inline-flex; align-items:center; gap:.4em; font:500 1em/1 var(--sans); color:var(--a-ink)}
.g-act i{width:.7em; height:.7em; border-radius:50%}
.g-act i.l{background:var(--a-left)} .g-act i.e{border-radius:.2em; background:var(--e-earth)}
.g-period{margin-top:.9em; color:var(--a-ink); box-shadow:inset 0 0 0 .1em rgba(228,125,147,.55)}
.g-day{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.6em; padding:.75em 0; border-top:.08em solid rgba(238,232,220,.09)}
.g-day:first-of-type{margin-top:.4em; border-top:0}
.g-day b{font:600 1.02em/1 var(--sans); color:var(--a-ink)}
.g-tags{display:flex; flex-wrap:wrap; gap:.3em}
.g-tags u{text-decoration:none; padding:.35em .55em; border-radius:.8em; font:500 .72em/1 var(--sans); color:#9FE0C6; background:rgba(98,193,158,.14)}

/* ---- Breath Tap, the second innovation (the user, 2026-09-27: "the same bg translucent and grainy look … with smoke in
   the bg to show breath tap and its learning features on mobile phone … a new and highly premium scroll effect"). The
   app's own room: its smoke (home.js, breathTap) under a pane of grainy glass, and in it a phone playing Breath Tap.
   At rest (no script, or less motion asked for) it stands: the phone upright on its reading, every beat shown. With
   .btx-live the scroll plays it; home.js sets --hw (the title's words), --glass, --tint (the side being read, as the
   app tints it: gold, moonlit violet for the left, sunlit coral for the right), and the phone's --py/--prx/--ps/--po.
   Without WebGL (.btx-gl absent) a soft CSS smoke stands in. ---- */
.btx{--moon:176,160,238; --sun:240,134,102; --bgold:238,201,110; --bsky:128,188,224; --bjade:98,196,152;
  --tint:238,201,110; --hw:1; --glass:1; --acc:#B8A9F0; --acc-hi:#D9D0F7;
  --bgrain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position:relative; background:var(--ground)}
.btx-stage{position:relative; isolation:isolate; overflow:hidden; background:var(--ground)}
.btx-smoke{position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; pointer-events:none}
.btx:not(.btx-gl) .btx-smoke{display:none}
.btx-stage::before{content:''; position:absolute; inset:-22%; z-index:0; pointer-events:none; opacity:var(--glass);
  background:radial-gradient(34% 30% at 34% 32%, rgba(70,84,190,.42), transparent 70%), radial-gradient(38% 34% at 70% 56%, rgba(140,76,160,.36), transparent 70%),
    radial-gradient(36% 32% at 42% 80%, rgba(36,132,146,.34), transparent 70%);
  filter:blur(40px); animation:btxDrift 38s ease-in-out infinite alternate}
.btx-gl .btx-stage::before{display:none}
@keyframes btxDrift{from{transform:translate3d(-3%,2%,0) rotate(0deg)} to{transform:translate3d(3%,-3%,0) rotate(7deg)}}
/* the pane of glass over the smoke: the coarse grain, a mist from the top, the side's light */
.btx-glass{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:var(--glass);
  background:var(--bgrain), radial-gradient(80% 46% at 50% 0%, rgba(255,255,255,.05), transparent 70%), radial-gradient(52% 60% at 72% 52%, rgba(var(--tint),.1), transparent 72%),
    linear-gradient(180deg, rgba(10,10,16,.24), rgba(8,8,12,.4))}

.btx-in{position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:clamp(96px,14vh,160px) var(--gutter);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:clamp(28px,5vw,96px); align-items:center}
.btx-copy{min-width:0; max-width:540px}
.btx-h{margin-top:22px; font:300 clamp(40px,4.6vw,74px)/1 var(--serif); letter-spacing:-.022em; color:var(--ink)}
.btx-h em{display:block; margin-top:.2em; font-size:.5em; line-height:1.14; letter-spacing:-.01em; color:var(--acc-hi)}
.btx-h .w{--k:clamp(0, calc(var(--hw) * 8.6 - var(--i)), 1); display:inline-block; opacity:var(--k);
  transform:translateY(calc((1 - var(--k)) * .5em)); filter:blur(calc((1 - var(--k)) * 10px))}
.btx-beats{margin-top:clamp(22px,4.4vh,44px); padding:0; list-style:none; border-top:1px solid rgba(238,232,220,.1)}
.btx-beats li{display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; padding:14px 0; border-bottom:1px solid rgba(238,232,220,.07); transition:opacity .5s var(--ease)}
.btx-beats li > i{align-self:start; margin-top:1px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:500 11px/1 var(--mono); font-style:normal;
  color:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(238,232,220,.24); transition:background .5s, color .5s, box-shadow .5s}
.btx-beats b{display:block; font:400 17px/1.25 var(--sans); color:var(--ink)}
.btx-beats span{display:block; margin-top:5px; font:400 13.5px/1.5 var(--sans); color:var(--ink-2)}
.btx-live .btx-beats li{opacity:.34}
.btx-live .btx-copy > .kick{opacity:clamp(0, calc(var(--hw) * 2.5), 1)}
.btx-live .btx-punch, .btx-live .btx-beats, .btx-live .btx-keep, .btx-live .btx-mt{opacity:var(--cin,1)}
.btx-live:not(.btx-cin) .btx-mt, .btx-live:not(.btx-cin) .btx-beats{pointer-events:none; visibility:hidden}
.btx-live .btx-beats li.on{opacity:1}
.btx-beats li.on > i{background:rgb(var(--tint)); color:#15121C; box-shadow:0 0 18px rgba(var(--tint),.6)}
/* what it is for, in one plain sentence (the user, 2026-09-27: "so the visitor will know the purpose"; "layman language") */
.btx-punch{margin-top:18px; max-width:34ch; font:300 clamp(17px,1.45vw,21px)/1.45 var(--sans); color:var(--ink-2)}
.btx-punch em{font-style:normal; color:var(--gold-hi)}
/* how much teaching it takes: three numbers, large */
.btx-beats .btx-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px}
.btx-beats .btx-stats > span{display:grid; gap:2px; min-width:0; padding:10px 12px 11px; border-radius:14px; margin:0;
  background:var(--bgrain), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.08)}
.btx-beats .btx-stats b{display:block; font:300 30px/1 var(--serif); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.btx-beats .btx-stats em{display:block; margin-top:4px; font:500 11px/1.2 var(--sans); font-style:normal; letter-spacing:.02em; color:var(--ink)}
.btx-beats .btx-stats i{display:block; font:400 11px/1.3 var(--sans); font-style:normal; color:var(--ink-2)}
.btx-beats li.on .btx-stats b{color:rgb(var(--tint))}
/* the three promises about what it learns: on the phone, never a recording, the key brings it back */
.btx-keep{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none}
.btx-keep li{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px 0 11px; border-radius:999px; font:500 12.5px/1 var(--sans); color:var(--ink); white-space:nowrap;
  background:var(--bgrain), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(128,188,224,.28)}
.btx-keep svg{width:16px; height:16px; flex:none; fill:none; stroke:rgb(var(--bsky)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.btx-keep li{transition:box-shadow .5s var(--ease), color .5s}
.btx-keep.lit li{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(128,188,224,.75), 0 0 20px -6px rgba(128,188,224,.75)}

/* the phone, and the light of the side being read behind it */
.btx-phone{position:relative; min-width:0; display:grid; place-items:center; perspective:1500px}
.btx-halo{position:absolute; left:50%; top:50%; width:min(760px,170%); aspect-ratio:1; border-radius:50%; pointer-events:none;
  opacity:var(--ho,1); transform:translate(-50%,-50%) scale(var(--hs,1)); background:radial-gradient(closest-side, rgba(var(--tint),.22), rgba(var(--tint),.07) 55%, transparent 74%)}
.btx .btx-ph{--acc:rgb(var(--tint)); transform-origin:50% 92%}
.btx-live .btx-ph{--pw:var(--pwv,260px); transform:translate3d(0,var(--py,0px),0) rotateX(var(--prx,0deg)) scale(var(--ps,1)); opacity:var(--po,1); will-change:transform,opacity}
/* see-through glass: the bezel is drawn by the body's inner shadows, so the smoke behind shows through the screen, as it
   does behind the app's own glass */
.btx-ph .ph-body{background:transparent;
  box-shadow:inset 0 0 0 .4cqw rgba(255,255,255,.1), inset 0 0 0 1.1cqw #060608, inset 0 0 0 3.3cqw #16171C,
    0 0 0 .35cqw #000, 0 7cqw 18cqw -5cqw rgba(0,0,0,.9), 0 0 18cqw -6cqw rgba(var(--tint),.5)}
.btx-ph .ph-scr{background:transparent; border-radius:12.2cqw}
.btx-screen::after{content:''; position:absolute; inset:-20% -70%; z-index:50; pointer-events:none; opacity:var(--swo,0);
  background:linear-gradient(104deg, transparent 40%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.05) 53%, transparent 60%); transform:translateX(var(--sw,-60%))}
.bx-glass{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 11% at 50% 0%, rgba(246,222,147,.1), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02) 34%, transparent 70%),
    radial-gradient(95% 45% at 50% 30%, rgba(var(--tint),.13), transparent 70%), linear-gradient(180deg, rgba(12,11,18,.42), rgba(9,9,13,.5) 55%, rgba(6,6,9,.62))}

/* the sheet's head: the mark, the name with its Experimental badge, the step's title, the close disc */
.bx-hd{position:absolute; z-index:6; left:0; right:0; top:4.7em; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9em; padding:0 1.2em 0 1.4em}
.bx-mk{width:2.9em; height:2.9em; border-radius:1em; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 25%, rgba(var(--tint),.34), rgba(var(--tint),.08)); box-shadow:inset 0 0 0 .08em rgba(var(--tint),.42), 0 .6em 1.7em -.8em rgba(var(--tint),.8)}
.bx-mk svg, .bx-x svg, .bx-k i svg{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round}
.bx-mk svg{width:1.4em; height:1.4em; color:rgb(var(--tint)); stroke-width:1.7}
.bx-brand{display:grid; gap:.3em; min-width:0}
.bx-k{display:flex; align-items:center; gap:.6em; min-width:0}
.bx-k b{font:600 .8em/1.1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:rgb(var(--tint)); white-space:nowrap}
.bx-k i{display:inline-flex; align-items:center; gap:.3em; padding:.28em .6em .28em .45em; border-radius:1em; font:700 .64em/1 var(--sans); font-style:normal; letter-spacing:.12em;
  text-transform:uppercase; color:rgb(var(--bsky)); background:rgba(var(--bsky),.1); box-shadow:inset 0 0 0 .1em rgba(var(--bsky),.42); white-space:nowrap}
.bx-k i svg{width:1.05em; height:1.05em; stroke-width:2}
.bx-t{display:block; font:400 1.4em/1.2 var(--serif); font-style:normal; letter-spacing:-.005em; color:#F4F0E8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bx-x{width:2.9em; height:2.9em; border-radius:50%; display:grid; place-items:center; color:#C3BCD0;
  background:var(--bgrain), linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)); box-shadow:inset 0 .08em 0 rgba(255,255,255,.16), inset 0 0 0 .08em rgba(255,255,255,.12)}
.bx-x svg{width:1.15em; height:1.15em; stroke-width:2}
.bx-steps{position:absolute; z-index:6; left:1.4em; right:1.4em; top:8.9em; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5em; margin:0; padding:0; list-style:none; transition:opacity .45s}
.bx-steps li{display:grid; gap:.5em; min-width:0}
.bx-steps i{display:block; height:.26em; border-radius:.2em; background:rgba(255,255,255,.1); transition:background .45s, box-shadow .45s}
.bx-steps span{font:600 .64em/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#8F899F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bx-steps li.done i{background:rgba(var(--bjade),.7)}
.bx-steps li.done span{color:#C3BCD0}
.bx-steps li.on i{background:rgb(var(--tint)); box-shadow:0 0 .8em rgba(var(--tint),.7)}
.bx-steps li.on span{color:#F4F0E8}
.btx-screen[data-v="i"] .bx-steps, .btx-screen[data-v="3"] .bx-steps, .btx-screen[data-v="4"] .bx-steps{opacity:0}

/* the stage */
.bx-stagew{position:absolute; z-index:3; left:50%; top:11.4em; width:21em; height:21em; margin-left:-10.5em; transition:opacity .55s var(--ease), transform .7s var(--ease-out)}
.bx-stagew::before{content:''; position:absolute; inset:-16%; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--tint),.17), rgba(var(--tint),.05) 60%, transparent 76%)}
.btx-screen[data-v="2"] .bx-stagew, .btx-screen[data-v="3"] .bx-stagew, .btx-screen[data-v="4"] .bx-stagew, .btx-screen[data-v="src"] .bx-stagew{opacity:0; transform:translateY(-1.4em) scale(.94)}
/* which microphone (2026-09-28): the phone's, or earphones' — as the app asks it */
.bx-src{display:grid; gap:.7em; width:100%}
.bx-srcopt{display:grid; grid-template-columns:3.4em minmax(0,1fr) 1.1em; align-items:center; gap:.9em; padding:.95em .9em .95em 1em; border-radius:1.35em;
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.07); transition:box-shadow .35s var(--ease), background .35s var(--ease), transform .2s var(--ease)}
.bx-srcopt .ic{display:grid; place-items:center; width:3.4em; height:3.4em; border-radius:1.05em; background:rgba(238,201,110,.1); box-shadow:inset 0 0 0 .08em rgba(238,201,110,.32)}
.bx-srcopt .ic svg{width:1.7em; height:1.7em; fill:none; stroke:#EEC96E; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.bx-srcopt .tx{display:grid; gap:.25em; min-width:0}
.bx-srcopt b{font:600 1.02em/1.25 var(--sans); color:#F4F0E8}
.bx-srcopt em{font:400 .86em/1.3 var(--sans); font-style:normal; color:#8F899F}
.bx-srcopt .on{justify-self:start; margin-top:.25em; padding:.3em .7em; border-radius:999px; font:600 .72em/1.2 var(--sans); font-style:normal; color:#62C498;
  box-shadow:inset 0 0 0 .08em rgba(98,196,152,.45); transition:box-shadow .45s var(--ease), background .45s var(--ease)}
.bx-srcopt .chev{width:1.1em; height:1.1em; fill:none; stroke:#8F899F; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.bx-srcopt.glow{box-shadow:inset 0 0 0 .08em rgba(98,196,152,.42)}
.bx-srcopt.glow .on{background:rgba(98,196,152,.14); box-shadow:inset 0 0 0 .08em rgba(98,196,152,.75), 0 0 1.3em rgba(98,196,152,.35)}
.bx-srcopt.press{transform:scale(.975); background:rgba(238,201,110,.1); box-shadow:inset 0 0 0 .1em rgba(238,201,110,.6)}
.bx-stage{position:relative; display:block; width:100%; height:100%; overflow:visible}
.bx-stage .glow{fill:rgba(var(--tint),.09); stroke:rgba(var(--tint),.34); stroke-width:1; transform-origin:150px 150px; transform:scale(var(--gs,.86)); opacity:var(--go,.4)}
.btx-screen[data-v="i"] .bx-stage .glow{animation:bxIdle 6.5s ease-in-out infinite}
@keyframes bxIdle{0%,100%{transform:scale(.86); opacity:.35} 50%{transform:scale(.98); opacity:.75}}
.bx-stage .trk{fill:none; stroke:rgba(255,255,255,.1); stroke-width:1.5}
.bx-stage .prog{fill:none; stroke:rgb(var(--tint)); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:100 100; stroke-dashoffset:var(--rp,100); filter:drop-shadow(0 0 5px rgba(var(--tint),.7))}
.bx-stage .nose path{fill:none; stroke:rgba(244,240,232,.78); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.bx-stage .ns{fill:#07070B; stroke:rgba(244,240,232,.5); stroke-width:1.2; transition:fill .3s, stroke .3s}
.bx-stage .ns.on{fill:rgba(var(--tint),.45); stroke:rgb(var(--tint)); filter:drop-shadow(0 0 5px rgba(var(--tint),.95))}
.bx-stage .phn{fill:none; stroke:url(#bxPh); stroke-width:1.7; stroke-linejoin:round}
.bx-stage .pt{fill:#08080C; stroke:rgba(244,240,232,.36); stroke-width:1.5; transition:fill .3s, stroke .3s}
.bx-stage .lv{fill:rgba(var(--tint),.28)}
.bx-stage .nm{font:500 9px var(--mono); letter-spacing:.04em; fill:#8F899F; text-anchor:middle}
.bx-stage .sp.now .pt{stroke:rgb(var(--tint)); fill:rgba(var(--tint),.32); animation:bxPt 1.2s ease-in-out infinite}
.bx-stage .sp.now .lv{fill:rgba(var(--tint),.6)}
.bx-stage .sp.now .nm, .bx-stage .sp.best .nm{fill:rgb(var(--tint)); font-weight:600}
.bx-stage .sp.done .pt{stroke:rgba(var(--bjade),.85); fill:rgba(var(--bjade),.28)}
.bx-stage .sp.done .lv{fill:rgba(var(--bjade),.38)}
.bx-stage .sp.best .pt{stroke:rgb(var(--bgold)); fill:rgb(var(--bgold)); filter:drop-shadow(0 0 6px rgba(var(--bgold),.9))}
.bx-stage .sp.best .lv{fill:rgba(var(--bgold),.62)}
.bx-stage .sp.dim{opacity:.42}
@keyframes bxPt{0%,100%{stroke-width:1.5} 50%{stroke-width:4.5}}
.bx-stage .arw{transition:opacity .4s}
.bx-stage .arw .ln{stroke:rgba(var(--tint),.6); stroke-width:1.8; stroke-linecap:round}
.bx-stage .arw .hd{fill:rgb(var(--tint))}
.bx-stage .arw .flow{stroke:rgb(var(--tint)); stroke-width:2.8; stroke-linecap:round; stroke-dasharray:1 9; opacity:0; transition:opacity .3s}
.bx-stage[data-cue="out"] .arw .flow{opacity:1; animation:bxFlow .8s linear infinite}
.bx-stage[data-cue="in"] .arw .flow{opacity:.4; animation:bxFlow 1.4s linear infinite reverse}
.bx-stage.best .arw .ln{stroke:rgba(var(--bgold),.85); stroke-width:2.2}
.bx-stage.best .arw .hd{fill:rgb(var(--bgold)); filter:drop-shadow(0 0 6px rgba(var(--bgold),.9))}
.btx-screen[data-v="i"] .bx-stage .arw{opacity:0}
@keyframes bxFlow{to{stroke-dashoffset:-20}}

/* the screens under the stage */
.bx-v{position:absolute; z-index:4; left:0; right:0; top:11.6em; bottom:0; padding:0 1.4em; display:flex; flex-direction:column; gap:1em;
  opacity:0; visibility:hidden; transform:translateY(1em); transition:opacity .45s var(--ease), transform .6s var(--ease-out), visibility 0s linear .6s}
.bx-v.low{top:33em; align-items:center; text-align:center}
.bx-v.on{opacity:1; visibility:visible; transform:none; transition:opacity .5s var(--ease) .06s, transform .65s var(--ease-out) .06s, visibility 0s}
.bx-lede{margin:0; max-width:24em; font:400 1.1em/1.45 var(--sans); color:#F4F0E8; text-wrap:balance}
.bx-how{display:grid; gap:.5em; width:100%; margin:0; padding:0; list-style:none; text-align:left}
.bx-how li{display:grid; grid-template-columns:2.9em minmax(0,1fr); align-items:center; gap:.8em; padding:.6em .8em; border-radius:1.3em; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.065)}
.bx-how i{width:2.9em; height:2.9em; border-radius:1em; display:grid; place-items:center; background:rgba(var(--tint),.1); box-shadow:inset 0 0 0 .08em rgba(var(--tint),.3)}
.bx-how svg{width:1.45em; height:1.45em; fill:none; stroke:rgb(var(--tint)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.bx-how span{display:grid; gap:.2em; min-width:0}
.bx-how b{font:600 1em/1.2 var(--sans); color:#F4F0E8}
.bx-how em{font:400 .86em/1.3 var(--sans); font-style:normal; color:#8F899F}
.bx-cue{display:grid; justify-items:center; gap:.5em}
.bx-cue b{font:300 2.25em/1.08 var(--serif); letter-spacing:-.012em; color:#F4F0E8; text-wrap:balance}
.bx-cue em{max-width:26em; font:500 .97em/1.4 var(--sans); font-style:normal; color:#C3BCD0}
.bx-swap{display:grid; width:100%}
.bx-swap > *{grid-area:1/1; transition:opacity .45s var(--ease), transform .55s var(--ease-out)}
.bx-found{display:grid; justify-items:center; gap:.45em; opacity:0; transform:translateY(.8em)}
.bx-found span{font:600 .78em/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:rgb(var(--bgold))}
.bx-found b{font:300 2.6em/1.08 var(--serif); letter-spacing:-.01em; color:#F4F0E8}
.bx-found em{max-width:24em; font:400 1em/1.45 var(--sans); font-style:normal; color:#C3BCD0}
.bx-swap.found .bx-cue{opacity:0; transform:translateY(-.8em)}
.bx-swap.found .bx-found{opacity:1; transform:none}
.bx-hint{margin:0; max-width:25em; font:400 1em/1.5 var(--sans); color:#C3BCD0; transition:opacity .4s}
.bx-v.found .bx-hint{opacity:0}
.bx-meter{display:flex; align-items:center; justify-content:center; gap:.35em; margin:0; font:500 .93em/1 var(--sans); color:#8F899F}
.bx-meter i{width:.42em; height:1.1em; border-radius:.3em; background:rgba(255,255,255,.1); transform:scaleY(.45); transition:background .15s, transform .15s}
.bx-meter i.on{background:rgb(var(--bjade)); transform:none}
.bx-meter span{margin-left:.6em}
.bx-meter.hearing span{color:#C3BCD0}

/* the reading */
.bx-hero{--hero:var(--moon); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.85em .95em; padding:1.3em 1.15em 1.15em; border-radius:2em;
  background:radial-gradient(120% 90% at 0% 0%, rgba(var(--hero),.22), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 .08em rgba(var(--hero),.42), 0 2em 4em -2.6em rgba(var(--hero),.85)}
.bx-bignose{width:5.6em; height:3.9em}
.bx-bignose .br{fill:none; stroke:rgba(244,240,232,.72); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bx-bignose .ns{fill:#07070B; stroke:rgba(244,240,232,.45); stroke-width:1.5}
.bx-bignose .ns.on{fill:rgb(var(--moon)); stroke:rgb(var(--moon)); filter:drop-shadow(0 0 6px rgba(var(--moon),.95))}
.bx-hero-tx{min-width:0}
.bx-hero-tx b{display:block; font:400 1.55em/1.15 var(--serif); letter-spacing:-.01em; color:#F4F0E8; text-wrap:balance}
.bx-hero-tx em{display:block; margin-top:.4em; font:500 .89em/1.3 var(--sans); font-style:normal; color:#C3BCD0}
.bx-sure{position:relative; display:grid; place-items:center; width:4.5em; height:4.5em}
.bx-sure svg{position:absolute; inset:0; width:100%; height:100%}
.bx-sure .t, .bx-dial .t{fill:none; stroke:rgba(255,255,255,.1); stroke-width:2.4}
.bx-sure .p{fill:none; stroke:rgb(var(--hero)); stroke-width:2.4; stroke-linecap:round}
.bx-sure b{margin-top:-.5em; font:600 1.08em/1 var(--sans); color:#F4F0E8; font-variant-numeric:tabular-nums}
.bx-sure span{position:absolute; bottom:1em; font:600 .58em/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#8F899F}
.bx-split{grid-column:1/-1; display:flex; gap:.25em; height:.78em}
.bx-split i{display:block; min-width:0; height:100%; border-radius:.4em}
.bx-split .l{background:linear-gradient(90deg, rgba(var(--moon),.45), rgb(var(--moon)))}
.bx-split .r{background:linear-gradient(90deg, rgb(var(--sun)), rgba(var(--sun),.45))}
.bx-splitk{grid-column:1/-1; display:flex; justify-content:space-between; align-items:baseline; gap:.6em; font:500 .85em/1 var(--mono); color:#8F899F}
.bx-splitk b{font-weight:600; color:#F4F0E8; font-variant-numeric:tabular-nums}
.bx-splitk em{font-style:normal; opacity:.8}
.bx-by{grid-column:1/-1; margin:0; font:400 .89em/1.4 var(--sans); color:#8F899F}
.bx-h3{margin:.3em 0 -.4em; font:600 .8em/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:#8F899F}
.bx-tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.62em}
.bx-tile{display:grid; align-content:start; gap:.4em; min-width:0; padding:1em 1.08em; border-radius:1.4em; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.065);
  transition:opacity .45s var(--ease), transform .55s var(--ease-out)}
.bx-tile span{font:600 .73em/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#8F899F}
.bx-tile b{font:500 1.16em/1.3 var(--sans); color:#F4F0E8}
.bx-tile:not(.in){opacity:0; transform:translateY(.8em)}
.bx-sv{bottom:6.2em; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 90%,transparent); mask-image:linear-gradient(180deg,#000 90%,transparent)}
.bx-scroll{display:flex; flex-direction:column; gap:1em; padding-bottom:1em; transform:translate3d(0,var(--sy,0px),0)}

/* the record it fills in by itself */
.bx-saved{display:flex; align-items:center; gap:.8em; padding:.85em 1em; border-radius:1.3em; background:linear-gradient(180deg, rgba(98,196,152,.16), rgba(98,196,152,.06));
  box-shadow:inset 0 0 0 .08em rgba(var(--bjade),.5), 0 1em 2em -1.2em rgba(var(--bjade),.6); transition:opacity .45s var(--ease), transform .55s var(--ease-out)}
.bx-saved:not(.on){opacity:0; transform:translateY(-.8em)}
.bx-saved i{flex:none; width:2.2em; height:2.2em; border-radius:50%; display:grid; place-items:center; background:rgba(var(--bjade),.22)}
.bx-saved i svg{width:1.2em; height:1.2em; fill:none; stroke:rgb(var(--bjade)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bx-saved span{display:grid; gap:.2em; min-width:0}
.bx-saved b{font:600 1.02em/1.2 var(--sans); color:#F4F0E8}
.bx-saved em{font:400 .86em/1.2 var(--sans); font-style:normal; color:#C3BCD0}
.bx-rec{padding:1em 1.1em .9em; border-radius:1.7em; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.07)}
.bx-rec-hd{display:flex; align-items:center; justify-content:space-between; gap:.8em; padding-bottom:.75em; border-bottom:.08em solid rgba(255,255,255,.07)}
.bx-rec-hd > span:first-child{display:grid; gap:.25em; min-width:0}
.bx-rec-hd em{font:600 .72em/1 var(--sans); font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--bjade))}
.bx-rec-hd b{font:400 1.38em/1.15 var(--serif); color:#F4F0E8}
.bx-rec-n{display:flex; align-items:center; gap:.45em}
.bx-rec-n b{font:300 2.6em/1 var(--serif); color:rgb(var(--bjade)); font-variant-numeric:tabular-nums; text-shadow:0 0 .6em rgba(var(--bjade),.5)}
.bx-rec-n em{font:500 .74em/1.2 var(--sans); font-style:normal; color:#C3BCD0}
.bx-rows{margin:0; padding:.2em 0 0; list-style:none}
.bx-rows li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:.6em; min-height:2.2em; border-bottom:.08em solid rgba(255,255,255,.045);
  transition:opacity .35s var(--ease), transform .45s var(--ease-out)}
.bx-rows li:last-child{border-bottom:0}
.bx-rows span{font:500 .88em/1.2 var(--sans); color:#8F899F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bx-rows b{font:500 .95em/1.2 var(--sans); color:#F4F0E8; text-align:right; white-space:nowrap}
.bx-rows i{width:5.6em; font:600 .62em/1 var(--sans); font-style:normal; letter-spacing:.08em; text-transform:uppercase; text-align:right; white-space:nowrap}
.bx-rows .s i{color:rgb(var(--bjade))}
.bx-rows .m i{color:rgb(var(--bgold))}
.bx-rows .y i, .bx-rows .y b{color:#6F6A80}
.bx-rows li:not(.in){opacity:0; transform:translateX(-.6em)}
.bx-rows .s.in b{animation:bxType .5s var(--ease-out)}
@keyframes bxType{from{opacity:0; filter:blur(3px)}}
.bx-rec-ft{margin:.7em 0 0; font:400 .8em/1.4 var(--sans); color:#8F899F; transition:opacity .5s}

/* yours: learned on this phone, never a recording, brought back by your key */
.bx-own{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.9em; padding:1.05em 1.1em; border-radius:1.7em;
  background:radial-gradient(120% 110% at 0% 0%, rgba(var(--bsky),.2), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 .08em rgba(var(--bsky),.42), 0 1.6em 3.4em -2.4em rgba(var(--bsky),.8)}
.bx-own-ic{width:3.3em; height:3.3em; border-radius:1.1em; display:grid; place-items:center; background:rgba(var(--bsky),.14); box-shadow:inset 0 0 0 .08em rgba(var(--bsky),.45)}
.bx-own-ic svg{width:1.7em; height:1.7em; fill:none; stroke:rgb(var(--bsky)); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.bx-own > span:last-child{display:grid; gap:.3em; min-width:0}
.bx-own b{font:400 1.36em/1.15 var(--serif); color:#F4F0E8}
.bx-own em{font:500 .8em/1.3 var(--sans); font-style:normal; color:#C3BCD0}
.bx-facts{display:grid; gap:.5em; margin:0; padding:0; list-style:none}
.bx-facts li{display:grid; grid-template-columns:2.7em minmax(0,1fr); align-items:center; gap:.8em; padding:.6em .75em; border-radius:1.2em; background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 .08em rgba(255,255,255,.065); transition:opacity .45s var(--ease), transform .55s var(--ease-out)}
.bx-facts li:not(.in){opacity:0; transform:translateY(.7em)}
.bx-facts i{width:2.7em; height:2.7em; border-radius:.95em; display:grid; place-items:center; background:rgba(var(--bsky),.1); box-shadow:inset 0 0 0 .08em rgba(var(--bsky),.3)}
.bx-facts svg{width:1.35em; height:1.35em; fill:none; stroke:rgb(var(--bsky)); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.bx-facts span{display:grid; gap:.2em; min-width:0}
.bx-facts b{font:600 .98em/1.2 var(--sans); color:#F4F0E8}
.bx-facts em{font:400 .84em/1.3 var(--sans); font-style:normal; color:#8F899F}
.bx-restore{display:grid; gap:.55em; padding:.95em 1em 1em; border-radius:1.5em; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.07)}
.bx-rk{font:600 .72em/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#8F899F}
.bx-field{position:relative; display:grid; gap:.3em; padding:.6em .8em; border-radius:1em; background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 .08em rgba(var(--bsky),.35)}
.bx-field em{font:500 .7em/1 var(--sans); font-style:normal; color:#8F899F}
.bx-field b{min-height:1.2em; font:600 .92em/1.2 var(--mono); letter-spacing:.06em; color:#F4F0E8; white-space:nowrap; overflow:hidden}
.bx-caret{position:absolute; right:.9em; bottom:.75em; width:.1em; height:1em; background:rgb(var(--bsky)); animation:bxCaret 1s steps(2) infinite}
@keyframes bxCaret{50%{opacity:0}}
.bx-go.sm{height:3em; font-size:1.02em}
.bx-v[data-v="4"]{gap:.75em}

/* what it learns */
.bx-ask{display:grid; gap:.7em}
.bx-ask > b{font:600 1.08em/1.3 var(--sans); color:#F4F0E8}
.bx-chips{display:flex; flex-wrap:wrap; gap:.45em}
.bx-chips span{display:inline-flex; align-items:center; height:2.9em; padding:0 1.05em; border-radius:2em; font:500 1em/1 var(--sans); color:#C3BCD0;
  background:var(--bgrain), linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)); box-shadow:inset 0 .08em 0 rgba(255,255,255,.16), inset 0 0 0 .08em rgba(255,255,255,.12);
  transition:transform .18s, color .3s, background .3s, box-shadow .3s}
.bx-chips span.on{color:#F4F0E8; background:var(--bgrain), linear-gradient(180deg, rgba(246,222,147,.22), rgba(214,178,74,.08)); box-shadow:inset 0 .08em 0 rgba(255,246,214,.35), inset 0 0 0 .08em rgba(246,222,147,.62)}
.bx-chips span.press{transform:scale(.93)}
.bx-learn{padding:0 1.15em 1.15em; border-radius:1.7em; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.065)}
.bx-lhd{display:flex; align-items:center; gap:.9em; padding:1em 0}
.bx-spark{flex:none; width:2.9em; height:2.9em; border-radius:1em; display:grid; place-items:center; background:rgba(var(--bgold),.12); box-shadow:inset 0 0 0 .08em rgba(var(--bgold),.36)}
.bx-spark svg{width:1.4em; height:1.4em; fill:none; stroke:rgb(var(--bgold)); stroke-width:1.6; stroke-linejoin:round}
.bx-lhd b{font:600 1.08em/1.25 var(--sans); color:#F4F0E8}
.bx-lm{display:grid; gap:.65em; padding-top:1em; border-top:.08em solid rgba(255,255,255,.065)}
.bx-lm + .bx-lm{margin-top:1em}
.bx-lmh{display:flex; align-items:center; gap:.75em}
.bx-lmh b{flex:1; min-width:0; font:600 1em/1.25 var(--sans); color:#F4F0E8}
.bx-chip{flex:none; padding:.4em .7em; border-radius:2em; font:600 .77em/1 var(--sans); font-style:normal; letter-spacing:.03em; white-space:nowrap}
.bx-chip.g{color:rgb(var(--bgold)); background:rgba(var(--bgold),.1); box-shadow:inset 0 0 0 .08em rgba(var(--bgold),.36)}
.bx-chip.t{color:rgb(var(--bsky)); background:rgba(var(--bsky),.1); box-shadow:inset 0 0 0 .08em rgba(var(--bsky),.4)}
.bx-chip.ok{color:rgb(var(--bjade)); background:rgba(var(--bjade),.1); box-shadow:inset 0 0 0 .08em rgba(var(--bjade),.45)}
.bx-chip.lit{animation:bxLit 1.6s ease-out}
@keyframes bxLit{0%{box-shadow:inset 0 0 0 .08em rgba(var(--bjade),.95), 0 0 0 .45em rgba(var(--bjade),.28)}}
.bx-bar{height:.46em; border-radius:.3em; background:rgba(255,255,255,.065); overflow:hidden}
.bx-bar i{display:block; width:var(--w,0%); height:100%; min-width:2px; border-radius:.3em; background:linear-gradient(90deg, rgba(var(--bgold),.5), rgb(var(--bgold))); box-shadow:0 0 .9em rgba(var(--bgold),.55)}
.bx-n{display:flex; align-items:baseline; gap:.45em}
.bx-n b{font:300 1.8em/1 var(--serif); color:#F4F0E8; font-variant-numeric:tabular-nums}
.bx-n span{font:500 .85em/1 var(--mono); color:#8F899F}
.bx-dials{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.4em}
.bx-dials.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.bx-dials > span{display:grid; justify-items:center; gap:.35em; min-width:0}
.bx-dials em{font:500 .72em/1.2 var(--mono); font-style:normal; color:#8F899F; font-variant-numeric:tabular-nums}
.bx-dial{display:block; width:3em; height:3em}
.bx-dial .p{fill:none; stroke:rgb(var(--bgold)); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:var(--d,0) 100}
.bx-dial .in{fill:none; stroke:#C3BCD0; stroke-width:1.8; stroke-linejoin:round}
.bx-dial .rn{font:600 10px var(--sans); fill:#F4F0E8; text-anchor:middle}
.bx-dials .full .p{stroke:rgb(var(--bjade))}
.bx-dials .full em{color:rgb(var(--bjade))}

/* the arrow on the phone's own bottom edge, and the way on */
.bx-ptr{position:absolute; z-index:7; left:0; right:0; bottom:0; height:5.4em; pointer-events:none; opacity:0; transition:opacity .45s}
.btx-screen[data-v="0"] .bx-ptr, .btx-screen[data-v="1"] .bx-ptr{opacity:1}
.bx-ptr-ar{position:absolute; bottom:0; left:var(--px,86%); width:2.6em; margin-left:-1.3em; display:grid; justify-items:center}
.bx-ptr-ar svg{width:2.6em; height:4em; overflow:visible; fill:none; stroke:rgb(var(--pt, var(--tint))); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 .45em rgba(var(--pt, var(--tint)),.9)); animation:bxPoint 1.6s ease-in-out infinite}
.bx-ptr-ar::after{content:''; position:absolute; bottom:-.8em; left:50%; width:4.4em; height:1.7em; margin-left:-2.2em; border-radius:50%; background:radial-gradient(closest-side, rgba(var(--pt, var(--tint)),.75), rgba(var(--pt, var(--tint)),0))}
.bx-ptr-lab{position:absolute; bottom:2em; font:600 .86em/1.2 var(--sans); letter-spacing:.04em; color:rgb(var(--pt, var(--tint))); white-space:nowrap}
.bx-ptr.best{--pt:var(--bgold)}
@keyframes bxPoint{0%,100%{transform:translateY(-.3em)} 50%{transform:translateY(.25em)}}
.bx-foot{position:absolute; z-index:7; left:1.4em; right:1.4em; bottom:1.7em; opacity:0; transform:translateY(.8em); transition:opacity .45s, transform .55s var(--ease-out)}
.btx-screen[data-v="i"] .bx-foot, .btx-screen[data-v="2"] .bx-foot{opacity:1; transform:none}
.bx-go{display:flex; align-items:center; justify-content:center; height:3.6em; border-radius:1.25em; font:600 1.15em/1 var(--sans); letter-spacing:.01em; color:#FBEFC8; text-shadow:0 0 1em rgba(246,222,147,.45);
  background:var(--bgrain), radial-gradient(120% 140% at 50% -30%, rgba(255,240,196,.34), transparent 60%), linear-gradient(180deg, rgba(246,222,147,.24), rgba(214,178,74,.1));
  box-shadow:inset 0 .07em 0 rgba(255,246,214,.5), inset 0 0 0 .07em rgba(246,222,147,.58), 0 1em 2.2em -1.2em rgba(214,178,74,.75), 0 0 1.6em -.7em rgba(246,222,147,.45);
  transition:transform .15s, filter .15s}
.bx-go.press{transform:scale(.965); filter:brightness(1.35)}

/* the closing beat: a check in the disc instead of a number */
.btx-beats li.btx-fin > i svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* what it reads, as a list in glass: at rest under the phone; in the scene, its finale, taking the phone's place */
.btx-phone{grid-auto-rows:auto}
.btx-reads{position:relative; z-index:3; container-type:inline-size; width:min(560px,100%); padding:clamp(20px,2.4vw,30px); border-radius:28px; text-align:left;
  background:var(--bgrain), radial-gradient(120% 70% at 0% 0%, rgba(var(--bgold),.12), transparent 60%), linear-gradient(180deg, rgba(20,19,28,.62), rgba(12,12,18,.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -40px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3)}
.btx-reads-k{margin:0; font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.btx-reads h3{margin-top:10px; font:300 clamp(24px,2.3vw,32px)/1.1 var(--serif); letter-spacing:-.015em; color:var(--ink)}
.btx-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; margin:20px 0 0; padding:0; list-style:none}
.btx-list li{display:grid; grid-template-columns:34px minmax(0,1fr); align-items:start; gap:12px; padding:12px 12px 13px; border-radius:16px;
  background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); transition:opacity .5s var(--ease), transform .6s var(--ease-out)}
.btx-list i{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:rgba(var(--bgold),.1); box-shadow:inset 0 0 0 1px rgba(var(--bgold),.3)}
.btx-list i.sw{background:linear-gradient(90deg, rgba(var(--moon),.28), rgba(var(--sun),.24)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.btx-list svg{width:18px; height:18px; fill:none; stroke:var(--gold-hi); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.btx-list i.sw svg{stroke:#F4F0E8}
.btx-list span{display:grid; gap:5px; min-width:0; padding-top:1px}
.btx-list b{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font:500 14.5px/1.25 var(--sans); color:var(--ink)}
.btx-list em{font:400 12.5px/1.45 var(--sans); font-style:normal; color:var(--ink-2)}
.btx-list small{display:none}
.btx-list u{padding:3px 7px; border-radius:999px; text-decoration:none; font:600 9px/1.1 var(--sans); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:rgb(var(--bgold)); box-shadow:inset 0 0 0 1px rgba(var(--bgold),.45)}
.btx-list li.taught{background:rgba(var(--bgold),.05); box-shadow:inset 0 0 0 1px rgba(var(--bgold),.2)}
.btx-reads-ft{margin:14px 0 0; font:400 12px/1.5 var(--sans); color:var(--ink-2)}
/* the reads card's note: teach it first for your element; the model is the reader's own (the user, 2026-10-02) */
.btx-yours{display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start; margin:16px 0 0; padding:13px 14px 14px; border-radius:16px;
  background:linear-gradient(180deg, rgba(var(--bgold),.12), rgba(var(--bgold),.04)); box-shadow:inset 0 0 0 1px rgba(var(--bgold),.34)}
.btx-yours i{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:rgba(var(--bgold),.14); box-shadow:inset 0 0 0 1px rgba(var(--bgold),.36)}
.btx-yours svg{width:18px; height:18px; fill:none; stroke:var(--gold-hi); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.btx-yours p{margin:0; font:400 12.5px/1.55 var(--sans); color:var(--ink-2)}
.btx-yours b{display:block; margin-bottom:2px; font:600 13.5px/1.35 var(--sans); color:var(--ink)}
/* step 3: what teaching earns — a paragraph of its own (a step's <b> is a 17px block, and its spans fold), folding with its step */
.btx-beats .btx-tok{display:flex; align-items:center; gap:8px; margin:12px 0 0; font:500 12px/1.4 var(--sans); color:var(--ink-2)}
.btx-beats .btx-tok > i{flex:none; display:grid; width:20px; height:20px}
.btx-beats .btx-tok svg{width:20px; height:20px}
.btx-beats .btx-tok strong{font-weight:700; color:var(--gold-hi); font-variant-numeric:tabular-nums; white-space:nowrap}
.btx-live .btx-beats .btx-tok{margin-top:8px; font-size:11px}
@media(min-width:760px){
  .btx-live .btx-beats li > div > .btx-tok{max-height:0; margin-top:0; opacity:0; overflow:hidden;
    transition:max-height .55s var(--ease-out), opacity .4s var(--ease), margin-top .55s var(--ease-out)}
  .btx-live .btx-beats li.on > div > .btx-tok{max-height:4em; opacity:1; margin-top:12px}
}
/* the phone: the app's token moment (ui-lite-tokens.js lfxShow, the app's .ltk-fx), drawn to the screen's scale (an app pixel is
   1/12.1 em here): the coin turns up out of a light that breathes, a halo of rays turning, a ring and sparks leaving it; the figure
   counts, what it was for, Wallet. home.js plays it (.on) and shows it (.in), and lets it fade before the play is let go. */
.bx-fx{position:absolute; inset:0; z-index:30; display:grid; place-items:center; pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
  --fx-rgb:242,217,138; --fx-g1:#FFF5D6; --fx-g2:#F4D98C; --fx-g3:#D9AE52; --fx-ink:#F4EFE4; --fx-spark:#FFF1C9}
.bx-fx.in{opacity:1; visibility:visible; transition:opacity .3s ease}
.bx-fx-veil{position:absolute; inset:0;
  background:radial-gradient(115% 85% at 50% 40%, rgba(7,6,11,.62) 0%, rgba(7,6,11,.76) 48%, rgba(7,6,11,.88) 100%);
  -webkit-backdrop-filter:blur(.75em) saturate(.85); backdrop-filter:blur(.75em) saturate(.85)}
.bx-fx-stage{position:relative; display:grid; justify-items:center; width:28em; max-width:92%; margin-top:-4.5em; text-align:center}
.bx-fx-art{position:relative; width:18.2em; height:16.2em; display:grid; place-items:center}
/* the light behind the coin, breathing */
.bx-fx-glow{position:absolute; left:50%; top:50%; width:23.2em; height:23.2em; margin:-11.6em 0 0 -11.6em; border-radius:50%; opacity:0; transform:scale(.4);
  background:radial-gradient(circle, rgba(var(--fx-rgb),.6) 0%, rgba(var(--fx-rgb),.3) 22%, rgba(var(--fx-rgb),.1) 46%, rgba(var(--fx-rgb),0) 68%)}
.bx-fx.on .bx-fx-glow{animation:bxfxGlow .75s cubic-bezier(.2,.8,.2,1) forwards, bxfxBreathe 2.8s ease-in-out .75s infinite}
@keyframes bxfxGlow{to{opacity:1; transform:scale(1)}}
@keyframes bxfxBreathe{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.86; transform:scale(1.08)}}
/* a faint halo of rays, turning slowly; brighter for a milestone */
.bx-fx-rays{position:absolute; left:50%; top:50%; width:29.8em; height:29.8em; margin:-14.9em 0 0 -14.9em; border-radius:50%; opacity:0;
  background:repeating-conic-gradient(from 0deg, rgba(var(--fx-rgb),.2) 0deg 2.4deg, rgba(var(--fx-rgb),0) 2.4deg 20deg);
  -webkit-mask:radial-gradient(circle, transparent 0 30%, #000 42%, rgba(0,0,0,.45) 56%, transparent 70%); mask:radial-gradient(circle, transparent 0 30%, #000 42%, rgba(0,0,0,.45) 56%, transparent 70%)}
.bx-fx.on .bx-fx-rays{animation:bxfxRays 1.1s ease .3s forwards, bxfxTurn 18s linear infinite}
.bx-fx.big.on .bx-fx-rays{animation-name:bxfxRaysBig, bxfxTurn}
@keyframes bxfxRays{to{opacity:.75}}
@keyframes bxfxRaysBig{to{opacity:1}}
@keyframes bxfxTurn{to{transform:rotate(360deg)}}
/* two rings leaving the coin */
.bx-fx-ring{position:absolute; left:50%; top:50%; width:9.6em; height:9.6em; margin:-4.8em 0 0 -4.8em; border-radius:50%; opacity:0;
  box-shadow:0 0 0 .125em rgba(var(--fx-rgb),.8), 0 0 2em rgba(var(--fx-rgb),.32)}
.bx-fx.on .bx-fx-ring{animation:bxfxRing 1s cubic-bezier(.15,.7,.25,1) .45s forwards}
.bx-fx.on .bx-fx-ring.r2{animation-delay:.68s}
@keyframes bxfxRing{0%{opacity:.85; transform:scale(.92)} 100%{opacity:0; transform:scale(2.4)}}
/* sparks out of it: twelve, and eighteen for a milestone */
.bx-fx-bits{position:absolute; left:50%; top:50%; width:0; height:0}
.bx-fx-bits i{position:absolute; left:0; top:0; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%; opacity:0;
  background:var(--fx-spark); box-shadow:0 0 .5em .08em rgba(var(--fx-rgb),.85)}
.bx-fx:not(.big) .bx-fx-bits i:nth-child(n+13){display:none}
.bx-fx.on .bx-fx-bits i{animation:bxfxSpark .85s cubic-bezier(.12,.75,.3,1) calc(.42s + var(--d)) forwards}
@keyframes bxfxSpark{0%{opacity:1; transform:translate(0,0) scale(1)} 100%{opacity:0; transform:translate(var(--x),var(--y)) scale(.35)}}
/* the coin: the app's own, turning up and settling, a glint across it, floating as the light breathes */
.bx-fx-shadow{position:absolute; left:50%; bottom:2em; width:7.1em; height:1em; margin-left:-3.55em; border-radius:50%; opacity:0;
  background:radial-gradient(ellipse, rgba(0,0,0,.5), rgba(0,0,0,0) 70%)}
.bx-fx.on .bx-fx-shadow{animation:bxfxShow .6s ease .45s forwards}
.bx-fx-coin{position:relative; width:9.26em; height:9.26em; perspective:59.5em; opacity:0}
.bx-fx.on .bx-fx-coin{animation:bxfxShow .35s ease forwards}
@keyframes bxfxShow{to{opacity:1}}
.bx-fx-spin{position:absolute; inset:0; display:block; border-radius:50%; transform-style:preserve-3d;
  filter:drop-shadow(0 1em 1.65em rgba(0,0,0,.5)) drop-shadow(0 0 1.5em rgba(var(--fx-rgb),.5))}
.bx-fx-spin svg{display:block; width:100%; height:100%}
.bx-fx.on .bx-fx-spin{animation:bxfxFlip 1s cubic-bezier(.18,.82,.22,1.1) forwards, bxfxFloat 2.8s ease-in-out 1s infinite}
@keyframes bxfxFlip{0%{transform:translateY(3em) scale(.3) rotateY(-720deg)} 72%{transform:translateY(-.5em) scale(1.06) rotateY(-12deg)} 100%{transform:translateY(0) scale(1) rotateY(0deg)}}
@keyframes bxfxFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-.33em)}}
.bx-fx-glint{position:absolute; inset:0; border-radius:50%; overflow:hidden}
.bx-fx-glint::after{content:''; position:absolute; top:-20%; bottom:-20%; left:-60%; width:36%; transform:skewX(-18deg); opacity:0;
  background:linear-gradient(90deg, rgba(255,248,226,0), rgba(255,248,226,.6), rgba(255,248,226,0))}
.bx-fx.on .bx-fx-glint::after{animation:bxfxGlint .85s ease 1s forwards}
@keyframes bxfxGlint{0%{left:-60%; opacity:0} 20%{opacity:1} 100%{left:130%; opacity:0}}
/* the figure, counting; what it was for; the way on */
.bx-fx-amt{display:grid; justify-items:center; gap:.5em; margin-top:-.33em; opacity:0; transform:translateY(.83em)}
.bx-fx.on .bx-fx-amt{animation:bxfxUp .55s cubic-bezier(.2,.8,.2,1) .3s forwards}
@keyframes bxfxUp{to{opacity:1; transform:none}}
.bx-fx-amt b{display:flex; align-items:baseline; font:500 4.47em/1 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums;
  color:var(--fx-g2); background:linear-gradient(180deg, var(--fx-g1) 0%, var(--fx-g2) 52%, var(--fx-g3) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 .04em .3em rgba(var(--fx-rgb),.32))}
.bx-fx.big .bx-fx-amt b{font-size:5.13em}
.bx-fx-sign{align-self:center; margin:-.06em .09em 0 0; font-size:.6em; font-weight:400}
.bx-fx-amt small{font:600 .87em/1.2 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:rgba(var(--fx-rgb),.92)}
.bx-fx-why{max-width:30ch; margin:.83em 0 0; font:400 1.2em/1.45 var(--sans); color:var(--fx-ink); opacity:0; text-wrap:balance}
.bx-fx.on .bx-fx-why{animation:bxfxUp .55s cubic-bezier(.2,.8,.2,1) .5s forwards}
.bx-fx-go{display:inline-flex; align-items:center; height:2.92em; margin-top:1.23em; padding:0 1.54em; border-radius:999px; font:600 1.075em/1 var(--sans); letter-spacing:.01em; opacity:0;
  color:var(--fx-g2); background:rgba(var(--fx-rgb),.12); box-shadow:inset 0 0 0 .077em rgba(var(--fx-rgb),.38)}
.bx-fx.on .bx-fx-go{animation:bxfxUp .55s cubic-bezier(.2,.8,.2,1) .8s forwards}
/* for less motion: the same moment, standing still */
@media (prefers-reduced-motion:reduce){
  .bx-fx-rays, .bx-fx-ring, .bx-fx-bits, .bx-fx-glint{display:none}
  .bx-fx.on .bx-fx-glow, .bx-fx.on .bx-fx-coin, .bx-fx.on .bx-fx-shadow, .bx-fx.on .bx-fx-amt, .bx-fx.on .bx-fx-why, .bx-fx.on .bx-fx-go{animation:bxfxShow .25s ease forwards; transform:none}
  .bx-fx.on .bx-fx-spin{animation:none}
}
/* the saved strip: Undo and Confirm, then confirmed against the Swara Code (the app's Recorded step) */
.bx-saved-acts{display:flex; gap:.4em; margin-left:auto}
.bx-saved-acts span{padding:.5em .8em; border-radius:.8em; font:600 .84em/1 var(--sans); color:#E9E3F2; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.12); transition:transform .15s, background .2s}
.bx-saved-acts .c{color:#10241B; background:rgb(var(--bjade))}
.bx-saved-acts .c.press{transform:scale(.94); filter:brightness(1.2)}
.bx-saved.done .bx-saved-acts{display:none}
.bx-saved.done em{color:rgb(var(--bjade))}
@container (max-width:470px){ .btx-list{grid-template-columns:minmax(0,1fr)} }

/* played by the scroll: the section is a tall track and its stage is held on screen while it plays; at its end the
   next chapter rises over it, as the chapters rise over one another (the user, 2026-09-27: "the boundary ... is ending
   bluntly ... the section below should cover the Breath Tap section as the user scrolls further"). The track is one
   stage longer than the story, and the deck is drawn up by one stage, so its first card rises over the held scene
   while the scene dims and draws back (home.js). */
.btx-live{height:calc(740vh - 144px)}
.btx-live + .deck{margin-top:calc(72px - 100vh)}
.btx-live + .deck > .slide:first-child{border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0; box-shadow:0 -30px 70px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06)}
.btx-live + .deck > .slide:first-child::after{display:block}
/* since 2026-10-01 the tour comes between them: it is the one drawn up over the held scene, a card with the deck's own top, on
   the page's ground (so nothing of the scene shows through it); the deck's first card keeps its card top after it */
.btx-live + .tour{margin-top:calc(72px - 100vh); background:var(--ground); border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0;
  box-shadow:0 -30px 70px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06)}
.btx-live + .tour::after{content:''; position:absolute; z-index:0; left:0; right:0; top:0; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(235,211,162,.4),transparent)}
.tour + .deck > .slide:first-child{border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0; box-shadow:0 -30px 70px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06)}
.tour + .deck > .slide:first-child::after{display:block}
.btx-live .btx-reads{position:absolute; left:0; right:0; top:50%; margin:0 auto; transform:translate3d(0,calc(-50% + (1 - var(--rd,0)) * 40px),0) scale(calc(.96 + var(--rd,0) * .04));
  opacity:var(--rd,0); visibility:hidden}
.btx-live.btx-fin-on .btx-reads{visibility:visible}
.btx-live .btx-list li:not(.in){opacity:0; transform:translateY(10px)}
.btx-dim{position:absolute; inset:0; z-index:8; background:#05060A; opacity:0; pointer-events:none; will-change:opacity}
.btx-live .btx-stage{position:sticky; top:72px; height:calc(100vh - 72px)}
.btx-live .btx-in{height:calc(100svh - 72px); padding-top:clamp(20px,4vh,48px); padding-bottom:clamp(20px,4vh,48px); grid-template-rows:minmax(0,1fr)}
.btx-live .btx-copy{align-self:center}
.btx-live .btx-phone{align-self:stretch; min-height:0}
/* on a wide screen the words follow the scene: every beat keeps its title, and only the one being played opens its
   words (and, for teaching it, its three numbers), so the column stays within the held screen */
@media(min-width:760px){
  .btx-live .btx-beats li{padding:12px 0}
  .btx-live .btx-beats li > div > span{max-height:0; margin-top:0; opacity:0; overflow:hidden;
    transition:max-height .55s var(--ease-out), opacity .4s var(--ease), margin-top .55s var(--ease-out)}
  .btx-live .btx-beats li.on > div > span{max-height:10em; opacity:1; margin-top:6px}
  .btx-live .btx-beats li.on > div > span.btx-stats{margin-top:12px}
}
@media(max-width:759px){
  .btx-in{grid-template-columns:minmax(0,1fr); gap:44px}
  .btx-copy{max-width:none}
  .btx-phone{perspective:1000px}
  .btx-live{height:calc(700vh - 144px)}
  .btx-live .btx-in{display:flex; flex-direction:column; align-items:stretch; gap:0; padding:clamp(12px,2.4svh,26px) var(--gutter) clamp(12px,2svh,22px)}
  .btx-live .btx-copy{display:contents}
  .btx-live .kick{order:1; align-self:flex-start}
  .btx-live .btx-h{order:2; margin-top:10px; font-size:clamp(30px,8.4vw,44px)}
  .btx-live .btx-h em{margin-top:.16em; font-size:.52em}
  .btx-live .btx-phone{order:3; flex:1 1 0; margin:clamp(8px,1.8svh,18px) 0}
  /* one beat at a time, all four in one cell: the cell keeps the tallest one's height, so the phone never moves */
  .btx-live .btx-beats{order:4; display:grid; margin-top:0; border:0}
  .btx-live .btx-beats li{grid-area:1/1; padding:0; border:0; visibility:hidden; opacity:0; transform:translateY(8px);
    transition:opacity .45s var(--ease), transform .55s var(--ease-out), visibility 0s linear .55s}
  .btx-live .btx-beats li.on{visibility:visible; opacity:1; transform:none; transition:opacity .45s var(--ease), transform .55s var(--ease-out), visibility 0s}
  .btx-live .btx-punch{display:none}
  .btx-live .btx-long{display:none}
  .btx-live .btx-beats .btx-stats{gap:6px; margin-top:8px}
  .btx-live .btx-beats .btx-stats > span{padding:7px 9px 8px; border-radius:12px}
  .btx-live .btx-beats .btx-stats b{font-size:22px}
  .btx-live .btx-beats .btx-stats em{font-size:10px}
  .btx-live .btx-beats .btx-stats i{display:none}
  .btx-live .btx-keep{order:5; flex-wrap:nowrap; gap:6px; margin-top:10px; overflow:hidden}
  .btx-live .btx-keep li{height:28px; padding:0 9px 0 8px; gap:5px; font-size:10.5px}
  .btx-live .btx-keep svg{width:13px; height:13px}
  .btx-live .btx-ph{--pw:var(--pwv,240px)}
  .btx-live .btx-reads{top:0; bottom:calc(-1 * var(--bh,0px)); width:min(100%,520px); display:flex; flex-direction:column; justify-content:center; padding:18px 16px 16px; border-radius:22px;
    overflow:auto; scrollbar-width:none; transform:translate3d(0,calc((1 - var(--rd,0)) * 30px),0); -webkit-backdrop-filter:none; backdrop-filter:none;
    background:var(--bgrain), linear-gradient(180deg, rgba(20,19,28,.86), rgba(12,12,18,.92))}
  .btx-live .btx-reads::-webkit-scrollbar{width:0}
  .btx-live.btx-fin-on .btx-beats{opacity:0; transition:opacity .4s var(--ease)}
  .btx-live .btx-reads-k{font-size:10px; letter-spacing:.16em}
  .btx-live .btx-reads h3{margin-top:8px; font-size:21px}
  /* two columns, each a name and a two-word hint */
  .btx-live .btx-list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:16px}
  .btx-live .btx-list li{grid-template-columns:26px minmax(0,1fr); align-items:center; gap:9px; padding:8px 9px; border-radius:12px}
  .btx-live .btx-list i{width:26px; height:26px; border-radius:8px}
  .btx-live .btx-list svg{width:14px; height:14px}
  .btx-live .btx-list span{gap:2px; padding-top:0}
  .btx-live .btx-list b{font-size:12.5px; gap:2px 6px; line-height:1.2}
  .btx-live .btx-list em{display:none}
  .btx-live .btx-list small{display:block; font:400 11px/1.25 var(--sans); color:var(--ink-2)}
  .btx-live .btx-list .btx-tag, .btx-live .btx-list u{font-size:0; padding:2px 6px}
  .btx-live .btx-list .btx-tag::after, .btx-live .btx-list u::after{content:attr(data-short); font:600 8.5px/1.1 var(--sans); letter-spacing:.06em; text-transform:uppercase}
  .btx-live .btx-reads-ft{margin-top:12px; font-size:11px; line-height:1.45}
}
@media(max-width:759px) and (max-height:720px){
  .btx-live .btx-beats div > span:not(.btx-stats){display:none}
  .btx-live .btx-keep{display:none}
  .btx-live .btx-list em{display:none}
  .btx-live .btx-list b::after{content:none}
}
@media(max-width:380px){ .btx-live .btx-keep li:nth-child(3){display:none} }
@media(min-width:760px) and (max-width:1099px){
  .btx-in{grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(20px,3vw,40px)}
  .btx-h{font-size:clamp(38px,5vw,56px)}
  .btx-beats b{font-size:16px}
  .btx-beats span{font-size:13px}
}
@media(min-width:760px) and (max-height:820px){
  .btx-live .btx-punch{display:none}
  .btx-live .btx-h{font-size:clamp(34px,4.2vw,58px)}
  .btx-live .btx-beats{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .btx-stage::before, .bx-stage .glow, .bx-stage .sp .pt, .bx-stage .arw .flow, .bx-ptr-ar svg{animation:none !important}
}

/* ---- the mirror test, shown (home.js, mirrorGuide; the user, 2026-09-27: "the same mirror test guide on the website …
   in a pop up manner like the website info analytics card", and a "How to do the mirror test" button where it is seen).
   The ways in: a gold glass button under the three promises, a line under the numbers for teaching it, and the tag
   beside Tattva in the list of what it reads. The card: the growth card's ground and gold edge, the app's own guide in it. ---- */
.btx-mt{display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; width:min(100%,430px); margin-top:14px; padding:10px 16px 10px 10px; border:0; border-radius:16px;
  cursor:pointer; text-align:left; font:inherit; color:var(--ink); -webkit-tap-highlight-color:transparent;
  background:var(--bgrain), linear-gradient(180deg, rgba(246,222,147,.13), rgba(246,222,147,.04)); box-shadow:inset 0 1px 0 rgba(255,246,214,.22), inset 0 0 0 1px rgba(246,222,147,.42);
  transition:filter .25s var(--ease), transform .25s var(--ease-out)}
.btx-mt:hover{filter:brightness(1.14)}
.btx-mt:active{transform:scale(.99)}
.btx-mt::after{content:''; width:7px; height:7px; margin-right:2px; border-right:1.6px solid var(--gold-hi); border-top:1.6px solid var(--gold-hi); transform:rotate(45deg)}
.btx-mt b{display:block; font:500 15px/1.25 var(--sans); color:var(--ink)}
.btx-mt em{display:block; margin-top:3px; font:400 12.5px/1.35 var(--sans); font-style:normal; color:var(--ink-2)}
.btx-mt:focus-visible, .btx-mtl:focus-visible, .btx-tag:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.mt-ic{position:relative; display:block; width:44px; height:44px; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,#1A2230,#0C1017 55%,#141B26); box-shadow:inset 0 0 0 1px rgba(200,220,240,.22)}
.mt-ic i{position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:3px;
  background:radial-gradient(closest-side, rgba(238,244,250,.88), rgba(220,230,242,.35) 70%, transparent); animation:mtIc 4.2s ease-in-out infinite}
@keyframes mtIc{0%,100%{opacity:.25; border-radius:50%; transform:scale(1.25)} 45%,65%{opacity:.95; border-radius:3px; transform:scale(.8)}}
.btx-beats .btx-mtl-row{display:block; margin-top:10px}
.btx-mtl{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px 0 12px; border:0; border-radius:999px; cursor:pointer; font:500 12.5px/1 var(--sans); color:var(--gold-hi);
  background:var(--bgrain), linear-gradient(180deg, rgba(246,222,147,.12), rgba(246,222,147,.035)); box-shadow:inset 0 0 0 1px rgba(246,222,147,.42)}
.btx-mtl::before{content:''; width:12px; height:12px; border-radius:3px; background:radial-gradient(closest-side, rgba(238,244,250,.9), rgba(220,230,242,.3) 70%, transparent)}
.btx-mtl::after{content:'→'; font-size:13px}
.btx-tag{padding:3px 7px; border:0; border-radius:999px; cursor:pointer; background:rgba(var(--bgold),.08); font:600 9px/1.1 var(--sans); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:rgb(var(--bgold)); box-shadow:inset 0 0 0 1px rgba(var(--bgold),.5); transition:background .2s}
.btx-tag:hover{background:rgba(var(--bgold),.2)}
/* a wide screen keeps the button in view under the promises; the line under the numbers is for a phone */
@media(min-width:760px){
  .btx-live .btx-beats .btx-mtl-row{display:none}
  .btx-live .btx-beats li{padding:10px 0}
  .btx-live .btx-mt{margin-top:12px; padding-top:8px; padding-bottom:8px}
  .btx-live .btx-keep{margin-top:18px}
}
@media(min-width:760px) and (max-height:820px){
  .btx-live .btx-h{font-size:clamp(32px,3.6vw,52px)}
  .btx-live .btx-keep{margin-top:12px}
}
@media(min-width:760px) and (max-height:780px){
  .btx-live .btx-long{display:none}
  .btx-live .btx-beats .btx-stats i{display:none}
  .btx-live .btx-beats li{padding:8px 0}
  .btx-live .btx-beats li.on > div > span.btx-stats{margin-top:8px}
}
@media(max-width:759px){
  /* a phone: the button stands at the foot of the scene, under the three promises, clear of the section's lower edge */
  .btx-live .btx-mt{order:6; width:100%; margin-top:10px; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; padding:5px 14px 5px 5px; border-radius:14px}
  .btx-live .btx-mt .mt-ic{width:34px; height:34px; border-radius:10px}
  .btx-live .btx-mt .mt-ic i{width:18px; height:18px; margin:-9px 0 0 -9px}
  .btx-live .btx-mt b{font-size:14px}
  .btx-live .btx-mt em{display:none}
  .btx-live .btx-in{padding-bottom:calc(clamp(18px,3.2svh,30px) + env(safe-area-inset-bottom))}
  .btx-live .btx-beats .btx-mtl-row{display:none}                           /* one way in on a phone: the button at the foot */
}
@media(max-width:759px) and (max-height:720px){ .btx-live .btx-mt{margin-top:8px} }
@media(max-width:759px) and (max-height:780px){ .btx-live .btx-keep{display:none} }   /* a short phone: the promises are in the fifth beat and the guide */
@media(prefers-reduced-motion:reduce){ .mt-ic i{animation:none; opacity:.8} }

.mgcard{--mg-grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mg-gold:238,201,110;
  position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:24px; visibility:hidden; pointer-events:none; transition:visibility 0s linear .32s}
.mgcard.in{visibility:visible; pointer-events:auto; transition-delay:0s}
.mg-veil{position:absolute; inset:0; background:rgba(4,5,7,.76); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .28s var(--ease)}
.mgcard.in .mg-veil{opacity:1}
.mg-card{position:relative; width:min(600px,100%); max-height:min(92vh,940px); overflow:auto; overscroll-behavior:contain; scrollbar-width:none; border-radius:26px; outline:none; color:var(--ink); text-align:left;
  background:var(--mg-grain), radial-gradient(120% 50% at 0% 0%, rgba(214,177,115,.11), transparent 60%), linear-gradient(180deg,#15161D,#0C0D11);
  box-shadow:inset 0 0 0 1px rgba(214,177,115,.24), 0 50px 120px -40px rgba(0,0,0,.95), 0 14px 32px -20px rgba(0,0,0,.7);
  opacity:0; transform:translateY(16px) scale(.985); transition:opacity .26s var(--ease), transform .42s var(--ease-out)}
.mg-card::-webkit-scrollbar{width:0}
.mgcard.in .mg-card{opacity:1; transform:none}
html.mg-lock{overflow:hidden}
.mg-hd{position:sticky; top:0; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 22px 16px;
  background:var(--mg-grain), #15161D; box-shadow:0 12px 14px -8px #15161D}
.mg-k{display:block; margin-bottom:7px; font:500 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.mg-hd h3{margin:0; font:300 clamp(22px,3vw,28px)/1.15 var(--serif); letter-spacing:-.01em; color:var(--ink)}
.mg-x{flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--ink-2); cursor:pointer}
.mg-x svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.mg-x:hover{color:var(--ink); border-color:var(--line-3)}
.mg-x:focus-visible, .mg-go:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.mg-body{display:grid; gap:18px; padding:2px 22px 24px}
.mg-lede{margin:0; font:300 16px/1.55 var(--sans); color:var(--ink); text-wrap:pretty}
.mg-fig{margin:0; padding:14px 10px 14px; border-radius:22px;
  background:radial-gradient(80% 70% at 42% 55%, rgba(var(--mg-gold),.09), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.07)}
.mg-face{display:block; width:100%; height:auto; overflow:visible}
.mg-head path{fill:none; stroke:rgba(244,240,232,.86); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.mg-head .soft{stroke:rgba(244,240,232,.4)}
.mg-nos{fill:rgba(244,240,232,.16); stroke:rgba(244,240,232,.72); stroke-width:1.1}
.mg-breath path{fill:none; stroke:rgb(var(--mg-gold)); stroke-width:1.8; stroke-linecap:round; stroke-dasharray:2 6; animation:mgFlow .9s linear infinite, mgOut 6.4s ease-in-out infinite}
.mg-breath path:nth-child(2){animation-delay:-.3s, 0s}
.mg-breath path:nth-child(3){animation-delay:-.6s, 0s}
@keyframes mgFlow{to{stroke-dashoffset:-16}}
@keyframes mgOut{0%,4%{opacity:0} 10%,36%{opacity:1} 46%,100%{opacity:0}}
.mg-scr{fill:url(#mg-scr); stroke:rgba(200,220,240,.55); stroke-width:1.1; stroke-linejoin:round}
.mg-edge{fill:#0A0C12; stroke:rgba(200,220,240,.32); stroke-width:1; stroke-linejoin:round}
.mg-sheen{fill:none; stroke:rgba(255,255,255,.2); stroke-width:1.2; stroke-linecap:round}
.mg-mist{fill:url(#mg-mist); transform-box:fill-box; transform-origin:center; animation:mgMist 6.4s ease-in-out infinite}
@keyframes mgMist{0%,14%{opacity:0; transform:scale(.4)} 30%{opacity:1; transform:scale(1)} 52%{opacity:.9; transform:scale(.92)} 80%,100%{opacity:0; transform:scale(.6)}}
.mg-brk{fill:none; stroke:rgb(var(--mg-gold)); stroke-width:1}
.mg-lead{fill:none; stroke:rgba(244,240,232,.3); stroke-width:.8}
.mg-lab{font:500 9.5px var(--sans); fill:rgba(244,240,232,.74)}
.mg-lab.g{font-weight:600; fill:rgb(var(--mg-gold))}
.mg-fig figcaption{margin:6px 8px 0; text-align:center; font:400 13px/1.45 var(--sans); color:var(--ink-2); text-wrap:balance}
.mg-steps{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.mg-steps li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mg-steps i{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:600 12px/1 var(--mono); font-style:normal; color:rgb(var(--mg-gold)); background:rgba(var(--mg-gold),.08); box-shadow:inset 0 0 0 1px rgba(var(--mg-gold),.5)}
.mg-steps span{display:grid; gap:3px; min-width:0; padding-top:3px}
.mg-steps b{font:500 15px/1.3 var(--sans); color:var(--ink)}
.mg-steps em{font:400 13px/1.5 var(--sans); font-style:normal; color:var(--ink-2)}
.mg-h4{margin:4px 0 -4px; font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.mg-tiles{display:flex; flex-wrap:wrap; justify-content:center; gap:16px 10px}
.mg-tile{flex:0 0 calc((100% - 20px) / 3); display:grid; justify-items:center; gap:3px; min-width:0; text-align:center}
.mg-glass{position:relative; display:block; width:100%; aspect-ratio:1; border-radius:18px; overflow:hidden;
  background:radial-gradient(120% 90% at 20% 10%, rgba(120,150,190,.16), transparent 55%), linear-gradient(160deg,#1A2230,#0C1017 55%,#141B26);
  box-shadow:inset 0 0 0 1px rgba(200,220,240,.14), inset 0 1px 0 rgba(255,255,255,.1); transition:box-shadow .6s}
.mg-glass::after{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 45%, transparent 55%)}
.mg-glass canvas{position:absolute; inset:0; display:block; width:100%; height:100%}
.mg-tile b{margin-top:5px; font:500 14px/1.2 var(--sans); color:var(--ink); transition:color .6s}
.mg-tile em{font:500 10.5px/1.25 var(--mono); font-style:normal; color:var(--dim)}
.mg-tile.hold .mg-glass{box-shadow:inset 0 0 0 1px rgba(var(--mg-gold),.55), 0 0 22px -8px rgba(var(--mg-gold),.7)}
.mg-tile.hold b{color:rgb(var(--mg-gold))}
.mg-src{margin:0; font:400 12.5px/1.55 var(--sans); color:var(--ink-2)}
.mg-src b{font-weight:500; color:var(--ink)}
.mg-src span{display:block; margin-top:2px; font-size:11.5px; color:var(--dim)}
.mg-note{margin:-6px 0 0; font:400 12.5px/1.55 var(--sans); color:var(--ink-2)}
.mg-go{justify-self:start; display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 20px; border-radius:999px; text-decoration:none; font:500 14px/1 var(--sans); color:#1A1307;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow:0 12px 30px -14px rgba(214,177,115,.8)}
.mg-go svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6}
@media(max-width:759px){
  .mgcard{place-items:end stretch; padding:0}
  .mg-card{width:100%; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); border-radius:24px 24px 0 0; transform:translateY(30px); padding-bottom:env(safe-area-inset-bottom)}
  .mg-hd{padding:18px 18px 14px}
  .mg-body{padding:2px 18px 22px}
}
@media(prefers-reduced-motion:reduce){ .mg-breath path, .mg-mist{animation:none} .mgcard, .mg-card, .mg-veil{transition:none} }

/* ---- the app's first card and Breath Tap in the drawer, as the phones draw them (the user, 2026-09-27: the website's
   phones follow the app — the "Breathe through · now" card first under who, with Shiva's outline, the smoke of the open
   side and "Check your breath"; and Breath Tap between the breath card and the dock). The sample breathes on the right. ---- */
.a-now{position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:36% minmax(0,1fr); align-items:center; min-height:14.5em; margin-top:1.1em; padding:1.1em 1.2em 1.1em .4em; border-radius:2em;
  background:linear-gradient(160deg,#3A2B35,#2A2331 55%,#241F2C); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.12), inset 0 .1em 0 rgba(255,255,255,.14), 0 1em 2em -1.2em rgba(0,0,0,.7);
  transition:box-shadow .6s var(--ease)}
.a-now.glow{box-shadow:inset 0 0 0 .1em rgba(236,119,96,.7), 0 0 2.4em -.3em rgba(236,119,96,.55), 0 1em 2em -1.2em rgba(0,0,0,.7)}
.a-now-smoke{position:absolute; inset:-30%; z-index:-1; pointer-events:none; filter:blur(1.6em);
  background:radial-gradient(34% 30% at 28% 42%, rgba(236,119,96,.42), transparent 70%), radial-gradient(40% 34% at 70% 62%, rgba(150,112,176,.38), transparent 70%),
    radial-gradient(30% 26% at 58% 26%, rgba(238,164,126,.3), transparent 70%);
  animation:aNowDrift 18s ease-in-out infinite alternate}
@keyframes aNowDrift{from{transform:translate3d(-5%,3%,0) rotate(0deg)} to{transform:translate3d(5%,-4%,0) rotate(9deg)}}
.a-now::after{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.a-now-shiva{width:100%; height:auto; overflow:visible}
.a-now-shiva path, .a-now-shiva .glow{fill:none; stroke:#EAD3A2; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.a-now-shiva .f path{stroke:rgba(234,211,162,.72)}
.a-now-shiva .moon, .a-now-shiva .n path{fill:#EAD3A2; stroke:none}
.a-now-shiva .glow{fill:rgba(255,227,174,.25); stroke:none}
.a-now-shiva .eye{fill:rgba(255,220,160,.9); stroke:none}
.a-now-shiva .nl{fill:#15121C; stroke:rgba(234,211,162,.6); stroke-width:1.6}
.a-now-shiva .nr{fill:rgba(236,119,96,.95); stroke:#F2A08E; stroke-width:1.6; filter:drop-shadow(0 0 3px rgba(236,119,96,.9))}
/* the breath of the open side, leaving as smoke (the app draws it on a canvas; here three soft puffs) */
.a-now-breath{position:absolute; left:20.4%; top:62%; width:3em; height:3em; pointer-events:none}
.a-now-breath i{position:absolute; left:0; top:0; width:1.6em; height:1.6em; border-radius:50%; background:radial-gradient(closest-side, rgba(255,246,238,.85), rgba(255,236,226,.3) 60%, transparent);
  filter:blur(.18em); opacity:0; animation:aNowPuff 5.4s ease-out infinite}
.a-now-breath i:nth-child(2){animation-delay:.4s}
.a-now-breath i:nth-child(3){animation-delay:.8s}
@keyframes aNowPuff{0%{opacity:0; transform:translate(0,0) scale(.4)} 8%{opacity:.85} 42%{opacity:0; transform:translate(.6em,6em) scale(2.6)} 100%{opacity:0; transform:translate(.6em,6em) scale(2.6)}}
.a-now-tx{display:grid; justify-items:start; gap:.4em; min-width:0}
.a-now-tx .a-eye{font-size:.74em; letter-spacing:.2em; color:#F3C1B3}
.a-now-tx b{font:300 2.2em/1.05 var(--sans); letter-spacing:-.01em; color:#F29A86}
.a-now-until{display:inline-flex; align-items:center; gap:.4em; font:400 1.02em/1 var(--sans); color:var(--a-ink)}
.a-now-until svg{width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.a-now-until em{font-style:normal; font-weight:600}
.a-now-el{display:inline-flex; align-items:center; gap:.45em; font:400 .88em/1.2 var(--sans); color:var(--a-ink-2)}
.a-now-el i{width:.7em; height:.7em; border-radius:50%; background:var(--e-earth)}
.a-now-cta{display:inline-flex; align-items:center; gap:.5em; height:2.9em; margin-top:.35em; padding:0 1.1em; border-radius:2em; font:500 1em/1 var(--sans); color:var(--a-ink);
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.3); transition:filter .2s}
.a-now-cta svg{width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ph#ph-check .a-now{margin-top:.8em}
/* Breath Tap in the drawer, between the breath card and the dock */
.a-btrow{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8em; margin-top:.8em; padding:.75em 1em .75em .75em; border-radius:1.6em;
  background:linear-gradient(90deg, rgba(160,147,219,.14), rgba(236,119,96,.08)); box-shadow:inset 0 0 0 .08em rgba(238,232,220,.14); transition:box-shadow .6s var(--ease)}
.a-btrow.glow{box-shadow:inset 0 0 0 .1em rgba(190,170,240,.7), 0 0 2em -.4em rgba(170,150,230,.6)}
.a-btorb{position:relative; width:3.6em; height:3.6em; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 35% 30%, #C9B8F4, #9A7FD6 45%, #E08A7E); box-shadow:0 0 0 .3em rgba(190,170,240,.14), 0 0 1.4em rgba(170,140,230,.45)}
.a-btorb svg{width:1.5em; height:1.5em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.a-bttx{display:grid; gap:.25em; min-width:0}
.a-bttx b{display:flex; align-items:center; gap:.45em; font:400 1.25em/1.1 var(--sans); color:var(--a-ink); white-space:nowrap}
.a-bttx b i{padding:.25em .5em; border-radius:1em; font:600 .5em/1 var(--sans); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:#8CC3E6; box-shadow:inset 0 0 0 .1em rgba(140,195,230,.5)}
.a-bttx em{font:400 .86em/1.25 var(--sans); font-style:normal; color:var(--a-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.a-btgo svg{width:1.2em; height:1.2em; fill:none; stroke:var(--a-ink-2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){ .a-now-smoke, .a-now-breath i{animation:none} }

/* ---- the guide's button, only with the finale (the user, 2026-09-28: "How to train Breath Tap button should be appearing
   … when the 'What Breath Tap reads for you' card is shown in the section. Not before"): it comes in with the list (--rd)
   and is hidden, and cannot be tapped, until then ---- */
.btx-live .btx-mt{opacity:var(--rd,0); transform:translate3d(0,calc((1 - var(--rd,0)) * 12px),0)}
.btx-live:not(.btx-fin-on) .btx-mt{visibility:hidden; pointer-events:none}

/* =====================================================================
   HOW TO TRAIN BREATH TAP — the guide (home.js, mirrorGuide; 2026-09-28)
   Six steps in the card the mirror test had: a rail of steps, each step the app's own screen playing it beside two
   lines, Back and Next. Every animation's resting frame is its end, so less motion shows the step done.
   ===================================================================== */
.mgt-rail{display:flex; gap:6px; margin:-4px -22px 0; padding:2px 22px 4px; overflow-x:auto; scrollbar-width:none}
.mgt-rail::-webkit-scrollbar{display:none}
.mgt-rail button{flex:none; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 13px 0 5px; border:0; border-radius:999px; cursor:pointer;
  font:500 12.5px/1 var(--sans); color:var(--ink-2); background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); white-space:nowrap;
  transition:color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease)}
.mgt-rail button i{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:600 11px/1 var(--mono); font-style:normal; color:var(--gold); background:rgba(214,177,115,.1); transition:background .3s, color .3s}
.mgt-rail button.done i{color:#1A1307; background:var(--gold)}
.mgt-rail button[aria-selected="true"]{color:var(--ink); background:rgba(214,177,115,.12); box-shadow:inset 0 0 0 1px rgba(214,177,115,.48)}
.mgt-rail button:hover{color:var(--ink)}
.mgt-rail button:focus-visible, .mgt-nav button:focus-visible, .mgt-nav a:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.mgt-steps{display:grid}
.mgt-step{display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:center; animation:mgtIn .5s var(--ease-out)}
.mgt-step[hidden]{display:none}
.mgt-step.s-mirror{grid-template-columns:minmax(0,1fr); gap:18px; align-items:start}
@keyframes mgtIn{from{opacity:0; transform:translate3d(0,10px,0)} to{opacity:1; transform:none}}
.mgt-tx{display:grid; gap:9px; align-content:center}
.mgt-n{font:500 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.mgt-tx h4{margin:0; font:300 clamp(22px,2.6vw,27px)/1.15 var(--serif); letter-spacing:-.01em; color:var(--ink); text-wrap:balance}
.mgt-tx p{margin:0; font:300 15px/1.55 var(--sans); color:var(--ink-2); text-wrap:pretty}
.mgt-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:4px}
.mgt-nav button, .mgt-nav a{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border:0; border-radius:999px; cursor:pointer; text-decoration:none;
  font:500 14px/1 var(--sans)}
.mgt-nav svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.mgt-prev{color:var(--ink-2); background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mgt-prev:disabled{opacity:.35; cursor:default}
.mgt-next{color:#1A1307; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 10px 24px -14px rgba(214,177,115,.8)}
.mgt-nav [hidden]{display:none}
.mgt-dots{display:flex; gap:5px}
.mgt-dots i{width:6px; height:6px; border-radius:3px; background:rgba(238,232,220,.18); transition:width .4s var(--ease), background .4s}
.mgt-dots i.on{width:18px; background:var(--gold)}
.mgt-priv{display:flex; align-items:flex-start; gap:10px; margin:0; font:400 12.5px/1.55 var(--sans); color:var(--ink-2)}
.mgt-priv svg{flex:none; width:15px; height:15px; margin-top:2px; fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* the phone: the app's Breath Tap sheet, small */
.mgt-ph{justify-self:center; width:200px; padding:7px; border-radius:32px; background:linear-gradient(155deg,#2B2A33,#0F0F14 60%,#1A1920);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5)}
.mgt-scr{position:relative; display:flex; flex-direction:column; gap:9px; height:348px; padding:14px 12px 12px; border-radius:26px; overflow:hidden;
  background:radial-gradient(120% 60% at 50% -10%, rgba(160,147,219,.16), transparent 62%), linear-gradient(180deg,#15141C,#0A0A0F)}
.mgt-top{display:flex; align-items:center; gap:8px}
.mgt-mk{flex:none; width:26px; height:26px; border-radius:9px; display:grid; place-items:center; color:var(--gold-hi); background:rgba(214,177,115,.12); box-shadow:inset 0 0 0 1px rgba(214,177,115,.25)}
.mgt-mk svg, .mgt-go i svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.mgt-bt{display:grid; gap:3px; min-width:0}
.mgt-bt b{font:600 11.5px/1 var(--sans); color:var(--ink)}
.mgt-bt em{font:400 10.5px/1.1 var(--sans); font-style:normal; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mgt-sw{position:relative; display:inline-grid}
.mgt-sw > i{grid-area:1/1; font-style:normal}
.mgt-sw > i.a{opacity:0}                                                          /* resting: the second word */

/* the stage (steps 1 and 2) */
.mgt-stage{display:block; width:100%; height:auto; margin-top:2px}
.mgt-stage .trk{fill:none; stroke:rgba(238,232,220,.08); stroke-width:3}
.mgt-stage .prog{fill:none; stroke:var(--gold); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0}
.mgt-stage .nose path{fill:none; stroke:rgba(238,232,220,.6); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.mgt-stage .ns{fill:rgba(255,255,255,.07); stroke:rgba(238,232,220,.45); stroke-width:1.2}
.mgt-stage .phn{fill:none; stroke:rgba(238,232,220,.42); stroke-width:3; stroke-linecap:round}
.mgt-stage .sp .lv{fill:rgba(214,177,115,.5); transform-box:fill-box; transform-origin:50% 100%}
.mgt-stage .sp.s0 .lv{transform:scaleY(.42)} .mgt-stage .sp.s1 .lv{transform:scaleY(.3)} .mgt-stage .sp.s2 .lv{transform:scaleY(1); fill:rgba(235,211,162,.85)}
.mgt-stage .sp .pt{fill:#17161E; stroke:rgba(238,232,220,.45); stroke-width:2}
.mgt-stage .sp.s2 .pt{fill:var(--gold); stroke:var(--gold-hi)}
.mgt-stage .sp text{font:500 17px var(--sans); fill:var(--dim); text-anchor:middle}
.mgt-stage .sp.s2 text{fill:var(--gold-hi)}
.mgt-stage .arw .ln{stroke:var(--gold-hi); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0}
.mgt-stage .arw .hd{fill:var(--gold-hi)}
.mgt-stage .flw .f{fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:4 9; opacity:0}
.mgt-stage .flw .f.l{stroke:var(--a-left)} .mgt-stage .flw .f.r{stroke:var(--a-right)}
.mgt-found{display:grid; gap:3px; margin-top:-2px; padding:10px 12px; border-radius:14px; text-align:center; background:rgba(214,177,115,.08); box-shadow:inset 0 0 0 1px rgba(214,177,115,.28)}
.mgt-found em{font:400 10.5px/1.3 var(--sans); font-style:normal; color:var(--ink-2)}
/* step 1, both ways (2026-09-28): the phone's bottom edge, then earphones held under the nose, under the app's own switch */
.mgt-src{display:flex; gap:3px; width:max-content; margin:8px auto 0; padding:3px; border-radius:999px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.mgt-src i{padding:5px 11px; border-radius:999px; font:600 9.5px/1 var(--sans); font-style:normal; color:var(--ink-2)}
.mgt-src i.p{color:#1B1406; background:var(--gold-hi)}
.mgt-ways{display:grid}
.mgt-ways > div{grid-area:1/1; min-width:0}
.mgt-ways .w-ear{opacity:0}
.mgt-stage.ear .bd{fill:none; stroke:rgba(238,232,220,.5); stroke-width:3; stroke-linejoin:round}
.mgt-stage.ear .pt{fill:var(--gold); stroke:var(--gold-hi); stroke-width:2}
.mgt-stage.ear .lv{fill:rgba(235,211,162,.85); transform-box:fill-box; transform-origin:50% 100%}
.mgt-stage.ear text{font:500 17px var(--sans); fill:var(--dim); text-anchor:middle}
.mgt-found span{font:500 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.mgt-found b{font:500 16px/1.1 var(--sans); color:var(--ink)}
.mgt-cue{margin-top:-2px; text-align:center; font:400 12.5px/1.2 var(--sans); color:var(--ink-2)}
.mgt-cue b{font-weight:600; color:var(--ink)}
/* step 2 at rest: the right nostril read, the ring full */
.s-sides .mgt-stage .ns.r{fill:var(--a-right); stroke:var(--a-right)}
.s-sides .mgt-stage .flw .f.r{opacity:.9}
.s-sides .mgt-stage .sp.s2 .lv{fill:rgba(236,119,96,.7)}

/* step 3: the reading, what you feel, the meter */
.mgt-read{display:grid; justify-items:center; gap:6px; padding:8px 6px 10px; border-radius:16px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mgt-bignose{width:74px; height:auto}
.mgt-bignose path{fill:none; stroke:rgba(238,232,220,.6); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.mgt-bignose .ns{fill:rgba(255,255,255,.06); stroke:rgba(238,232,220,.4); stroke-width:1.2}
.mgt-bignose .ns.on{fill:var(--a-left); stroke:var(--a-left)}
.mgt-read b{font:500 12.5px/1.2 var(--sans); color:var(--ink); text-align:center}
.mgt-split{display:flex; width:100%; height:6px; border-radius:3px; overflow:hidden; gap:2px}
.mgt-split .l{flex:78 1 0; background:var(--a-left)} .mgt-split .r{flex:22 1 0; background:var(--a-right)}
.mgt-ask{display:grid; gap:7px}
.mgt-ask > span, .mgt-cap{font:500 11px/1.2 var(--sans); color:var(--ink-2)}
.mgt-cap{margin:-4px 0 0; text-align:center; font-size:10.5px; color:var(--dim)}
.mgt-chips{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px}
.mgt-chips > i{display:grid; place-items:center; height:26px; border-radius:9px; font:500 10.5px/1 var(--sans); font-style:normal; color:var(--ink-2); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); white-space:nowrap}
.mgt-chips > i.pick{color:#1A1307; background:var(--gold-hi); box-shadow:none}
.mgt-tap{position:absolute; left:12.5%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:rgba(255,255,255,.55); opacity:0; pointer-events:none}
.mgt-chips.four .mgt-tap{left:37.5%}
.mgt-learn{display:grid; gap:6px; padding:10px; border-radius:14px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mgt-lh{display:flex; align-items:center; justify-content:space-between; gap:6px}
.mgt-lh b{font:500 11px/1 var(--sans); color:var(--ink)}
.mgt-lh .mgt-sw i{padding:3px 7px; border-radius:999px; font:500 9.5px/1 var(--sans); white-space:nowrap}
.mgt-lh .mgt-sw i.a{color:var(--ink-2); background:rgba(255,255,255,.06)}
.mgt-lh .mgt-sw i.b{color:#10261D; background:var(--a-jade)}
.s-hand .mgt-lh .mgt-sw i.b{color:var(--ink-2); background:rgba(255,255,255,.06)}
.mgt-bar{height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden}
.mgt-bar i{display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--gold-hi)); transform-origin:0 50%}
.s-hand .mgt-bar i{transform:scaleX(.41)}
.mgt-cnt{font:400 10.5px/1 var(--sans); color:var(--ink-2)}
.mgt-cnt .mgt-sw i{font-weight:600; color:var(--ink)}

/* step 5: the hand */
.mgt-reach svg{display:block; width:100%; height:auto}
.mgt-reach .nz{fill:none; stroke:rgba(238,232,220,.6); stroke-width:2.2; stroke-linecap:round}
.mgt-reach .bf{fill:none; stroke:rgba(160,147,219,.7); stroke-width:3; stroke-linecap:round; stroke-dasharray:3 7}
.mgt-reach .bf.b2{stroke:rgba(160,147,219,.4)}
.mgt-reach .ticks line{stroke:rgba(238,232,220,.35); stroke-width:1.5}
.mgt-reach .ticks .base{stroke:rgba(238,232,220,.16)}
.mgt-reach .ticks text{font:500 12px var(--mono); fill:var(--dim); text-anchor:middle}
.mgt-reach .hnd{transform:translate(114px,34px)}
.mgt-reach .hnd path{fill:rgba(255,255,255,.05); stroke:var(--gold-hi); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* step 6: one tap, and the record it fills */
.mgt-go{display:flex; align-items:center; justify-content:center; gap:8px; height:40px; border-radius:14px; font:600 12px/1 var(--sans); color:#1A1307;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 10px 22px -14px rgba(214,177,115,.9)}
.mgt-go i{display:grid; place-items:center}
.mgt-rec{display:grid; gap:0; margin:0; padding:4px 10px; list-style:none; border-radius:14px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mgt-rec li{display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); font:400 11px/1.2 var(--sans)}
.mgt-rec li:last-child{border-bottom:0}
.mgt-rec span{color:var(--ink-2)} .mgt-rec b{font-weight:500; color:var(--ink); text-align:right}
.mgt-saved{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:auto; font:500 11px/1 var(--sans); color:var(--a-jade)}
.mgt-saved svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---- the steps played (.play: restarted each time a step is shown) ---- */
@media (prefers-reduced-motion:no-preference){
  .s-mic.play .sp .lv{animation:mgtLv 6s var(--ease) infinite}
  .s-mic.play .sp.s1 .lv{animation-delay:.25s} .s-mic.play .sp.s2 .lv{animation-delay:.5s}
  .s-mic.play .sp.s2 .pt, .s-mic.play .sp.s2 text{animation:mgtBest 6s var(--ease) infinite}
  .s-mic.play .arw .ln{animation:mgtArw 6s var(--ease) infinite}
  .s-mic.play .arw .hd{animation:mgtHd 6s var(--ease) infinite}
  .s-mic.play .mgt-found{animation:mgtFound 6s var(--ease) infinite}
  .s-mic.play .mgt-ways .w-ph{animation:mgtWayA 12s steps(1) infinite}
  .s-mic.play .mgt-ways .w-ear{animation:mgtWayB 12s steps(1) infinite}
  .s-mic.play .mgt-src i.p{animation:mgtSrcA 12s steps(1) infinite}
  .s-mic.play .mgt-src i.e{animation:mgtSrcB 12s steps(1) infinite}
  .s-mic.play .w-ear .lv{animation:mgtLv 6s var(--ease) 6s infinite}
  .s-mic.play .w-ear .arw .ln{animation:mgtArw 6s var(--ease) 6s infinite}
  .s-mic.play .w-ear .arw .hd{animation:mgtHd 6s var(--ease) 6s infinite}
  .s-mic.play .w-ear .mgt-found{animation:mgtFound 6s var(--ease) 6s infinite}
  .s-sides.play .prog{animation:mgtProg 7s linear infinite}
  .s-sides.play .ns.l{animation:mgtNsL 7s steps(1) infinite}
  .s-sides.play .ns.r{animation:mgtNsR 7s steps(1) infinite}
  .s-sides.play .flw .f{animation:mgtFlow .9s linear infinite}
  .s-sides.play .flw .f.l{animation:mgtFlow .9s linear infinite, mgtOnL 7s steps(1) infinite}
  .s-sides.play .flw .f.r{animation:mgtFlow .9s linear infinite, mgtOnR 7s steps(1) infinite}
  .s-sides.play .mgt-cue .mgt-sw i.a{animation:mgtOnA 7s steps(1) infinite}
  .s-sides.play .mgt-cue .mgt-sw i.b{animation:mgtOnR 7s steps(1) infinite}
  .s-tell.play .mgt-tap, .s-hand.play .mgt-tap{animation:mgtTap 6s var(--ease-out) infinite}
  .s-tell.play .mgt-chips i.pick, .s-hand.play .mgt-chips i.pick{animation:mgtPick 6s steps(1) infinite}
  .s-tell.play .mgt-bar i{animation:mgtBar3 6s var(--ease) infinite}
  .s-hand.play .mgt-bar i{animation:mgtBar5 6s var(--ease) infinite}
  .s-tell.play .mgt-sw i.a, .s-hand.play .mgt-sw i.a{animation:mgtSwA 6s steps(1) infinite}
  .s-tell.play .mgt-sw i.b, .s-hand.play .mgt-sw i.b{animation:mgtSwB 6s steps(1) infinite}
  .s-hand.play .hnd{animation:mgtHand 6s var(--ease) infinite}
  .s-hand.play .bf{animation:mgtFlow 1.1s linear infinite}
  .s-tap.play .mgt-go{animation:mgtPress 6.5s var(--ease) infinite}
  .s-tap.play .mgt-rec li{animation:mgtRow 6.5s var(--ease) infinite; animation-delay:calc(var(--i) * .12s)}
  .s-tap.play .mgt-saved{animation:mgtSaved 6.5s var(--ease) infinite}
}
@keyframes mgtLv{0%{transform:scaleY(0)} 18%,78%{transform:scaleY(var(--lvh,1))} 90%,100%{transform:scaleY(0)}}
.s-mic .sp.s0{--lvh:.42} .s-mic .sp.s1{--lvh:.3} .s-mic .sp.s2{--lvh:1}
@keyframes mgtBest{0%,32%{fill:#17161E; stroke:rgba(238,232,220,.45)} 40%,86%{fill:var(--gold); stroke:var(--gold-hi)} 94%,100%{fill:#17161E; stroke:rgba(238,232,220,.45)}}
@keyframes mgtArw{0%,30%{stroke-dashoffset:100; opacity:1} 46%,84%{stroke-dashoffset:0; opacity:1} 92%,100%{stroke-dashoffset:0; opacity:0}}
@keyframes mgtHd{0%,42%{opacity:0} 48%,84%{opacity:1} 92%,100%{opacity:0}}
@keyframes mgtFound{0%,48%{opacity:0; transform:translate3d(0,8px,0)} 56%,86%{opacity:1; transform:none} 94%,100%{opacity:0; transform:translate3d(0,8px,0)}}
@keyframes mgtProg{0%{stroke-dashoffset:100} 45%{stroke-dashoffset:0} 50%{stroke-dashoffset:100} 95%{stroke-dashoffset:0} 100%{stroke-dashoffset:0}}
@keyframes mgtNsL{0%{fill:var(--a-left); stroke:var(--a-left)} 50%,100%{fill:rgba(255,255,255,.07); stroke:rgba(238,232,220,.45)}}
@keyframes mgtNsR{0%{fill:rgba(255,255,255,.07); stroke:rgba(238,232,220,.45)} 50%,100%{fill:var(--a-right); stroke:var(--a-right)}}
@keyframes mgtOnL{0%{opacity:.9} 50%,100%{opacity:0}}
@keyframes mgtOnR{0%{opacity:0} 50%,100%{opacity:.9}}
@keyframes mgtOnA{0%{opacity:1} 50%,100%{opacity:0}}
@keyframes mgtFlow{to{stroke-dashoffset:-13}}
@keyframes mgtTap{0%,22%{opacity:0; transform:scale(.3)} 26%{opacity:.7; transform:scale(.6)} 36%,100%{opacity:0; transform:scale(1.8)}}
@keyframes mgtPick{0%{color:var(--ink-2); background:rgba(255,255,255,.04)} 26%,100%{color:#1A1307; background:var(--gold-hi)}}
@keyframes mgtBar3{0%,30%{transform:scaleX(.967)} 44%,100%{transform:scaleX(1)}}
@keyframes mgtBar5{0%,30%{transform:scaleX(.40)} 44%,100%{transform:scaleX(.41)}}
@keyframes mgtSwA{0%{opacity:1} 44%,100%{opacity:0}}
@keyframes mgtWayA{0%{opacity:1} 50%,100%{opacity:0}}
@keyframes mgtWayB{0%{opacity:0} 50%,100%{opacity:1}}
@keyframes mgtSrcA{0%{color:#1B1406; background:var(--gold-hi)} 50%,100%{color:var(--ink-2); background:none}}
@keyframes mgtSrcB{0%{color:var(--ink-2); background:none} 50%,100%{color:#1B1406; background:var(--gold-hi)}}
@keyframes mgtSwB{0%{opacity:0} 44%,100%{opacity:1}}
@keyframes mgtHand{0%{transform:translate(214px,34px)} 22%,100%{transform:translate(114px,34px)}}
@keyframes mgtPress{0%,8%{transform:none} 12%{transform:scale(.95)} 18%,100%{transform:none}}
@keyframes mgtRow{0%,22%{opacity:0; transform:translate3d(0,6px,0)} 32%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes mgtSaved{0%,64%{opacity:0; transform:translate3d(0,6px,0)} 72%,92%{opacity:1; transform:none} 100%{opacity:0}}
/* six on one row at the card's width: tighter pills (the sixth was cut at the card's edge) */
.mgt-rail{gap:4px}
.mgt-rail button{gap:6px; padding:0 10px 0 4px; font-size:12px}
/* the phone's small type: "Not sure" room to breathe, the meter's name on one line */
.mgt-chips{grid-template-columns:.9fr .9fr .9fr 1.3fr}
.mgt-chips.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mgt-chips.four .mgt-tap{left:37.5%}
.mgt-chips:not(.four) .mgt-tap{left:11.5%}
.mgt-lh b{font-size:10.5px; white-space:nowrap}
.mgt-lh .mgt-sw i{padding:3px 6px; font-size:9px}
@media (max-width:759px){
  .mgt-rail{margin:-4px -18px 0; padding:2px 18px 4px}
  .mgt-rail button:not([aria-selected="true"]) span{display:none}
  .mgt-rail button:not([aria-selected="true"]){padding:0 5px}
}
@media (max-width:540px){
  .mgt-step{grid-template-columns:minmax(0,1fr); gap:18px}
  .mgt-step .mgt-tx{order:-1}
  .mgt-ph{width:188px}
  .mgt-scr{height:328px}
}

/* =====================================================================
   WHAT KAALCHAKRA DOES — the wheel of time (home.js, whatScene; rebuilt 2026-09-28: "the only selling point … a
   world-class effort … concise and clear", "no sharp boundary", "Success, health and enlightenment in more visuals")
   One transparent canvas carries the picture; the words sit over it. The ground comes in out of the page's own and goes
   back into it, and the canvas fades to nothing at its top and bottom: there is no box and no edge anywhere.
   ===================================================================== */
.wkd{position:relative; color:var(--ink);
  background:linear-gradient(180deg, rgba(6,6,8,0) 0, #060608 min(30vh,280px), #060608 calc(100% - min(30vh,280px)), rgba(6,6,8,0) 100%)}
.wkd-stage{position:relative; min-height:100vh; min-height:100svh; overflow:hidden}
.wkd-cv{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%)}
.wkd-in{position:relative; z-index:2; box-sizing:border-box; width:min(1240px,100%); height:100%; min-height:inherit; margin:0 auto; padding:0 var(--gutter)}
.wkd-copy{position:absolute; left:var(--gutter); top:50%; width:min(38%,500px); transform:translateY(-50%)}
.wkd-k{display:flex; align-items:center; gap:12px; margin:0 0 24px; font:500 11px/1 var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--gold)}
.wkd-k::before{content:''; width:28px; height:1px; background:linear-gradient(90deg, transparent, var(--gold))}
.wkd-beats{display:grid; margin:0; padding:0; list-style:none}
.wkd-beats li{grid-area:1/1}
.wkd-l{margin:0; font:300 clamp(36px,4.5vw,66px)/1.03 var(--serif); letter-spacing:-.028em; color:var(--ink); text-wrap:balance}
.wkd-l em{font-style:normal; color:var(--gold-hi); background:linear-gradient(100deg, #F6E7C1, var(--gold-hi) 40%, var(--gold) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.wkd-s{margin:18px 0 0; max-width:30ch; font:300 clamp(15px,1.3vw,18.5px)/1.5 var(--sans); color:var(--ink-2); text-wrap:pretty}
/* the words the picture carries: the centre's name, the score, the three fruits; placed by home.js */
.wkd-over{position:absolute; inset:0; z-index:1; pointer-events:none}
.wkd-tag, .wkd-read, .wkd-fr{position:absolute; left:0; top:0; will-change:transform,opacity}
.wkd-tag{opacity:var(--o,0); transform:translate3d(var(--x,0px),var(--y,0px),0) translate(-50%,-50%); font:500 10.5px/1.5 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); text-align:center; white-space:nowrap; text-shadow:0 0 18px rgba(214,177,115,.55)}
.wkd-read{display:grid; justify-items:center; gap:8px; opacity:var(--o,0); transform:translate3d(var(--x,0px),var(--y,0px),0) translate(-50%,-50%) scale(var(--s,1))}
.wkd-num{display:flex; align-items:flex-start}
.wkd-read b{font:200 clamp(52px,6vw,88px)/.9 var(--serif); letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums}
.wkd-read small{margin:.2em 0 0 .08em; font:300 clamp(16px,1.6vw,24px)/1 var(--serif); color:var(--ink-2)}
.wkd-read em{font:500 10px/1 var(--mono); font-style:normal; letter-spacing:.28em; text-transform:uppercase; color:var(--a-jade); text-shadow:0 0 14px rgba(98,193,158,.6)}
.wkd-fr{display:grid; justify-items:center; gap:5px; width:210px; margin-left:-105px; text-align:center; opacity:var(--o,0);
  transform:translate3d(var(--x,0px), calc(var(--y,0px) + (1 - var(--o,0)) * 14px), 0)}
.wkd-fr b{font:300 clamp(22px,2.3vw,34px)/1.05 var(--serif); letter-spacing:-.015em; white-space:nowrap}
.wkd-fr em{max-width:17ch; font:400 clamp(11.5px,.95vw,13.5px)/1.4 var(--sans); font-style:normal; color:var(--ink-2); text-wrap:balance}
.wkd-fr[data-f="0"] b{color:#F4E2B8; text-shadow:0 0 22px rgba(235,211,162,.45)}
.wkd-fr[data-f="1"] b{color:#AEEAD2; text-shadow:0 0 22px rgba(98,193,158,.45)}
.wkd-fr[data-f="2"] b{color:#E2DBFF; text-shadow:0 0 22px rgba(190,176,255,.5)}
/* the five beats along the foot */
.wkd-rail{position:absolute; z-index:2; left:50%; bottom:clamp(20px,4.5vh,44px); display:flex; gap:clamp(14px,2.6vw,38px); margin:0; padding:0; list-style:none;
  transform:translateX(-50%); font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:rgba(238,232,220,.3); white-space:nowrap}
.wkd-rail li{position:relative; padding-top:14px; transition:color .6s var(--ease)}
.wkd-rail li::before{content:''; position:absolute; left:0; right:0; top:0; height:2px; border-radius:1px; background:rgba(238,232,220,.1); transition:background .6s var(--ease), box-shadow .6s var(--ease)}
.wkd-rail li.done::before{background:rgba(214,177,115,.42)}
.wkd-rail li.on{color:var(--gold-hi)}
.wkd-rail li.on::before{background:var(--gold); box-shadow:0 0 14px rgba(214,177,115,.75)}
/* live: held while the scroll plays it; the lines cross-fade out of a blur */
.wkd.wkd-live{height:calc(100vh + 450vh)}
.wkd-live .wkd-stage{position:sticky; top:0; height:100vh; height:100svh; min-height:0}
.wkd-live .wkd-beats li{opacity:0; transform:translate3d(0,28px,0); filter:blur(10px); pointer-events:none;
  transition:opacity .8s var(--ease), transform 1.05s var(--ease-out), filter .8s var(--ease)}
.wkd-live .wkd-beats li.on{opacity:1; transform:none; filter:none}
/* at rest (less motion, or no script): the five lines as a list; the picture beside them still, on its last beat */
.wkd:not(.wkd-live) .wkd-beats{gap:20px}
.wkd:not(.wkd-live) .wkd-beats li{grid-area:auto}
.wkd:not(.wkd-live) .wkd-l{font-size:clamp(24px,2.6vw,36px)}
.wkd:not(.wkd-live) .wkd-s{margin-top:8px}
.wkd:not(.wkd-live) .wkd-rail{display:none}
@media (max-width:899px){
  .wkd-copy{left:var(--gutter); right:var(--gutter); top:calc(66px + 3.2vh); width:auto; transform:none}
  .wkd-k{margin-bottom:16px}
  .wkd-l{font-size:clamp(30px,8.4vw,44px)}
  .wkd-s{margin-top:10px; font-size:15px}
  .wkd-fr{width:118px; margin-left:-59px; gap:3px}
  .wkd-fr b{font-size:clamp(15px,4.7vw,21px)}
  .wkd-fr em{font-size:10.5px; max-width:14ch}
  .wkd-rail{gap:clamp(8px,3vw,14px); font-size:8.5px; letter-spacing:.14em}
  .wkd:not(.wkd-live) .wkd-copy{position:relative; top:auto; left:auto; right:auto; padding:96px 0 0}
  .wkd:not(.wkd-live) .wkd-stage{min-height:0; padding-bottom:min(122vw,580px)}      /* the still picture below the list */
}
@media (prefers-reduced-motion:reduce){ .wkd-beats li, .wkd-rail li, .wkd-rail li::before{transition:none} }

/* ============================ Swara Tokens: the coin becomes the app (the user, 2026-10-02) ============================
   "beside the coin 3D animation, show a mobile device with animated screen showing the Swara token intro banner on webapp swiped to
   all three carousels" · "a beautiful transition from coin 3D to mobile device, a world class transition" · "Redesign the entire
   section in a new compact and stylish style". One screen, never pinned. The words: the title, one lead, a hairline grid of what a
   check earns, what tokens open, the first week on a line, the terms. The stage: the app's own coin (two faces and a rim of stacked
   discs, in perspective) and the phone it turns into, in one cell; the phone opens from the coin's edge (scaleX from a sliver),
   light crossing its screen. Without script, or for less motion: the phone alone, on the first screen. */
.tkx{--tg:235,211,162; --tl:185,173,240; --tc:240,138,114; --tgrain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position:relative; isolation:isolate; overflow:hidden; background:var(--ground)}
.tkx::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background:var(--tgrain);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.tkx-in{position:relative; z-index:2; display:grid; gap:clamp(30px,5vh,50px); max-width:var(--wrap); margin:0 auto;
  padding:clamp(60px,9vh,104px) var(--gutter) clamp(56px,8vh,96px)}
/* the head, centred over the board */
.tkx-hd{display:grid; justify-items:center; text-align:center}
.tkx-h{margin-top:24px; font:300 clamp(34px,4vw,62px)/1.04 var(--serif); letter-spacing:-.02em; text-wrap:balance}
.tkx-h em{display:block; font-style:normal; color:var(--gold-hi)}
.tkx-lead{margin-top:20px; max-width:62ch; font:300 clamp(15px,1.15vw,17.5px)/1.6 var(--sans); color:var(--ink-2); text-wrap:pretty}
/* the board: what a check earns | the coin and the phone | what tokens open — two ledgers, mirrored about the phone */
.tkx-board{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(30px,5vh,44px)}
.tkx-col{min-width:0; display:grid; align-content:center; gap:12px}
.tkx-k{font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.tkx-rates, .tkx-opens{list-style:none; margin:0; padding:0; display:grid}
.tkx-rates li, .tkx-opens > li{display:grid; grid-template-columns:78px minmax(0,1fr); align-items:baseline; gap:16px; padding:13px 2px;
  border-top:1px solid rgba(238,232,220,.085)}
.tkx-rates li:last-child, .tkx-opens > li:last-child{border-bottom:1px solid rgba(238,232,220,.085)}
.tkx-rates li > b, .tkx-opens > li > b{font:300 30px/1 var(--serif); letter-spacing:-.02em; color:var(--gold-hi); font-variant-numeric:tabular-nums lining-nums}
.tkx-rates li > span{font:300 14px/1.5 var(--sans); color:var(--ink-2); text-wrap:pretty}
.tkx-opens span b{display:block; font:400 14.5px/1.45 var(--sans); color:var(--ink)}
.tkx-opens span em{display:block; margin-top:2px; font:400 12.5px/1.5 var(--sans); font-style:normal; color:var(--dim); text-wrap:pretty}
/* ₹1 off for every 10: the row where tokens become money off an expert's fee, lit; its cap in tiny type under it */
.tkx-opens > li:nth-last-child(2){border-bottom:1px solid rgba(238,232,220,.085)}
.tkx-opens > li.tkx-hi{margin:12px -14px 0; padding:14px 14px 15px 16px; align-items:center; border:0; border-radius:16px;
  background:linear-gradient(135deg,rgba(var(--tg),.17),rgba(var(--tg),.06) 58%,rgba(var(--tg),.025));
  box-shadow:inset 0 0 0 1px rgba(var(--tg),.4), 0 8px 18px -16px rgba(var(--tg),.22)}
.tkx-opens > li.tkx-hi > b{font-size:36px; color:var(--gold-hi); text-shadow:0 0 16px rgba(var(--tg),.18)}
.tkx-opens > li.tkx-hi span b{font-weight:500; color:var(--ink)}
.tkx-opens > li.tkx-hi > span{display:grid; gap:5px; align-content:center}
.tkx-opens > li.tkx-hi span em.tkx-cap{margin-top:0; font:400 11px/1.45 var(--sans); color:var(--ink-2); opacity:.8}
.tkx-firm{margin:4px 0 0; font:400 12.5px/1.6 var(--sans); color:var(--dim); text-wrap:pretty}
.tkx-firm b{font-weight:500; color:var(--ink-2)}
@media(min-width:980px){
  .tkx-board{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(32px,4.4vw,72px)}
  .tkx-col{width:100%; max-width:350px}
  .tkx-earn{justify-self:end; text-align:right}
  .tkx-earn .tkx-rates li{grid-template-columns:minmax(0,1fr) 78px}
  .tkx-earn .tkx-rates li > b{order:2; text-align:right}
  .tkx-spend{justify-self:start}
}
/* the first week on a line, and the terms, centred under the board */
.tkx-ft{display:grid; justify-items:center; gap:16px; text-align:center}
.tkx-sum{display:flex; flex-direction:column; align-items:center; gap:14px; margin:0; font:400 12.5px/1.4 var(--sans); color:var(--dim)}
.tkx-sum-eq{display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:12px 12px}
.tkx-sum-k{font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.tkx-sum-eq > span{display:inline-flex; align-items:baseline; gap:6px}
.tkx-sum span b{font:300 22px/1 var(--serif); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums lining-nums}
.tkx-sum span em{font-style:normal}
.tkx-sum i{font-style:normal; color:var(--gold-lo)}
/* the total: a result under the sum, never squeezed onto its last line */
.tkx-sum .tot{display:inline-flex; align-items:baseline; gap:9px; padding:9px 20px 10px; border-radius:999px;
  background:rgba(var(--tg),.05); box-shadow:inset 0 0 0 1px rgba(var(--tg),.26)}
.tkx-sum .tot b{font-size:26px; color:var(--gold-hi)}
.tkx-sum .tot em{color:var(--ink-2)}
.tkx-fine{margin:0; max-width:80ch; font:400 12.5px/1.6 var(--sans); color:var(--dim); text-wrap:pretty}
.tkx-fine a{color:var(--ink-2); text-underline-offset:3px}
/* the stage: the coin and the phone it turns into, in one cell; the step named under it */
.tkx-stage{position:relative; display:grid; justify-items:center; align-content:center; gap:18px; min-width:0}
@media(min-width:980px){ .tkx-stage{width:clamp(250px,21vw,300px)} }
.tkx-aura{position:absolute; inset:-14% -24%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 36% at 50% 44%, rgba(var(--tg),.17), transparent 70%), radial-gradient(28% 24% at 44% 60%, rgba(var(--tl),.09), transparent 72%)}
.tkx-stage .tkx-ph{--pw:clamp(214px,18.5vw,262px); grid-area:1 / 1; z-index:2; transform-origin:50% 50%;
  transition:transform .62s cubic-bezier(.2,.85,.2,1), opacity .36s ease, filter .56s ease}
.tkx-3d{grid-area:1 / 1; align-self:center; position:relative; z-index:3; width:clamp(150px,13vw,190px); aspect-ratio:1; perspective:1000px; perspective-origin:50% 40%; pointer-events:none}
.tkx-stage:not(.anim) .tkx-3d{display:none}
.tkx-stage.coin .tkx-ph{transform:scaleX(.018) scaleY(.46); opacity:0; filter:brightness(2.4) saturate(.6)}
.tkx-coin{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform, opacity}
.tkx-face{position:absolute; inset:0; border-radius:50%; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.tkx-face svg{display:block; width:100%; height:100%}
.tkx-front{transform:translateZ(7px)}
.tkx-back{transform:rotateY(180deg) translateZ(7px)}
.tkx-edge, .tkx-edge i{position:absolute; inset:0; transform-style:preserve-3d}
.tkx-edge i{border-radius:50%; transform:translateZ(calc(var(--z) * 1px)); background:radial-gradient(circle,#1d1712 0 62%,#7A5A1E 63%,#D9B05A 72%,#F2D98A 82%,#9C7426 93%,#5E4415 100%)}
.tkx-shadow{position:absolute; left:14%; right:14%; bottom:-16%; height:12%; border-radius:50%; background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%); filter:blur(6px)}
.tkx-ring{position:absolute; left:50%; top:50%; width:100%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); opacity:0; pointer-events:none;
  box-shadow:0 0 0 1px rgba(var(--tg),.5), 0 0 46px 6px rgba(var(--tg),.2), inset 0 0 40px rgba(var(--tl),.14)}
/* light crossing the screen as it opens */
.tkx-sweep{position:absolute; inset:0; z-index:45; pointer-events:none; opacity:0; transform:translateX(-120%);
  background:linear-gradient(104deg, transparent 32%, rgba(255,238,196,.5) 47%, rgba(255,238,196,.08) 58%, transparent 68%)}
.tkx-stage.sweep .tkx-sweep{animation:tkxSweep 1.15s .18s cubic-bezier(.3,.7,.2,1) both}
@keyframes tkxSweep{0%{opacity:0; transform:translateX(-120%)} 18%{opacity:1} 100%{opacity:0; transform:translateX(120%)}}
.tkx-steps{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin:0; padding:0; z-index:2;
  font:500 11px/1.2 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.tkx-steps li{display:flex; align-items:center; gap:7px; transition:color .45s ease}
.tkx-steps li::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.45; transition:opacity .45s, transform .45s, box-shadow .45s}
.tkx-steps li.on{color:var(--gold-hi)}
.tkx-steps li.on::before{opacity:1; transform:scale(1.35); box-shadow:0 0 10px rgba(var(--tg),.65)}
@media(max-width:979px){
  .tkx-stage{order:-1}
  .tkx-stage .tkx-ph{--pw:clamp(200px,56vw,244px)}
  .tkx-3d{width:clamp(132px,38vw,170px)}
  .tkx-col{width:100%; max-width:560px; justify-self:center}
  /* what a check earns, as six figures on a hairline grid */
  .tkx-earn .tkx-rates{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border-radius:16px; overflow:hidden;
    background:rgba(238,232,220,.09); box-shadow:0 0 0 1px rgba(238,232,220,.09)}
  .tkx-earn .tkx-rates li{grid-template-columns:none; align-content:start; gap:5px; padding:12px 13px 13px; border:0; background:var(--ground)}
  .tkx-earn .tkx-rates li > b{font-size:26px}
  .tkx-earn .tkx-rates li > span{font-size:13px; line-height:1.4}
}
@media(max-width:420px){ .tkx-earn .tkx-rates{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .tkx-opens > li.tkx-hi{margin-left:-8px; margin-right:-8px; padding-left:10px; padding-right:10px} }
@media(prefers-reduced-motion:reduce){ .tkx-stage .tkx-ph{transition:none} .tkx-steps li, .tkx-steps li::before{transition:none} }

/* ---- room between the engines and Swara Tokens (the user, 2026-10-01: "the gap … is very tight"): the page's own ground,
   so no edge; the engines' glow fades into it, the tokens' grain and aura fade out of it ---- */
.tkx{margin-top:clamp(110px,18vh,220px)}

/* ---- pricing made plain (2026-10-01): the paid plans are Expert Guidance; what Swara tokens take off each ---- */
.pr-lede{margin-top:20px; max-width:62ch; font:300 clamp(15px,1.15vw,17.5px)/1.6 var(--sans); color:var(--ink-2)}
.pr-lede b{font-weight:500; color:var(--ink)}
.plan-tok{display:flex; align-items:center; justify-content:center; gap:10px; margin:14px auto 0; padding:8px 13px; border-radius:12px; text-align:left;
  font:400 12.5px/1.4 var(--sans); color:var(--ink-2); background:rgba(233,204,114,.06); box-shadow:inset 0 0 0 1px rgba(233,204,114,.2)}
.plan-tok i{flex:none; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFF1C4,#D9B562 60%,#8A6A1F); box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 0 10px rgba(233,204,114,.35)}
.plan-tok b{font-weight:500; color:var(--gold-hi)}

/* ---- the counters, in the buttons' grid: centred on them, as the platforms row is (2026-10-01) ---- */
.hero .herocta > .live{grid-column:1 / -1; justify-self:stretch; width:0; min-width:100%; justify-content:center; margin-top:6px}


/* ---- the tour: one phone, the app's seven pages (2026-10-01) ---- */
.tour{--pw:min(clamp(236px,22vw,320px), calc((100vh - 230px) * .42)); position:relative; isolation:isolate; padding:clamp(96px,15vh,170px) 0 clamp(70px,11vh,130px); overflow:hidden}
.tour::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(56% 46% at 50% 54%, rgba(var(--tc),.11), transparent 72%), radial-gradient(30% 26% at 50% 60%, rgba(var(--tc),.08), transparent 70%);
  -webkit-mask:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  transition:background .9s var(--ease)}
.tour-in{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.tour-head{display:grid; justify-items:center; text-align:center}
.tour-head h2{margin-top:22px; max-width:18ch; font:300 clamp(34px,4.2vw,64px)/1.04 var(--serif); letter-spacing:-.02em; text-wrap:balance}
.tour-head h2 em{font-style:normal; color:var(--gold-hi)}
.tour-lead{margin-top:20px; max-width:56ch; font:300 clamp(15px,1.15vw,17.5px)/1.6 var(--sans); color:var(--ink-2); text-wrap:pretty}
.tour-stage{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(30px,4.5vw,84px); margin-top:clamp(44px,7vh,86px)}
.tour-glow{position:absolute; left:50%; top:50%; width:calc(var(--pw) * 2.6); aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(circle, rgba(var(--tc),.26), rgba(var(--tc),.07) 42%, transparent 68%); filter:blur(8px); transition:background .8s var(--ease)}
.tour-cap{justify-self:end; max-width:320px; text-align:right}
.tour-n{font:500 11px/1 var(--mono); letter-spacing:.2em; color:var(--dim)}
.tour-n b{font-weight:500; color:rgb(var(--tc)); transition:color .6s var(--ease)}
.tour-t{display:block; margin-top:16px; font:300 clamp(36px,3.4vw,54px)/1.02 var(--serif); letter-spacing:-.02em; color:var(--ink)}
.tour-s{margin-top:12px; font:300 17px/1.5 var(--sans); color:var(--ink-2); text-wrap:pretty}
.tour-pts{justify-self:start; display:grid; gap:16px; max-width:290px; margin:0; padding:0; list-style:none}
.tour-pts li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; align-items:start; font:400 14.5px/1.45 var(--sans); color:var(--ink-2)}
.tour-pts li::before{content:''; width:8px; height:8px; margin-top:6px; border-radius:50%; background:rgb(var(--tc)); box-shadow:0 0 0 4px rgba(var(--tc),.16); transition:background .6s, box-shadow .6s}
.tour-cap.swap, .tour-pts.swap{animation:tourSwap .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes tourSwap{from{opacity:0; transform:translateY(10px); filter:blur(4px)} to{opacity:1; transform:none; filter:none}}
/* the phone: a body with depth, a back plate that shows as it turns, glass that catches the light */
.tour-dev{position:relative; display:flex; align-items:center; justify-content:center; gap:clamp(16px,2.2vw,32px); perspective:1700px; perspective-origin:50% 42%}
.tour-phone{--rx:0deg; --ry:0deg; --dry:0deg; --gx:0; position:relative; width:var(--pw); padding:calc(var(--pw) * .034); border-radius:calc(var(--pw) * .155);
  background:linear-gradient(150deg,#45404F 0%,#1B1921 30%,#0C0B10 100%); outline:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 2px 1px rgba(255,255,255,.16), 0 60px 110px -36px rgba(0,0,0,.95), 0 40px 80px -50px rgba(var(--tc),.55);
  transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--dry))); transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .8s var(--ease);
  animation:tourFloat 7s ease-in-out infinite}
@keyframes tourFloat{0%,100%{translate:0 0} 50%{translate:0 -9px}}
.tour-phone::before{content:''; position:absolute; inset:3px; border-radius:inherit; transform:translateZ(-20px); background:linear-gradient(150deg,#2B2833,#0B0A0E); box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.tour-phone:focus-visible{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12), 0 0 0 3px var(--gold), 0 60px 110px -36px rgba(0,0,0,.95)}
.tour-screen{position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:calc(var(--pw) * .125); aspect-ratio:390 / 894; background:#08080B; transform:translateZ(1px); box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.tour-status{flex:none; display:flex; align-items:center; justify-content:space-between; height:calc(var(--pw) * .119); padding:0 calc(var(--pw) * .085) 0 calc(var(--pw) * .1);
  background:#0A0A0E; color:#EEE8DC; font:600 calc(var(--pw) * .043)/1 var(--sans); letter-spacing:.01em; font-variant-numeric:tabular-nums}
.tour-sb{display:inline-flex; align-items:flex-end; gap:calc(var(--pw) * .008)}
.tour-sb i{display:block; width:calc(var(--pw) * .011); border-radius:1px; background:#EEE8DC}
.tour-sb i:nth-child(1){height:calc(var(--pw) * .016)} .tour-sb i:nth-child(2){height:calc(var(--pw) * .022)} .tour-sb i:nth-child(3){height:calc(var(--pw) * .028)} .tour-sb i:nth-child(4){height:calc(var(--pw) * .034)}
.tour-sb em{position:relative; display:block; width:calc(var(--pw) * .07); height:calc(var(--pw) * .034); margin-left:calc(var(--pw) * .02); border-radius:calc(var(--pw) * .009); box-shadow:inset 0 0 0 1px rgba(238,232,220,.55)}
.tour-sb em::after{content:''; position:absolute; right:calc(var(--pw) * -.011); top:30%; width:calc(var(--pw) * .007); height:40%; border-radius:0 2px 2px 0; background:rgba(238,232,220,.55)}
.tour-sb em u{position:absolute; inset:calc(var(--pw) * .006); width:72%; border-radius:calc(var(--pw) * .005); background:#EEE8DC}
.tour-island{position:absolute; left:50%; top:calc(var(--pw) * .06); z-index:3; width:calc(var(--pw) * .28); height:calc(var(--pw) * .08); border-radius:999px; transform:translate(-50%,0) translateZ(2px); background:#030304; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.tour-track{display:flex; flex:1 1 auto; min-height:0; margin:0; padding:0; list-style:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab; touch-action:pan-x pan-y}
.tour-track::-webkit-scrollbar{display:none}
.tour-track.drag{cursor:grabbing; scroll-snap-type:none}
.tour-shot{position:relative; flex:0 0 100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always; transform-origin:50% 50%; will-change:transform}
.tour-shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; user-select:none; -webkit-user-drag:none; pointer-events:none}
.tour-glare{position:absolute; inset:calc(var(--pw) * .034); z-index:4; border-radius:calc(var(--pw) * .125); pointer-events:none; transform:translateZ(3px);
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.10) 46%, rgba(255,255,255,0) 58%); background-size:260% 100%;
  background-position:calc(50% + var(--gx) * 18%) 0; mix-blend-mode:screen; transition:background-position .55s cubic-bezier(.2,.8,.2,1)}
.tour-hint{position:absolute; left:50%; bottom:15%; z-index:5; display:inline-flex; align-items:center; gap:8px; padding:9px 15px 9px 11px; border-radius:999px; transform:translateX(-50%) translateZ(4px);
  font:600 12.5px/1 var(--sans); color:#F7F2E6; white-space:nowrap; pointer-events:none; background:rgba(12,12,16,.74); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.tour-hint svg{width:19px; height:19px; fill:none; stroke:#F2D98A; stroke-width:1.6; stroke-linejoin:round; animation:tourHand 2.4s ease-in-out infinite}
@keyframes tourHand{0%,100%{transform:translateX(5px)} 50%{transform:translateX(-7px)}}
.tour-stage.used .tour-hint{opacity:0; transform:translateX(-50%) translateY(8px) translateZ(4px)}
.tour-floor{position:absolute; left:50%; bottom:calc(var(--pw) * -.16); width:calc(var(--pw) * 1.1); height:calc(var(--pw) * .14); border-radius:50%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%); filter:blur(8px); pointer-events:none; animation:tourFloor 7s ease-in-out infinite}
@keyframes tourFloor{0%,100%{opacity:.9; scale:1} 50%{opacity:.6; scale:.92}}
.tour-arrow{position:relative; z-index:6; flex:none; display:grid; place-items:center; width:46px; height:46px; border:0; border-radius:50%; cursor:pointer; color:var(--ink);
  background:rgba(238,232,220,.06); box-shadow:inset 0 0 0 1px var(--line-2); transition:background .3s, transform .3s var(--ease), opacity .3s}
.tour-arrow svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tour-arrow:hover{background:rgba(238,232,220,.12); transform:scale(1.06)}
.tour-arrow:disabled{opacity:.25; cursor:default; transform:none}
.tour-arrow:focus-visible, .tour-tab:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
/* the tabs: the app's rail, under the phone, for a computer or a tablet */
.tour-tabs{position:relative; display:flex; width:fit-content; max-width:100%; margin:clamp(46px,7vh,76px) auto 0; padding:5px; border-radius:999px; overflow-x:auto; scrollbar-width:none;
  background:rgba(238,232,220,.04); box-shadow:inset 0 0 0 1px var(--line)}
.tour-tabs::-webkit-scrollbar{display:none}
.tour-tab{position:relative; z-index:1; flex:none; padding:11px 17px; border:0; border-radius:999px; cursor:pointer; background:none; white-space:nowrap;
  font:500 13.5px/1 var(--sans); letter-spacing:.01em; color:var(--ink-2); transition:color .35s var(--ease)}
.tour-tab:hover{color:var(--ink)}
.tour-tab[aria-selected="true"]{color:#14100A}
.tour-bar{position:absolute; z-index:0; top:5px; bottom:5px; left:0; width:0; border-radius:999px; background:linear-gradient(180deg,#F4DFA0,#D9B562);
  box-shadow:0 8px 22px -10px rgba(233,204,114,.8); transition:transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1)}
.tour-dots{display:none; justify-content:center; gap:8px; margin-top:28px}
.tour-dots i{width:7px; height:7px; border-radius:4px; background:rgba(238,232,220,.22); transition:width .35s var(--ease), background .35s}
.tour-dots i.on{width:24px; background:rgb(var(--tc))}
@media(max-width:979px){
  .tour-stage{grid-template-columns:minmax(0,1fr); gap:26px}
  .tour-dev{order:1}
  .tour-cap{order:2; justify-self:center; max-width:520px; text-align:center}
  .tour-pts{order:3; justify-self:center; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; max-width:620px}
  .tour-pts li{display:inline-flex; align-items:center; gap:8px; font-size:13.5px}
  .tour-pts li::before{margin-top:0}
  .tour-t{margin-top:12px; font-size:clamp(32px,6vw,44px)}
  .tour-s{font-size:16px}
}
@media(max-width:600px){
  .tour{--pw:min(70vw, 300px, calc((100vh - 250px) * .42))}
  .tour-arrow{display:none}
  .tour-tabs{display:none}
  .tour-dots{display:flex}
  .tour-pts{gap:8px 14px}
}
@media(prefers-reduced-motion:reduce){
  .tour-phone, .tour-floor, .tour-hint svg{animation:none}
  .tour-phone, .tour-glare, .tour-bar, .tour-cap.swap, .tour-pts.swap{transition:none; animation:none}
}