/* ============================================================
   Alethe Energy — alethenergy.com
   Editorial system: warm stone canvas, ink pills, teal signal,
   orbital arcs. Type: Space Grotesk display, Inter body,
   IBM Plex Mono instrument captions.
   ============================================================ */

:root{
  --canvas:#F4F1EC;
  --lifted:#FBFAF7;
  --white:#FFFFFF;
  --ink:#16211F;
  --charcoal:#2A3532;
  --slate:#66736F;
  --taupe:#CFC8BC;
  --hairline:#E6E0D4;
  --hairline-soft:#EDE8DE;
  --ghost:#EAE4D8;
  --teal:#0B5E68;
  --teal-bright:#17907B;
  --teal-tint:#E4EEEC;
  --amber:#F5A623;
  --amber-deep:#C87E0A;
  --coral:#D6532B;
  --bp-ink:#101B2D;
  /* the meter's FLARE green — the running colour, shared by the turbine's chips */
  --flare:#0FB981;

  --shadow-1:0 4px 24px rgba(22,33,31,.05);
  --shadow-2:0 24px 48px rgba(22,33,31,.09);
  --shadow-3:0 46px 90px rgba(22,33,31,.16);

  --r-btn:20px;
  --r-frame:40px;

  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --w-max:1200px;
  --gutter:clamp(20px,4vw,48px);
  --section:clamp(72px,11vw,132px);
}

*{margin:0;padding:0;box-sizing:border-box}
/* the page itself is the position gauge — no scrollbar on the right */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
#meter-canvas{touch-action:pan-y}
@media (hover:none){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  font-weight:450;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--teal);color:var(--canvas)}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--canvas);padding:10px 18px;border-radius:12px;z-index:999}
.skip:focus{left:16px;top:16px}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

.container{max-width:var(--w-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- type ---------- */

.display-1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.7rem,5.9vw,4.5rem);
  line-height:1.04;
  letter-spacing:-.022em;
}
.display-2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2rem,4.2vw,3.15rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
.h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.45rem;
  line-height:1.25;
  letter-spacing:-.014em;
}
.lead{font-size:1.17rem;line-height:1.58;color:var(--charcoal)}
.muted{color:var(--slate)}
.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:var(--slate)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:.8rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:22px;height:1.5px;
  background:var(--teal);flex:none;
}
.eyebrow{min-height:1.2em}
.display-2[data-type]{min-height:1.1em;margin-bottom:0}
.tw-wait{visibility:visible}
.tcaret{
  display:inline-block;width:.42em;height:.92em;
  background:currentColor;margin-left:4px;
  vertical-align:-.06em;
  animation:caret .8s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--font-display);
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;
  background:var(--ink);color:var(--canvas);
  border:1.5px solid var(--ink);
  border-radius:var(--r-btn);
  padding:14px 28px;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .15s ease;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn.sm{padding:10px 20px;font-size:.88rem}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--canvas)}
.btn.on-ink{background:var(--canvas);color:var(--ink);border-color:var(--canvas)}
.btn.on-ink:hover{background:transparent;color:var(--canvas)}

.textlink{
  font-family:var(--font-display);font-weight:500;font-size:.95rem;
  color:var(--teal);
  border-bottom:1.5px solid transparent;
  transition:border-color .2s ease;
  padding-bottom:2px;
}
.textlink:hover{border-color:var(--teal)}

/* ---------- nav ---------- */

.nav{
  position:fixed;top:22px;left:50%;transform:translateX(-50%);
  z-index:100;
  display:flex;align-items:center;gap:8px;
  background:var(--white);
  border-radius:999px;
  padding:10px 10px 10px 24px;
  box-shadow:var(--shadow-1);
  transition:box-shadow .3s ease;
  /* centring by left:50% leaves only half the viewport as "available"
     space, so on phones the pill got squeezed narrower than its own
     contents and the button spilled past the rounded edge */
  width:max-content;
  max-width:calc(100vw - 32px);
}
.nav.scrolled{box-shadow:0 10px 34px rgba(22,33,31,.12)}
.nav .brand{display:flex;align-items:center;gap:9px;margin-right:16px;flex:none}
.nav .wordmark{white-space:nowrap}
.nav .btn{flex:none}
.brandmark{display:block;overflow:visible}
.brandmark .bm-dot{animation:bmpulse 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bmpulse{0%,100%{opacity:1}50%{opacity:.5}}
.nav .brand .brandmark{transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
.nav .brand:hover .brandmark{transform:scale(1.08)}
.brandmark .bm-wave,.brandmark .bm-ring,.brandmark .bm-bar{transition:stroke .3s ease}

/* footer brand: the mark drawing itself on — noise resolving into truth */
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:clamp(22px,3.4vw,40px)}
.brandmark.big{width:76px;height:76px}
.fb-word{font-family:var(--font-display);font-weight:700;font-size:2rem;letter-spacing:-.02em;color:var(--canvas)}
.fb-mean{color:#8DA6B8;letter-spacing:.1em}
/* the footer mark blooms in — filled marks don't stroke-draw */
.footer-brand .brandmark.big,.footer-brand .founder-card{opacity:0;transform:scale(.9);transition:opacity 1.1s ease .2s,transform 1.1s cubic-bezier(.2,1.3,.4,1) .2s;will-change:opacity,transform   /* the emblem scales while carrying a drop-shadow filter — without a
     pre-promoted layer the shadow re-renders every frame of the bloom,
     jerking the privacy→footer ride */}
.footer-brand.reveal.in .brandmark.big,.footer-brand.reveal.in .founder-card{opacity:1;transform:scale(1)}
/* the founder's own file, framed on a white card; the vector stands in
   until assets/logo-founder.png exists */
.founder-card{position:relative;display:inline-block}
.founder-card::before{
  content:"";position:absolute;left:50%;top:50%;width:330px;height:330px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(84,197,183,.28),rgba(84,197,183,0) 72%);
}
.founder-card img{position:relative;display:block;width:min(200px,42vw);height:auto;filter:drop-shadow(0 16px 44px rgba(0,0,0,.5))}
/* shorter desktops: the closing frame tightens instead of clipping */
@media (min-width:901px) and (hover:hover) and (pointer:fine) and (max-height:880px){
  .founder-card img{width:150px}
  .founder-card::before{width:230px;height:230px}
  .footer{padding:26px 0 20px}
  .footer-brand{margin-bottom:14px;gap:6px}
  .fb-word{font-size:1.55rem}
  .footer .display-2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px}
  .footer-top{margin-bottom:18px}
  .footer-cols{padding-top:14px}
  .footer-cols .k{margin-bottom:6px}
  .footer-cols a,.footer-cols span{margin-bottom:5px;font-size:.86rem}
  .footer-base{margin-top:14px}
  .to-top-row{margin:12px 0 2px}
}
.brandmark{border-radius:7px}
.footer-brand .brandmark.big{display:none}
.footer-brand.no-png .founder-card{display:none}
.footer-brand.no-png .brandmark.big{display:block}
.brandmark.big .bm-dot.pop{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease 1.9s,transform .6s cubic-bezier(.2,1.4,.3,1) 1.9s;animation:none}
.reveal.in .brandmark.big .bm-wave.draw{stroke-dashoffset:0}
.reveal.in .brandmark.big .bm-bar.draw2{stroke-dashoffset:0}
.reveal.in .brandmark.big .bm-dot.pop{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .brandmark.big .bm-wave.draw,.brandmark.big .bm-bar.draw2{stroke-dashoffset:0}
  .brandmark.big .bm-dot.pop{opacity:1;transform:none}
}
.nav .brand svg{display:block}
.nav .wordmark{font-family:var(--font-display);font-weight:700;font-size:1.13rem;letter-spacing:-.01em;color:var(--ink)}
.nav .links{display:flex;gap:26px;margin-right:20px}
.nav .links a{
  font-size:.9rem;font-weight:500;color:var(--charcoal);
  transition:color .2s ease;
}
.nav .links a:hover{color:var(--teal)}
@media (max-width:520px){
  .nav{padding:8px 8px 8px 14px;gap:6px}
  .nav .brand{margin-right:2px}
  .nav .wordmark{display:none}
  .nav .links{gap:13px;margin-right:10px}
  .nav .links a{font-size:.8rem}
  .nav .btn.sm{padding:9px 13px;font-size:.8rem}
}
@media (max-width:360px){
  .nav{padding:8px 6px 8px 10px;gap:4px}
  .nav .brand{margin-right:0}
  .nav .links{gap:8px;margin-right:6px}
  .nav .links a{font-size:.72rem}
  .nav .btn.sm{padding:8px 10px;font-size:.72rem}
}


