/* =========================================================================
   Ora — landing page
   "Orbital Intelligence": High-End Minimalism + Glassmorphism.

   Strictly monochrome. The only colour on the page comes from the orb, which
   is the point — in a grey room, the one warm object is where the eye goes.
   Type is heavy and large; buttons are small, bold and tight. That contrast
   is what separates a premium page from a generic one.
   ========================================================================= */

:root{
  --surface:          #F9F9F9;
  --surface-lowest:   #FFFFFF;
  --surface-low:      #F3F3F4;
  --surface-c:        #EEEEEE;
  --surface-high:     #E8E8E8;
  --surface-highest:  #E2E2E2;

  --on-surface:       #1A1C1C;
  --on-surface-var:   #46464A;
  --outline:          #77767B;
  --outline-variant:  #C7C6CA;

  --primary:            #030304;
  --on-primary:         #FFFFFF;
  --primary-container:  #1D1D1F;
  --on-primary-cont:    #9A999C;

  --glass:        rgba(255,255,255,.72);
  --glass-strong: rgba(255,255,255,.88);
  --glass-edge:   rgba(255,255,255,.70);
  --glass-blur:   blur(40px) saturate(180%);

  --lift-1: 0 1px 2px rgba(0,0,0,.03), 0 18px 44px -20px rgba(0,0,0,.16);
  --lift-2: 0 2px 6px rgba(0,0,0,.05), 0 34px 72px -28px rgba(0,0,0,.26);
  --lift-3: 0 40px 100px -30px rgba(0,0,0,.34);

  --r-sm:  .5rem;
  --r:     1rem;
  --r-md:  1.5rem;
  --r-lg:  2rem;
  --r-xl:  3rem;
  --r-full: 9999px;

  --u: 8px;
  --container: 1200px;
  --edge: clamp(20px, 4.4vw, 40px);
  --section: clamp(84px, 10vw, 160px);

  --ease:     cubic-bezier(.22,.85,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--surface);
  color:var(--on-surface);
  font:400 16px/1.6 "Hanken Grotesk",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }
::selection{ background:rgba(3,3,4,.10) }
:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:var(--r-sm) }

/* ------------------------------ layout ------------------------------ */

.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--edge) }
.wrap--tight{ max-width:820px }

section{ padding-block:var(--section) }
.center{ text-align:center }
.center .sub{ margin-inline:auto }

.head{ max-width:820px; margin-bottom:clamp(44px,6vw,80px) }
.head.center{ margin-inline:auto }

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

h1,h2,h3,h4{ margin:0; font-family:inherit }

/* Display is deliberately heavier and tighter than a default grotesk setting.
   800 weight at -0.035em is what makes a headline look drawn rather than typed. */
.display{
  font-size:clamp(42px, 7.4vw, 88px); font-weight:800;
  line-height:1.02; letter-spacing:-.035em;
}
h2{
  font-size:clamp(31px, 5vw, 56px); font-weight:800;
  line-height:1.06; letter-spacing:-.032em;
}
.title{ font-size:clamp(19px, 2.1vw, 23px); font-weight:700; line-height:1.32; letter-spacing:-.018em }

/* eyebrow with a rule — a structural anchor, not decoration */
.label{
  display:inline-flex; align-items:center; gap:12px;
  margin:0 0 22px;
  font-size:12px; font-weight:700; line-height:1.2; letter-spacing:.1em; text-transform:uppercase;
  color:var(--outline);
}
.label::before{ content:""; width:24px; height:1px; background:var(--outline-variant); flex:none }
.center .label{ justify-content:center }

.sub{
  margin:26px 0 0;
  font-size:clamp(16px,1.4vw,18px); font-weight:400; line-height:1.65;
  color:var(--on-surface-var); max-width:56ch;
}

p{ margin:0 0 1em } p:last-child{ margin-bottom:0 }
.tiny{ font-size:13px; line-height:1.5; color:var(--outline) }

