/* Page structure for the landing page: a four-column layout box, numbered section
   kickers, and the sections built on it (manifesto, how Tora works, why Tora, research).
   Motion is driven by assets/reveal.js; only transform, opacity and clip change. */

/* ---- the layout box (no drawn margin lines: captain, look 7) ------------------ */

/* content that sits on the grid uses the same box */
.g-wrap{position:relative;max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter-wide)}
.g-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.g-cols{grid-template-columns:minmax(0,1fr)}}

/* numbered kicker: "02 / in the app" in lowercase Orbitron, with a steel tick */
.kicker{display:flex;align-items:center;gap:var(--space-3);font:500 var(--text-xs)/1 var(--display);letter-spacing:.08em;text-transform:lowercase;color:var(--body)}
.kicker b{font-weight:500;color:var(--ink)}
.kicker::before{content:"";width:1.75rem;height:.375rem;border-radius:1px;
  background:repeating-linear-gradient(90deg,var(--brand) 0 .25rem,transparent .25rem .4375rem)}
.sec-title{font:500 clamp(2.5rem,6.4vw,5.5rem)/.98 var(--display);letter-spacing:-.03em;color:var(--ink);margin-top:var(--space-5)}
.sec-lede{max-width:34ch;color:var(--body);font-size:var(--text-body);line-height:1.6}

/* ---- progressive blur along the bottom of the viewport -------------------------- */
.bottom-blur{position:fixed;left:0;right:0;bottom:0;height:4.5rem;z-index:55;pointer-events:none}
.bottom-blur i{position:absolute;inset:0}
.bottom-blur i:nth-child(1){backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);mask:linear-gradient(transparent 0%,#000 20%,#000 40%,transparent 60%)}
.bottom-blur i:nth-child(2){backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);mask:linear-gradient(transparent 20%,#000 40%,#000 60%,transparent 80%)}
.bottom-blur i:nth-child(3){backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);mask:linear-gradient(transparent 40%,#000 60%,#000 80%,transparent 100%)}
.bottom-blur i:nth-child(4){backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);mask:linear-gradient(transparent 60%,#000 80%)}
.bottom-blur i:nth-child(5){backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);mask:linear-gradient(transparent 80%,#000 100%)}
.bottom-blur::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgb(var(--c-carbon) / .5))}

/* iPhone Safari samples the page again behind its own bottom toolbar. A fixed page blur
   stops at the viewport edge, leaving a sharp seam against that unblurred sample. Let the
   native browser frost own that edge instead of stacking five masked backdrops above it. */
@supports (-webkit-touch-callout:none){
  @media(max-width:820px){.bottom-blur{display:none}}
}

/* ---- photos: grayscale at rest, colour and refraction on entry ------------------ */
.photo{position:relative;overflow:hidden;background:#07090c;isolation:isolate}
.photo img{position:absolute;inset:-14% 0;width:100%;height:128%;object-fit:cover;display:block;will-change:transform;
  filter:grayscale(1) brightness(.78);transition:filter 1.1s ease}
.photo.color-open img,.photo:hover img{filter:none}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgb(var(--c-white) / .06)}
.photo .refract-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease}
.photo.is-refracting .refract-canvas{opacity:1}
.chamfer{clip-path:polygon(2.75rem 0,100% 0,100% 100%,0 100%,0 2.75rem)}

/* ---- manifesto ------------------------------------------------------------------ */
.manifesto{position:relative;padding:var(--space-24) 0 var(--space-24)}
.manifesto .g-wrap{min-height:44rem}
.mf-kicker{margin-left:25%}
.mf-text{position:relative;z-index:2;margin:var(--space-10) 0 0;font:500 clamp(2rem,4.6vw,4.25rem)/1.08 var(--display);letter-spacing:-.025em;max-width:22ch;margin-left:12%}
.mf-body{position:relative;z-index:2;margin:var(--space-8) 0 0 34%;max-width:34rem;font-size:var(--text-lg);line-height:1.6;color:var(--body)}
.mf-text .w{display:inline-block;color:rgb(var(--c-white) / .16);transition:color .5s ease}
.mf-text .w.on{color:var(--ink)}
.mf-photo{position:absolute;z-index:1;margin:0;will-change:transform}
.mf-photo.a{left:var(--gutter-wide);top:12rem;width:22%;aspect-ratio:3/4}
.mf-photo.b{right:var(--gutter-wide);top:18rem;width:24%;aspect-ratio:4/5}
.mf-foot{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--space-16)}
.mf-foot p{grid-column:2 / span 2;max-width:36ch;color:var(--body);font-size:var(--text-lg);line-height:1.55}
@media(max-width:820px){
  .manifesto{padding:var(--space-16) 0;overflow:clip}
  .manifesto .g-wrap{min-height:0}
  .mf-kicker,.mf-text,.mf-body{margin-left:0}
  .mf-photo{position:relative;inset:auto}
  .mf-photo.a,.mf-photo.b{width:62%;top:auto;left:auto;right:auto}
  .mf-photo.a{margin:var(--space-8) 0 0 auto}
  .mf-photo.b{margin:var(--space-8) 0 0}
  .mf-foot{display:block;margin-top:var(--space-8)}
}

/* ---- 01 how tora works: numbered steps beside a phone with glass chips --------- */
.how{position:relative;height:300svh}
.how-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.how-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;width:100%}
.how-head{grid-column:1 / span 2;align-self:start;padding-top:calc(var(--header-h) + var(--space-4))}
.how-steps{grid-column:1 / span 2;list-style:none;display:grid;gap:var(--space-2);margin-top:var(--space-10);max-width:34rem}

.how-step{position:relative;display:grid;grid-template-columns:3rem 1fr;gap:0 var(--space-4);align-items:baseline;padding:var(--space-5);border-radius:var(--radius-lg);
  background:rgb(var(--c-white) / .02);border:1px solid var(--hairline);transition:background .5s ease,border-color .5s ease}
.how-step{cursor:pointer}
.how-go{all:unset;cursor:pointer}
.how-go:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:.25rem}
.how-step:not(.on):hover h3{color:rgb(var(--c-white) / .75)}
.how-step .n{font:500 var(--text-sm)/1.4 var(--display);color:var(--body)}
.how-step h3{font:600 var(--text-lg)/1.3 var(--sans);color:rgb(var(--c-white) / .5);transition:color .5s ease}
.how-step p{grid-column:2;color:var(--body);font-size:var(--text-body);line-height:1.55;max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .6s var(--rev-ease),opacity .4s ease,margin-top .6s var(--rev-ease)}
.how-step.on{background:rgb(var(--c-white) / .05);border-color:rgb(143 179 203 / .35)}
.how-step.on .n{color:var(--brand)}
.how-step.on h3{color:var(--ink)}
.how-step.on p{max-height:15rem;opacity:1;margin-top:var(--space-2)}
.how-stage{grid-column:3 / span 2;grid-row:1 / span 2;position:relative;height:100svh;display:grid;place-items:center;perspective:90rem}
.how-stage{perspective:70rem;perspective-origin:50% 45%}
.how-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.how.has-3d .how-canvas{display:block}
.how.has-3d .how-rig{visibility:hidden;will-change:auto}
.how.has-3d .how-rig .sheen,.how.has-3d .how-rig .slab{display:none}   /* hidden under the 3D phone: no layers kept for them */
/* (2026-10-16 flicker) the cards' small reveal animations (chart bars, day dots, the sleep-debt nights, list
   rows) each got a compositor layer when they started and lost it when they ended: about 90 layers made and
   dropped per pass through the section. They keep a standing layer instead, so nothing is rebuilt mid-scroll. */
.how .chip-glass :is(.hs-bars rect,.sc-num,.viz.macros i,.viz.days i,.scan-items li,.pt,.dm-nights i,.nx-sets i){will-change:transform,opacity}
.how-rig{position:relative;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(10deg) rotateZ(-3deg);will-change:transform}
.how-stage{--pw:min(19rem,calc((100svh - 9rem) * 71.9 / 150))}
/* The cards sit flat over the phone (so their text stays crisp) and drift with its turn. */
.how-cards{position:absolute;left:50%;top:50%;width:var(--pw);aspect-ratio:71.9/150;transform:translate(-50%,-50%);pointer-events:none}
/* the shadow the phone throws on the floor, and a soft pool of steel light under it */
.how-floor{position:absolute;left:50%;top:78%;width:26rem;height:7rem;transform:translate(-50%,0) rotateX(80deg);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(0 0 0 / .75),rgb(0 0 0 / .25) 60%,transparent),radial-gradient(closest-side,rgb(143 179 203 / .12),transparent);filter:blur(10px)}
/* A sheet of white glass: light, borderless, the page blurred behind it. */
.chip-glass{--z:5rem;position:absolute;z-index:3;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5) var(--space-3) var(--space-3);border-radius:1.125rem;
  background:linear-gradient(140deg,rgb(236 243 248 / .24),rgb(214 226 236 / .11) 55%,rgb(214 226 236 / .15));
  box-shadow:0 1.75rem 3rem -1rem rgb(0 0 0 / .7),0 .25rem .75rem rgb(0 0 0 / .18);
  backdrop-filter:blur(22px) saturate(1.6) brightness(1.12);-webkit-backdrop-filter:blur(22px) saturate(1.6) brightness(1.12);color:#fff;font:500 var(--text-sm)/1.25 var(--sans);
  opacity:0;transform:translate3d(0,1.5rem,0) scale(.94);translate:var(--dx,0) 0;transition:opacity .7s ease,transform 1s var(--rev-ease);white-space:nowrap;will-change:transform,opacity}
.chip-glass small{display:block;font:500 .6875rem/1.3 var(--display);text-transform:lowercase;letter-spacing:.06em;color:rgb(222 234 243 / .85)}
.chip-glass b:not(.tpro-p){font:600 var(--text-xl)/1.1 var(--sans);letter-spacing:-.01em}
.chip-glass .ci{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;border-radius:.75rem;color:var(--ink);
  background:rgb(255 255 255 / .16)}
.chip-glass .ci svg{width:1.25rem;height:1.25rem}
.chip-glass.on{opacity:1;transform:none}
.chip-glass .ci.sm{display:inline-grid;width:1.25rem;height:1.25rem;border-radius:.375rem;margin-right:var(--space-2);vertical-align:-.3rem}
.chip-glass .ci.sm svg{width:.8125rem;height:.8125rem}
.chip-glass .chart-head{display:flex;align-items:center;gap:var(--space-3)}
/* the estimate card: a band that narrows as the weeks go by */
.chip-glass.chart{display:block;width:15rem;white-space:normal;padding:var(--space-4)}
.chip-glass.chart svg{display:block;width:100%;height:auto;margin:var(--space-3) 0 var(--space-2)}
.chip-glass.chart .band{fill:rgb(255 255 255 / .14)}
.chip-glass.chart .dot{fill:#fff;opacity:0;transition:opacity .3s ease 1.8s}
.chip-glass.chart .ping{fill:none;stroke:#fff;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.chip-glass.chart.on .dot{opacity:1}
.chip-glass.chart.on .ping{animation:vizPing 2.2s ease-out 1.9s infinite}
@keyframes vizPing{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
/* Each card's own small visual, played when the card comes on (delays from --d). */
.viz{display:flex;gap:3px;margin-top:.5rem}
.viz i{display:block;flex:none}
.viz.macros{width:11rem;height:.3125rem;gap:2px}
.viz.macros i{height:100%;width:var(--w);border-radius:2px;background:rgb(255 255 255 / .85);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--rev-ease) calc(.35s + var(--d) * .22s)}
.viz.macros i:nth-child(2){background:rgb(190 214 230 / .9)}.viz.macros i:nth-child(3){background:rgb(143 179 203 / .9)}
.viz.week i{width:.5rem;height:.5rem;border-radius:50%;background:rgb(255 255 255 / .18);transition:background .3s ease calc(.3s + var(--d) * .09s),transform .4s var(--rev-ease) calc(.3s + var(--d) * .09s)}
.on .viz.week i{background:rgb(255 255 255 / .9)}
.on .viz.week i:last-child{animation:vizPulse 1.8s ease-in-out 1.1s infinite}
@keyframes vizPulse{50%{transform:scale(1.35)}}
.viz.climb{align-items:flex-end;height:1.25rem}
.viz.climb i{width:.375rem;height:var(--h);border-radius:1px;background:rgb(255 255 255 / .5);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--rev-ease) calc(.3s + var(--d) * .1s)}
.viz.climb i:last-child{background:#fff}
.viz.sets{gap:.3125rem}
.viz.sets i{width:1.125rem;height:1.125rem;border-radius:.3125rem;background:rgb(255 255 255 / .16);display:grid;place-items:center;transition:background .35s ease calc(.35s + var(--d) * .25s)}
.viz.sets svg{width:.75rem;height:.75rem;fill:none;stroke:#0b0d10;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12;stroke-dashoffset:12;transition:stroke-dashoffset .4s ease calc(.5s + var(--d) * .25s)}
.on .viz.sets i{background:rgb(255 255 255 / .92)}
.on .viz.sets svg{stroke-dashoffset:0}
.viz.ticks{gap:2px}
.viz.ticks i{width:.3125rem;height:.75rem;border-radius:1px;background:rgb(255 255 255 / .18);transition:background .25s ease calc(.3s + var(--d) * .06s)}
.on .viz.ticks i{background:rgb(255 255 255 / .88)}
.on .viz.macros i,.on .viz.climb i{transform:none}
.chip-glass.chart .line{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--rev-ease) .3s}
.chip-glass.chart.on .line{stroke-dashoffset:0}
.chip-glass.chart p{color:var(--body);font-size:var(--text-xs);line-height:1.4}
@media(max-width:820px){
  .how{height:320svh}
  .how-pin{align-items:flex-start}
  .how-grid{display:block}
  .how-head{padding-top:calc(var(--header-h) + var(--space-2))}
  /* phones (Safari's viewport with its bars can be ~660px tall): the steps share one
     place and crossfade, so the phone keeps room to be seen */
  .how-steps{margin-top:var(--space-4);gap:0;padding-left:0;max-width:none}
  .how-step{grid-area:1/1;padding:var(--space-3) var(--space-4);grid-template-columns:2rem 1fr;opacity:0;pointer-events:none;transition:opacity .45s ease}
  .how-step.on{opacity:1;pointer-events:auto}
  .how-step h3{font-size:var(--text-body)}
  .how-step.on p{max-height:13rem}
  .how-stage{height:auto;margin-top:var(--space-5)}
  .how-stage{--pw:min(15rem,60vw,calc((100svh - 21.5rem) * 71.9 / 150))}
  .how-head .sec-title{font-size:clamp(1.75rem,8.4vw,2.25rem);white-space:nowrap}
  .how-head .sec-title br{display:none}
  .how-stage{place-items:center}
  .chip-glass{padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);font-size:var(--text-xs)}
  .chip-glass .ci{width:2rem;height:2rem}
  .chip-glass b:not(.tpro-p){font-size:var(--text-body)}
}

/* ---- a real phone (shared by how Tora works and the showcase) ------------------- */
.device{--depth:calc(var(--pw,18rem) * .075);position:relative;width:var(--pw,18rem);transform-style:preserve-3d}
.device .slab{position:absolute;inset:0;border-radius:calc(var(--pw) * .158);pointer-events:none;
  background:linear-gradient(95deg,#4e5358,#16181b 7%,#0a0b0c 50%,#16181b 93%,#4e5358)}
.device .slab{transform:translateZ(calc(var(--depth) * var(--k,1) * -1))}
.device .slab:last-of-type{background:#08090a;box-shadow:0 2.5rem 4.5rem -1rem rgb(0 0 0 / .85),0 .5rem 1rem rgb(0 0 0 / .5)}
/* Proportions of an iPhone 17 Pro (71.9 x 150 mm): a thin black-titanium band, a thin
   black border, and the display with its own corner radius. */
.device .band{position:relative;aspect-ratio:71.9/150;padding:calc(var(--pw) * .011);border-radius:calc(var(--pw) * .158);
  background:linear-gradient(var(--la,135deg),#7d838a,#24272b 10%,#0b0c0e 30%,#3a3e43 48%,#0d0e10 66%,#2a2d31 86%,#80868c);
  box-shadow:inset 0 1px 0 rgb(var(--c-white) / .35),inset 0 0 0 1px rgb(var(--c-white) / .14),0 0 0 .5px rgb(0 0 0 / .7)}
/* side buttons: action + volume on the left, power on the right */
.device .btn{position:absolute;width:calc(var(--pw) * .01);border-radius:2px;background:linear-gradient(90deg,#0c0d0f,#555a60 50%,#0c0d0f)}
.device .btn.act{left:calc(var(--pw) * -.007);top:17%;height:5%}
.device .btn.vu{left:calc(var(--pw) * -.007);top:25%;height:8.5%}
.device .btn.vd{left:calc(var(--pw) * -.007);top:35.5%;height:8.5%}
.device .btn.pw{right:calc(var(--pw) * -.007);top:28%;height:12%}
/* The black border is under the same cover glass as the display. */
.device .bezel{position:relative;height:100%;padding:calc(var(--pw) * .018);border-radius:calc(var(--pw) * .147);background:#010101;
  box-shadow:inset 0 0 0 .5px rgb(var(--c-white) / .1)}
/* The display: slightly recessed under the glass, true black at the edge, a touch of
   the contrast a lit OLED has. */
.device .screen{position:relative;height:100%;border-radius:calc(var(--pw) * .128);overflow:hidden;background:#000;isolation:isolate;
  box-shadow:0 0 0 .5px #000}
.device .screen::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 calc(var(--pw) * .012) rgb(0 0 0 / .55),inset 0 0 0 1px rgb(0 0 0 / .6)}
.device .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .45s ease;filter:contrast(1.04) saturate(1.06)}
.how .device .screen img{transition:opacity .7s ease,transform .9s var(--rev-ease),filter .7s ease}
.how .device .screen img.is-off{transform:translate3d(0,4%,0) scale(.96);filter:blur(8px)}
.device .screen img.is-leaving,.device .screen img.is-off{opacity:0}
.device .island{position:absolute;z-index:4;left:50%;top:calc(var(--pw) * .024);width:calc(var(--pw) * .29);height:calc(var(--pw) * .084);
  transform:translateX(-50%);border-radius:999px;background:#000;box-shadow:0 0 0 .5px rgb(var(--c-white) / .05)}
.device .island::after{content:"";position:absolute;right:17%;top:31%;width:calc(var(--pw) * .03);height:calc(var(--pw) * .03);border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#3a4a68 0,#141b2a 35%,#05070b 70%)}
/* Cover glass over border and display: a broad soft reflection, a crisp edge where the
   glass meets the band, and a sheen that slides as the phone turns. */
.device .glass{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:calc(var(--pw) * .147);
  background:linear-gradient(122deg,rgb(var(--c-white) / .1) 0%,rgb(var(--c-white) / .04) 22%,transparent 38%,transparent 70%,rgb(var(--c-white) / .03) 100%);
  box-shadow:inset 0 1px .5px rgb(var(--c-white) / .22),inset 0 0 0 .5px rgb(var(--c-white) / .08)}
.device .sheen{position:absolute;z-index:6;top:-10%;bottom:-10%;left:-60%;width:120%;pointer-events:none;will-change:transform;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 34%,rgb(var(--c-white) / .07) 45%,rgb(var(--c-white) / .015) 52%,transparent 62%)}
.device .shade{position:absolute;inset:0;z-index:4;pointer-events:none;background:rgb(var(--sc-shade-tone,0 0 0));
  opacity:calc(var(--shade,0) * var(--sc-shade-depth,1));will-change:opacity}

/* ---- 03 why tora: a hairline grid of everything Tora provides ------------------- */
.why3{position:relative;padding:var(--space-24) 0 var(--space-16)}
.w3-head{display:flex;align-items:flex-end;gap:var(--space-8);justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--space-10)}
.w3-head .sec-title{margin:0}
.w3-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
.w3-grid>*{border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);min-width:0;margin:0}
.w3-lift{position:relative;aspect-ratio:1/1;margin:0;z-index:1}
.w3-lift-card{position:absolute;inset:0;overflow:hidden;background:#07090c}
.w3-lift img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.78);transition:filter 1.1s ease}
.w3-lift:hover img,.w3-lift.color-open img{filter:none}
.w3-lift-card img{transform:scale(calc(1 + var(--lift,0) * .05));will-change:transform}
/* sides and bottom are the card's; only the top lets him out */
.w3-lift-clip{position:absolute;inset:0;clip-path:inset(-40% 0 0 0);pointer-events:none}
.w3-lift-cut{transform-origin:50% 100%;transform:scale(calc(1 + var(--lift,0) * .34));will-change:transform}
/* captain 2026-10-16: "the cutout around this dude's eye is kinda sketchy". The lifted-out figure was cut by
   machine and its hair and face edge sat on the dots as a hard, uneven seam. Now, as he settles into the card,
   the uncut photo fades in over him through a soft halo of his own outline (graded like him, above the dots),
   so at rest his edge is the photo's own and the dots and beam stay everywhere else; the cut-out only shows while he stands out of the card */
.w3-lift-fullwrap{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:clamp(0, calc(1 - var(--lift,0) * 6), 1);
  -webkit-mask:url(photos/why-lift-halo.webp?v=f360019b5426) center/cover;mask:url(photos/why-lift-halo.webp?v=f360019b5426) center/cover}
.w3-lift-fullwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.86) contrast(1.05)}
.w3-quote{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-8);padding:var(--space-6) var(--space-8) var(--space-8)}
.w3-label{display:flex;justify-content:space-between;gap:var(--space-6);font:500 var(--text-sm)/1.5 var(--sans);color:var(--ink)}
.w3-label span+span{color:var(--body);text-align:right}
.w3-quote blockquote{font:500 clamp(1.75rem,3.4vw,3.25rem)/1.12 var(--display);letter-spacing:-.025em;color:var(--ink);max-width:20ch}
.w3-sub{color:var(--body);font-size:var(--text-body);line-height:1.6;max-width:52ch}
.w3-cell{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) var(--space-6) var(--space-8);min-height:15rem}
.w3-cell h3{font:600 var(--text-lg)/1.3 var(--sans);color:var(--ink);max-width:24ch}
.w3-cell p{color:var(--body);font-size:var(--text-body);line-height:1.6;max-width:40ch}
.w3-icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:.875rem;color:var(--ink);margin-bottom:auto;
  background:linear-gradient(145deg,rgb(var(--c-white) / .12),rgb(var(--c-white) / .03));box-shadow:inset 0 0 0 1px rgb(var(--c-white) / .1)}