/* ---------- hero ---------- */

.hero{
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:clamp(84px,9vh,112px);
  padding-bottom:26px;
  position:relative;
}
.hero > .hero-grid{width:100%}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,9fr) minmax(0,10fr);
  gap:clamp(28px,4vw,60px);
  align-items:center;
}
/* hero-copy margins pre-pay the static reveal-tier landing offsets
   (eyebrow 0 / .slow 34 / .mid 28 / .quick 16 — .reveal.slow outranks
   .reveal.in, see the note near the .reveal rules), so the RENDERED gaps
   are eyebrow→h1 40, h1→couplet 30, couplet→lead 48, lead→ctas 48, ctas→note 44 */
.hero-copy .eyebrow{margin-bottom:6px}
.hero-copy .display-1{margin-bottom:30px;max-width:11em}
.hero-copy .lead{
  font-size:clamp(1.22rem,1.6vw,1.4rem);
  line-height:1.6;color:var(--charcoal);
}
.hero-copy .lead b{
  font-weight:600;color:var(--ink);
}
.hero-copy .lead{max-width:33em;margin-bottom:60px}
/* the turn: the identity line stays the headline; the couplet under it
   says, plainly, what this one does — half the size, same voice */
.display-turn{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.3rem,2.45vw,1.95rem);line-height:1.18;letter-spacing:-.018em;
  color:var(--ink);max-width:16em;margin:0 0 54px;
}
.hero-ctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero-note{margin-top:44px;display:flex;gap:12px;align-items:center}
.hero-note .rule{width:44px;height:1.5px;background:var(--taupe)}

.hero-visual{
  position:relative;min-height:340px;
  margin-right:calc(-1 * clamp(0px,2.5vw,44px));
}
.hero-visual svg{width:100%;height:auto;display:block;overflow:visible}

/* shorter desktops: the stack tightens rather than pushing the CTAs
   under the fold — the hero must compose whole at 1280x800 */
@media (min-width:901px) and (hover:hover) and (pointer:fine) and (max-height:820px){
  /* same pre-pay as above; rendered 40/20/36/36/32 */
  .hero-copy .display-1{margin-bottom:20px}
  .hero-copy .display-turn{margin-bottom:42px}
  .hero-copy .lead{margin-bottom:48px}
  .hero-note{margin-top:32px}
}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{order:2;max-width:560px;margin:0 auto;width:100%}
}

/* blueprint 3D stage */
.meter-stage{
  position:relative;
  height:clamp(400px,58vh,620px);
}
.meter-stage canvas{
  position:absolute;left:0;top:-140px;
  width:100%;height:calc(100% + 140px);
  display:block;cursor:grab;
  will-change:transform;
  transition:opacity .9s ease .35s,transform .9s ease .35s;
}
.meter-stage canvas.grabbing{cursor:grabbing}
.meter-callouts{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:opacity .9s ease .35s}
.app-mode canvas{opacity:0;transform:scale(1.05);transition-delay:0s;transition-duration:.8s}
.app-mode .meter-callouts{opacity:0;transition-delay:0s;transition-duration:.6s}
.stage-app{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transform:translateY(22px) scale(.96);
  transition:opacity 1.25s ease,transform 1.35s cubic-bezier(.22,.61,.36,1);
}
.stage-app-phone{
  will-change:transform;
  transform-origin:50% 67%;
  transform:scale(1.12);   /* the zoom-out lands here — never quite "small" */
  transition:transform 9.5s cubic-bezier(.6,.02,.25,1);
}
/* entry frames the real-time flow card — title to percentages — at about
   the house's size, holds, then the too-large phone shrinks into place */