.on-dark{ color:#F0F1F1 }
.on-dark h2{ color:#fff }
.on-dark .label{ color:var(--on-primary-cont) }
.on-dark .label::before{ background:rgba(255,255,255,.28) }
.on-dark .sub{ color:#A9A8AC }
.on-dark .tiny{ color:var(--on-primary-cont) }

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

/* Small, bold, tight. Oversized light buttons are the clearest tell of a
   template; the reference set runs ~13px/700 with a little tracking. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 26px; border:1px solid transparent; border-radius:var(--r-full);
  font-size:13.5px; font-weight:700; letter-spacing:.012em; cursor:pointer; white-space:nowrap;
  transition:transform .32s var(--ease), background .24s var(--ease),
             box-shadow .32s var(--ease), border-color .24s var(--ease), opacity .24s var(--ease);
}
.btn:active{ transform:scale(.975) }
.btn--lg{ min-height:56px; padding:0 34px; font-size:14.5px }

.btn--primary{
  background:var(--primary-container); color:var(--on-primary);
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 12px 26px -14px rgba(0,0,0,.55);
}
.btn--primary:hover{
  background:var(--primary); transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(0,0,0,.14), 0 24px 44px -18px rgba(0,0,0,.55);
}

.btn--glass{
  background:var(--glass); color:var(--on-surface); border-color:var(--glass-edge);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--lift-1);
}
.btn--glass:hover{ background:var(--glass-strong); transform:translateY(-2px); box-shadow:var(--lift-2) }

.btn--light{ background:#fff; color:var(--primary) }
.btn--light:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -18px rgba(0,0,0,.6) }

/* dark glass, as in the reference CTA card */
.btn--darkglass{
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  color:#fff; border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.btn--darkglass:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  transform:translateY(-2px);
}

.btn-row{ display:flex; flex-wrap:wrap; gap:12px }
.center .btn-row, .btn-row--center{ justify-content:center }

/* ------------------------------ surfaces ------------------------------ */

.glass{
  position:relative;
  background:var(--glass);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:var(--lift-1);
}
/* inner highlight along the top edge — the tell of real glass */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%);
  mix-blend-mode:overlay;
}
.solid{
  background:var(--surface-lowest); border:1px solid var(--outline-variant);
  border-radius:var(--r-lg); box-shadow:var(--lift-1);
}

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

.nav{
  position:fixed; inset:0 0 auto 0; z-index:90; height:68px; display:flex; align-items:center;
  background:rgba(249,249,249,.72);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav[data-scrolled="true"]{ border-bottom-color:rgba(199,198,202,.55); background:rgba(249,249,249,.88) }
/* three columns so the links sit dead centre regardless of brand/CTA width */
.nav .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px }

.brand{ display:inline-flex; align-items:center; gap:9px; font-size:20px; font-weight:800; letter-spacing:-.035em }
.brand svg{ width:21px; height:21px; flex:none }

.nav-links{ display:flex; gap:34px; font-size:14px; font-weight:600; letter-spacing:-.006em; color:var(--outline) }
.nav-links a{ transition:color .2s var(--ease) }
.nav-links a:hover, .nav-links a[aria-current="true"]{ color:var(--on-surface) }
.nav-end{ display:flex; justify-content:flex-end }
/* the header pill is smaller than page CTAs — matches the reference scale */
.nav .btn{ min-height:42px; padding:0 22px; font-size:13px }
@media (max-width:940px){ .nav-links{ display:none } .nav .wrap{ grid-template-columns:1fr auto } }

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

.hero{
  position:relative; overflow:hidden; text-align:center;
  padding-top:clamp(112px,14vh,152px); padding-bottom:clamp(56px,7vw,88px);
}
.hero::before{
  content:""; position:absolute; left:50%; top:40%;
  width:min(1220px,165vw); aspect-ratio:1; pointer-events:none;
  transform:translate(calc(-50% + var(--px,0px)), calc(-50% + var(--py,0px)));
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 60%);
  transition:transform 1.1s var(--ease-out);
}
.hero > *{ position:relative }
.hero .display{ max-width:none; margin-inline:auto; text-wrap:balance }
.hero .sub{ max-width:56ch; margin-inline:auto; margin-top:24px }

/* ------------------------------ stage ------------------------------ */

/* The canvas is far larger than the sphere so the bloom has room; that empty
   padding is clawed back so the controls stay above the fold. */
.stage{ margin-top:clamp(6px,1.2vw,18px); display:flex; flex-direction:column; align-items:center }
/* Bottom pull is smaller than the top one on purpose: the status line lives
   below and was being dragged up over the sphere, which put type across the
   one thing on the page worth looking at. */
.stage .orb-button{ margin-block:clamp(-84px,-7.2vw,-48px) clamp(-58px,-4.6vw,-30px) }

.orb-button{
  position:relative; background:none; border:0; padding:0; cursor:pointer;
  display:grid; place-items:center; border-radius:var(--r-full);
  -webkit-tap-highlight-color:transparent;
}
.orb-button canvas{ transition:transform .6s var(--ease-out); filter:drop-shadow(var(--lift-3)) }
.orb-button:hover canvas{ transform:scale(1.04) }
.orb-button:active canvas{ transform:scale(.99) }