.w3-icon svg{width:1.375rem;height:1.375rem}
.w3-cell .w3-icon+h3{margin-top:var(--space-10)}
.w3-cell .w3-num{font:500 var(--text-xs)/1 var(--display);text-transform:lowercase;letter-spacing:.06em;color:var(--brand);margin-bottom:auto;padding-bottom:var(--space-10)}
.w3-note{justify-content:flex-end}
.w3-note .w3-num{margin-bottom:auto}
/* two bright stat blocks, the inverse of the page */
.w3-stat{display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-6);min-height:17rem;background:var(--ink);color:#0b0d10}
.w3-stat-label{align-self:flex-end;text-align:right;font:500 var(--text-sm)/1.45 var(--sans);color:#3a424a !important}
.w3-big{font:500 clamp(3.5rem,7vw,6.5rem)/.9 var(--display);letter-spacing:-.04em;color:#0b0d10}
.w3-title{justify-content:center;gap:var(--space-5)}
.w3-h{font:500 clamp(2rem,3.6vw,3.25rem)/1 var(--display) !important;letter-spacing:-.03em;max-width:none !important}
.why3 .art-credit{margin-top:var(--space-4)}
@media(max-width:820px){
  .why3{padding:var(--space-16) 0}
  .w3-grid{grid-template-columns:1fr}
  .w3-quote{grid-column:auto;padding:var(--space-6)}
  .w3-cell{min-height:0}
  .w3-icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:.875rem;color:var(--ink);margin-bottom:auto;
  background:linear-gradient(145deg,rgb(var(--c-white) / .12),rgb(var(--c-white) / .03));box-shadow:inset 0 0 0 1px rgb(var(--c-white) / .1)}
.w3-icon svg{width:1.375rem;height:1.375rem}
.w3-cell .w3-icon+h3{margin-top:var(--space-10)}
.w3-cell .w3-num{padding-bottom:var(--space-4)}
  .w3-stat{min-height:12rem}
}

/* ---- 04 research: a marquee, then each article as a full-bleed frame ------------ */
.cases{position:relative;padding:var(--space-24) 0 var(--space-16)}
.cases-marquee{overflow:hidden;white-space:nowrap;margin:var(--space-10) 0 var(--space-12);font:500 clamp(4rem,13vw,12rem)/.9 var(--display);letter-spacing:-.04em;color:var(--ink)}
.cases-marquee span{display:inline-block;will-change:transform}
.cases-marquee em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgb(var(--c-white) / .35)}
.cases-intro p{max-width:40rem;margin:0 0 var(--space-12);font-size:var(--text-lg);line-height:1.6;color:var(--body)}
.cases-list{position:relative}
/* The pinned backdrop: a heavily blurred, darkened copy of each article, cross-faded to
   whichever frame is in view, with the page grid drawn over it. */
.cases-bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden;z-index:0;pointer-events:none;opacity:var(--bg-in,0)}
.cases-bg>img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(48px) saturate(1.3) brightness(.62);opacity:0;will-change:opacity}
.cases-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgb(20 20 20 / .35),rgb(20 20 20 / .15) 30%,rgb(20 20 20 / .5))}
.cases-bg-grid{position:absolute;inset:0;z-index:1;display:flex;justify-content:space-between;max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter-wide)}
.cases-bg-grid i{width:1px;height:100%;background:rgb(var(--c-white) / .08)}
.cases-list>.g-wrap{position:relative;z-index:1}
.case{display:block;position:relative;color:inherit;text-decoration:none;width:min(100%,58rem);margin:0 auto var(--space-16)}
/* article cards after the reference: a small meta row over a smaller image, and the title and
   Read set inside the image like a feature; the image rests enlarged and pulls back on hover */
.case-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);padding-bottom:var(--space-3);
  font:500 var(--text-xs)/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.case-meta small{font:inherit;color:var(--muted);margin-right:.35em}
.case .photo{width:100%;height:auto;aspect-ratio:1.8;max-height:60svh}
.case .photo img{filter:none}
.case-over{position:absolute;inset:auto 0 0 0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);
  padding:var(--space-12) var(--space-6) var(--space-5);background:linear-gradient(transparent,rgb(4 6 9 / .78))}
