/* =========================================================
   Saccade — site-v7.css
   "Relocate + breathe" pass. Loaded LAST.

   1. The hero loses its floating product cutout (it crowded
      the headline + gaze trace on wide screens). The hero is
      now pure type, so it reads calmer.
   2. That worn-headset shot moves into "How it works" as a
      wide, cinematic lead figure on its own emerald stage —
      the human using the product, with room around it.
   3. A little extra vertical air on the hero and the section
      rhythm.
   ========================================================= */

/* ---------- HERO · drop the cutout, calm the field ---------- */
.hero .hero-product{display:none !important;}

/* the gaze canvas was fighting the product image for the right
   half; soften it now that the type stands alone */
.hero .saccade-canvas{opacity:.42;}

.hero-inner{gap:44px;max-width:1180px;}
.hero-inner h1{max-width:16ch;}
.hero-sub-tight{max-width:52ch;}
.hero-ctas{margin-top:6px;}
.hero-bottom{margin-top:120px;}

/* ---------- HOW · new lead figure (relocated worn shot) ---------- */
.how-figure{
  margin:0 0 104px;
  position:relative;
}
.how-figure .hf-stage{
  position:relative;
  overflow:hidden;
  aspect-ratio:21 / 9;
  border:1px solid var(--rule-strong);
  background:
    radial-gradient(130% 150% at 72% 26%, #14654A 0%, #0C4631 52%, #06281D 100%);
  display:flex;
  align-items:flex-end;
}
/* faint dotted texture to echo the hero backdrop */
.how-figure .hf-stage::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(237,243,237,.10) 1px, transparent 1.4px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 80% 80% at 30% 50%, black 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 30% 50%, black 0%, transparent 70%);
  opacity:.5;
  pointer-events:none;
}
.how-figure .hf-img{
  position:absolute;
  right:-1%;
  bottom:-7%;
  height:128%;
  width:auto;
  max-width:none;
  object-fit:contain;
  object-position:right bottom;
  pointer-events:none;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.42));
}
.how-figure .hf-cap{
  position:relative;
  z-index:2;
  padding:48px 52px;
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:24ch;
}
.how-figure .hf-tag{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--mint);
  display:inline-flex;align-items:center;gap:10px;
}
.how-figure .hf-tag .dot{
  width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 4px rgba(143,211,171,.16);
}
.how-figure .hf-line{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(24px,2.5vw,34px);
  line-height:1.16;letter-spacing:-0.012em;
  color:var(--cream);
  text-wrap:balance;
}
.how-figure .hf-line strong{color:var(--mint-bright);font-weight:600;}

@media (max-width:920px){
  .how-figure{margin-bottom:64px;}
  .how-figure .hf-stage{aspect-ratio:4 / 5;align-items:flex-start;}
  .how-figure .hf-img{
    height:auto;width:104%;right:-12%;bottom:auto;top:34%;
  }
  .how-figure .hf-cap{padding:34px 30px;max-width:100%;}
  .hero-bottom{margin-top:72px;}
}