.orb-status{
  margin:0; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--outline); min-height:24px; display:flex; align-items:center; gap:10px;
  padding:6px 0; border-radius:var(--r-full);
  transition:background .3s var(--ease), color .3s var(--ease), padding .3s var(--ease);
}
.dot{
  width:7px; height:7px; border-radius:var(--r-full); background:var(--primary-container);
  box-shadow:0 0 0 0 rgba(29,29,31,.35); animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(29,29,31,.30) }
  70%{ box-shadow:0 0 0 10px rgba(29,29,31,0) }
  100%{ box-shadow:0 0 0 0 rgba(29,29,31,0) }
}
.stage:not([data-state="idle"]) .orb-status{ background:var(--primary-container); color:#fff; padding:8px 20px }
.stage:not([data-state="idle"]) .dot{ background:#fff; box-shadow:none }

/* ------------------------------ transcript ------------------------------ */

.convo{
  width:100%; max-width:660px; margin-top:calc(var(--u)*4);
  display:flex; flex-direction:column; gap:calc(var(--u)*2);
  transition:opacity .2s var(--ease), transform .24s var(--ease-out);
}
/* set for one frame either side of the re-parent, so the element blinks out
   of the hero and back in at the dock instead of jumping */
.convo[data-moving="true"]{ opacity:0; transform:translateY(10px) }

.convo-log{
  display:flex; flex-direction:column; gap:10px; text-align:left;
  max-height:0; overflow:hidden; transition:max-height .6s var(--ease-out);
}
.convo-log[data-started="true"]{
  max-height:320px; overflow-y:auto; padding:22px; margin-bottom:4px;
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:var(--r-lg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--lift-1);
}
.convo-log::-webkit-scrollbar{ width:4px }
.convo-log::-webkit-scrollbar-thumb{ background:var(--outline-variant); border-radius:2px }

.msg{
  max-width:86%; padding:12px 18px; border-radius:var(--r-md);
  font-size:15.5px; line-height:1.6; animation:msgIn .5s var(--ease-out) both;
}
@keyframes msgIn{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
.msg--ora{ align-self:flex-start; background:var(--surface-high); border-bottom-left-radius:var(--r-sm) }
.msg--visitor{ align-self:flex-end; background:var(--primary-container); color:#fff; border-bottom-right-radius:var(--r-sm) }
.msg--interim{ opacity:.5; font-style:italic }
.msg--system{ align-self:center; background:none; color:var(--outline); font-size:14px; text-align:center; max-width:100% }

.chips{ display:flex; flex-wrap:wrap; gap:var(--u); justify-content:center }
.chip{
  padding:10px 18px; border-radius:var(--r-full); cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--on-surface-var);
  background:var(--glass); border:1px solid var(--glass-edge);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:background .22s var(--ease), transform .22s var(--ease), color .22s var(--ease), box-shadow .3s var(--ease);
}
.chip:hover{ background:#fff; color:var(--on-surface); transform:translateY(-2px); box-shadow:var(--lift-1) }

.ask-row{ display:flex; gap:var(--u); width:100%; max-width:560px; margin-inline:auto }
.ask-row input{
  flex:1; min-width:0; height:60px; padding:0 26px; border-radius:var(--r-full);
  font:inherit; font-size:15.5px;
  background:var(--surface-high); border:1px solid transparent; color:var(--on-surface);
  transition:background .24s var(--ease), border-color .24s var(--ease), box-shadow .3s var(--ease);
}
.ask-row input::placeholder{ color:var(--outline) }
.ask-row input:focus{ outline:none; background:#fff; border-color:var(--outline-variant); box-shadow:var(--lift-1) }
.ask-row button{
  height:60px; padding:0 30px; border-radius:var(--r-full); border:0; cursor:pointer;
  background:var(--primary-container); color:#fff; font-weight:700; font-size:13.5px; letter-spacing:.012em;
  transition:background .22s var(--ease), transform .3s var(--ease);
}
.ask-row button:hover{ background:var(--primary); transform:translateY(-2px) }

.hero-foot{ margin-top:calc(var(--u)*5); display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*2) }

/* ------------------------------ trust ------------------------------ */

.trust{ margin-top:clamp(60px,7vw,96px); padding-top:calc(var(--u)*4); border-top:1px solid var(--outline-variant) }
.trust .label{ margin-bottom:22px }
.marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{ display:flex; width:max-content; gap:var(--u); animation:slide 38s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.label--sub{ margin-top:34px; margin-bottom:18px }

/* the industries, as words — no borrowed logos standing in for customers */
.verticals{
  list-style:none; margin:0 0 4px; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
}
.verticals li{
  padding:7px 15px; border-radius:var(--r-full);
  background:var(--surface-low); border:1px solid var(--outline-variant);
  font-size:13px; font-weight:600; color:var(--on-surface-var); white-space:nowrap;
}

/* ---------------------------------------------------------------------
   LOGO WALL

   Every mark is normalised to one ink colour and one optical height, so the
   row reads as a single band rather than a ransom note of brand palettes.
   The track holds the set twice and travels exactly -50%, which is what makes
   the loop seamless instead of snapping back.
--------------------------------------------------------------------- */
.logo{
  display:flex; align-items:center; gap:10px; flex:none;
  height:38px; padding:0 22px;
  color:var(--on-surface-var); opacity:.62;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.marquee:hover .logo{ opacity:.42 }
.marquee .logo:hover{ opacity:1; color:var(--on-surface) }
.logo svg{ width:22px; height:22px; flex:none; display:block; fill:currentColor }
.logo span{
  font-size:16.5px; font-weight:700; letter-spacing:-.018em; white-space:nowrap;
  font-family:var(--font-display, inherit);
}

/* ------------------------------ metric band ------------------------------ */

.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--u) }
@media (max-width:900px){ .metrics{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .metrics{ grid-template-columns:1fr } }

.metric{
  display:flex; flex-direction:column; gap:6px;
  padding:30px 28px 28px; min-width:0;
  background:var(--surface-lowest); border-radius:var(--r-md);
  box-shadow:var(--lift-1);
}
.metric-n{
  font-family:var(--font-display, inherit);
  font-size:clamp(44px,5.4vw,64px); font-weight:700; letter-spacing:-.045em; line-height:.95;
  font-variant-numeric:tabular-nums;   /* so the count-up doesn't jitter the width */
}
.metric-l{ font-size:15.5px; font-weight:600; line-height:1.35 }
.metric-f{ font-size:13.5px; color:var(--outline); line-height:1.45; margin-top:2px }

/* ------------------------------ calculator ------------------------------ */

.calc{
  margin-top:calc(var(--u)*6);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,56px);
  padding:clamp(28px,4vw,48px);
  border-radius:var(--r-lg); border:1px solid var(--glass-edge);
  background:var(--glass); box-shadow:var(--lift-2);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
@media (max-width:880px){
  .calc{ grid-template-columns:1fr }
  /* Stacked, the payoff goes first — otherwise the number you are dragging
     the sliders to change is off the bottom of the screen while you drag. */
  .calc-out{ order:-1 }
  .calc-in{ padding-top:26px; border-top:1px solid var(--outline-variant) }
}

.calc-in{ display:flex; flex-direction:column; gap:22px; margin:0 }
.field{ display:flex; flex-direction:column; gap:10px; cursor:pointer }
.field-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.field-l{ font-size:14.5px; font-weight:600; color:var(--on-surface-var) }
.field output{
  font-family:var(--font-display, inherit);
  font-size:19px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* One consistent slider across engines — the native chrome differs enough
   between Safari and Chrome to break the composition otherwise. */
.field input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; margin:0; background:none; cursor:grab;
}
.field input[type="range"]:active{ cursor:grabbing }
.field input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:var(--r-full);
  background:linear-gradient(90deg, var(--primary-container) var(--fill,50%), var(--surface-high) var(--fill,50%));
}
.field input[type="range"]::-moz-range-track{
  height:6px; border-radius:var(--r-full); background:var(--surface-high);
}
.field input[type="range"]::-moz-range-progress{
  height:6px; border-radius:var(--r-full); background:var(--primary-container);
}
.field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-8px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--outline-variant);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 16px -6px rgba(0,0,0,.35);
  transition:transform .18s var(--ease);
}
.field input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--outline-variant);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 16px -6px rgba(0,0,0,.35);
}
.field input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.12) }
.field input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.04) }
.field input[type="range"]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--primary-container); outline-offset:3px }