.app-zoom .stage-app-phone{transform:scale(2.15)}
.app-mode .stage-app{
  opacity:1;pointer-events:auto;transform:none;
  transition:opacity .95s ease .5s,transform 1.15s cubic-bezier(.16,1,.3,1) .5s;
}
.co{
  position:absolute;top:0;left:0;
  white-space:nowrap;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(16,27,45,.14);
  border-radius:9px;
  padding:5px 10px 4px;
  box-shadow:0 2px 8px rgba(22,33,31,.08);
  opacity:0;
  will-change:transform;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.co-name{
  display:block;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--ink);line-height:1.3;
}
.co-val{
  display:block;
  font-family:var(--font-display);font-weight:600;font-size:.94rem;
  letter-spacing:-.01em;color:#0B5E68;line-height:1.2;margin-top:1px;
}
.co.spot{
  background:#00B380;border-color:#00B380;
  box-shadow:0 10px 26px rgba(0,179,128,.4);
}
.co.spot .co-name{color:rgba(255,255,255,.92);font-weight:500}
.co.spot .co-val{color:#fff}
.co-anchor{
  position:absolute;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:var(--teal);opacity:0;will-change:transform;
}
.co-lines{position:absolute;inset:0;width:100%;height:100%}
.co-line{fill:none;stroke:var(--slate);stroke-width:1.1}
.no3d-note{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center}
.no3d .no3d-note{display:flex}
.no3d canvas,.no3d .meter-callouts,.no3d .grid-callouts{display:none}

.stage-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:13px;flex-wrap:wrap}
.view-toggle{
  display:inline-flex;gap:4px;padding:4px;
  background:var(--white);border:1.5px solid var(--ink);border-radius:999px;
}
.view-btn{
  font-family:var(--font-display);font-size:.84rem;font-weight:500;letter-spacing:-.01em;
  padding:8px 18px;border:0;border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.view-btn.on{background:var(--ink);color:var(--canvas)}
.view-toggle{margin-left:22px}
.ctl-right{display:flex;align-items:center;gap:14px}
.drag-hint{opacity:.65}
/* labels toggle — the original quiet mono pill */
.labels-btn{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  padding:7px 12px;border:1px solid var(--hairline);border-radius:999px;
  background:var(--white);color:var(--charcoal);cursor:pointer;
  transition:color .25s ease,border-color .25s ease;
}
.labels-btn:hover{color:var(--teal);border-color:var(--teal)}
.labels-off .meter-callouts{opacity:0 !important;pointer-events:none}
.labels-off .cloud-icon{opacity:0 !important;pointer-events:none !important}
/* in the app view the drawing tools have no meaning — they step away */
.app-mode .stage-tools{opacity:0 !important;pointer-events:none;transition:opacity .5s ease}
.stage-tools{transition:opacity .6s ease}

/* feature index — the numbered part list on the right */
.feat-index{
  position:absolute;right:2px;top:8px;bottom:104px;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  pointer-events:auto;opacity:0;transition:opacity 1.4s ease;
}
.feats-in .feat-index{opacity:1}
.fi-row{
  display:flex;align-items:center;gap:9px;
  background:none;border:0;padding:2px 6px;cursor:pointer;
  font-family:var(--font-mono);letter-spacing:.09em;font-size:.63rem;
  color:var(--charcoal);text-align:left;white-space:nowrap;
  transition:opacity .6s ease,color .3s ease;
}
.fi-num{color:var(--slate);font-size:.62rem;transition:color .3s ease}
.fi-row.on{color:var(--ink);font-weight:500}
.fi-row.on .fi-num{color:#00B380;font-weight:600}
.fi-row:hover{color:var(--ink)}

/* feature card — number, typed name, one-line story */
.feat-card{
  position:absolute;right:4px;bottom:4px;max-width:222px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(16,27,45,.12);border-radius:10px;
  padding:8px 11px 8px;
  box-shadow:0 4px 14px rgba(22,33,31,.09);
  pointer-events:none;opacity:0;transition:opacity 1.4s ease;
}
.feats-in .feat-card{opacity:1}
.fc-num{font-family:var(--font-mono);font-size:.53rem;letter-spacing:.11em;color:#0B5E68}
.fc-name{
  font-family:var(--font-display);font-weight:600;font-size:.87rem;
  letter-spacing:-.01em;margin:2px 0 2px;min-height:1.3em;color:var(--ink);
}
.fc-caret{
  display:inline-block;width:8px;height:1em;background:#00B380;
  vertical-align:-2px;margin-left:3px;opacity:0;
}
.feat-card.typing .fc-caret{opacity:1;animation:fcblink .7s steps(1) infinite}
@keyframes fcblink{50%{opacity:0}}
.fc-blurb{font-size:.67rem;color:var(--slate);line-height:1.42}

.stage-tools{
  position:absolute;top:6px;right:6px;z-index:3;
  display:flex;align-items:center;gap:12px;
  pointer-events:auto;
}
/* the day chip is a caption on the tools row — it names the day the
   house is showing, and never takes a click */
.day-chip{opacity:0;transition:opacity .6s ease;white-space:nowrap;letter-spacing:.12em;pointer-events:none}
.home-mode .day-chip{opacity:.8}
.cloud-icon{
  position:absolute;right:10px;top:-132px;left:auto;z-index:2;
  background:none;border:0;padding:4px;cursor:pointer;
  opacity:0;transition:opacity .8s ease;pointer-events:none;
  text-align:center;
}
.cloud-icon svg{width:190px;height:54px;display:block;margin:0 auto;overflow:visible}
.cloud-icon .cd{
  stroke:#0FB981;fill:none;
  stroke-width:2.1;stroke-linecap:round;
  opacity:.95;
  animation:cdbreathe 7s ease-in-out infinite;
  transition:stroke .4s ease,opacity .4s ease;
}
@keyframes cdbreathe{50%{opacity:.72}}
.feats-in .cloud-icon svg{filter:drop-shadow(0 0 9px rgba(15,185,129,.5))}
.app-mode .cloud-icon{opacity:0 !important;pointer-events:none !important}
.cloud-icon .ci-label{
  display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;
  color:var(--ink);font-weight:500;margin-top:5px;white-space:nowrap;
}
.cloud-icon.ping .cd{stroke:#34D9A0;opacity:1}
.cloud-icon.hot .cd{stroke:#0FB981;opacity:1;animation:none}
.cloud-icon.hot svg{filter:drop-shadow(0 0 7px rgba(0,179,128,.4))}

.feat-word{
  position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:.73rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  /* the brand teal, one notch richer than --teal-bright: still clearly
     lighter than the ink lines, family-native, but with enough body to
     carry a name. The pillow beneath owns the line crossings. */
  color:#0E8065;white-space:nowrap;pointer-events:none;
  /* the PILLOW: not a rim, not a box — a stack of soft page-color
     blurs that builds real opacity at the letter cores and feathers to
     nothing. Lines fade as they pass under the word; there is no edge
     anywhere to see. This is what defeats a congregation of black
     lines — locally quieting them, gradient-only. */
  text-shadow:
    0 0 1px var(--canvas), 0 0 1px var(--canvas), 0 0 1px var(--canvas),
    0 0 2px var(--canvas), 0 0 2px var(--canvas), 0 0 2px var(--canvas),
    0 0 4px var(--canvas), 0 0 4px var(--canvas), 0 0 4px var(--canvas),
    0 0 7px var(--canvas), 0 0 7px var(--canvas),
    0 0 11px var(--canvas), 0 0 11px var(--canvas);
  transition:opacity .18s ease;
}
.labels-off .feat-word{opacity:0 !important}
.feat-dot{
  position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;
  background:#00B380;box-shadow:0 0 0 4px rgba(0,179,128,.18);
  pointer-events:none;opacity:0;transition:opacity .4s ease;will-change:transform;
}
.labels-off .feat-index,.labels-off .feat-card,.labels-off .feat-dot{opacity:0 !important;pointer-events:none}

/* the privacy mark — a blueprint padlock that quietly closes itself */
.plock-wrap{display:inline-flex;vertical-align:-7px;margin-right:11px}
.plock{width:25px;height:25px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.plock .shackle{
  transform-origin:16.5px 10px;
  transform:rotate(30deg) translate(1.5px,-2.5px);
  transition:transform 1.7s cubic-bezier(.22,.61,.36,1) 1.3s,stroke .6s ease 2.9s;
}
.plock-wrap.in .shackle{transform:none}
.plock .body-r{transition:stroke .6s ease 2.9s}
.plock-wrap.in .shackle,.plock-wrap.in .body-r{animation:plockset .9s ease 2.95s}
@keyframes plockset{30%{stroke:#00B380}100%{stroke:var(--ink)}}

.hero-stats{
  display:flex;align-items:stretch;
  gap:clamp(20px,2.6vw,34px);
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--hairline);
}
.hs-lead{
  display:flex;flex-direction:column;justify-content:center;
  padding-right:clamp(20px,2.6vw,34px);
  border-right:1px solid var(--hairline);
  flex:none;
}
.hs-lead b{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,2.6vw,2.5rem);line-height:1;
  letter-spacing:-.02em;color:var(--teal);
  white-space:nowrap;   /* "Up to" never separates from the figure */
}
.hs-lead b small{font-size:.55em;font-weight:500}
.hs-lead span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.11em;color:var(--slate);margin-top:7px}
.hs-rest{
  display:grid;grid-template-columns:1fr 1fr;
  gap:8px clamp(18px,2.4vw,34px);
  align-content:center;flex:1;min-width:0;
}
.hs-rest div{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.hs-rest b{font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.hs-rest span{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.09em;color:var(--slate)}
@media (max-width:520px){.hs-rest{grid-template-columns:1fr}}

/* ---------- sections ---------- */

.section{padding-top:var(--section);padding-bottom:var(--section);position:relative}
.section.tight{padding-top:calc(var(--section) * .6);padding-bottom:calc(var(--section) * .6)}
.band{background:var(--lifted);border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft)}

/* why now */
.why{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.app + .why{border-top:0}   /* the band above already draws the seam */
/* every slide fills the viewport at ANY browser zoom — the deck stays a
   deck: no half-slides peeking in when zoomed out */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  html,body{overscroll-behavior:none}
  /* #why is OUT of the deck's full-viewport rule: three tiles must not
     float alone in a whole screen — it takes its natural height */
  .app,.privacy{min-height:100vh;display:flex;align-items:center}
  .app > .container,.privacy > .container{width:100%}
  .app{padding-top:clamp(56px,8vh,110px);padding-bottom:clamp(40px,6vh,92px)}
  /* the closing screen composes as one full frame too */
  .footer{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
}
.why-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,64px);
  margin-top:clamp(36px,5vw,60px);
}
.wstat{border-top:1.5px solid var(--ink);padding-top:20px}
.stat-big{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(3rem,5.4vw,4.5rem);
  line-height:.95;letter-spacing:-.03em;
  color:var(--teal);
}
.stat-big small{font-size:.38em;font-weight:500;color:var(--slate);margin-left:5px;letter-spacing:0}
.wstat p{font-size:.94rem;color:var(--charcoal);margin-top:12px;max-width:26em}
.wstat .mono{display:block;margin-top:14px}
@media (max-width:800px){.why-stats{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   THE CARBON CLOCK (#technology) — the grid's own hours drawn
   above the house's, on one 27-hour rail. The frozen engine lights
   it: rail = stage 2, the landing (fills, captions, cursor) =
   stage 4, the closing line = stage 5.
   ============================================================ */
.pinstage{
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:clamp(38px,5vh,60px);
  padding-bottom:clamp(20px,3.5vh,40px);
}
.pinstage > .container{width:100%}
.pinviz{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4vw,72px);align-items:center;
  width:100%;
  margin-top:clamp(16px,2.6vh,34px);
  /* one clock for the whole slide: --md is the carriages' head start,
     --s4/--s5 the stage delays. The desktop arrival show stretches them
     (see storycascade at the end of the file); touch and reduced motion
     leave them at zero. */
  --md:.6s;--s4:0s;--s5:0s;
}
/* nothing stands beside the rail any more */
.pinviz.solo{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(14px,2.4vh,30px)}

/* the day, one example — 0:00 to 03:00 the next morning (27 hours), so
   the car can land at 10 PM and its pill still finishes on the rail:
   x = hours / 27. Every --from/--to below is that scale. */
.dayrail{
  --peak-a:44.4%;--peak-b:74.1%;--sun-a:37%;--sun-b:55.6%;
  --grid-a:63%;--grid-b:70.4%;
  opacity:0;transform:translateY(30px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
  padding:0 6px;
}
.dayrail.on{opacity:1;transform:none}
.dr-plate{display:block;line-height:1;font-size:.6rem;letter-spacing:.12em;margin-bottom:10px}

/* THE GRID's own register, above the house's hours: demand only — never a
   rate, never a carbon word. The hatch marks the hours the Connecticut
   grid peaks — the label reads CONNECTICUT GRID. */
/* the register stands clear of the house's rail — its own instrument */
.dr-grid{position:relative;height:22px;margin-bottom:30px}
.dr-peakbox{
  position:absolute;left:var(--grid-a);top:0;bottom:0;
  width:calc(var(--grid-b) - var(--grid-a));
  border:1px solid rgba(22,33,31,.28);
  background-image:repeating-linear-gradient(45deg,rgba(22,33,31,.14) 0 1px,transparent 1px 5px);
}
.dr-gridlabel{
  position:absolute;left:calc(var(--grid-b) + 10px);top:50%;transform:translateY(-50%);
  font-style:normal;font-family:var(--font-mono);font-size:.58rem;line-height:1;
  letter-spacing:.12em;color:var(--slate);white-space:nowrap;
}

/* track and lanes share one frame, so the peak column and the cursor can
   run down through both */
.dr-body{position:relative;padding-bottom:40px}
.dr-col{
  position:absolute;left:var(--grid-a);top:0;bottom:54px;z-index:0;
  width:calc(var(--grid-b) - var(--grid-a));
  background-image:repeating-linear-gradient(45deg,rgba(22,33,31,.07) 0 1px,transparent 1px 5px);
}
.dr-track{position:relative;z-index:1;height:44px}
/* the baseline draws itself left to right on arrival — the track's own
   box never moves */
.dr-draw{
  position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:rgba(22,33,31,.42);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.dayrail.on .dr-draw{transform:scaleX(1)}
.dr-tick{position:absolute;left:var(--x);top:0;transform:translateX(-50%);font-family:var(--font-mono);font-size:.62rem;line-height:1;letter-spacing:.1em;color:var(--slate);white-space:nowrap}
/* the two rate windows: the time-of-use band sits above the line, solar
   below it, so their noon-to-3 PM overlap still reads as two bands */
.dr-band{position:absolute;height:10px}
.dr-band i{
  position:absolute;left:0;font-style:normal;
  font-family:var(--font-mono);font-size:.58rem;line-height:1;letter-spacing:.12em;
  color:var(--slate);white-space:nowrap;
}
.dr-band.peak{bottom:0;left:var(--peak-a);width:calc(var(--peak-b) - var(--peak-a));background:rgba(22,33,31,.09)}
.dr-band.peak i{bottom:calc(100% + 4px)}
.dr-band.sun{top:calc(100% + 1.5px);left:var(--sun-a);width:calc(var(--sun-b) - var(--sun-a));background:rgba(245,166,35,.28)}
.dr-band.sun i{top:calc(100% + 4px);color:var(--amber-deep)}

.dr-lanes{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;margin-top:30px;padding-bottom:14px}
/* each lane carries the two hours: --from, where the load runs today, and
   --to, where Alethe puts it; --fd is its share of the stage-4 stagger */
.dr-lane{position:relative;height:28px}
.dr-lane:nth-child(1){--fd:var(--s4)}
.dr-lane:nth-child(2){--fd:calc(var(--s4) + .2s)}
.dr-lane:nth-child(3){--fd:calc(var(--s4) + .4s)}
/* the carriage is exactly one lane wide, so a percentage translate is
   measured against the rail itself and never against the pill's own width */
.dr-car{
  position:absolute;inset:0;transform:translateX(0);
  transition:transform 1.9s cubic-bezier(.22,.61,.36,1) var(--md);
}
.dr-block,.dr-ghost{
  position:absolute;left:var(--from);top:0;height:28px;
  display:inline-flex;align-items:center;gap:6px;padding:0 10px;
  border:1.5px solid var(--ink);border-radius:999px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;color:var(--ink);white-space:nowrap;
}
.dr-block{background:var(--canvas);transition:border-color 1.9s ease var(--md),color 1.9s ease var(--md),background-color .55s ease var(--md)}
.dr-block b{font-family:var(--font-display);font-weight:600;font-size:.84rem;letter-spacing:-.01em;color:var(--teal)}
/* the ghost: where the load used to sit. It stays put because it lives in
   the lane, not in the carriage */
.dr-ghost{
  border-style:dashed;border-color:rgba(22,33,31,.45);color:transparent;
  opacity:0;transition:opacity .8s ease var(--md);
}
.dr-ghost b{font-family:var(--font-display);font-weight:600;font-size:.84rem;letter-spacing:-.01em;color:transparent}
.dayrail.on .dr-car{transform:translateX(calc(var(--to) - var(--from)))}
.dayrail.on .dr-block{border-color:var(--teal);color:var(--teal)}
.dayrail.on .dr-ghost{opacity:1}

/* STAGE 4 — the landing. Each pill fills solid (the house's chip grammar),
   the ghosts step back, and each lane says which hour it moved to. */
.dr-cap{
  position:absolute;left:var(--at);top:calc(100% + 3px);
  font-family:var(--font-mono);font-size:.58rem;line-height:1;letter-spacing:.1em;
  color:var(--slate);white-space:nowrap;
  opacity:0;transition:opacity .6s ease var(--fd,0s);
}
/* the car lands late in the day, so its caption reads back toward the
   rail and never leaves the track */
.dr-cap.end{transform:translateX(-100%)}
.dr-cap b{font-weight:500;color:var(--teal)}
.dr-lanes.on .dr-block{
  background:var(--teal);border-color:var(--teal);color:#fff;
  transition:background-color .55s ease var(--fd,0s),border-color .55s ease var(--fd,0s),color .55s ease var(--fd,0s);
}
.dr-lanes.on .dr-block b{color:#fff;transition:color .55s ease var(--fd,0s)}
/* the ghosts dim by KEYFRAME, not by a second opacity target: a plain
   `opacity:.4` here sits later in the source than `.dayrail.on .dr-ghost
   {opacity:1}` and so wins the cascade outright — the ghosts would fade
   0 -> .4 and never reach full. `forwards` leaves the fade-in alone until
   the delay elapses.
   The arithmetic on the desktop arrival show (site.js SHOW = 250 / 250 /
   250 / 1830 / 1830 ms from 45%-in-view): the ghost fades up from the
   rail's own .on — 250 + --md(1s) -> +.8s, full at 2.05s. The dim rides
   stage 4's .on at 1.83s + --fd, so the earliest dim is 3.43s: 1.38s of
   clearance. */
@keyframes drdim{from{opacity:1}to{opacity:.4}}
.dr-lanes.on .dr-ghost{
  animation-name:drdim;animation-duration:.55s;animation-timing-function:ease;
  animation-delay:var(--fd,0s);animation-fill-mode:forwards;
}
@media (prefers-reduced-motion:reduce){.dr-lanes.on .dr-ghost{opacity:.4}}
.dr-lanes.on .dr-cap{opacity:1}

/* STAGE 4 — the cursor: one reading held for 9.2 s, then the other, on a
   jump cut. The load moved; it did not vanish. */
.dr-cursor{
  position:absolute;top:44px;bottom:54px;left:63.6%;width:0;z-index:0;
  opacity:0;transition:opacity .7s ease var(--s4,0s);
}
/* the loop's clock starts when the cursor itself arrives, not when the
   stage fires — the first jump cut lands 9.2 s after it is on screen */
.dr-cursor.on{
  opacity:1;
  animation-name:drjump;animation-duration:18.4s;animation-timing-function:step-end;
  animation-delay:var(--s4,0s);animation-iteration-count:infinite;
}
.dr-cx{position:absolute;left:-.75px;top:0;bottom:0;width:1.5px;background:rgba(22,33,31,.55)}
.dr-chip{
  position:absolute;top:calc(100% + 14px);left:0;transform:translateX(-50%);
  white-space:nowrap;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(16,27,45,.14);
  border-radius:9px;padding:5px 10px 4px;
  box-shadow:0 2px 8px rgba(22,33,31,.08);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;color:var(--ink);line-height:1.3;
}
.dr-chip b{font-family:var(--font-display);font-weight:600;font-size:.74rem;letter-spacing:-.01em;color:var(--teal)}
/* the second reading waits underneath; reduced motion holds 5:10 PM */
.dr-chip.alt{opacity:0;pointer-events:none}
.dr-cursor.on .dr-chip{
  animation-name:drchipa;animation-duration:18.4s;animation-timing-function:step-end;
  animation-delay:var(--s4,0s);animation-iteration-count:infinite;
}
.dr-cursor.on .dr-chip.alt{animation-name:drchipb}
@keyframes drjump{0%{left:63.6%}50%{left:81.5%}100%{left:63.6%}}
@keyframes drchipa{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes drchipb{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

/* the caption row (stage 4) — carbon's hours, in words. The words lead
   (wide, left); the turbine sits narrow on the right, source order kept. */
.ccblock{width:100%;min-width:0}
.cc-row{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(20px,3vw,56px);align-items:start;
}
/* the two halves carry the entrance themselves, so the row can go
   display:contents on short screens without losing it */
.cc-row > *{
  opacity:0;transform:translateY(22px);
  will-change:opacity,transform;
  transition:opacity .85s ease var(--s4,0s),transform .85s cubic-bezier(.22,.61,.36,1) var(--s4,0s);
}
.cc-row.on > *{opacity:1;transform:none}
.cc-head{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.22;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:10px;
}
.cc-text .mono{display:block;color:var(--teal)}
.cc-copy{font-size:.96rem;line-height:1.6;color:var(--charcoal);max-width:38em;margin-top:14px}

/* the plant that stays off — the peaking turbine, drawn in the hero's
   blueprint hand, in the caption row's narrow right column. 440x280 is
   the drawing's own frame and its cap; the stage never grows past it. */
.cc-viz{min-width:0}
.grid-stage{position:relative;width:100%;aspect-ratio:440/280;min-height:0;max-width:420px}
.grid-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
/* the drawing turns under the hand, like the hero's meter */
.grid-stage canvas.grabbing{cursor:grabbing}
.grid-callouts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* the turbine's chips speak the rail's language: mono name stacked over a
   display value, both flush right so the stack reads as one column */
.gs-chip{
  position:absolute;white-space:nowrap;
  display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;
  padding:4px 10px 3px;border-radius:999px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(16,27,45,.12);
  box-shadow:0 2px 8px rgba(22,33,31,.07);
  line-height:1.3;
  transition:background-color .5s ease,border-color .5s ease,color .5s ease;
}
.gs-name{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;
  color:var(--ink);
  transition:color .5s ease;
}
.gs-val{
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:-.01em;color:var(--teal);line-height:1.2;
  transition:color .5s ease;
}
/* landed, like a filled pill on the rail */
/* running: the whole chip flares, whatever the chip's own state */
.gs-chip.hot{background:var(--flare);border-color:var(--flare);color:var(--bp-ink)}
.gs-chip.hot .gs-name,.gs-chip.hot .gs-val{color:var(--bp-ink)}
/* the closing line (stage 5) — the comfort that did not change */
.cc-line{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.3rem,2.45vw,1.95rem);line-height:1.18;letter-spacing:-.018em;
  color:var(--ink);margin-top:clamp(14px,2.2vh,26px);
  opacity:0;transform:translateY(22px);
  will-change:opacity,transform;
  transition:opacity .85s ease var(--s5,0s),transform .85s cubic-bezier(.22,.61,.36,1) var(--s5,0s);
}
.cc-line.on{opacity:1;transform:none}
.cc-line .eq{color:var(--teal)}
.cc-line .mono{display:block;margin-top:10px}

/* ---------- day to day (#app) ---------- */
.appviz{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4vw,72px);align-items:center;
  width:100%;
  margin-top:clamp(16px,2.6vh,34px);
}
/* here the journey line is simply there — no stage to wait for */
.appjourney .jline{opacity:1}
.apppanels{
  display:flex;gap:clamp(18px,2.6vw,44px);
  align-items:flex-start;justify-content:center;
}
.apppanel{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;min-width:0}
.apppanel .phone-embed{--s:.6}
.apppanel .h3{font-size:1.32rem;margin-bottom:8px}
.apppanel p{font-size:.9rem;color:var(--charcoal);max-width:20em}
.apppanel .mono{display:block;margin-top:12px;color:var(--teal)}

@media (max-width:900px){.dayrail{display:none}}
/* 901-1080px: the rail keeps its full 27 hours, so the pills and their
   captions give up a little type before the EV block can graze the end */
@media (max-width:1080px){
  .dr-block,.dr-ghost{font-size:.58rem;padding:0 8px}
  .dr-block b,.dr-ghost b{font-size:.74rem}
  /* .58rem is the legibility floor for the rail's small type — the pills
     step down, the labels never go under it */
  .dr-cap{font-size:.58rem}
  .dr-chip{font-size:.58rem}
  .dr-chip b{font-size:.68rem}
  .dr-band i,.dr-gridlabel{font-size:.58rem}
  .dr-tick{font-size:.58rem}
}
@media (max-width:900px){
  .pinstage{min-height:0;display:block}
  .pinviz{grid-template-columns:1fr}
  /* the rail is a desktop instrument; on touch the caption and the
     closing line carry the story in words — the turbine goes with the
     rail, since its state is the cursor's state */
  .cc-row{grid-template-columns:1fr;gap:18px}
  .cc-viz{display:none}
  .appviz{grid-template-columns:1fr}
  .apppanels{flex-direction:column;align-items:center;gap:56px;margin-top:40px}
}
/* shorter desktops: the slide composes whole — the plate goes, the lane
   pitch drops to 40 px, the caption copy and the phones tighten */
@media (min-width:901px) and (hover:hover) and (pointer:fine) and (max-height:820px){
  .dr-plate{display:none}
  .dr-lanes{gap:12px}
  .cc-copy{font-size:.88rem}
  .grid-stage{max-width:330px}
  .apppanel .phone-embed{--s:.52}
  .apppanel p{font-size:.84rem}
}
@media (min-width:901px) and (hover:hover) and (pointer:fine) and (max-height:760px){
  .pinstage .eyebrow{margin-bottom:14px}
  .pinstage .display-2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
  .pinviz{margin-top:10px}
  .dr-tick{display:none}
  .dr-tick.keep{display:block}
  /* the closing line folds into the caption row's right column, now
     beneath the turbine: text col 1, turbine col 2 row 1, line col 2 row 2.
     Columns mirror .cc-row's 7fr/5fr so the fold keeps the same measure. */
  .ccblock{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(20px,3vw,56px);row-gap:12px;align-items:start;
  }
  .cc-row{display:contents}
  .cc-text{grid-column:1;grid-row:1}
  .cc-viz{grid-column:2;grid-row:1}
  .grid-stage{max-width:300px;min-height:0}
  .cc-line{grid-column:2;grid-row:2;margin-top:0}
  .app .display-2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
  .appviz{margin-top:10px}
  .apppanel{gap:12px}
  .apppanel .phone-embed{--s:.44}
  .apppanel .h3{font-size:1.15rem}
  .apppanel .mono{margin-top:6px}
  .appjourney .jstep{padding:8px 0}
}
.journey{position:relative}
.jline{position:absolute;left:27px;top:34px;height:calc(100% - 68px);width:3px;pointer-events:none;opacity:0;transition:opacity .6s ease}
.jline line{stroke:var(--teal);stroke-width:1.5;stroke-dasharray:5 8;opacity:.4;animation:jflow 1.5s linear infinite}
@keyframes jflow{to{stroke-dashoffset:-52}}
.jstep{display:grid;grid-template-columns:58px 1fr;gap:20px;padding:16px 0;position:relative}
.jnode{
  width:56px;height:56px;border-radius:50%;
  background:var(--white);border:1.5px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;overflow:hidden;
}
.jnode svg{width:30px;height:30px;stroke:var(--teal);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.jnode .j-wave{width:36px;animation:jwave 2.8s ease-in-out infinite alternate}
@keyframes jwave{to{transform:translateX(15px)}}
.j-core{fill:var(--teal);stroke:none;opacity:.25;animation:jcore 2.1s ease-in-out infinite}
@keyframes jcore{50%{opacity:.9}}
.j-tag{animation:jtag 2.8s infinite}
.j-tag.t2{animation-delay:.93s}
.j-tag.t3{animation-delay:1.86s}
@keyframes jtag{0%,60%,100%{opacity:.4}12%,30%{opacity:1}}
.j-hand{transform-origin:14px 14px;transform:rotate(-45deg);animation:jhand 3.6s ease-in-out infinite alternate}
@keyframes jhand{from{transform:rotate(-45deg)}to{transform:rotate(180deg)}}
.jstep .h3{margin-bottom:9px}
.jstep p{font-size:.96rem;color:var(--slate);max-width:32em}
.jstep .mono{display:block;margin-top:12px;color:var(--teal)}
.howphone{display:flex;flex-direction:column;align-items:center;gap:16px;justify-self:center}
@media (max-width:900px){
  .howgrid{grid-template-columns:1fr}
  .howphone{margin-top:12px}
}

/* phone embeds */
.phone-embed{
  --s:1;
  position:relative;flex:none;
  width:calc(340px * var(--s));height:calc(724px * var(--s));
  border-radius:calc(44px * var(--s));
  overflow:hidden;
  box-shadow:var(--shadow-2);
}
.phone-embed iframe{
  width:340px;height:724px;border:0;
  transform:scale(var(--s));transform-origin:top left;
  pointer-events:none;
}
.phone-embed.featured{box-shadow:var(--shadow-3)}
.stage-app .phone-embed{--s:var(--app-s,.6)}

/* privacy */
.privacy{text-align:center;overflow:hidden;position:relative}
.privacy .ghost{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(7rem,22vw,17rem);letter-spacing:-.03em;
  color:var(--ghost);
  pointer-events:none;user-select:none;
  z-index:0;
}
.privacy .inner{position:relative;z-index:1}
.privacy .display-2{max-width:14em;margin:0 auto 22px}
.privacy .lead{
  max-width:31em;margin:0 auto;
  font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.55;
}
.privacy-facts{
  margin-top:52px;
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
}
.fact-pill{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;
  color:var(--teal);
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:10px 20px;
}

/* team */
.team-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,56px);
  margin-top:clamp(36px,5vw,64px);
}
.member{border-top:1.5px solid var(--ink);padding-top:26px}
.member .h3{margin-bottom:9px;font-size:2.1rem}
.member .role{
  font-family:var(--font-mono);font-size:.84rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal);
  display:block;margin-bottom:18px;
}
.member p{font-size:1.08rem;color:var(--slate);line-height:1.65}
.team-foot{margin-top:56px;max-width:38em}
@media (max-width:800px){.team-grid{grid-template-columns:1fr}}

/* footer */
.footer{
  background:var(--ink);color:var(--canvas);
  border-radius:var(--r-frame) var(--r-frame) 0 0;
  margin-top:var(--section);
  padding:clamp(36px,5vw,60px) 0 26px;
}
.footer .display-2{color:var(--canvas);max-width:13em;margin-bottom:20px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(24px,3.6vw,42px)}
.footer-cols{
  display:flex;gap:clamp(32px,6vw,96px);flex-wrap:wrap;
  padding-top:22px;border-top:1px solid rgba(244,241,236,.16);
}
.footer-cols .col{min-width:140px}
.footer-cols .k{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,241,236,.5);
  display:block;margin-bottom:10px;
}
.footer-cols a,.footer-cols span{
  display:block;font-size:.92rem;color:rgba(244,241,236,.78);
  margin-bottom:10px;
}
.footer-cols a:hover{color:var(--canvas)}
.footer-base{
  margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  color:rgba(244,241,236,.45);
}
.to-top-row{display:flex;justify-content:center;margin:clamp(18px,2.6vw,30px) 0 4px}
.to-top{
  width:46px;height:46px;border-radius:50%;flex:none;
  border:1.5px solid rgba(244,241,236,.35);
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(244,241,236,.85);
  transition:border-color .35s ease,background .35s ease,color .35s ease,transform .35s ease;
}
.to-top:hover{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-3px)}

/* ---------- motion ---------- */

.reveal{
  opacity:0;transform:translateY(22px);
  will-change:opacity,transform;   /* pre-promoted: no layer hitch mid-scroll */
  transition:opacity var(--rd,2s) cubic-bezier(.25,.46,.45,.94) var(--d,0s),
             transform var(--rd,2s) cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
.reveal.in{opacity:1;transform:none}
.reveal.slow{--rd:3.6s;transform:translateY(34px)}
.reveal.mid{--rd:2.6s;transform:translateY(28px)}
.reveal.quick{--rd:2.2s;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .arc{stroke-dashoffset:0}
}

/* phone-portrait fittings — last so they win the cascade */
@media (max-width:900px){
  /* the cloud lives INSIDE the drawing on touch, high top-left — the
     LABELS/DRAG tools own the top-right corner */
  .cloud-icon{top:-18px;right:auto;left:-6px}
  .cloud-icon svg{width:128px;height:37px}
  .cloud-icon .ci-label{font-size:.55rem;margin-top:2px}
  /* the ghosted index is a desktop instrument; on touch the card leads */
  .feat-index{display:none}
  /* the hero performs at reading pace on touch — no desktop overture */
  .hero .reveal{transition-delay:.12s !important}
  .hero .hero-stats{transition-delay:.25s !important}
  /* the tools row is absolutely placed and unbounded: at 375px the day
     chip + LABELS + DRAG measure wider than the stage. The drag hint is
     meaningless on touch anyway, so it goes and the chip tightens. */
  .stage-tools{gap:8px}
  .drag-hint{display:none}
  .day-chip{font-size:.6rem;letter-spacing:.08em}
}
@media (max-width:640px){
  :root{--section:clamp(54px,13vw,80px)}
  .hero{padding-top:92px;padding-bottom:36px;min-height:0;height:auto}
  .display-1{font-size:clamp(2.3rem,9.2vw,2.9rem)}
  .lead{font-size:1.06rem}
  .meter-stage{height:clamp(330px,48vh,460px)}
  .stage-controls{margin-top:10px}
  .footer .display-2{max-width:100%}
  /* the instrument row breathes: headline stat on top, 2x2 grid below */
  .hero-stats{display:block;margin-top:12px}
  .hs-lead{border-right:0;padding-right:0;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}
  .hs-rest{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;width:100%}
}



/* the html.scrollstory sticky-pin mode was retired — nothing sets that class any more; what survives is the arrival cure below. */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  /* .reveal.slow's translateY(34px) outranks .reveal.in (source order) and
     never resets — fine in roomy sections, but in these fixed 100vh frames
     it pushed the heading's text down into what sits below it. Here the
     revealed elements must land exactly on their layout box. Scoped: the
     hero and the rest of the site keep their approved tiered offsets. */
  html.storycascade .pinstage .reveal.in{transform:none}
  .app .reveal.in{transform:none}
}

/* the desktop arrival show breathes: the rail blooms slowly (mobile and
   the ?vsforce pager keep their original 0.75s) */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  html.storycascade .dayrail{transition-duration:1.9s,1.9s}
  /* the rail itself blooms over 1.9s, so the loads' .6s head start had
     them sliding while the track was still arriving. They wait — and the
     landing (stage 4) and the closing line (stage 5) ride in behind.
     The whole show is about a third faster than v126. */
  html.storycascade .pinviz{--md:1s;--s4:1.6s;--s5:2.9s}
  /* the hairline must draw against a ground that is already there: the
     rail blooms 1.9s from t=250ms, so the line draws .75s -> 2.25s,
     finishing just after the bloom lands (~2.15s). Touch and reduced
     motion keep the plain 1.6s draw. */
  html.storycascade .dr-draw{transition-delay:.5s;transition-duration:1.5s}
}