.case-over h3{margin:0;font:500 clamp(1.125rem,1.7vw,1.5rem)/1.2 var(--display);letter-spacing:-.01em;color:#fff;max-width:24ch}
.case-over .read{flex:none;display:inline-flex;gap:var(--space-2);align-items:center;font:500 var(--text-sm)/1 var(--sans);color:#fff}
.case-over .read svg{width:.8125rem;height:.8125rem;transition:transform var(--dur) ease}
.case-img picture{position:absolute;inset:0;transform:scale(1.22);transition:transform 1.6s cubic-bezier(.16,1,.3,1);will-change:transform}
.case:hover .case-img picture,.case:focus-visible .case-img picture,.case.color-open .case-img picture{transform:scale(1)}
.case:hover .read svg,.case:focus-visible .read svg{transform:translate(2px,-2px)}
.case:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.cases .art-credit{margin:var(--space-6) 0 0}
@media(max-width:820px){
  .cases{padding:var(--space-16) 0 var(--space-12)}
  .case{margin-bottom:var(--space-10)}
  .case .photo{aspect-ratio:1.25}
  .case-meta{grid-template-columns:auto 1fr 1fr;font-size:.625rem}
  .case-over{padding:var(--space-10) var(--space-4) var(--space-4)}
}

/* ---- numbered heads for the kept sections --------------------------------------- */
.sec-kicker-row{margin-bottom:var(--space-5)}

/* ---- intro (fresh load only): true black, the headline rises word by word, then the
   mark draws and one rise from the bottom lifts the black, fills the mark and brings the
   shader up. The rest of the page settles in after (index.html splash script). ------- */
html.intro-run #splash{background:transparent}
html.intro-run #splash::after{display:none}
.sp-black{position:absolute;left:0;right:0;top:0;height:140vh;z-index:0;will-change:transform;
  background:linear-gradient(to top,transparent 0,#000 30vh)}
.sp-stack{z-index:1}
html.intro-run:not(.intro-play) .hero-mark{opacity:0}
html.intro-play .hero-mark{transition:opacity .9s ease}
html.intro-run main{z-index:auto}
html.intro-run .hero-center{z-index:10001}
/* the mark fills from the bottom with two counter-moving transforms (outer up, inner down)
   rather than an animated clip-path, so the painted mark is only moved, never repainted */
/* look 18: the roads fill along their centrelines (index.html splash script); the finished,
   grained mark fades in over them. Nothing moves, so nothing is repainted but the strokes. */
html.intro-run .sp-roads .rb{stroke-width:66;opacity:0}
.sp-outline .ol{stroke:#eef3f6;stroke-width:2.4;stroke-opacity:.9;stroke-dasharray:1 1;stroke-dashoffset:1}
html.intro-run #finalLayer{opacity:0}
.sp-trace .mark-trace{display:none}
html.intro-run .hero-center h1.reveal{opacity:1;transform:none;transition:none}
/* the headline is written in where it will stay: each line in turn, left to right like a pen
   stroke, a soft leading edge just ahead of the ink (look 17; the splash script wraps the lines) */
@property --wr{syntax:'<percentage>';inherits:false;initial-value:-10%}
html.intro-run .hero-center h1 .hl{
  -webkit-mask-image:linear-gradient(100deg,#000 calc(var(--wr) - 7%),rgb(0 0 0 / .35) var(--wr),transparent calc(var(--wr) + 2%));
  mask-image:linear-gradient(100deg,#000 calc(var(--wr) - 7%),rgb(0 0 0 / .35) var(--wr),transparent calc(var(--wr) + 2%))}
html.intro-run.script-play .hero-center h1 .hl{animation:spWrite 1.35s cubic-bezier(.42,0,.36,1) calc(var(--l) * .95s) forwards}
.hero-center h1 .hl{display:inline-block;padding:0 .08em;margin:0 -.08em}
html.intro-run html.intro-run #siteHeader{opacity:0;transform:translate3d(0,-1.5rem,0)}
html.intro-play html.intro-play #siteHeader{opacity:1;transform:none;transition:opacity .9s ease .2s,transform 1.1s cubic-bezier(.16,1,.3,1) .2s}

/* ---- 05 showreel: one frame zooms out into a wall of sports ----------------------- */
.reel{position:relative;height:300svh}
/* captain 2026-10-16: the sports wall is dark ("let's just go with dark ... and keep it like that"), one clean
   section with no light band at its seam; it keeps the tight seams between photos he liked */
.reel-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.reel-grid{--g:.1875rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--g);
  width:calc(100vw - var(--gutter-wide) * 2);height:calc(100svh - var(--header-h) - var(--space-10));margin-top:calc(var(--header-h) - var(--space-4));
  transform-origin:50% 50%;will-change:transform}
.reel-tile{position:relative;margin:0;overflow:hidden;border-radius:2px;background:#07090c}
/* while one frame fills the screen, the photos around it wait: they come in as the wall opens (--rz), so no
   sliver of the next row shows as a band above the photo */
.reel-tile:not(.is-center){opacity:clamp(0,calc(var(--rz,1) * 3),1)}
.reel-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel-tile figcaption{position:absolute;left:var(--space-4);bottom:var(--space-3);font:500 var(--text-sm)/1 var(--sans);text-transform:capitalize;letter-spacing:0;color:#fff;opacity:var(--cap,0)}
.reel-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgb(4 6 9 / .6));opacity:var(--cap,0);pointer-events:none}
.reel-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;will-change:opacity,transform}
.reel-title .kicker{justify-content:center;color:var(--ink)}
.reel-title p{max-width:40ch;margin:var(--space-6) auto 0;padding:0 var(--gutter-wide);font-size:var(--text-lg);line-height:1.55;color:rgb(238 243 246 / .88);text-shadow:0 .25rem 1.5rem rgb(0 0 0 / .6)}
.reel-title h2{max-width:none;margin-inline:auto;font:500 clamp(2.25rem,6.2vw,6rem)/.98 var(--display);letter-spacing:-.035em;color:var(--ink);margin-top:var(--space-5);text-shadow:0 .5rem 3rem rgb(0 0 0 / .45)}
.reel-credit{position:absolute;left:var(--gutter-wide);right:var(--gutter-wide);bottom:var(--space-2);margin:0;opacity:var(--cap,0)}
@media(max-width:820px){.reel{height:260svh}.reel-grid{--g:.125rem;width:calc(100vw - var(--gutter-wide-sm) * 2)}}


/* ---- 08 founding: the member card itself --------------------------------------- */
.cta-card-slot{width:min(24rem,82%);margin:0 auto var(--space-8)}
.cta-card-slot .mc-tilt{margin:0}

/* ---- footer: a giant see-through Tora wordmark with the steel shader behind it ---- */
/* exactly margin line to margin line: the page grid is the wide container less its gutters */
.foot-giant{position:relative;width:calc(100% - var(--gutter-wide) * 2);max-width:calc(var(--container-wide) - var(--gutter-wide) * 2);margin:var(--space-12) auto 0;aspect-ratio:392/142;overflow:hidden;
  -webkit-mask:url(brand/tora-wordmark-mask.svg) center/100% 100% no-repeat;mask:url(brand/tora-wordmark-mask.svg) center/100% 100% no-repeat;
  background:linear-gradient(170deg,#4e6a80 0%,#14202a 38%,#8fabbe 58%,#1b2937 78%,#547085 100%)}
/* look 17: a slow, grainy gradient through the wordmark, not photo stripes. Four soft blooms of
   the steel palette drift on their own long loops (transform only, so nothing repaints), and a
   film grain sits over them. */
.foot-giant{isolation:isolate;background:linear-gradient(165deg,#1d3141 0%,#0c1117 45%,#132230 100%)}
.fg{position:absolute;border-radius:50%;filter:blur(40px);will-change:transform;mix-blend-mode:screen}
.fg1{left:-12%;top:-30%;width:62%;height:130%;background:radial-gradient(closest-side,#8fb3cb,rgb(143 179 203 / 0));animation:fgA 26s ease-in-out infinite alternate}
.fg2{left:38%;top:10%;width:34%;height:90%;background:radial-gradient(closest-side,#eaf2f7,rgb(234 242 247 / 0));opacity:.8;animation:fgB 21s ease-in-out infinite alternate}
.fg3{right:-14%;top:-20%;width:58%;height:140%;background:radial-gradient(closest-side,#325672,rgb(50 86 114 / 0));animation:fgC 31s ease-in-out infinite alternate}
.fg4{left:18%;bottom:-60%;width:48%;height:110%;background:radial-gradient(closest-side,#8fcbc3,rgb(143 203 195 / 0));opacity:.45;animation:fgD 24s ease-in-out infinite alternate}
@keyframes fgA{to{transform:translate3d(30%,18%,0) scale(1.15)}}
@keyframes fgB{to{transform:translate3d(-55%,-12%,0) scale(.85)}}
@keyframes fgC{to{transform:translate3d(-35%,20%,0) scale(1.2)}}
@keyframes fgD{to{transform:translate3d(60%,-30%,0) scale(1.1)}}
.fg-grain{position:absolute;inset:0;background:url(brand/grain-tile.png) 0 0/64px 64px repeat;mix-blend-mode:overlay;opacity:.5}

/* ---- 07 privacy: the mark assembles as you scroll, then the words rise --------- */
.privacy2{position:relative;height:230svh}
.p2-pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;align-content:center;gap:var(--space-6);text-align:center;padding:0 var(--gutter-wide);overflow:hidden}
.p2-pin::before{content:"";position:absolute;left:50%;top:44%;width:44rem;height:44rem;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(143 179 203 / .14),transparent);opacity:var(--p2-glow,0)}
.p2-kicker{justify-content:center;opacity:var(--p2-copy,0)}
.privacy2 .privacy-lock-button{width:min(20rem,56vw);max-width:none;position:relative}
.privacy2 .privacy-lock path,.privacy2 .privacy-lock g{transform-box:fill-box;transform-origin:50% 50%;will-change:transform,opacity}
.privacy2 .pl-contours path{stroke-dasharray:1;stroke-dashoffset:var(--p2-draw,1)}
.privacy2 .pl-shackle{stroke-dasharray:1;stroke-dashoffset:var(--p2-shackle,1)}
/* the two halves are built out of nothing like the shackle: outline traced, then filled */
.privacy2 :is(.pl-left,.pl-right){stroke:#8FB3CB;stroke-width:1.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:var(--p2-halves,1);fill-opacity:var(--p2-fill,0)}
.p2-copy{display:grid;justify-items:center;gap:var(--space-3);max-width:40rem}
.p2-line{opacity:0;transform:translate3d(0,1.25rem,0);will-change:opacity,transform}
.p2-flag{font:600 var(--text-base)/1 var(--sans);color:var(--brand)}
.privacy2 h2{font:500 clamp(2.25rem,5vw,4rem)/1.05 var(--display);letter-spacing:-.03em;color:var(--ink);margin:0}
.privacy2 .lede{color:var(--muted);line-height:1.65;margin:0}

.foot-credits{max-width:var(--container-wide);margin:var(--space-5) auto 0;padding:0 var(--gutter-wide);font:400 .6875rem/1.7 var(--sans);color:#7d858d}
.foot-credits a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Calories carry the app's E energy letter (like P/F/C), never a flame. */
.energy{font:700 1.0625rem/1 var(--sans);letter-spacing:0;color:currentColor}
.w3-icon .energy{font-size:1.1875rem}
.w3-icon svg[viewBox="0 0 202 140"]{width:1.5rem;height:auto}

@keyframes spWrite{to{--wr:112%}}

/* Privacy lock, v2: the lock turns up out of a tilt, the halves trace themselves in, the
   shackle drops and clicks, a glint runs across the metal and rings pulse out (reveal.js). */
.p2-stage{position:relative;display:grid;place-items:center;perspective:60rem;perspective-origin:50% 40%}
.privacy2 .privacy-lock-button{transform-style:preserve-3d;will-change:transform,filter}
.p2-ring{position:absolute;left:50%;top:52%;width:min(20rem,56vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:1px solid rgb(143 179 203 / .5);transform:translate(-50%,-50%) scale(var(--s,.6));opacity:var(--o,0);will-change:transform,opacity}
.privacy2 .pl-glint{transform-box:view-box;transform:translate3d(var(--gx,0px),0,0) skewX(-18deg);opacity:var(--f,0);will-change:transform,opacity}

/* ---- tora PRO (look 17): what you log flows in, tora PRO forms, what it does flows out, then
   the price (reveal.js: --pa in, --pb PRO, --pr out, --po offer; it also draws .pro-flow). ---- */
.pro{--pa:0;--pb:0;--pr:0;--po:0;position:relative;z-index:1;height:360svh;background:var(--bg)}
.pro-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;padding:var(--header-h) var(--gutter-wide) var(--space-6);
  background:radial-gradient(70% 70% at 50% 48%,#05080c,#0b0e12 55%,var(--bg))}
.pro-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pro-flow .fl{fill:none;stroke:rgb(143 179 203 / .22);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:var(--draw,1)}
.pro-flow .fp{fill:none;stroke:#dde5ea;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:.05 .95;animation:proPulse var(--dur,2.6s) linear infinite;animation-delay:var(--dl,0s);
  opacity:var(--live,0);filter:drop-shadow(0 0 4px rgb(143 179 203 / .9))}
@keyframes proPulse{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pro-stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,19rem);align-items:center;gap:var(--space-8);width:min(84rem,100%);height:100%}
.pro-lab{margin:0 0 var(--space-5);font:500 var(--text-xs)/1 var(--display);text-transform:lowercase;letter-spacing:.08em;color:#8fb3cb}
.pro-col{opacity:calc(1 - var(--po) * .45);transition:none}
.pro-incol .pro-lab{opacity:clamp(0,calc(var(--pa) * 3),1)}
.pro-outcol .pro-lab{opacity:clamp(0,calc(var(--pr) * 3),1)}
.pro-in{list-style:none;margin:0;padding:0;display:grid;gap:.625rem;justify-items:start}
.pro-src{--k:clamp(0,calc(var(--pa) * 2.2 - var(--i) * .22),1);display:inline-flex;align-items:center;gap:.625rem;padding:.4375rem .875rem .4375rem .4375rem;border-radius:var(--radius-pill);
  background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08),inset 0 1px 0 rgb(255 255 255 / .06);font:500 var(--text-sm)/1 var(--sans);color:var(--ink);white-space:nowrap;
  opacity:var(--k);transform:translate3d(calc((1 - var(--k)) * -2.5rem),0,0)}
.pro-ico{display:grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:50%;background:rgb(143 179 203 / .16)}
.pro-ico svg{width:1rem;height:1rem;fill:none;stroke:#dde5ea;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pro-core{position:relative;display:grid;justify-items:center;align-content:center;transform:translate3d(0,calc(var(--po) * -5.5rem),0)}
/* the wordmark comes out of the Research section's space: Titan backlit on the ring plane
   (NASA/JPL/Space Science Institute, graded like the research art). The ring gathers around
   tora PRO as it forms, and the ring plane runs on out to the flow lines either side. */
.pro-space{position:absolute;z-index:0;left:var(--tx,50%);top:var(--ty,50%);width:calc(var(--ring,40rem) * 3);max-width:none;height:auto;pointer-events:none;
  translate:-50% calc(-49% - var(--po) * var(--lift,5.5rem));opacity:calc(var(--pb) * .95);scale:calc(1.35 - var(--pb) * .35);filter:blur(calc((1 - var(--pb)) * 10px));
  -webkit-mask:radial-gradient(50% 50% at 50% 50%,#000 42%,transparent 72%);mask:radial-gradient(50% 50% at 50% 50%,#000 42%,transparent 72%)}
.pro-halo{position:absolute;left:50%;top:50%;width:min(30rem,70vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(143 179 203 / .10),transparent 70%);opacity:var(--pb);mix-blend-mode:screen}
.pro-title{position:relative;z-index:2;margin:0;font:500 clamp(3.5rem,8vw,8rem)/.92 var(--display);letter-spacing:-.04em;color:var(--ink);
  opacity:var(--pb);scale:calc(.72 + var(--pb) * .28);filter:blur(calc((1 - var(--pb)) * 12px)) drop-shadow(0 0 calc(var(--pb) * 2rem) rgb(143 179 203 / .3))}
.pro-offer{position:absolute;z-index:2;left:50%;top:calc(100% + var(--space-6));width:max-content;max-width:min(32rem,90vw);display:grid;justify-items:center;gap:var(--space-3);text-align:center;
  opacity:var(--po);translate:-50% calc((1 - var(--po)) * 2rem);pointer-events:none}
.pro[style*="--po: 1"] .pro-offer,.pro.offer-on .pro-offer{pointer-events:auto}
.pro-out{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.pro-res{--k:clamp(0,calc(var(--pr) * 2 - var(--i) * .25),1);position:relative;padding:.875rem 1.125rem;border-radius:1.125rem;color:#fff;
  background:linear-gradient(140deg,rgb(118 130 142 / .5),rgb(62 72 82 / .55));box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 1.25rem 2.5rem -1.25rem rgb(0 0 0 / .8);
  opacity:var(--k);transform:translate3d(calc((1 - var(--k)) * 2.5rem),0,0) scale(calc(.94 + var(--k) * .06))}
.pro-res small{display:block;font:500 .75rem/1.3 var(--sans);color:rgb(222 234 243 / .8)}
.pro-res b{display:block;margin-top:.125rem;font:600 var(--text-lg)/1.2 var(--sans)}
.pro-res em{display:block;margin-top:.375rem;font:400 .6875rem/1.3 var(--sans);font-style:normal;color:rgb(222 234 243 / .8)}
.pro-res .viz.days{margin-top:1.125rem}
.pro-res .viz.macros{display:flex;gap:.25rem;margin-top:.5rem}
.pro-res .viz.macros i{height:.25rem;width:var(--w);border-radius:1rem;background:rgb(255 255 255 / .85)}
.pro-res .viz.macros i+i{background:#b7cddd}.pro-res .viz.macros i+i+i{background:#8fb3cb}
.pro-bubble{display:block;margin-top:.375rem;padding:.625rem .875rem;border-radius:1rem 1rem 1rem .25rem;background:#000;font:300 var(--text-body)/1.35 var(--sans);color:#f1f3f6;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06)}
/* the drawn pieces inside the output cards play once the cards are in */
.pro-res.on .viz.days i.on{transform:none;opacity:1}
.pro-res.on .viz.steps .st-line{stroke-dashoffset:0}
/* Monthly / Yearly: two equal cells, the pill exactly one cell inset .25rem on every side */
.pro-bill{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:.25rem;border-radius:var(--radius-pill);background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .05)}
.pro-bill button{position:relative;z-index:1;display:grid;place-items:center;min-width:6.25rem;height:2.5rem;padding:0 var(--space-4);border:0;background:none;border-radius:var(--radius-pill);cursor:pointer;
  font:500 var(--text-sm)/1 var(--sans);color:var(--body);transition:color .35s ease}
.pro-bill button[aria-checked="true"]{color:#0b0d10}
.pro-bill button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pro-knob{position:absolute;z-index:0;top:.25rem;bottom:.25rem;left:.25rem;width:calc(50% - .25rem);border-radius:var(--radius-pill);background:#eef3f6;
  box-shadow:0 .25rem .75rem -.25rem rgb(0 0 0 / .5);transition:transform .5s cubic-bezier(.65,0,.25,1)}
.pro[data-bill="year"] .pro-knob{transform:translateX(100%)}
.pro-price{display:flex;align-items:baseline;gap:var(--space-2);margin:var(--space-2) 0 0}
.pro-price b{display:inline-block;font:500 clamp(2.75rem,5vw,4rem)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.pro-price small{font-size:var(--text-sm);color:var(--body)}
/* the price, one slot per character (assets/pricing.js rolls the changed digits); the full price is read
   from a visually hidden copy */
.pro-price .pd-row{display:inline-flex;white-space:pre}
.pro-price .pd{position:relative;display:inline-block}
.pro-price .pd-c{display:inline-block}
.pro-price .pd-out{position:absolute;left:50%;top:0;transform:translate3d(-50%,0,0)}
.pro-price .pd-said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pro-billed{margin:0;font-size:var(--text-sm);color:var(--body)}
.pro-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:3.25rem;padding:0 var(--space-8);margin-top:var(--space-3);border-radius:var(--radius-pill);
  background:#eef3f6;color:#0b0d10;text-decoration:none;font:600 var(--text-body)/1 var(--sans);transition:background .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.pro-cta:hover{background:#fff;transform:translateY(-2px)}
.pro-founding-line{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--body)}
@media(max-width:820px){
  .pro-pin{padding:calc(var(--header-h) + var(--space-2)) var(--gutter-wide-sm) var(--space-4)}
  .pro-stage{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;gap:var(--space-6)}
  .pro-lab{text-align:center;margin-bottom:var(--space-3)}
  .pro-in{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem}
  .pro-src{background:#1b1e21;font-size:var(--text-xs);padding:.3125rem .625rem .3125rem .3125rem;gap:.375rem;transform:translate3d(0,calc((1 - var(--k)) * -1rem),0)}
  .pro-ico{width:1.375rem;height:1.375rem}.pro-ico svg{width:.8125rem;height:.8125rem}
  .pro-title{font-size:clamp(2.75rem,15vw,4rem)}
  .pro-space{--ring:19rem;--lift:2rem}
  .pro-halo{width:80vw}
  .pro-core{transform:translate3d(0,calc(var(--po) * -2rem),0)}
  .pro-offer{top:calc(100% + var(--space-4))}
  .pro-outcol{opacity:calc(1 - var(--po))}
  .pro-incol{opacity:calc(1 - var(--po) * .6)}
  .pro-out{grid-template-columns:1fr 1fr;gap:.5rem}
  .pro-res{background:linear-gradient(140deg,#434d56,#2a3137);padding:.625rem .75rem;transform:translate3d(0,calc((1 - var(--k)) * 1rem),0)}
  .pro-res b{font-size:var(--text-sm)}
  .pro-res small{font-size:.625rem}
  .pro-res .viz.days{margin-top:.875rem;gap:.1875rem}
  .pro-res .viz.days i{width:1rem;height:1.25rem;font-size:.5rem}
  .pro-res .viz.steps{width:100%}
  .pro-res em{display:none}
  .pro-bubble{font-size:.75rem;padding:.5rem .625rem}
}

/* How Tora works cards (copy: how-tora-works.md). A lowercase Orbitron label, a bold value,
   and at most one detail line; tora PRO features carry the small lockup, top right. */
.chip-glass em{display:block;margin-top:.25rem;font:400 var(--text-xs)/1.35 var(--sans);font-style:normal;color:rgb(222 234 243 / .8);white-space:normal;max-width:15rem}
.chip-glass.has-pro{padding-right:4.75rem}
.chip-pro{position:absolute;top:.625rem;right:.75rem;font-size:.75rem;line-height:1;opacity:.9}
.chip-pro .tpro{margin:0}
/* the estimated-burn diagram: a wide first guess narrowing into a tight number */
.chip-glass.chart{width:18rem}
.chip-glass.chart .chart-value{display:block;margin-top:var(--space-2);font:600 var(--text-xl)/1.1 var(--sans)}
.chip-glass.chart .band{fill:rgb(255 255 255 / .16);clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.22,1,.36,1) .25s}
.chip-glass.chart.on .band{clip-path:inset(0 0 0 0)}
.chip-glass.chart .axis,.chip-glass.chart .tick{fill:none;stroke:rgb(255 255 255 / .35);stroke-width:1}
.chip-glass.chart text{font:500 9px var(--sans);fill:rgb(222 234 243 / .85);opacity:0;transition:opacity .5s ease 1.5s}
.chip-glass.chart text.wk{transition-delay:.4s}
.chip-glass.chart text.end{text-anchor:end}
.chip-glass.chart.on text{opacity:1}
/* the cards carry real numbers over a busy screen: a denser sheet of light glass, so the
   phone reads through as soft light rather than as competing text */
.how .chip-glass{background:linear-gradient(140deg,rgb(118 130 142 / .78),rgb(62 72 82 / .84));
  backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5)}
@media(max-width:820px){
  .how .chip-glass.chart .chart-value{font-size:var(--text-body)}
  .how .chip-glass.chart p{font-size:.625rem}
  .how .chip-glass.has-pro{padding-right:3.75rem}
  .how .chip-pro{font-size:.625rem;top:.5rem;right:.5rem}
  .how .chip-glass em{font-size:.625rem;max-width:11rem}
}

/* iPhone 18 Pro geometry for the CSS phones (the slider and the How Tora works fallback),
   measured from Apple's front-on product image at 12.8 px/mm, as fractions of the 71.9 mm
   width: 1.55 mm metal band, 1.05 mm black border, ~13.5 mm body corner, and the Dynamic
   Island at rest, 15.63 x 6.02 mm, 2.42 mm below the screen, camera in its right end. */
.device .slab,.device .band{border-radius:calc(var(--pw) * .188)}
.device .band{padding:calc(var(--pw) * .0216)}
.device .bezel{padding:calc(var(--pw) * .0146);border-radius:calc(var(--pw) * .166)}
.device .glass{border-radius:calc(var(--pw) * .166)}
.device .screen{border-radius:calc(var(--pw) * .152)}
.device .island{top:calc(var(--pw) * .0337);width:calc(var(--pw) * .2174);height:calc(var(--pw) * .0837)}
.device .island::after{right:calc(var(--pw) * .0258);top:50%;width:calc(var(--pw) * .032);height:calc(var(--pw) * .032);transform:translateY(-50%)}
/* the splash and the hero mark each fade on their own layer, painted once, so the fade
   never re-renders the grained, blended mark frame by frame */
#splash,.hero-mark{will-change:opacity}

/* Why Tora icons: a bespoke set of bold, filled glyphs in an ice-to-steel gradient, larger and
   calmer than line icons, on a tile lit from above */
.w3-icon:has(.gi){width:4rem;height:4rem;border-radius:1.125rem;
  background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / .015));box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 .75rem 1.5rem -.75rem rgb(0 0 0 / .8)}
.w3-icon .gi{width:2rem;height:2rem}
.w3-cell h3{letter-spacing:-.01em}
/* titles line up across a row: the text starts a fixed distance under the icon */
.w3-cell .w3-icon{margin-bottom:0}
.w3-cell .w3-icon+h3{margin-top:var(--space-8)}

/* How Tora works cards in the style of a data card: a plain title-case label, the value, one
   small drawn diagram per card, and on the expenditure card a dotted trend inside its narrowing
   range, a divider, and the figure with a chevron. */
.how .chip-glass small{font:500 .75rem/1.3 var(--sans);text-transform:none;letter-spacing:0;color:rgb(222 234 243 / .78)}
.how .chip-glass small::first-letter{text-transform:uppercase}
.how .chip-glass b:not(.tpro-p){font-weight:600}
.viz.days{display:flex;gap:.25rem;margin-top:.5rem}
.viz.days i{display:grid;place-items:center;width:1.375rem;height:1.625rem;border-radius:.4rem;background:rgb(255 255 255 / .1);
  font:600 .625rem/1 var(--sans);font-style:normal;color:#0b0d10;position:relative}
.viz.days i s{position:absolute;top:-1rem;left:0;right:0;text-align:center;text-decoration:none;font:500 .5625rem/1 var(--sans);color:rgb(222 234 243 / .6)}
.viz.days{margin-top:1.375rem}
.viz.days i.on{background:rgb(255 255 255 / .92);transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.22,1.4,.36,1) calc(.3s + var(--d,0) * .08s),opacity .3s ease calc(.3s + var(--d,0) * .08s)}
.on .viz.days i.on{transform:none;opacity:1}
.viz.steps{display:block;width:9.5rem;height:auto;margin-top:.5rem;overflow:visible}
.viz.steps .st-line{fill:none;stroke:rgb(255 255 255 / .85);stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:190;stroke-dashoffset:190;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1) .35s}
.on .viz.steps .st-line{stroke-dashoffset:0}
.viz.steps circle{fill:#141414;stroke:#fff;stroke-width:1.4}
.viz.steps .st-now{fill:#fff}
.viz.steps text{font:500 8px var(--sans);fill:rgb(222 234 243 / .75)}
.viz.steps text.end{text-anchor:end}
.how .chip-glass.chart{width:19rem;padding:var(--space-4) var(--space-5)}
.chip-glass.chart .chart-head{display:grid;gap:.125rem}
.chip-glass.chart .ct{font:600 var(--text-lg)/1.2 var(--sans);color:#fff}
.chip-glass.chart .cs{font-size:.75rem}
.chip-glass.chart svg{margin:var(--space-3) 0 var(--space-3)}
.chip-glass.chart .pt{fill:#141414;stroke:#fff;stroke-width:1.5;opacity:0;transition:opacity .3s ease calc(.6s + var(--d) * .25s)}
.chip-glass.chart.on .pt{opacity:1}
.chip-glass.chart .chart-foot{display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-3);border-top:1px solid rgb(255 255 255 / .18)}
.chip-glass.chart .chart-value{margin:0;font:600 var(--text-xl)/1 var(--sans)}
.chip-glass.chart .chart-value small{display:inline;font-size:.8125rem;font-weight:500}
.chip-glass.chart .chart-foot i{font-style:normal;font-size:1.25rem;color:rgb(255 255 255 / .6)}
.chip-glass.chart p{margin-top:var(--space-2)}
@media(max-width:820px){.how .chip-glass.chart{width:13.5rem}.chip-glass.chart .ct{font-size:var(--text-body)}.chip-glass.chart .chart-value{font-size:var(--text-body)}}

/* the weekly-sets range and the sleep-debt nights (drawn in the How Tora works cards) */
.dm-range{grid-column:2;position:relative;align-self:stretch;width:.5rem;margin-top:var(--space-3);border-radius:1rem;background:rgb(255 255 255 / .14)}
.dm-range i{position:absolute;left:0;right:0;bottom:calc(var(--lo) * 100%);top:calc((1 - var(--hi)) * 100%);border-radius:1rem;background:rgb(143 179 203 / .55)}
.dm-range i::after{content:"";position:absolute;left:50%;bottom:calc((var(--v) - var(--lo)) / (var(--hi) - var(--lo)) * 100%);width:.875rem;height:.875rem;border-radius:50%;background:#fff;translate:-50% 50%}
.dm-range s{position:absolute;right:130%;font:500 .5625rem/1 var(--sans);text-decoration:none;color:rgb(222 234 243 / .7)}
.dm-range s:first-of-type{top:calc((1 - .45) * 100%)}
.dm-range s:last-of-type{top:calc((1 - .8) * 100%)}
.dm-nights{display:flex;gap:.25rem;margin-top:.5rem}
.dm-nights i{width:1.25rem;height:.5rem;border-radius:.25rem;background:rgb(255 255 255 / .16)}
.dm-nights i.on{background:#fff}
/* Why Tora reads top to bottom: each stat is its figure, then what it means, left-aligned */
.w3-stat{justify-content:flex-start;gap:var(--space-4)}
.w3-stat .w3-big{order:0}
.w3-stat .w3-stat-label{order:1;align-self:auto;text-align:left;max-width:22ch;font:500 var(--text-body)/1.45 var(--sans)}
.w3-stand h3{font:600 var(--text-xl)/1.25 var(--sans);max-width:20ch}
.w3-icon .gi-lg{width:2.5rem;height:2.5rem}
.w3-stand .w3-icon{width:4.5rem;height:4.5rem;border-radius:1.25rem}

/* ---- Everything in Tora: the feature table, one calm tab per domain ---- */
.features{padding:var(--space-12) 0 var(--space-16)}
.features .g-wrap{max-width:58rem}
.ft-head{text-align:center;margin-bottom:var(--space-8)}
.ft-head h2{margin:0 0 var(--space-3);font:500 clamp(2rem,4.4vw,3.5rem)/1.05 var(--display);letter-spacing:-.03em;color:var(--ink)}
.ft-head p{margin:0;color:var(--body);font-size:var(--text-body)}
.ft-chips{position:relative;isolation:isolate;display:flex;gap:.25rem;width:max-content;max-width:100%;margin:0 auto var(--space-8);padding:.25rem;border-radius:var(--radius-pill);
  background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06);overflow-x:auto;scrollbar-width:none}
.ft-chips::-webkit-scrollbar{display:none}
/* the light pill slides between chips rather than blinking from one to the next */
.ft-knob{position:absolute;z-index:-1;left:0;top:0;width:0;height:0;border-radius:var(--radius-pill);background:linear-gradient(180deg,#f7fafc,#e0e8ee);
  box-shadow:inset 0 1px 0 #fff,0 .375rem 1rem -.375rem rgb(0 0 0 / .6);transition:transform .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1),height .55s cubic-bezier(.22,1,.36,1)}
/* assets/elastic-knob.js drives the knob on springs; the CSS transition is the no-script path */
.ft-chips.has-knob .ft-knob{transition:none;will-change:transform,width}
.ft-chips button{flex:none;display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:0 var(--space-5);border:0;border-radius:var(--radius-pill);background:none;cursor:pointer;
  font:500 var(--text-sm)/1 var(--sans);color:var(--body);transition:color .4s ease}
.ft-chips button span{font:500 .6875rem/1 var(--sans);color:inherit;opacity:.55;font-variant-numeric:tabular-nums}
.ft-chips button:hover{color:var(--ink)}
.ft-chips button[aria-pressed="true"]{color:#0b0d10}
.ft-chips button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ft-wrap{position:relative;overflow:hidden;transition:height .6s cubic-bezier(.22,1,.36,1)}
.ft-table{width:100%;border-collapse:collapse}
.ft-table thead th{padding:0 0 var(--space-3);font:500 var(--text-sm)/1 var(--sans);color:var(--body);text-align:center;width:7.5rem}
.ft-table thead th:first-child{width:auto}
.ft-table thead .tpro{font-size:1rem;color:var(--ink)}
/* each group header is the accordion's handle: the name, its count, and a chevron that turns */
.ft-table .ft-group th{padding:0;border-top:1px solid rgb(255 255 255 / .1)}
.ft-table tbody:first-of-type .ft-group th{border-top:0}
.ft-gbtn{display:flex;align-items:center;gap:.75rem;width:100%;padding:var(--space-5) .25rem;border:0;background:none;cursor:pointer;text-align:left;color:inherit;transition:background .3s ease}
.ft-gbtn:hover{background:rgb(255 255 255 / .025)}
.ft-gbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:.5rem}
.ft-gbtn span{font:500 var(--text-lg)/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.ft-gbtn small{font:400 var(--text-sm)/1 var(--sans);color:var(--muted)}
.ft-chev{position:relative;margin-left:auto;width:2rem;height:2rem;border-radius:50%;background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08);transition:background .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.ft-chev::before{content:"";position:absolute;left:50%;top:45%;width:.5rem;height:.5rem;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);translate:-50% -50%;rotate:45deg}
.ft-gbtn[aria-expanded="true"] .ft-chev{transform:rotate(180deg);background:rgb(143 179 203 / .18)}
.ft-gbtn[aria-expanded="true"] span{color:#b7cddd}
.ft-table tbody.ft-closed tr:not(.ft-group){display:none}
.ft-table tbody tr:not(.ft-group){border-top:1px solid rgb(255 255 255 / .08)}
.ft-table tbody tr:last-child{border-bottom:1px solid rgb(255 255 255 / .08)}
.ft-table tbody th[scope="row"]{padding:var(--space-4) var(--space-4) var(--space-4) 0;text-align:left;font:400 var(--text-body)/1.45 var(--sans);color:var(--ink)}
.ft-table td{text-align:center;vertical-align:middle}
.ft-y{display:inline-grid;place-items:center;width:1.625rem;height:1.625rem;border-radius:50%;background:#eef3f6}
.ft-y svg{width:.875rem;height:.875rem;fill:none;stroke:#0b0d10;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ft-n{display:inline-block;width:.75rem;height:1.5px;background:rgb(255 255 255 / .25);vertical-align:middle}
.ft-table td:last-child .ft-y{background:#8fb3cb}
/* switching groups: the rows in view lift away, the table eases to its new height, and the
   new rows settle in one after another */
.ft-table tbody tr{transition:opacity .5s ease calc(var(--i,0) * 40ms),transform .7s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 40ms)}
.ft-table tbody.leaving tr:not(.ft-group){opacity:0;transform:translate3d(0,-.5rem,0);transition:opacity .2s ease,transform .25s ease}
.ft-table tbody.entering tr:not(.ft-group){opacity:0;transform:translate3d(0,.875rem,0);transition:none}
.ft-note{margin:var(--space-6) auto 0;max-width:none;text-align:center;font-size:var(--text-sm);color:var(--muted)}
@media(max-width:820px){
  .ft-chips{margin-left:calc(var(--gutter-wide-sm,1rem) * -1);margin-right:calc(var(--gutter-wide-sm,1rem) * -1);max-width:none;width:auto;border-radius:0;background:none;box-shadow:none;padding:.25rem var(--gutter-wide-sm,1rem)}
  .ft-chips button{padding:0 var(--space-4);background:rgb(255 255 255 / .06)}
  .ft-chips button[aria-pressed="true"]{background:none}
  .ft-table thead th{width:4.25rem}
  .ft-table tbody th[scope="row"]{font-size:var(--text-sm)}
}

/* ---- Nova (look 17): the front door. A list of what you can ask beside Nova as it looks on
   the phone: the Dynamic Island opens into a dark card, listens, thinks and answers. ---- */
.nova{padding:var(--space-16) 0}
.nova-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-12);align-items:center}
.nova-copy h2{margin:0 0 var(--space-5);font:500 clamp(2rem,4vw,3.25rem)/1.05 var(--display);letter-spacing:-.03em;color:var(--ink);max-width:15ch}
.nova-copy>p{margin:0 0 var(--space-4);color:var(--body);font-size:var(--text-body);line-height:1.65;max-width:50ch}
.nova-copy>p:first-of-type{color:var(--ink);font-size:var(--text-lg);line-height:1.5}
.nova-how{font-size:var(--text-sm)!important}
.nova-foot{margin-top:var(--space-6)!important;color:var(--ink)!important;font-weight:500}
/* use cases: quiet rows; the one Nova is answering is lit, with a thin bar filling as it plays */
.nv-cases{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:.375rem;max-width:34rem}
.nv-case{position:relative;display:grid;grid-template-columns:2.5rem 1fr;align-items:center;gap:var(--space-4);width:100%;padding:.75rem 1rem .75rem .75rem;border:0;border-radius:1rem;
  background:transparent;color:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background .4s ease}
.nv-case:hover{background:rgb(255 255 255 / .035)}
.nv-case[aria-pressed="true"]{background:linear-gradient(100deg,rgb(143 179 203 / .13),rgb(255 255 255 / .03) 70%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .06)}
.nv-case:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.nv-ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:.75rem;background:rgb(255 255 255 / .05);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);transition:background .4s ease}
.nv-ico svg{width:1.25rem;height:1.25rem;fill:none;stroke:rgb(222 234 243 / .7);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s ease}
.nv-case[aria-pressed="true"] .nv-ico{background:rgb(143 179 203 / .2)}
.nv-case[aria-pressed="true"] .nv-ico svg{stroke:#eef3f6}
.nv-ct b{display:block;font:600 var(--text-body)/1.3 var(--sans);color:rgb(var(--c-white) / .62);transition:color .4s ease}
.nv-ct span{display:block;max-height:0;opacity:0;overflow:hidden;font-size:var(--text-sm);line-height:1.45;color:var(--body);transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s ease,margin .5s ease}
.nv-case[aria-pressed="true"] .nv-ct b{color:var(--ink)}
.nv-case[aria-pressed="true"] .nv-ct span{max-height:3rem;opacity:1;margin-top:.25rem}
.nv-bar{position:absolute;left:1rem;right:1rem;bottom:0;height:2px;border-radius:2px;background:rgb(143 179 203 / .8);transform-origin:left;transform:scaleX(0);opacity:0}
.nv-case[aria-pressed="true"] .nv-bar{opacity:1}
.nv-case.run .nv-bar{transform:scaleX(1);transition:transform var(--dur,8s) linear}
/* the phone, cropped to its top half, the home screen dimmed under Nova's scrim */
.nv-stage{position:relative;display:grid;place-items:start center;min-height:36rem;padding-top:var(--space-4)}
.nv-stage::before{content:"";position:absolute;inset:8% -10% 0;background:radial-gradient(50% 45% at 50% 30%,rgb(143 179 203 / .16),transparent 70%);pointer-events:none}
.nv-phone{--w:min(24rem,100%);position:relative;width:var(--w);aspect-ratio:71.9/112;border-radius:calc(var(--w) * .188) calc(var(--w) * .188) 0 0;
  padding:calc(var(--w) * .0216) calc(var(--w) * .0216) 0;background:linear-gradient(90deg,#5d6f7c,#c4d3dc 6%,#6d808d 14%,#30393f 50%,#6d808d 86%,#c4d3dc 94%,#5d6f7c);
  -webkit-mask:linear-gradient(#000 62%,transparent);mask:linear-gradient(#000 62%,transparent);box-shadow:0 2rem 4rem -1rem rgb(0 0 0 / .8)}
.nv-phone::before{content:"";position:absolute;inset:calc(var(--w) * .0216) calc(var(--w) * .0216) 0;border-radius:calc(var(--w) * .166) calc(var(--w) * .166) 0 0;background:#000}
.nv-home{position:absolute;left:calc(var(--w) * .0362);right:calc(var(--w) * .0362);top:calc(var(--w) * .0362);width:calc(100% - var(--w) * .0724);height:auto;border-radius:calc(var(--w) * .152) calc(var(--w) * .152) 0 0;filter:saturate(.8)}
.nv-scrim{position:absolute;left:calc(var(--w) * .0362);right:calc(var(--w) * .0362);top:calc(var(--w) * .0362);bottom:0;border-radius:calc(var(--w) * .152) calc(var(--w) * .152) 0 0;
  background:linear-gradient(180deg,rgb(0 0 0 / .72),rgb(0 0 0 / .45) 60%,rgb(0 0 0 / .3));opacity:0;transition:opacity .6s ease}
.nv-stage.open .nv-scrim{opacity:1}
/* the island: a pill at rest; opens into the card (clip-path, so only the shape moves) */
.nv-island{position:absolute;left:calc(var(--w) * .058);right:calc(var(--w) * .058);top:calc(var(--w) * .06);min-height:calc(var(--w) * .1);border-radius:calc(var(--w) * .115);background:#000;
  clip-path:inset(0 calc(50% - var(--w) * .109) calc(100% - var(--w) * .0837) calc(50% - var(--w) * .109) round calc(var(--w) * .042));
  transition:clip-path .75s cubic-bezier(.3,1.25,.4,1);box-shadow:0 0 0 1px rgb(255 255 255 / .04)}
.nv-stage.open .nv-island{clip-path:inset(0 0 0 0 round calc(var(--w) * .115))}
.nv-cam{position:absolute;top:calc(var(--w) * .0419);right:calc(50% - var(--w) * .1);width:calc(var(--w) * .032);height:calc(var(--w) * .032);translate:0 -50%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#2b3b5a,#0a0f18 60%);transition:opacity .3s ease}
.nv-stage.open .nv-cam{opacity:0}
.nv-body{padding:calc(var(--w) * .13) calc(var(--w) * .07) calc(var(--w) * .05);opacity:0;filter:blur(8px);transform:scale(.96);transform-origin:top center;
  transition:opacity .35s ease,filter .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.nv-stage.open .nv-body{opacity:1;filter:none;transform:none;transition-delay:.2s}
.nv-q{min-height:1.2em;margin:0 0 .375rem;font:500 .75rem/1.3 var(--sans);color:rgb(241 243 246 / .55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .4s ease}
.nv-stage.replying .nv-q{opacity:1}
.nv-text{min-height:2.6em;margin:0;font:300 clamp(1.125rem,1.7vw,1.375rem)/1.3 var(--sans);letter-spacing:-.005em;color:#f1f3f6}
.nv-stage.prompt .nv-text{color:rgb(241 243 246 / .55)}
.nv-text span{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.2em);transition:opacity .45s ease,filter .45s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.nv-text span.in{opacity:1;filter:none;transform:none}
.nv-stage.thinking .nv-text{animation:nvThink 1.4s ease-in-out infinite}
@keyframes nvThink{50%{opacity:.55;filter:blur(1.5px)}}
/* Nova's aurora: a hairline of light across the card that swells while it listens */
.nv-wave{display:block;height:2px;margin:calc(var(--w) * .045) -4% 0;border-radius:2px;background:linear-gradient(90deg,transparent,#8fb3cb 18%,#dde5ea 42%,#8fcbc3 66%,#8fb3cb 84%,transparent);
  background-size:200% 100%;opacity:.35;transform:scaleX(.5);filter:drop-shadow(0 0 6px rgb(143 179 203 / .8));transition:opacity .5s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.nv-stage.listening .nv-wave,.nv-stage.thinking .nv-wave{opacity:1;transform:scaleX(1);animation:nvAurora 2.4s linear infinite}
.nv-stage.listening .nv-wave{animation:nvAurora 2.4s linear infinite,nvSwell .9s ease-in-out infinite alternate}
@keyframes nvAurora{to{background-position:-200% 0}}
@keyframes nvSwell{to{height:3px;filter:drop-shadow(0 0 10px rgb(221 229 234 / .9))}}
.nv-foot{display:flex;align-items:center;justify-content:space-between;margin-top:calc(var(--w) * .05)}
.nv-badge{display:inline-flex;align-items:center;gap:.5rem;color:rgb(241 243 246 / .8)}
.nv-badge b{font:500 .8125rem/1 'Orbitron',sans-serif;letter-spacing:.02em}
.nv-mark{width:1.25rem;height:auto;fill:currentColor}
.nv-stage.thinking .nv-mark{animation:nvSpin 1.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes nvSpin{to{transform:rotate(360deg)}}
.nv-hint{font:600 .75rem/1 var(--sans);color:rgb(241 243 246 / .6);transition:opacity .3s ease}
.nv-stage.replying .nv-hint{color:#f1f3f6}
@media(max-width:820px){
  .nova-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .nova-copy{display:contents}
  .nova-copy h2{order:1;margin-bottom:var(--space-3)}
  .nova-copy>p:first-of-type{order:2;font-size:var(--text-body)}
  .nv-stage{order:3;min-height:0}
  .nv-cases{order:4;margin-top:0}
  .nova-how{order:5}
  .nova-foot{order:6;margin-top:0!important}
  .nv-phone{--w:min(21rem,100%)}
  .nv-case{padding:.625rem .75rem .625rem .625rem}
  .nv-text{font-size:1.125rem}
}
/* standout icons: larger, two-tone (ice and steel), set on a deeper tile */
.w3-stand .w3-icon{width:5.5rem;height:5.5rem;border-radius:1.5rem;background:radial-gradient(80% 80% at 30% 20%,rgb(255 255 255 / .09),rgb(255 255 255 / .02) 70%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),inset 0 0 0 1px rgb(255 255 255 / .05),0 1rem 2rem -1rem rgb(0 0 0 / .9)}
.w3-icon .gi-st{width:3.25rem;height:3.25rem;filter:drop-shadow(0 .25rem .5rem rgb(0 0 0 / .45))}

/* ---- See it in the app (look 17): a list of features beside one phone; the chosen feature's
   real recording plays on the phone, a ring fills as it plays, and the next one follows. ---- */
.see{padding:var(--space-16) 0}
.see-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--space-12);align-items:center}
.see-head{margin-bottom:var(--space-6)}
.see-head h2{margin:0 0 var(--space-3);font:500 clamp(2rem,4.4vw,3.5rem)/1.05 var(--display);letter-spacing:-.03em;color:var(--ink)}
.see-head p{margin:0;color:var(--body)}
/* the list shows a window of it, fading out at both edges; the chosen item stays in view */
.see-listwrap{position:relative;height:30rem;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.see-list{list-style:none;margin:0;padding:3.5rem 0;display:grid;gap:.625rem;transition:transform .8s cubic-bezier(.22,1,.36,1);will-change:transform}
.see-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-4);width:min(34rem,100%);padding:1rem 1.125rem 1rem 1.375rem;border:0;border-radius:1.25rem;cursor:pointer;text-align:left;
  background:rgb(255 255 255 / .04);color:inherit;opacity:.55;transform:scale(.97);transform-origin:left center;
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1),background .5s ease,box-shadow .5s ease}
.see-item:hover{opacity:.85}
.see-item[aria-pressed="true"]{opacity:1;transform:none;background:linear-gradient(110deg,rgb(143 179 203 / .14),rgb(255 255 255 / .05) 65%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 1.25rem 2.5rem -1.25rem rgb(0 0 0 / .8)}
.see-item:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.see-it b{display:flex;align-items:center;gap:.5rem;font:600 var(--text-lg)/1.25 var(--sans);color:var(--ink)}
.see-it b .chip-pro{position:static;font-size:.6875rem;opacity:.95}
.see-it>span{display:block;margin-top:.25rem;font-size:var(--text-sm);line-height:1.45;color:var(--body)}
.see-ring{width:2.25rem;height:2.25rem;flex:none}
.see-ring .rt{fill:none;stroke:rgb(255 255 255 / .16);stroke-width:1.5}
.see-ring .rv{fill:none;stroke:#eef3f6;stroke-width:1.75;stroke-linecap:round;stroke-dasharray:var(--p,0) 100;transform:rotate(-90deg);transform-origin:18px 18px}
.see-ring .ra{fill:none;stroke:rgb(238 243 246 / .7);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.see-item[aria-pressed="true"] .see-ring .rt{stroke:rgb(143 179 203 / .3)}
.see-item[aria-pressed="true"] .see-ring .ra{opacity:0}
.see-ring .ra{transition:opacity .3s ease}
/* the phone */
.see-right{display:grid;place-items:center;position:relative}
.see-right::before{content:"";position:absolute;inset:10% -5%;background:radial-gradient(45% 45% at 50% 50%,rgb(143 179 203 / .14),transparent 70%);pointer-events:none}
.see-phone{--pw:min(19rem,calc((100svh - 8rem) * 71.9 / 150),70vw);position:relative;transform:perspective(80rem) rotateY(-9deg) rotateX(3deg);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.see-phone .device{width:var(--pw)}
.see-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;transition:opacity .35s ease,filter .35s ease}
.see-phone.swap video{opacity:0;filter:blur(6px)}
.see-phone::after{content:"";position:absolute;left:10%;right:10%;bottom:-2.5rem;height:3rem;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0 / .8),transparent);filter:blur(8px);z-index:-1}
@media(max-width:820px){
  .see-grid{grid-template-columns:1fr;gap:var(--space-3)}
  .see{padding:var(--space-10) 0}
  .see-head h2{font-size:clamp(1.75rem,8.4vw,2.25rem);margin-bottom:var(--space-2)}
  .see-head p{font-size:var(--text-sm)}
  .see-left{display:contents}
  .see-head{order:1;margin-bottom:0;text-align:center}
  /* phones: the features become one row of chips above the phone, the chosen one's line below it */
  .see-listwrap{order:2;height:auto;margin:0 calc(var(--gutter-wide-sm,1rem) * -1);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .see-list{display:flex;gap:.5rem;padding:.25rem 1.5rem;overflow-x:auto;scrollbar-width:none;transform:none!important;scroll-behavior:smooth}
  .see-list::-webkit-scrollbar{display:none}
  .see-list li{flex:none}
  .see-item{width:auto;padding:.5rem .5rem .5rem .875rem;gap:.5rem;border-radius:999px;transform:none}
  .see-it>span{display:none}
  .see-it b{font-size:var(--text-sm);white-space:nowrap}
  .see-ring{width:1.5rem;height:1.5rem}
  .see-cap{display:block!important;order:3;min-height:1.4em;margin:0;text-align:center;font-size:var(--text-sm);line-height:1.4;color:var(--body)}
  .see-right{order:4}
  .see-phone{--pw:min(13rem,58vw,calc((100svh - 21rem) * 71.9 / 150));transform:none}
}
.see-cap{display:none}
.ft-head h2,.ft-head p{max-width:none;margin-left:auto;margin-right:auto}
.see .g-wrap{max-width:68rem}

/* ---- How Tora works, look 17: calibrate, record and adjust told across every field. Three
   cards per step (nutrition, training, sleep), the real diagrams from the app: the muscle
   map, the sleep stages, the expenditure range and the sleep-need dial. ---------------- */
.how-fields{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem;margin-top:var(--space-5);font:500 var(--text-xs)/1 var(--display);text-transform:lowercase;letter-spacing:.06em;color:#8fb3cb}
.how-fields i{width:1rem;height:1px;background:rgb(143 179 203 / .45)}
.how .how-steps{margin-top:var(--space-8)}
.how .chip-glass.hc-l1{left:-62%;top:4%}
.how .chip-glass.hc-l2{left:-54%;top:64%}
.how .chip-glass.hc-r{right:-52%;top:24%}
.how .chip-glass.hc-r2{right:-56%;top:60%}
.how .chip-glass.hw-dial{left:auto;right:-50%;top:52%}
.how .chip-glass.chart.hc-l1{left:-72%;top:34%}
.how .chip-glass[data-step="2"].hc-r{top:2%}
.how .chip-glass.hw-goal,.how .chip-glass.hw-body,.how .chip-glass.hw-night,.how .chip-glass.hw-dial{display:block;white-space:normal}
/* sleep goal: the app's goal slider */
.hw-goal{width:15rem}
.hw-slider{position:relative;display:block;height:.375rem;margin-top:.875rem;border-radius:1rem;background:rgb(255 255 255 / .16)}
.hw-slider i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);border-radius:inherit;background:linear-gradient(90deg,rgb(143 179 203 / .6),#fff);transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,1,.36,1) .35s}
.hw-slider i::after{content:"";position:absolute;right:-.5rem;top:50%;width:1rem;height:1rem;border-radius:50%;background:#fff;translate:0 -50%;box-shadow:0 .125rem .5rem rgb(0 0 0 / .4)}
.on .hw-slider i{transform:none}
.hw-scale{display:flex;justify-content:space-between;margin-top:.5rem;font:500 .625rem/1 var(--sans);color:rgb(222 234 243 / .7)}
.hw-scale s{text-decoration:none}
/* focus muscles: the app's own body map, chest and biceps lit, beside the weekly-sets range */
.hw-body{width:15rem;display:grid!important;grid-template-columns:1fr auto;column-gap:var(--space-3)}
.hw-body small,.hw-body b,.hw-body em{grid-column:1 / -1}
.hw-body img{grid-column:1;justify-self:center;height:13rem;width:auto;margin-top:var(--space-3);opacity:0;transform:translateY(.5rem);transition:opacity .8s ease .3s,transform 1s cubic-bezier(.22,1,.36,1) .3s}
.on.hw-body img{opacity:1;transform:none}
.hw-body .dm-range{margin-top:var(--space-3)}
.hw-body .dm-range i{transform-origin:bottom;transform:scaleY(0);transition:transform 1s cubic-bezier(.22,1,.36,1) .5s}
.on.hw-body .dm-range i{transform:none}
.hw-body em{margin-top:var(--space-2)}
/* last night: the sleep stages, drawn in as the card arrives */
.hw-night{width:16rem}
.hw-stages{display:block;width:100%;height:auto;margin:var(--space-3) 0 var(--space-2);overflow:visible}
.hw-stages text{font:500 8px var(--sans);fill:rgb(222 234 243 / .7)}
.hw-stages rect{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:opacity .3s ease calc(.3s + var(--d) * .07s),transform .5s cubic-bezier(.22,1,.36,1) calc(.3s + var(--d) * .07s)}
.hw-stages rect[y="44"]{fill:#8fb3cb}
.hw-stages rect[y="16"]{fill:#b7cddd}
.hw-stages rect[y="2"]{fill:rgb(255 255 255 / .55)}
.on .hw-stages rect{opacity:1;transform:none}
.hw-score{display:flex;align-items:center;gap:.5rem;font:400 .6875rem/1.3 var(--sans);color:rgb(222 234 243 / .8)}
.hw-score i{display:grid;place-items:center;flex:none;width:1.875rem;height:1.875rem;border-radius:50%;border:2px solid #fff;font:600 .75rem/1 var(--sans);font-style:normal;color:#fff}
/* sleep need: the dial, and the debt it clears */
.hw-dial{width:13.5rem;text-align:center}
.hw-dial svg{display:block;width:8.5rem;height:auto;margin:var(--space-3) auto var(--space-3)}
.hw-dial .dt{fill:none;stroke:rgb(255 255 255 / .14);stroke-width:9}
.hw-dial .dv{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-dasharray:0 100;transform:rotate(-90deg);transform-origin:66px 66px;transition:stroke-dasharray 1.6s cubic-bezier(.22,1,.36,1) .3s}
.on.hw-dial .dv{stroke-dasharray:var(--f) 100}
.hw-dial .tk{stroke:rgb(255 255 255 / .35);stroke-width:1.2}
.hw-dial .dn{font:600 20px var(--sans);fill:#fff;text-anchor:middle}
.hw-dial .du{font:500 10px var(--sans);fill:rgb(222 234 243 / .75);text-anchor:middle}
.hw-debt{display:block;text-align:left;padding-top:var(--space-3);border-top:1px solid rgb(255 255 255 / .14)}
.hw-debt b{font-size:var(--text-sm)!important}
.hw-debt em{max-width:none}
.hw-debt .dm-nights i{transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1) calc(.8s + var(--n,0) * .08s)}
.on .hw-debt .dm-nights i{transform:none}
@media(max-width:820px){
  .how-fields{margin-top:var(--space-2);font-size:.625rem;gap:.5rem}
  .how .how-steps{margin-top:var(--space-3)}
  .how .how-step{padding:var(--space-3) var(--space-4)}
  .how .how-step p{font-size:.8125rem;line-height:1.45}
  .how .how-step.on p{margin-top:var(--space-1)}
  /* the phone stands in the middle; the three cards gather around it inside the stage */
  .how .how-pin{align-items:stretch}
  .how .how-grid{display:flex;flex-direction:column;align-items:stretch;height:100svh}
  .how .how-head{flex:none}
  .how .how-stage{--pw:min(10.5rem,40vw);flex:1 1 auto;min-height:0;height:auto;margin:var(--space-3) 0 var(--space-4)}
  .how .how-cards{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
  .how .how-floor{top:84%;width:16rem}
  .how .chip-glass{padding:.625rem .75rem;border-radius:.875rem;gap:.5rem}
  .how .chip-glass .ci{width:1.75rem;height:1.75rem;border-radius:.5rem}
  .how .chip-glass .ci svg{width:1rem;height:1rem}
  .how .chip-glass small{font-size:.625rem}
  .how .chip-glass b:not(.tpro-p){font-size:.875rem}
  .how .chip-glass.has-pro{padding-right:3.5rem}
  /* three rows, alternating sides, each card compact enough that all three fit beside the phone */
  .how .chip-glass{max-width:62%}
  .how .chip-glass.hc-l1,.how .chip-glass.chart.hc-l1{left:0;right:auto;top:0;bottom:auto}
  .how .chip-glass.hc-r,.how .chip-glass.hw-dial,.how .chip-glass[data-step="2"].hc-r{left:auto;right:0;top:34%;bottom:auto}
  .how .chip-glass.hc-l2,.how .chip-glass.hc-r2{top:auto;bottom:0}
  .how .chip-glass.hc-l2{left:0;right:auto}
  .how .chip-glass.hc-r2{left:auto;right:0}
  .how .chip-glass.hw-dial{top:auto;bottom:0;left:0;right:auto}
  .how .chip-glass[data-step="2"].hc-r{top:24%}
  .how .chip-glass[data-step="2"].hc-r em{display:none}
  .how .chip-glass.chart{width:13rem;padding:.625rem .75rem}
  .how .chip-glass.chart .cs,.how .chip-glass.chart p{display:none}
  .how .chip-glass.chart svg{margin:.25rem 0 0}
  .how .chip-glass.chart .ct{font-size:.8125rem}
  .how .chip-glass.chart .chart-foot{margin-top:.125rem}
  .how .chip-glass.chart .chart-value{font-size:.8125rem;margin-top:0}
  .viz.days{margin-top:1rem}
  .viz.days i{width:1.0625rem;height:1.25rem}
  .viz.steps{width:7.5rem}
  .hw-goal{width:10.5rem}
  .hw-body{width:12.5rem;grid-template-columns:1fr 3.5rem auto;column-gap:.375rem;align-items:start}
  .hw-body small,.hw-body b,.hw-body em{grid-column:1}
  .hw-body b{font-size:.8125rem!important}
  .hw-body img{grid-column:2;grid-row:1 / span 3;height:6.25rem;margin-top:0}
  .hw-body .dm-range{grid-column:3;grid-row:1 / span 3;margin-top:0}
  .hw-body .dm-range s{display:none}
  .hw-night{width:12rem}
  .hw-stages{margin:.25rem 0}
  .hw-dial{width:13.5rem;display:grid!important;grid-template-columns:4.5rem 1fr;column-gap:.625rem;align-items:center;text-align:left}
  .hw-dial small{grid-column:1 / -1}
  .hw-dial svg{width:4.5rem;margin:.25rem 0 0}
  .hw-debt{border-top:0;padding-top:0}
  .hw-debt b{font-size:.75rem!important}
  .hw-debt .dm-nights i{width:.875rem;height:.375rem}
  .hw-score{font-size:.5625rem;gap:.375rem}
  .hw-score i{width:1.5rem;height:1.5rem;font-size:.625rem}
  .how .chip-glass em{font-size:.5625rem}
}
.hw-debt .dm-nights i:nth-child(2){--n:1}.hw-debt .dm-nights i:nth-child(3){--n:2}.hw-debt .dm-nights i:nth-child(4){--n:3}.hw-debt .dm-nights i:nth-child(5){--n:4}.hw-debt .dm-nights i:nth-child(6){--n:5}.hw-debt .dm-nights i:nth-child(7){--n:6}

/* Why Tora, look 17: no app-icon tiles. Each standout carries one large mark cut into the card's
   top corner, as if etched into dark glass: a shadowed cut, a light lower lip, a fine top-lit
   edge. Look 21: stacked layers for free tracking, Nova's own mark for the conversation, a
   loop around a rising arrow for the auto-adapting program. A slow sheen crosses the card when it is hovered. */
.w3-defs{position:absolute;width:0;height:0;overflow:hidden}
.w3-stand{position:relative;overflow:hidden;justify-content:flex-end;min-height:18rem;isolation:isolate}
.w3-etch{position:absolute;z-index:-1;top:-.5rem;right:-.75rem;width:10rem;height:10rem;pointer-events:none}
.w3-etch use{transition:opacity .6s ease}
.w3-etch .e-lo{fill:rgb(238 243 246 / .11)}
.w3-etch .e-cut{fill:url(#etchFill)}
.w3-etch .e-edge{fill:none;stroke:url(#etchEdge);stroke-width:1;vector-effect:non-scaling-stroke}
.w3-stand::after{content:"";position:absolute;z-index:-1;inset:-20% -40%;pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,rgb(221 229 234 / .05) 50%,transparent 58%);transform:translate3d(-45%,0,0);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.w3-stand:hover::after{transform:translate3d(45%,0,0)}
.w3-stand h3{margin-top:0!important}
@media(max-width:820px){.w3-stand{min-height:14rem}.w3-etch{width:8rem;height:8rem}}
.ft-table tbody.ft-closed:last-of-type .ft-group th{border-bottom:1px solid rgb(255 255 255 / .1)}

/* ---- look 19: How Tora works cards as real glass, see-through; the app's own macro and
   calorie colours (protein, carbs, fat, the calorie gauge); a calorie mark. ---------- */
.how .chip-glass{background:linear-gradient(135deg,rgb(255 255 255 / .16),rgb(255 255 255 / .05) 48%,rgb(255 255 255 / .09));
  backdrop-filter:blur(12px) saturate(1.7) brightness(.82);-webkit-backdrop-filter:blur(12px) saturate(1.7) brightness(.82);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),inset 0 0 0 1px rgb(255 255 255 / .1),inset 0 -1px 0 rgb(0 0 0 / .25),0 1.5rem 3rem -1rem rgb(0 0 0 / .55)}
.how .chip-glass small,.how .chip-glass em,.how .chip-glass b{text-shadow:0 1px 8px rgb(0 0 0 / .45)}
.how .chip-glass .ci{background:rgb(255 255 255 / .1);box-shadow:inset 0 1px 0 rgb(255 255 255 / .2)}
.viz.macros i:nth-child(1),.pro-res .viz.macros i:nth-child(1){background:#E08A7A}
.viz.macros i:nth-child(2),.pro-res .viz.macros i:nth-child(2){background:#6FA8DC}
.viz.macros i:nth-child(3),.pro-res .viz.macros i:nth-child(3){background:#E0B46C}
.mx span{font-weight:600}
.mx .p{color:#E08A7A}.mx .c{color:#6FA8DC}.mx .f{color:#E0B46C}
.how .chip-glass .ci.ci-kcal{width:2.75rem;height:2.75rem;background:none;box-shadow:none}
.ci-kcal svg{width:100%!important;height:100%!important;overflow:visible}
.ci-kcal .kc-arc{stroke-dasharray:0 100;transition:stroke-dasharray 1.4s cubic-bezier(.22,1,.36,1) .3s}
.on .ci-kcal .kc-arc{stroke-dasharray:82 100}
.ci-kcal path:first-of-type{transform-origin:18px 24px;transform:scale(.6);opacity:0;transition:transform .8s cubic-bezier(.22,1.4,.36,1) .5s,opacity .4s ease .5s}
.on .ci-kcal path:first-of-type{transform:none;opacity:1}
@media(max-width:820px){.how .chip-glass .ci.ci-kcal{width:2.125rem;height:2.125rem}}

/* look 19: the wordmark reads on near-black. A soft dark pool sits between the ring light and
   tora PRO, and the ring itself is a little quieter, so no light blue lands on bright blue. */
.pro-halo{width:min(58rem,96vw)!important;aspect-ratio:2.3!important;border-radius:50%;opacity:var(--pb);mix-blend-mode:normal!important;
  background:radial-gradient(closest-side,rgb(4 6 9 / .97),rgb(4 6 9 / .9) 50%,rgb(4 6 9 / .5) 75%,rgb(4 6 9 / 0))!important}
.pro-space{opacity:calc(var(--pb) * .82)!important;filter:blur(calc((1 - var(--pb)) * 10px)) saturate(.85) brightness(.9)!important}
@media(max-width:820px){.pro-halo{width:96vw!important}}

/* look 19: the etched marks as glass. A lens highlight crosses each mark and follows the pointer
   (--lx, --ly from reveal.js), as if light bent through the cut; a hairline of colour sits on
   either side of the edge, cyan above and warm below, like a real glass edge. Subtle, static. */
.w3-etch .e-ca{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;mix-blend-mode:screen}
.w3-etch .e-ca1{stroke:#7fd3ff;stroke-opacity:.34;transform:translate(-.55px,-.45px)}
.w3-etch .e-ca2{stroke:#ffb27a;stroke-opacity:.26;transform:translate(.55px,.5px)}
.w3-etch .e-lens{fill:url(#etchLens);transform:translate(calc(var(--lx,0) * 22px),calc(var(--ly,0) * 22px));transition:transform .9s cubic-bezier(.22,1,.36,1);mix-blend-mode:screen}
.w3-etch .e-cut{filter:drop-shadow(0 .5px 0 rgb(0 0 0 / .55))}

/* look 19: Nova's colour is Iridescent Pearl (brand, 2026-09-30): ice blue, lilac, blush,
   champagne and mint, slowly drifting. On the Nova mark and name, and as a hairline edge on the
   island card at this size; plain colours stay for small uses. */
/* --pa is registered as an angle and never animated. tora PRO uses --pa as a plain number
   (reveal.js), which this registration turns invalid, so the PRO inputs have always shown at full
   strength with no slide since look 19. That is the look the captain approved, so the
   registration stays until he decides otherwise; removing it brings the inputs' scroll-in back. */
@property --pa{syntax:'<angle>';inherits:true;initial-value:0deg}
/* The pearl drifts rather than spins (2026-10-01): animating a registered angle inside a conic
   gradient leaked about 5.5 MB a second in iOS Safari until the tab was killed and reloaded over
   and over. Moving a fixed gradient (two loops of the hues, so one loop's shift is seamless) is a
   plain background-position animation, which WebKit repaints without keeping anything. Keep it
   that way: no animated @property values in a gradient. */
.nv-stage,.nova-kicker{--pearl:linear-gradient(90deg,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6,#9AD7FF) 0 0/200% 100%}
.nv-mark.nv-pearl,.nv-pearl-text,.nv-island::after{animation:pearlDrift 8s linear infinite}
.nv-stage.thinking .nv-mark.nv-pearl{animation:nvSpin 1.6s cubic-bezier(.5,0,.5,1) infinite,pearlDrift 8s linear infinite}
@keyframes pearlDrift{to{background-position:100% 0}}
.nv-mark.nv-pearl{display:inline-block;width:1.375rem;height:.96rem;background:var(--pearl);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20155%20108'%3E%3Cpath%20d='M0.05%2024.83L14.8%2019.27L59.83%2036.36L44.7%201.87L58.95%208.34L72.43%2038.38C73.55%2040.75%2075.16%2041.31%2077.05%2042.09C79.28%2041.66%2081.52%2040.25%2082.47%2037.63L94.07%207.23L107.81%200.21L94.73%2035.49L139.08%2015.81L153.59%2020.71L86.22%2050.96C80.68%2053.47%2073.68%2053.11%2068.78%2051.13ZM0.69%2082.87L68.2%2056.69C74.41%2053.94%2081.9%2053.53%2088.66%2057.2L154.29%2086.37L139.66%2091.29L95.33%2071.75L108.68%20107.23L94.85%20100.1L83.06%2069.68C82.14%2067.15%2080.29%2065.87%2078.0%2065.41C76.13%2065.48%2073.74%2067.15%2073.09%2069.0L59.57%2099.19L45.5%20105.53L60.41%2071.12L15.53%2088.31Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20155%20108'%3E%3Cpath%20d='M0.05%2024.83L14.8%2019.27L59.83%2036.36L44.7%201.87L58.95%208.34L72.43%2038.38C73.55%2040.75%2075.16%2041.31%2077.05%2042.09C79.28%2041.66%2081.52%2040.25%2082.47%2037.63L94.07%207.23L107.81%200.21L94.73%2035.49L139.08%2015.81L153.59%2020.71L86.22%2050.96C80.68%2053.47%2073.68%2053.11%2068.78%2051.13ZM0.69%2082.87L68.2%2056.69C74.41%2053.94%2081.9%2053.53%2088.66%2057.2L154.29%2086.37L139.66%2091.29L95.33%2071.75L108.68%20107.23L94.85%20100.1L83.06%2069.68C82.14%2067.15%2080.29%2065.87%2078.0%2065.41C76.13%2065.48%2073.74%2067.15%2073.09%2069.0L59.57%2099.19L45.5%20105.53L60.41%2071.12L15.53%2088.31Z'/%3E%3C/svg%3E") center/contain no-repeat}
.nv-pearl-text{color:transparent!important;background:var(--pearl);-webkit-background-clip:text;background-clip:text}
.nv-island::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--pearl);opacity:0;transition:opacity .5s ease .25s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.nv-stage.open .nv-island::after{opacity:.55}
.nv-stage.replying .nv-island::after{opacity:.8}
.nv-wave{background:var(--pearl)!important}

/* look 19: See it in the app. The phone leans a little toward the pointer (--tx, --ty from
   reveal.js, eased), and its cover glass carries a real reflection: a faint, wide gradient that
   slides against the lean, darkest where the screen is dark, never a white bar. The band's light
   turns with it and the side buttons are the frame's own metal. */
.see-phone{--tx:0;--ty:0;transform:perspective(80rem) rotateY(calc(-9deg + var(--tx) * 10deg)) rotateX(calc(3deg - var(--ty) * 7deg));transition:transform .9s cubic-bezier(.22,1,.36,1)}
.see-phone .band{--la:calc(135deg + var(--tx) * 40deg)}
.see-phone .glass{background:linear-gradient(calc(118deg + var(--tx) * 18deg),rgb(255 255 255 / .06) 0%,rgb(255 255 255 / .025) 26%,transparent 44%,transparent 76%,rgb(255 255 255 / .02) 100%);
  box-shadow:inset 0 1px .5px rgb(255 255 255 / .18),inset 0 0 0 .5px rgb(255 255 255 / .07)}
.see-phone .sheen{mix-blend-mode:soft-light;transform:translate3d(calc(var(--tx) * -26%),0,0);transition:transform .9s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .09) 44%,rgb(255 255 255 / .03) 54%,transparent 66%)}
.see-phone .btn{background:linear-gradient(90deg,#3b4046,#9aa1a8 45%,#5a6066 70%,#2c3035);box-shadow:0 0 0 .5px rgb(0 0 0 / .6)}
@media(max-width:820px){.see-phone{transform:none}}

/* look 19: the footer wordmark comes alive. As it scrolls in, the light pours in from the left
   (the blooms slide in, staggered); then a bright band crosses it every few seconds, and where
   there is a mouse, a soft light follows the pointer through the letters. Transform and
   opacity only. */
.fg-sweep{position:absolute;top:-20%;bottom:-20%;left:0;width:30%;background:linear-gradient(100deg,transparent,rgb(234 242 247 / .0) 20%,rgb(234 242 247 / .55) 50%,rgb(234 242 247 / 0) 80%,transparent);
  mix-blend-mode:screen;transform:translate3d(-120%,0,0) skewX(-12deg);will-change:transform}
.foot-giant.in .fg-sweep{animation:fgSweep 7s cubic-bezier(.45,0,.2,1) 1.6s infinite}
@keyframes fgSweep{0%{transform:translate3d(-120%,0,0) skewX(-12deg)}38%,100%{transform:translate3d(420%,0,0) skewX(-12deg)}}
.fg-spot{position:absolute;left:0;top:0;width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(234 242 247 / .95),rgb(143 179 203 / .4) 50%,transparent);
  mix-blend-mode:screen;opacity:0;transform:translate3d(calc(var(--mx,50) * 1% * 2.8 - 50%),calc(var(--my,50) * 1% - 50%),0);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.foot-giant.hot .fg-spot{opacity:1}
.foot-giant .fg{opacity:0;translate:-18% 0;transition:opacity 1.4s ease,translate 1.8s cubic-bezier(.22,1,.36,1)}
.foot-giant.in .fg{opacity:1;translate:0 0}
.foot-giant.in .fg2{transition-delay:.18s}.foot-giant.in .fg3{transition-delay:.36s}.foot-giant.in .fg4{transition-delay:.54s}
.foot-giant.in .fg4{opacity:.45}.foot-giant.in .fg2{opacity:.8}
/* look 21: one group at a time, so the chip already names it; the group's header row is not shown */
.ft-table .ft-group{display:none}
.ft-table tbody tr:not(.ft-group):first-of-type,.ft-table tbody .ft-group+tr{border-top:1px solid rgb(255 255 255 / .08)}
/* look 21: glass with no border. Just a lightly blurred sheet of the page behind, the same on the
   How Tora works cards and in tora PRO (the inputs and the results). */
.how .chip-glass,.pro-src,.pro-res{background:rgb(255 255 255 / .07);
  backdrop-filter:blur(7px) saturate(1.5) brightness(.92);-webkit-backdrop-filter:blur(7px) saturate(1.5) brightness(.92);
  box-shadow:0 1.25rem 2.5rem -1.25rem rgb(0 0 0 / .5)}
.how .chip-glass .ci{box-shadow:none;background:rgb(255 255 255 / .08)}
.pro-ico{background:rgb(255 255 255 / .08)}
@media(max-width:820px){.pro-src,.pro-res{background:rgb(255 255 255 / .07)}}
/* look 21: the space theme runs on into the footer. The Cassini rings image sits in the letters
   under the drifting light, so the sweep and the pointer light pass over Saturn's rings. */
.fg-space{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;object-position:50% 55%;opacity:.95;
  transform:scale(1.05) translate3d(calc((var(--mx,50) - 50) * -.06%),0,0);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.foot-giant .fg{mix-blend-mode:screen;opacity:.7}
.foot-giant.in .fg{opacity:.55}.foot-giant.in .fg4{opacity:.3}.foot-giant.in .fg2{opacity:.5}
@media(max-width:820px){.w3-etch{width:6.5rem;height:6.5rem;top:-.25rem;right:-.5rem}.w3-stand h3{padding-right:4.5rem}}

/* ---- look 22 ---------------------------------------------------------------------------- */
/* Animations play on scroll, not with it (reveal.js): the pinned sections only need enough
   length to hold the moment while it plays, so they are shorter. */
.pro{height:190svh}
.privacy2{height:160svh}
.reel{height:170svh}
@media(max-width:820px){.reel{height:160svh}}
/* the manifesto lights word by word once it is in view, and dims in reverse */
.mf-text .w{transition:color .55s ease calc(var(--i,0) * 32ms)}
.mf-text:not(.lit) .w{transition-delay:calc((var(--n,0) - var(--i,0)) * 14ms)}
.mf-text.lit .w{color:var(--ink)}
/* Private by design: the light behind it is barely there, and the rings are fainter */
.p2-pin::before{background:radial-gradient(closest-side,rgb(143 179 203 / .035),transparent)}
.p2-ring{border-color:rgb(143 179 203 / .22)}
/* Footer (look 21 verdict): far less grain, and one slow continuous drift of light through the
   letters in place of the bright band that crossed every few seconds. The band strip is two
   identical halves sliding by exactly one half, so the loop has no seam and never pauses. */
.fg-grain{opacity:.14}
.fg-sweep{top:-10%;bottom:-10%;left:0;width:200%;transform:translate3d(-50%,0,0);
  background:linear-gradient(100deg,transparent 4%,rgb(234 242 247 / .16) 22%,rgb(234 242 247 / .24) 26%,transparent 46%,transparent 54%,rgb(234 242 247 / .16) 72%,rgb(234 242 247 / .24) 76%,transparent 96%)}
.foot-giant.in .fg-sweep{animation:fgFlow 24s linear infinite}
@keyframes fgFlow{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* Why Tora marks as contour lines (look 21 verdict): each mark is its own outline with rings
   offset around it like a topographic map, fading outward, in the site's contour style. Under
   the pointer the rings brighten from the mark outward. */
.w3-topo{width:12.5rem;height:12.5rem;top:-1.5rem;right:-1.75rem}
.w3-topo .t-lines{opacity:.5;transition:opacity .6s ease}
.w3-topo .t-lit{opacity:0;transform-origin:60px 60px;transform:scale(.6);transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
.w3-stand:hover .w3-topo .t-lines{opacity:.75}
.w3-stand:hover .w3-topo .t-lit{opacity:.55;transform:scale(1.3)}
@media(max-width:820px){.w3-topo{width:8.5rem;height:8.5rem;top:-.75rem;right:-1rem}}

/* How Tora works cards, look 22 (captain): neutral colours only, white and greys on the glass,
   no macro colours or gold; each card one real app function. */
.how .viz.macros i:nth-child(1){background:#f1f4f6}
.how .viz.macros i:nth-child(2){background:rgb(241 244 246 / .62)}
.how .viz.macros i:nth-child(3){background:rgb(241 244 246 / .32)}
.how .mx .p,.how .mx .c,.how .mx .f{color:#fff}
.how .hw-stages rect[y="44"]{fill:rgb(255 255 255 / .62)}
.how .hw-stages rect[y="16"]{fill:rgb(255 255 255 / .8)}
.how .dm-range i{background:rgb(255 255 255 / .45)}
/* the cards sit on whole pixels, so their text stays crisp (reveal.js rounds --dx), and are
   only promoted to their own layer while they move */
.how .chip-glass{will-change:auto}
/* the small tora PRO in a card corner: a touch larger, PRO in one flat steel, so it stays sharp */
.how .chip-pro{font-size:.875rem;opacity:1;top:.75rem;right:.875rem}
.how .chip-pro .tpro-p{background:none;color:#b9d0df;-webkit-text-fill-color:#b9d0df}
.how .chip-pro .tpro-t{background:#f1f4f6}

/* starting food targets: the goal that set them, then the number */
.hw-target{display:block!important;white-space:normal;width:17rem}
.tg-goal{display:flex;flex-wrap:wrap;gap:.375rem;margin:.5rem 0 .625rem}
.tg-goal i{font:500 .6875rem/1 var(--sans);font-style:normal;padding:.3125rem .5rem;border-radius:.5rem;background:rgb(255 255 255 / .1);color:#eef3f6;
  opacity:0;translate:0 .25rem;transition:opacity .4s ease .25s,translate .6s cubic-bezier(.22,1,.36,1) .25s}
.tg-goal i+i{transition-delay:.35s}
.on .tg-goal i{opacity:1;translate:0 0}
.hw-target .viz.macros{margin-top:.625rem}
.how .chip-glass em.tg-note{margin-top:.5rem;color:rgb(222 234 243 / .66)}

/* Apple Health: the three things it brings in, each switched on in turn */
.hw-health{display:block!important;white-space:normal;width:16rem}
.hh-rows{list-style:none;display:grid;gap:.5rem;margin-top:.75rem}
.hh-rows li{display:grid;grid-template-columns:1.75rem 1fr auto;align-items:center;gap:.625rem}
.hh-i{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:.5rem;background:rgb(255 255 255 / .1)}
.hh-i svg{width:1rem;height:1rem;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hh-rows b{display:block;font:600 .8125rem/1.2 var(--sans)!important}
.hh-rows span i{display:block;font:400 .6875rem/1.3 var(--sans);font-style:normal;color:rgb(222 234 243 / .72)}
.tog{position:relative;width:1.875rem;height:1.125rem;border-radius:1rem;background:rgb(255 255 255 / .16);transition:background .35s ease calc(.45s + var(--d) * .18s)}
.tog::after{content:"";position:absolute;left:.125rem;top:.125rem;width:.875rem;height:.875rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .35);transition:translate .45s cubic-bezier(.22,1,.36,1) calc(.45s + var(--d) * .18s)}
.hh-rows li{--d:0}
.on .tog{background:rgb(255 255 255 / .78)}
.on .tog::after{translate:.75rem 0;background:#16191c}

/* Tora Scan: the meal, the estimate, the foods it found, and the log button */
.hw-scan{display:block!important;white-space:normal;width:18.5rem}
.scan-top{display:grid;grid-template-columns:5.5rem 1fr;gap:.875rem;align-items:center;margin-top:.625rem}
.scan-photo{display:block;width:5.5rem;height:5.5rem;border-radius:.75rem;overflow:hidden;box-shadow:0 .5rem 1rem -.5rem rgb(0 0 0 / .6)}
.scan-photo text{font:700 6.5px var(--sans);fill:#0d1013;text-anchor:middle}
.sc-num{opacity:0;transform-box:fill-box;transform-origin:center;scale:.4;transition:opacity .3s ease calc(.5s + var(--d) * .15s),scale .5s cubic-bezier(.22,1.4,.36,1) calc(.5s + var(--d) * .15s)}
.on .sc-num{opacity:1;scale:1}
.sc-frame{opacity:.9;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1) .2s}
.on .sc-frame{stroke-dashoffset:0}
.scan-sum{display:block;min-width:0}
.scan-tot{display:block;font:500 .5625rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:rgb(222 234 243 / .7)}
.hw-scan .scan-sum b{display:block;margin-top:.25rem;font:600 var(--text-lg)/1.1 var(--sans)!important}
.scan-conf{display:inline-block;margin-top:.375rem;padding:.1875rem .4375rem;border-radius:1rem;background:rgb(255 255 255 / .12);font:600 .625rem/1 var(--sans);color:#fff}
.hw-scan .viz.macros{margin-top:.5rem}
.hw-scan .mx{margin-top:.25rem}
.scan-items{list-style:none;display:grid;margin-top:.75rem;border-top:1px solid rgb(255 255 255 / .12)}
.scan-items li{display:grid;grid-template-columns:1.125rem 1fr auto 2.25rem;align-items:center;gap:.5rem;padding:.4375rem 0;border-bottom:1px solid rgb(255 255 255 / .07);
  font:500 .75rem/1.2 var(--sans);opacity:0;translate:0 .375rem;transition:opacity .4s ease calc(.7s + var(--d) * .1s),translate .6s cubic-bezier(.22,1,.36,1) calc(.7s + var(--d) * .1s)}
.on .scan-items li{opacity:1;translate:0 0}
.scan-items i{display:grid;place-items:center;width:1.125rem;height:1.125rem;border-radius:50%;background:#f4f7f9;color:#0d1013;font:700 .5625rem/1 var(--sans);font-style:normal}
.scan-items .more i{background:rgb(255 255 255 / .16);color:#fff}
.scan-items s{text-decoration:none;color:rgb(222 234 243 / .66);font-weight:400}
.scan-items b{text-align:right;font:600 .75rem/1 var(--sans)!important}
.scan-log{display:grid;place-items:center;height:2.125rem;margin-top:.75rem;border-radius:.75rem;background:#f1f4f6;color:#0d1013;font:600 .75rem/1 var(--sans)}

/* next session: last time against next time, then the reason in the app's words */
.hw-next{display:block!important;white-space:normal;width:18rem}
.nx-rows{display:grid;gap:.25rem;margin:.625rem 0 .25rem}
.nx-row{display:grid;grid-template-columns:5.25rem 3.25rem 1fr;align-items:center;gap:.5rem}
.nx-row s{text-decoration:none;font:500 .6875rem/1 var(--sans);color:rgb(222 234 243 / .7)}
.hw-next .nx-row b{font:600 .9375rem/1 var(--sans)!important}
.nx-next b{font-size:var(--text-lg)!important}
.nx-sets{display:flex;gap:.25rem}
.nx-sets i{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:.375rem;background:rgb(255 255 255 / .12);font:600 .6875rem/1 var(--sans);font-style:normal;
  opacity:0;scale:.6;transition:opacity .3s ease calc(.3s + var(--d) * .09s),scale .5s cubic-bezier(.22,1.4,.36,1) calc(.3s + var(--d) * .09s)}
.on .nx-sets i{opacity:1;scale:1}
.nx-next .nx-sets i{background:#f1f4f6;color:#0d1013}
.nx-arrow{display:flex;align-items:center;gap:.375rem;padding-left:5.75rem;height:1.125rem}
.nx-arrow svg{width:.75rem;height:.75rem;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nx-arrow i{font:600 .625rem/1 var(--sans);font-style:normal;color:rgb(222 234 243 / .8)}
.hw-next em{max-width:none}

/* expenditure: what the weekly check-in does with it */
.chart-move{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.125rem .625rem;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid rgb(255 255 255 / .14)}
.chart-move s{text-decoration:none;font:500 .75rem/1 var(--sans);color:rgb(222 234 243 / .75)}
.chart-move b{font:600 var(--text-body)/1 var(--sans)!important;justify-self:end}
.chart-move i{grid-column:1 / -1;font:400 .6875rem/1.3 var(--sans);font-style:normal;color:rgb(222 234 243 / .7)}

@media(max-width:820px){
  .how .chip-pro{font-size:.6875rem;top:.5rem;right:.5rem}
  .hw-target{width:11rem}.tg-goal{margin:.25rem 0 .375rem;gap:.25rem}.tg-goal i{font-size:.5625rem;padding:.25rem .375rem}
  .how .chip-glass em.tg-note{display:none}
  .hw-health{width:10.5rem}.hh-rows{gap:.3125rem;margin-top:.375rem}.hh-rows li{grid-template-columns:1.25rem 1fr auto;gap:.375rem}
  .hh-i{width:1.25rem;height:1.25rem;border-radius:.375rem}.hh-i svg{width:.75rem;height:.75rem}
  .hh-rows b{font-size:.6875rem!important}.hh-rows span i{display:none}.tog{width:1.5rem;height:.875rem}.tog::after{width:.625rem;height:.625rem}.on .tog::after{translate:.625rem 0}
  .hw-scan{width:12.5rem}.scan-top{grid-template-columns:3.75rem 1fr;gap:.5rem;margin-top:.375rem}.scan-photo{width:3.75rem;height:3.75rem;border-radius:.5rem}
  .hw-scan .scan-sum b{font-size:.875rem!important}.scan-tot{font-size:.5rem}.scan-conf{font-size:.5625rem;margin-top:.25rem}
  .scan-items,.scan-log,.hw-scan .mx{display:none}
  .hw-next{width:12.5rem}.nx-row{grid-template-columns:3.75rem 2.5rem 1fr;gap:.25rem}.nx-row s{font-size:.5625rem}
  .hw-next .nx-row b{font-size:.75rem!important}.nx-sets i{width:1.125rem;height:1.125rem;font-size:.5625rem}.nx-arrow{padding-left:4rem}
  .hw-next em{display:none}
  .chart-move{margin-top:.25rem;padding-top:.25rem}.chart-move i{display:none}.chart-move s{font-size:.5625rem}.chart-move b{font-size:.75rem!important}
}
/* block cards keep their full width for text; the PRO tag sits in the label row's free end */
.how .chip-glass.hw-scan,.how .chip-glass.hw-next{padding-right:var(--space-5)}
.how .chip-glass.hw-scan{top:1%;width:19.5rem}
.how .chip-glass.hw-night{top:auto;bottom:4%}
.scan-top{grid-template-columns:6.75rem 1fr}
.scan-photo{width:6.75rem;height:6.75rem}
.scan-tot{font:500 .6875rem/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap}
.hw-scan .mx{white-space:nowrap;font-size:.6875rem}
.scan-items li{padding:.375rem 0}
@media(max-width:820px){.how .chip-glass.hw-scan{width:12.5rem;padding-right:.75rem}.scan-top{grid-template-columns:3.75rem 1fr}.scan-photo{width:3.75rem;height:3.75rem}.scan-tot{font-size:.5625rem}
  .how .chip-glass.hw-next{padding-right:.75rem}}
/* the Tora Scan photo: a real meal, steel-toned until the card arrives, then its colour comes in */
.scan-photo{position:relative;display:block}
.scan-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.8);transition:filter 1.4s ease .3s}
.on .scan-photo img{filter:none}
.scan-photo svg{position:absolute;inset:0;width:100%;height:100%}
/* focus muscles: the body map in neutral greys */
.how .hw-body img{filter:grayscale(1) brightness(1.15)}
.hw-scan .viz.macros{width:100%}
.hw-next small,.hw-scan small{padding-right:5.25rem}
@media(max-width:820px){
  .hw-next small,.hw-scan small{padding-right:3.75rem}
  .tg-goal i+i{display:none}
  .hw-target .mx{display:none}
  .hw-health>b{display:none}
  .how .chip-glass.hw-health{bottom:2%}
  .chart-move{display:none}
  .how .chip-glass[data-step="2"].hc-r.hw-next{top:auto;bottom:30%;right:0}
  .how .chip-glass.hw-dial{bottom:0}
}
@media(max-width:820px){
  /* Apple Health: the three sources side by side, each with its switch */
  .hh-rows{grid-template-columns:repeat(3,1fr);gap:.375rem;margin-top:.5rem}
  .hh-rows li{grid-template-columns:1fr;justify-items:center;gap:.25rem;text-align:center}
  .hh-rows li .hh-i{display:none}
  .hh-rows b{font-size:.625rem!important}
  .how .chip-glass.hw-health{width:12rem;bottom:0}
  /* Adjust: next session compact, between the burn chart and the sleep dial */
  .how .chip-glass[data-step="2"].hc-r.hw-next{top:44%;bottom:auto}
  .hw-next .nx-arrow{display:none}
  .nx-rows{gap:.375rem;margin-bottom:0}
  .hw-debt em{display:none}
}
/* phones: the stage ends above the page's bottom blur, so no card sits in it */
@media(max-width:820px){.how .how-stage{margin-bottom:4.75rem}}
@media(max-width:820px){
  .how .how-stage{margin-bottom:3rem}
  .how .chip-glass.chart{width:11.5rem}
  .how .chip-glass[data-step="2"].hc-r.hw-next{top:0;bottom:auto;right:0;width:11.75rem;z-index:4}
  .how .chip-glass.hw-dial{top:auto;bottom:0;left:auto;right:0}
}
.w3-topo{width:10.5rem;height:10.5rem;top:-1rem;right:-1.25rem}
@media(max-width:820px){.w3-topo{width:8rem;height:8rem;top:-.75rem;right:-1rem}}
/* frame pacing (look 22): the travelling pulses on the tora PRO lines drew a drop-shadow that
   repainted the whole flow every frame; a slightly heavier, brighter stroke reads the same, and
   the pulses rest while the section is off screen */
.pro-flow .fp{filter:none;stroke:#eef3f6;stroke-width:2}
.pro:not(.in-view) .pro-flow .fp{animation-play-state:paused}
/* the CSS phone leans in 3D: keep its edges antialiased on GPU raster */
.see-phone{backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* ---- look 23 ---------------------------------------------------------------------------- */
/* the sports wall and the Privacy lock follow the scroll again (reveal.js eases them), so they
   get their full scroll length back; tora PRO keeps the short pin of its timed entrance */
.reel{height:300svh}
.privacy2{height:230svh}
@media(max-width:820px){.reel{height:260svh}}
/* the wall starts where How Tora works ends: the page's section padding left an empty dark band between the
   light section and the photos (captain 2026-10-18: "why do we see a sort of like black section divider") */
.reel{padding-top:0}
/* the blurred sports photos pan slowly as you scroll and settle from a slight zoom as the wall
   opens (--rpan -.5..5, --rz 0..1 from reveal.js); the tiles keep their sense of speed */
.reel-tile img{transform:translate3d(calc(var(--rpan,0) * -5%),0,0) scale(calc(1.16 - var(--rz,0) * .1));will-change:transform}
/* Research: room to breathe between the intro and the board */
.cases-intro p{margin-bottom:7rem}
.cases-list>.g-wrap{padding-top:var(--space-12)}
@media(max-width:820px){.cases-intro p{margin-bottom:4rem}.cases-list>.g-wrap{padding-top:var(--space-6)}}

/* ---- look 24 ---------------------------------------------------------------------------- */
/* How Tora works cards carry no tora PRO lockup (captain: "I don't like how the tora PRO looks
   in these containers"); the labels take the full width again */
.hw-next small,.hw-scan small{padding-right:0}
/* Why Tora, look 24 (captain: "the grid is a cool idea, but it just looks confusing"): no stat
   tiles. The statement and the athlete, then one header row, then the three standouts in order. */
.w3-intro{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:end;gap:var(--space-6) var(--space-12);padding:var(--space-12) var(--space-8) var(--space-8)}
.w3-intro .w3-h{margin:0;max-width:16ch!important}
.w3-intro p{margin:0;color:var(--body);font-size:var(--text-body);line-height:1.6}
.w3-n{position:absolute;top:var(--space-6);left:var(--space-6);font:500 var(--text-xs)/1 var(--display);letter-spacing:.06em;color:var(--brand)}
@media(max-width:820px){.w3-intro{grid-template-columns:1fr;padding:var(--space-8) var(--space-6) var(--space-6)}}
/* Nova in its own colours (captain: "this section ... should definitely get the colours of Nova").
   Iridescent Pearl (brand guide v1.5) across the section: a small nova tag over the heading, a
   pearl bloom behind the phone, the chosen question lit in pearl, its progress line in pearl. */
.nova{--pearl-line:linear-gradient(90deg,#9AD7FF,#C6B4FF,#FFC6E3,#FFE8B0,#BFF0E6)}
/* the pearl moves only on the small pieces that paint it (see pearlDrift), never the section */
.nova-kicker{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 var(--space-4)!important}
.nova-kicker .nv-mark{width:1.375rem}
.nova-kicker b{font:500 var(--text-sm)/1 'Orbitron',sans-serif;letter-spacing:.04em;text-transform:lowercase}
.nv-stage::before{background:radial-gradient(34% 30% at 38% 26%,rgb(154 215 255 / .14),transparent 70%),radial-gradient(30% 28% at 64% 34%,rgb(198 180 255 / .12),transparent 70%),radial-gradient(34% 30% at 52% 50%,rgb(255 198 227 / .07),transparent 70%)}
.nv-case[aria-pressed="true"]{background:linear-gradient(100deg,rgb(198 180 255 / .12),rgb(154 215 255 / .07) 45%,rgb(255 255 255 / .02) 80%)}
.nv-case[aria-pressed="true"] .nv-ico{background:linear-gradient(135deg,rgb(154 215 255 / .24),rgb(198 180 255 / .22) 55%,rgb(255 198 227 / .18))}
.nv-bar{background:var(--pearl-line)}
/* the Nova standout in Why Tora carries Nova's mark in pearl */
.w3-stand:nth-of-type(2) .w3-topo .t-lines{opacity:.62}
/* the Tora Scan meal in the site's own photo grade (steel duotone, grain), like every other
   photo on the page; no colour change */
.scan-photo img,.on .scan-photo img{filter:none}
/* Private by design: the light spread wider and softer still, so it reads as air, not a halo */
.p2-pin::before{width:72rem;height:72rem;background:radial-gradient(closest-side,rgb(143 179 203 / .03),rgb(143 179 203 / .015) 45%,transparent)}
/* footer: the whites a step darker (captain: "since it's practically black, I don't want that
   much white in it"): Saturn's rings dimmer, the drifting light and the blooms quieter */
.fg-space{filter:brightness(.8)}
.fg-sweep{background:linear-gradient(100deg,transparent 4%,rgb(234 242 247 / .1) 22%,rgb(234 242 247 / .15) 26%,transparent 46%,transparent 54%,rgb(234 242 247 / .1) 72%,rgb(234 242 247 / .15) 76%,transparent 96%)}
.foot-giant.in .fg{opacity:.42}.foot-giant.in .fg4{opacity:.22}.foot-giant.in .fg2{opacity:.38}
.fg-spot{background:radial-gradient(closest-side,rgb(234 242 247 / .65),rgb(143 179 203 / .3) 50%,transparent)}
/* tora PRO follows the scroll again (reveal.js), so it gets its full length back */
.pro{height:360svh}
.nova-word{color:transparent;background:var(--pearl-line);-webkit-background-clip:text;background-clip:text}
.nv-stage::before{background:radial-gradient(34% 30% at 38% 28%,rgb(154 215 255 / .24),transparent 70%),radial-gradient(30% 28% at 64% 36%,rgb(198 180 255 / .2),transparent 70%),radial-gradient(34% 30% at 50% 52%,rgb(255 198 227 / .12),transparent 70%)}

/* ---- look 25 ---------------------------------------------------------------------------- */
/* tora PRO: the inputs and results stay at full clarity once the offer rises (they used to dim
   to 55%); on phones the results still make room for the offer as before */
.pro-col{opacity:1}
@media(max-width:820px){.pro-outcol{opacity:calc(1 - var(--po))}}
/* the Lunch result in neutral greys, like the How Tora works cards */
.pro-res .viz.macros i:nth-child(1){background:#f1f4f6}
.pro-res .viz.macros i:nth-child(2){background:rgb(241 244 246 / .62)}
.pro-res .viz.macros i:nth-child(3){background:rgb(241 244 246 / .32)}
.pro .mx .p,.pro .mx .c,.pro .mx .f{color:#fff}

/* Nova's light (look 25). A spotlight in Iridescent Pearl, built the way crafted gradients are
   built rather than one two-stop sweep:
   - every ramp interpolates in OKLCH, so neighbouring pearl hues meet without the grey, muddy
     middle that sRGB blending gives (the "gray dead zone");
   - a soft-edged cone of light (a conic gradient with feathered stops) falls from above onto the
     phone, brightest at its source;
   - behind it, five low-chroma pearl lights (ice, lilac, blush, champagne, mint) drift slowly
     past each other in screen blend, a CSS mesh in the spirit of Stripe's WebGL gradient;
   - fine grain over the whole light dithers away banding in the long, dark falloffs.
   The light switches on with the scroll (--nl 0..1 from reveal.js, eased): the beam opens
   downward and the pearl lights rise into place. Only transform and opacity move; the drift
   pauses while the section is off screen. */
.nv-stage::before{display:none}
.nv-phone{z-index:1}
.nv-light{--nl:0;position:absolute;inset:-14% -24% -6%;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask:radial-gradient(60% 62% at 50% 40%,#000 55%,transparent);mask:radial-gradient(60% 62% at 50% 40%,#000 55%,transparent)}
.nl-beam{position:absolute;left:50%;top:-6%;width:120%;height:100%;translate:-50% 0;transform-origin:50% 0;
  transform:scaleY(calc(.35 + var(--nl) * .65)) scaleX(calc(.6 + var(--nl) * .4));opacity:calc(var(--nl) * .95);
  background:conic-gradient(from 160deg at 50% 0%,oklch(95% .03 250 / 0) 0deg,oklch(95% .03 250 / .2) 14deg,oklch(97% .02 220 / .32) 20deg,oklch(95% .03 300 / .2) 26deg,oklch(95% .03 300 / 0) 40deg);background:conic-gradient(from 160deg at 50% 0% in oklch,oklch(95% .03 250 / 0) 0deg,oklch(95% .03 250 / .2) 14deg,oklch(97% .02 220 / .32) 20deg,oklch(95% .03 300 / .2) 26deg,oklch(95% .03 300 / 0) 40deg);
  -webkit-mask:linear-gradient(#000 10%,rgb(0 0 0 / .5) 55%,transparent 92%);mask:linear-gradient(#000 10%,rgb(0 0 0 / .5) 55%,transparent 92%)}
.nl-mesh{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;will-change:transform;
  opacity:calc(var(--nl) * var(--o,.5));translate:0 calc((1 - var(--nl)) * 18%);
  animation:nlDrift var(--t,24s) ease-in-out var(--dl,0s) infinite alternate}
.nl-ice{--o:.62;--t:23s;left:4%;top:12%;background:radial-gradient(closest-side,oklch(84% .09 235 / .5),oklch(84% .09 235 / 0));background:radial-gradient(closest-side in oklch,oklch(84% .09 235 / .5),oklch(84% .09 235 / 0))}
.nl-lilac{--o:.55;--t:27s;--dl:-6s;right:2%;top:6%;background:radial-gradient(closest-side,oklch(78% .11 295 / .5),oklch(78% .11 295 / 0));background:radial-gradient(closest-side in oklch,oklch(78% .11 295 / .5),oklch(78% .11 295 / 0))}
.nl-blush{--o:.38;--t:31s;--dl:-12s;left:30%;top:34%;background:radial-gradient(closest-side,oklch(86% .07 350 / .45),oklch(86% .07 350 / 0));background:radial-gradient(closest-side in oklch,oklch(86% .07 350 / .45),oklch(86% .07 350 / 0))}
.nl-gold{--o:.24;--t:29s;--dl:-3s;right:16%;top:44%;width:46%;background:radial-gradient(closest-side,oklch(93% .07 90 / .4),oklch(93% .07 90 / 0));background:radial-gradient(closest-side in oklch,oklch(93% .07 90 / .4),oklch(93% .07 90 / 0))}
.nl-mint{--o:.3;--t:25s;--dl:-9s;left:12%;top:46%;width:48%;background:radial-gradient(closest-side,oklch(91% .06 180 / .42),oklch(91% .06 180 / 0));background:radial-gradient(closest-side in oklch,oklch(91% .06 180 / .42),oklch(91% .06 180 / 0))}
@keyframes nlDrift{0%{transform:translate3d(-6%,-4%,0) scale(1)}50%{transform:translate3d(5%,3%,0) scale(1.12)}100%{transform:translate3d(-2%,6%,0) scale(.94)}}
.nl-grain{position:absolute;inset:0;background:url(brand/grain-tile.png) 0 0/64px 64px repeat;mix-blend-mode:overlay;opacity:calc(var(--nl) * .22)}
.nova:not(.in-view) .nl-mesh{animation-play-state:paused}
@media(max-width:820px){.nv-light{inset:-10% -10% -4%}.nl-mesh{width:78%}}
/* the light fades out well inside its box on every side, so it has no edge anywhere */
.nv-light{inset:-18% -30% -8%;-webkit-mask:radial-gradient(closest-side at 50% 44%,#000 35%,rgb(0 0 0 / .55) 62%,transparent 100%);mask:radial-gradient(closest-side at 50% 44%,#000 35%,rgb(0 0 0 / .55) 62%,transparent 100%)}
.nl-grain{opacity:calc(var(--nl) * .1)}
/* a wider, softer cone: the light is felt across the phone rather than drawn as a line */
.nl-beam{top:2%;width:110%;
  background:conic-gradient(from 148deg at 50% 0%,rgb(240 244 255 / 0) 0deg,rgb(220 236 255 / .07) 14deg,rgb(236 240 255 / .16) 32deg,rgb(230 222 255 / .07) 50deg,rgb(230 222 255 / 0) 64deg);
  background:conic-gradient(from 148deg at 50% 0% in oklch,oklch(96% .02 250 / 0) 0deg,oklch(93% .04 240 / .07) 14deg,oklch(96% .025 270 / .16) 32deg,oklch(92% .045 300 / .07) 50deg,oklch(92% .045 300 / 0) 64deg);
  -webkit-mask:linear-gradient(rgb(0 0 0 / .9),rgb(0 0 0 / .45) 50%,transparent 90%);mask:linear-gradient(rgb(0 0 0 / .9),rgb(0 0 0 / .45) 50%,transparent 90%)}
.nl-ice{--o:1}.nl-lilac{--o:.95}.nl-blush{--o:.7}.nl-gold{--o:.45}.nl-mint{--o:.6}
.nv-light{-webkit-mask:radial-gradient(closest-side at 50% 44%,#000 45%,rgb(0 0 0 / .6) 70%,transparent 100%);mask:radial-gradient(closest-side at 50% 44%,#000 45%,rgb(0 0 0 / .6) 70%,transparent 100%)}
/* tora PRO everywhere but the big lockup is plain text (captain, look 25); in See it in the app
   it is a quiet note after the feature name */
.see-pro{margin-left:.5rem;font:500 .75rem/1 var(--sans);color:#8fb3cb;letter-spacing:.01em}
/* the big tora PRO: under the pointer, contour lines draw out around it one ring at a time, in
   the site's topographic style (careers, research), then breathe very slowly */
.pro-contour{position:absolute;z-index:1;left:50%;top:var(--pc-top,4.2rem);width:min(70rem,96vw);height:auto;aspect-ratio:1000/360;translate:-50% -50%;overflow:visible;pointer-events:none}
.pro-contour path{fill:none;stroke:#8fb3cb;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;
  opacity:calc(.34 - var(--k) * .045);transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1) calc(var(--k) * .09s)}
.pro-core:hover .pro-contour path{stroke-dashoffset:0}
.pro-contour{transition:scale 6s ease-in-out}
.pro-core:hover .pro-contour{scale:1.025}
@media(max-width:820px){.pro-contour{display:none}}
.pro-contour{top:50%;width:min(64rem,92vw)}
.pro-contour path{opacity:calc(.26 - var(--k) * .045)}
.pro-contour{top:58%}