.calc-reset{
  align-self:flex-start; margin-top:2px;
  background:none; border:0; padding:6px 0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--outline);
  border-bottom:1px solid var(--outline-variant);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.calc-reset:hover{ color:var(--on-surface); border-color:var(--on-surface) }

.calc-out{ display:flex; flex-direction:column; min-width:0 }
.calc-cap{
  margin:0; font-size:12.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--outline);
}
.calc-big{
  margin:6px 0 0; display:flex; align-items:baseline; gap:2px;
  font-family:var(--font-display, inherit);
  font-size:clamp(50px,7.4vw,88px); font-weight:700; letter-spacing:-.05em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.calc-big span:first-child{ font-size:.56em; margin-right:.06em; color:var(--outline) }
.calc-year{ margin:10px 0 0; font-size:15px; color:var(--on-surface-var) }
.calc-year span{ font-weight:700; color:var(--on-surface) }

.funnel-bars{ margin-top:30px; display:flex; flex-direction:column; gap:12px }
.fbar{ display:grid; grid-template-columns:104px minmax(0,1fr) 76px; align-items:center; gap:14px }
.fbar-k{ font-size:13.5px; font-weight:600; color:var(--outline) }
.fbar-track{ height:12px; border-radius:var(--r-full); background:var(--surface-high); overflow:hidden }
.fbar-track i{
  display:block; height:100%; width:var(--w,0%); border-radius:var(--r-full);
  background:var(--outline-variant);
  transition:width .7s var(--ease-out);
}
.fbar--win .fbar-track i{ background:var(--primary-container) }
.fbar-v{
  text-align:right; font-size:14.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
@media (max-width:520px){
  .fbar{ grid-template-columns:88px minmax(0,1fr) 64px; gap:10px }
  .fbar-k, .fbar-v{ font-size:12.5px }
}

.calc-note{
  margin:26px 0 0; padding-top:20px; border-top:1px solid var(--outline-variant);
  font-size:13px; line-height:1.55; color:var(--outline);
}

/* ------------------------------ leak ------------------------------ */

.leak{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--u) }
@media (max-width:940px){ .leak{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .leak{ grid-template-columns:1fr } }
.leak > *{ min-width:0 }

.leak-step{ padding:calc(var(--u)*4) calc(var(--u)*3.5); overflow:hidden }
/* oversized ghost numeral — structure you can read at a glance */
.leak-step .n{
  display:block; font-size:52px; font-weight:800; letter-spacing:-.05em; line-height:1;
  color:var(--outline-variant); opacity:.55; margin-bottom:calc(var(--u)*2.5);
}
.leak-step h3{ font-size:18px; font-weight:700; letter-spacing:-.016em; margin-bottom:8px }
.leak-step p{ font-size:15px; color:var(--on-surface-var); line-height:1.55 }

.leak-figure{ margin-top:calc(var(--u)*6) }
.leak-figure svg{ width:100%; height:auto }

.pullquote{
  margin-top:clamp(56px,7vw,96px); padding:clamp(36px,5vw,72px);
  border-radius:var(--r-xl);
  font-size:clamp(24px,3.6vw,44px); line-height:1.16; letter-spacing:-.032em; font-weight:800;
}
.pullquote em{ font-style:normal; color:var(--outline-variant) }

/* ------------------------------ compare ------------------------------ */

.compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--u); align-items:stretch }
@media (max-width:820px){ .compare{ grid-template-columns:1fr } }
.compare > *{ min-width:0 }

.pane{ padding:clamp(28px,3.6vw,44px); display:flex; flex-direction:column; gap:calc(var(--u)*3) }
.pane--dead{ background:var(--surface-c); border-color:transparent; box-shadow:none }
.pane--dead::before{ display:none }
.pane-tag{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--outline) }

.form-mock{ display:grid; gap:10px }
.form-mock i{ display:block; height:46px; border-radius:var(--r-sm); background:rgba(0,0,0,.05) }
.form-mock i:last-child{ width:46%; height:48px; border-radius:var(--r-full); background:rgba(0,0,0,.09) }

.thread{ display:flex; flex-direction:column; gap:10px }
.bubble{ padding:13px 18px; border-radius:var(--r-md); font-size:15px; line-height:1.55; max-width:92% }
.bubble--o{ align-self:flex-start; background:var(--surface-high); border-bottom-left-radius:var(--r-sm) }
.bubble--v{ align-self:flex-end; background:var(--primary-container); color:#fff; border-bottom-right-radius:var(--r-sm) }

/* ------------------------------ split ------------------------------ */

.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(36px,5.5vw,88px); align-items:center }
@media (max-width:940px){ .split{ grid-template-columns:1fr } }
.split--flip .media{ order:-1 }
@media (max-width:940px){ .split--flip .media{ order:0 } }

.checks{ list-style:none; margin:calc(var(--u)*4.5) 0 0; padding:0; display:grid; gap:calc(var(--u)*2.5) }
.checks li{ display:flex; gap:14px; align-items:flex-start; font-size:16px; color:var(--on-surface-var); line-height:1.55 }
.checks svg{ flex:none; margin-top:4px; color:var(--primary-container) }
.checks strong{ color:var(--on-surface); font-weight:700 }

.card-pad{ padding:clamp(26px,3.2vw,38px) }
.qa{ display:grid; gap:10px }
.qa-q,.qa-a{ padding:13px 18px; border-radius:var(--r-md); font-size:15px; line-height:1.55 }
.qa-q{ background:var(--surface-high); justify-self:end; max-width:88%; border-bottom-right-radius:var(--r-sm) }
.qa-a{ background:var(--primary-container); color:#EDEDF0; justify-self:start; max-width:94%; border-bottom-left-radius:var(--r-sm) }

.feed{ list-style:none; margin:0; padding:0; display:grid; gap:calc(var(--u)*3.5) }
.feed li{ position:relative; padding-left:30px; font-size:15px; line-height:1.55; color:var(--on-surface-var) }
.feed li::before{
  content:""; position:absolute; left:3px; top:7px; width:10px; height:10px;
  border-radius:var(--r-full); background:var(--primary-container);
  box-shadow:0 0 0 4px rgba(29,29,31,.08);
}
.feed li::after{ content:""; position:absolute; left:7.5px; top:22px; bottom:-28px; width:1px; background:var(--surface-highest) }
.feed li:last-child::after{ display:none }
.feed b{ display:block; color:var(--on-surface); font-weight:700; font-size:15px; margin-bottom:3px }

/* ------------------------------ steps ------------------------------ */

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--u) }
@media (max-width:880px){ .steps{ grid-template-columns:1fr } }
.steps > *{ min-width:0 }
.step{
  padding:clamp(28px,3.4vw,40px); display:flex; flex-direction:column; gap:calc(var(--u)*1.5);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.step[data-active="true"]{ transform:translateY(-8px); box-shadow:var(--lift-2) }
.step-n{
  width:38px; height:38px; border-radius:var(--r-full); display:grid; place-items:center;
  background:var(--primary-container); color:#fff; font-size:14px; font-weight:700;
  margin-bottom:calc(var(--u)*1.5);
}
.step p{ color:var(--on-surface-var); font-size:15.5px }
.code{
  margin-top:auto; padding:18px 20px; border-radius:var(--r);
  background:var(--primary-container); color:#C9C9D2; overflow-x:auto; max-width:100%;
  font:500 12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre;
}
.code b{ color:#fff; font-weight:600 }

/* ------------------------------ bento ------------------------------ */

/* Not a uniform grid — a composed one. The two statements that carry the
   argument get extra width; the rest fill in around them. */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--u) }
.bento > *{ min-width:0 }
.bento .card{ grid-column:span 2 }
.bento .card--wide{ grid-column:span 3 }
@media (max-width:1000px){ .bento{ grid-template-columns:repeat(2,1fr) } .bento .card,.bento .card--wide{ grid-column:span 1 } }
@media (max-width:640px){ .bento{ grid-template-columns:1fr } .bento .card,.bento .card--wide{ grid-column:span 1 } }

.card{ padding:clamp(26px,3.2vw,38px); transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out) }
.card:hover{ transform:translateY(-4px); box-shadow:var(--lift-2) }
.card h3{ font-size:20px; font-weight:700; letter-spacing:-.018em; margin-bottom:10px }
.card p{ color:var(--on-surface-var); font-size:15.5px; line-height:1.6 }

.icon{
  width:46px; height:46px; border-radius:var(--r); margin-bottom:calc(var(--u)*3);
  display:grid; place-items:center; background:var(--primary-container); color:#fff;
}
.icon svg{ width:20px; height:20px }

/* ------------------------------ cases ------------------------------ */

.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--u) }
@media (max-width:940px){ .cases{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .cases{ grid-template-columns:1fr } }
.cases > *{ min-width:0 }
.case{ padding:calc(var(--u)*3.5); transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out) }
.case:hover{ transform:translateY(-3px); box-shadow:var(--lift-2) }
.case h3{ font-size:18px; font-weight:700; letter-spacing:-.016em; margin-bottom:8px }
.case p{ font-size:15px; color:var(--on-surface-var); line-height:1.55 }
.case q{ display:block; margin-top:14px; font-size:14.5px; color:var(--outline); font-style:italic }

/* ------------------------------ accordion ------------------------------ */

.acc{ display:grid }
.acc-item{ border-bottom:1px solid var(--outline-variant) }
.acc-item:first-child{ border-top:1px solid var(--outline-variant) }
.acc-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; min-height:78px;
  padding:28px 0; display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-size:19px; font-weight:700; letter-spacing:-.018em;
}
.acc-q svg{ flex:none; color:var(--outline); transition:transform .42s var(--ease) }
.acc-item[data-open="true"] .acc-q svg{ transform:rotate(45deg) }
.acc-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease) }
.acc-item[data-open="true"] .acc-a{ grid-template-rows:1fr }
.acc-a > div{ overflow:hidden }
.acc-a p{ padding-bottom:30px; color:var(--on-surface-var); font-size:16.5px; line-height:1.65; max-width:66ch }

/* ------------------------------ proof ------------------------------ */

.tag{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--r-full);
  background:var(--surface-high); color:var(--outline);
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--u) }
@media (max-width:940px){ .slots{ grid-template-columns:1fr } }
.slot{
  border:1px dashed var(--outline-variant); border-radius:var(--r-lg); padding:calc(var(--u)*4);
  min-height:210px; display:flex; flex-direction:column; gap:calc(var(--u)*3);
}
.slot p{ color:var(--outline); font-size:15px; line-height:1.55 }
.slot footer{ margin-top:auto; display:flex; align-items:center; gap:12px }
.av{ width:40px; height:40px; border-radius:var(--r-full); background:var(--surface-high); flex:none }
.bars{ display:grid; gap:6px }
.bar{ height:8px; border-radius:var(--r-sm); background:var(--surface-high) }

/* ------------------------------ final CTA card ------------------------------ */

.final-outer{ padding-inline:clamp(12px,3vw,28px) }
.final{
  position:relative; overflow:hidden; text-align:center;
  max-width:calc(var(--container) + 80px); margin-inline:auto;
  padding:clamp(64px,9vw,132px) var(--edge);
  border-radius:var(--r-xl);
  background:radial-gradient(120% 90% at 50% 0%, #17171A 0%, #0B0B0D 46%, #050506 100%);
  box-shadow:var(--lift-3), inset 0 1px 0 rgba(255,255,255,.06);
}
/* soft vignette, as in the reference — keeps the corners from going flat */
.final::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(100% 70% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}
.final > *{ position:relative; z-index:1 }
.final h2{ max-width:16ch; margin-inline:auto }
.final .sub{ max-width:48ch; margin-inline:auto }   /* .center targets descendants, not self */

.assur{
  list-style:none; margin:calc(var(--u)*5) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 34px;
  font-size:13.5px; font-weight:600; color:var(--on-primary-cont);
}
.assur li{ display:flex; align-items:center; gap:9px }
.assur svg{ color:#fff; flex:none }

/* ------------------------------ footer ------------------------------ */

.footer{ padding-block:calc(var(--u)*8) calc(var(--u)*5); border-top:1px solid var(--outline-variant); margin-top:var(--section) }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:calc(var(--u)*4) calc(var(--u)*9); justify-content:space-between }
.fcol{ display:grid; gap:11px; align-content:start; font-size:15px; color:var(--on-surface-var) }
.fcol strong{ color:var(--on-surface); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.fcol a:hover{ color:var(--on-surface) }
.flegal{ margin-top:calc(var(--u)*6); font-size:13px; color:var(--outline) }

/* ------------------------------ dock + sticky bar ------------------------------ */

.dock{
  position:fixed; z-index:80; left:50%; bottom:16px; transform:translate(-50%,24px);
  opacity:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.dock[data-show="true"]{ opacity:1; transform:translate(-50%,0); pointer-events:auto }
.dock-row{ position:relative; display:flex; align-items:center }

/* ---------------------------------------------------------------------
   THE DOCKED CONVERSATION

   Not a second widget — the *same* #convo element, re-parented in here when
   the hero leaves the screen. The session, the transcript and the open
   microphone all belong to the element and its one OraVoice, so scrolling
   mid-sentence costs nothing.
--------------------------------------------------------------------- */
.dock-panel{
  width:min(94vw, 420px);
  max-height:0; overflow:hidden; opacity:0;
  border-radius:var(--r-lg);
  background:var(--glass-strong); border:1px solid var(--glass-edge);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--lift-3);
  transform:translateY(10px) scale(.985); transform-origin:bottom center;
  transition:max-height .5s var(--ease-out), opacity .38s var(--ease),
             transform .5s var(--ease-out);
}
.dock-panel[data-open="true"]{
  max-height:min(64vh, 520px); opacity:1; transform:none;
}
.dock-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 6px 20px;
}
.dock-panel-title{ font-weight:700; font-size:14px; letter-spacing:-.01em }
.dock-panel-close{
  width:30px; height:30px; display:grid; place-items:center; flex:none;
  border:0; border-radius:var(--r-full); cursor:pointer;
  background:var(--surface-high); color:var(--on-surface-var);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.dock-panel-close:hover{ background:var(--primary-container); color:#fff }
.dock-panel-close svg{ width:15px; height:15px }

/* #convo, once it lives in the panel */
.dock-panel .convo{ max-width:none; margin-top:0; padding:0 14px 14px; gap:10px }
.dock-panel .convo-log[data-started="true"]{
  max-height:min(40vh, 300px); padding:14px; background:none;
  border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.dock-panel .msg{ max-width:92%; font-size:14.5px; padding:10px 14px }
/* four wrapped chips would be four lines in a 420px panel — one swipeable
   row instead, and the scrollbar stays out of the way */
.dock-panel .chips{
  flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
  padding-bottom:2px; scrollbar-width:none;
}
.dock-panel .chips::-webkit-scrollbar{ display:none }
.dock-panel .chip{ flex:none; padding:8px 14px; font-size:12.5px }
.dock-panel .ask-row{ max-width:none }
.dock-panel .ask-row input{ height:48px; padding:0 18px; font-size:14.5px }
.dock-panel .ask-row button{ height:48px; padding:0 20px; font-size:12.5px }
/* The old hover label sat on top of the orb and hid the one thing worth
   looking at. This sits beside her and points, the way a keyboard hint does —
   and it retires on its own so it can never become clutter. */
.callout{
  position:absolute; right:calc(100% + 14px); top:50%;
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  padding:9px 15px 9px 10px; border-radius:var(--r-full);
  background:var(--glass-strong); border:1px solid var(--glass-edge);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--lift-2);
  font-size:13.5px; font-weight:700; letter-spacing:-.008em; color:var(--on-surface);
  opacity:0; transform:translate(10px,-50%) scale(.94); transform-origin:right center;
  pointer-events:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.callout[data-show="true"]{ opacity:1; transform:translate(0,-50%) scale(1) }

/* the little arrow, aimed at the orb */
.callout::after{
  content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left-color:var(--glass-strong);
}

.callout-key{
  display:grid; place-items:center; width:22px; height:22px; flex:none;
  border-radius:7px; background:var(--primary-container); color:#fff;
}
.callout-key svg{ width:13px; height:13px }

/* a slow breath so the eye catches it without it ever jumping about */
.callout[data-show="true"] .callout-key{ animation:calloutTap 2.4s var(--ease) infinite }
@keyframes calloutTap{
  0%,72%,100%{ transform:translateY(0) }
  80%{ transform:translateY(-2px) }
  88%{ transform:translateY(0) }
}

@media (max-width:640px){
  /* no room beside the orb on a phone — sit above it instead */
  .callout{ right:auto; left:50%; top:auto; bottom:calc(100% + 6px);
    transform:translate(-50%,8px) scale(.94); transform-origin:center bottom }
  .callout[data-show="true"]{ transform:translate(-50%,0) scale(1) }
  .callout::after{ left:50%; top:100%; transform:translateX(-50%);
    border-left-color:transparent; border-top-color:var(--glass-strong) }
}
@media (prefers-reduced-motion: reduce){
  .callout[data-show="true"] .callout-key{ animation:none }
}


/* =========================================================================
   MOTION — transform/opacity only, so it all stays on the compositor.
   ========================================================================= */

.reveal-armed [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.reveal-armed [data-reveal].is-in{ opacity:1; transform:none }

.reveal-armed .words .w{
  display:inline-block; opacity:0; transform:translateY(.44em);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0) * 48ms);
}
.reveal-armed .words.is-in .w{ opacity:1; transform:none }

.reveal-armed .funnel rect{ transform-origin:left center; transform:scaleX(0); transition:transform .95s var(--ease-out) }
.reveal-armed .funnel.is-in rect{ transform:scaleX(1) }
.reveal-armed .funnel rect:nth-child(2){ transition-delay:.10s }
.reveal-armed .funnel rect:nth-child(3){ transition-delay:.20s }
.reveal-armed .funnel rect:nth-child(4){ transition-delay:.30s }

.thread .bubble{ opacity:0; transform:translateY(10px) scale(.985); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out) }
.thread[data-play="true"] .bubble{ opacity:1; transform:none }
.thread[data-play="true"] .bubble:nth-child(1){ transition-delay:.04s }
.thread[data-play="true"] .bubble:nth-child(2){ transition-delay:.46s }
.thread[data-play="true"] .bubble:nth-child(3){ transition-delay:.92s }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important }
  .marquee-track{ animation:none }
  .thread .bubble{ opacity:1 !important; transform:none !important }
  .reveal-armed .funnel rect{ transform:none !important }
  .reveal-armed .words .w{ opacity:1 !important; transform:none !important }
}

/* ------------------------------ small screens ------------------------------ */

@media (max-width:620px){
  .btn{ width:100%; min-height:50px }
  .btn-row{ width:100%; flex-direction:column }
  .nav .btn{ width:auto }
  .nav .btn-row{ width:auto; flex-direction:row }
  .ask-row input, .ask-row button{ height:54px }
  .ask-row button{ padding:0 22px }
  .convo-log[data-started="true"]{ max-height:260px; padding:18px }
  .leak-step .n{ font-size:42px }
  /* the docked panel plus the orb has to leave the page visible behind it */
  .dock-panel{ max-height:min(52vh,430px) }
  .dock-panel .convo-log[data-started="true"]{ max-height:min(32vh,240px) }
}

/* =========================================================================
   ACTIVATION SWEEP
   Two glowing lines leave from either side of the orb, run to the screen
   edges, up, and meet at top centre — then fade. Fires once when Ora wakes,
   the way Siri frames the screen on "hey Siri". Not a loop, not a loader:
   a single confirmation that she is listening.
   ========================================================================= */

.sweep{
  position:fixed; inset:0; z-index:95; pointer-events:none;
  opacity:0; transition:opacity .45s var(--ease);
}
.sweep[data-play="true"]{ opacity:1 }
.sweep svg{ width:100%; height:100%; display:block }

.sweep path{
  fill:none;
  stroke:url(#sweepGrad);
  /* Was a 1.6px hairline with a modest bloom, which on a bright page simply
     did not register. A page-wide gesture has to survive being looked at from
     a metre away: real weight in the stroke, and a bloom stack wide enough to
     tint the air around it. */
  stroke-width:4.5;
  stroke-linecap:round;
  /* dasharray + offset are set in JS from the real path length */
  filter:drop-shadow(0 0 3px rgba(255,255,255,.75))
         drop-shadow(0 0 8px rgba(236,37,105,.85))
         drop-shadow(0 0 20px rgba(140,60,255,.70))
         drop-shadow(0 0 44px rgba(37,120,241,.55))
         drop-shadow(0 0 90px rgba(0,218,150,.36));
}
/* the white core, drawn on top of its own colour */
.sweep .sweep-core{
  stroke:url(#sweepCore);
  stroke-width:1.5;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.85));
}
.sweep[data-play="true"] path{
  animation:sweepDraw 1.05s cubic-bezier(.30,.66,.22,1) forwards;
}
@keyframes sweepDraw{ to { stroke-dashoffset:0 } }

/* A persistent lit border was tried here and removed on 2026-07-31: a glow
   that never goes away stops reading as a state and starts reading as a frame
   around the page. The one-shot sweep above is the whole activation gesture. */

@media (prefers-reduced-motion: reduce){
  .sweep{ display:none }
}

/* =========================================================================
   Demo bench — model picker + live cost meter.

   Instrumentation, not marketing. It sits in the page rather than a floating
   panel so it moves with the orb into the dock, and it stays strictly
   monochrome: the orb is the only colour on this page and a green money
   readout would break that. Numbers are tabular so they stop jittering while
   they count.
   ========================================================================= */
.bench{
  width:100%; max-width:560px; margin:calc(var(--u) * 2) auto 0;
  padding:calc(var(--u) * 2);
  background:var(--glass); border:1px solid var(--glass-edge);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-radius:var(--r-md); box-shadow:var(--lift-1);
  text-align:left;
}
.bench[hidden]{ display:none }

.bench-row{ display:flex; align-items:center; gap:var(--u); flex-wrap:wrap }

.bench-label{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--outline);
}

.bench-select{
  flex:1 1 240px; min-width:0;
  font:inherit; font-size:14px; font-weight:600; color:var(--on-surface);
  padding:9px 12px; border-radius:var(--r-sm);
  background:var(--surface-lowest); border:1px solid var(--outline-variant);
  cursor:pointer;
}
.bench-select:disabled{ cursor:not-allowed; opacity:.5 }
.bench-note{ flex:1 1 100%; font-size:12.5px; color:var(--outline) }

.bench-meter{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--u); margin:calc(var(--u) * 1.75) 0 0;
  padding-top:calc(var(--u) * 1.5); border-top:1px solid var(--outline-variant);
}
.bench-meter dt{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--outline);
}
.bench-meter dd{
  margin:3px 0 0; font-size:16px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--on-surface);
}
/* A finished call is the number worth reading, so it gets the emphasis and a
   running one is deliberately quieter. */
.bench-meter[data-state="running"] dd{ color:var(--on-surface-var) }
.bench-meter[data-state="done"]{ border-top-color:var(--on-surface) }

.bench-foot{ margin:calc(var(--u) * 1.25) 0 0; font-size:12px; color:var(--outline) }

@media (max-width:560px){
  .bench-meter{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:calc(var(--u) * 1.5) }
}