/* ============================================================
   AccuMold — v2
   Two colours. Enormous type. One idea per screen.
   Blue is a field, not an accent. White is the other field.
   ============================================================ */

:root{
  --blue:      #0572E9;   /* the brand blue */
  --blue-deep: #0459B8;
  --blue-lift: #2E8CF5;
  --blue-pale: #E4F0FE;
  --white:     #FFFFFF;
  --ink:       #0A1020;
  --ink-2:     #55627A;
  --ink-3:     #94A0B5;
  --green:     #22B473;   /* safe. only ever safe. */
  --amber:     #E4A854;
  --red:       #E5484D;
  --line:      rgba(10,16,32,.10);
  --line-inv:  rgba(255,255,255,.22);

  --gut: clamp(22px, 6vw, 90px);
  --maxw: 1240px;
  --nav-h: 74px;

  --ease: cubic-bezier(.16,1,.3,1);
  --f: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fd: "Inter Tight", "Inter", -apple-system, sans-serif;
  --fm: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--f); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }
::selection{ background:var(--blue); color:#fff; }

/* ---------- Type ---------- */
.d1{ font-family:var(--fd); font-size:clamp(3.1rem, 10.4vw, 9.6rem); line-height:.85; letter-spacing:-.05em; font-weight:800; margin:0; }
.d2{ font-family:var(--fd); font-size:clamp(2.3rem, 6.4vw, 5.4rem);  line-height:.94; letter-spacing:-.042em; font-weight:800; margin:0; }
.d3{ font-family:var(--fd); font-size:clamp(1.8rem, 3.6vw, 2.9rem);  line-height:1.04; letter-spacing:-.035em; font-weight:700; margin:0; }
.t1{ font-size:clamp(1rem,1.25vw,1.16rem); line-height:1.62; color:var(--ink-2); margin:0; }
.kicker{
  font-family:var(--fm); font-size:.6rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--blue); margin:0 0 22px; font-weight:500;
}
.num{ font-family:var(--fm); font-size:.66rem; letter-spacing:.2em; color:var(--ink-3); }

/* ---------- Panels ---------- */
.panel{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:calc(var(--nav-h) + 6vh) var(--gut) 10vh; overflow:hidden;
}
.panel-auto{ min-height:0; padding-block:clamp(80px,14vh,180px); }
.inner{ width:100%; max-width:min(var(--maxw),100%); min-width:0; margin-inline:auto; }
.mid{ text-align:center; }
.mid .kicker{ display:block; }
.narrow{ max-width:24ch; margin-inline:auto; }
.narrow-w{ max-width:46ch; margin-inline:auto; }

/* blue field */
.blue{ background:var(--blue); color:#fff; }
.blue .t1{ color:rgba(255,255,255,.78); }
.blue .kicker{ color:rgba(255,255,255,.62); }
.blue .num{ color:rgba(255,255,255,.5); }

/* ---------- Buttons ---------- */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 32px; border-radius:100px; font-weight:600; font-size:1rem;
  letter-spacing:-.01em; background:var(--blue); color:#fff;
  transition:transform .35s var(--ease), background .25s, box-shadow .35s var(--ease);
}
.b:hover{ transform:translateY(-2px); background:var(--blue-deep); }
.b-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.b-ghost:hover{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--blue); color:var(--blue); }
.blue .b{ background:#fff; color:var(--blue); }
.blue .b:hover{ background:#fff; }
.blue .b-ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px var(--line-inv); }
.blue .b-ghost:hover{ box-shadow:inset 0 0 0 1.5px #fff; color:#fff; }
.row{ display:flex; gap:14px; flex-wrap:wrap; }
.row.mid{ justify-content:center; }

/* ---------- Nav ---------- */
/* The nav is fixed, so it must be opaque. Without a background every
   section's text scrolled visibly underneath it. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--white); border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.nav[data-on="blue"]{ background:var(--blue); }
.nav.scrolled{ border-bottom-color:var(--line); }
.nav[data-on="blue"].scrolled{ border-bottom-color:rgba(255,255,255,.2); }
.nav-in{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:30px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand img{ height:26px; width:auto; }
.brand img.word{ height:15px; }
.links{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); }
.links a{
  font-size:.9rem; font-weight:500; color:var(--ink-2); transition:color .25s; white-space:nowrap;
}
.links a:hover{ color:var(--ink); }
.nav[data-on="blue"] .links a{ color:rgba(255,255,255,.72); }
.nav[data-on="blue"] .links a:hover{ color:#fff; }
.nav[data-on="blue"] .brand img{ filter:brightness(0) invert(1); }
.nav[data-on="blue"] .burger i{ background:#fff; }
/* `.links a` out-specifies `.b`, so the CTA label has to be set here or it
   inherits the muted nav-link colour and disappears into the blue pill. */
.nav .b{ height:42px; padding:0 22px; font-size:.88rem; }
.nav .links a.b{ color:#fff; font-weight:600; }
.nav .links a.b:hover{ color:#fff; }
.nav[data-on="blue"] .links a.b{ background:#fff; color:var(--blue); }
.nav[data-on="blue"] .links a.b:hover{ background:#fff; color:var(--blue-deep); }

.burger{ display:none; width:40px; height:40px; flex-direction:column; justify-content:center; align-items:center; gap:6px; }
.burger i{ width:20px; height:1.6px; background:var(--ink); transition:.3s var(--ease); }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7.6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7.6px) rotate(-45deg); }

@media(max-width:900px){
  .burger{ display:flex; }
  .links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); padding:10px var(--gut) 28px; border-bottom:1px solid var(--line);
    transform:translateY(-10px); opacity:0; pointer-events:none; transition:.3s var(--ease);
  }
  .nav[data-on="blue"] .links{ background:var(--blue); border-bottom-color:var(--line-inv); }
  .links.open{ transform:none; opacity:1; pointer-events:auto; }
  .links a{ padding:16px 0; font-size:1.1rem; border-bottom:1px solid var(--line); }
  .nav[data-on="blue"] .links a{ border-bottom-color:var(--line-inv); }
  .links .b{ margin-top:20px; height:52px; }
}

/* ---------- HERO SCANNER ---------- */
/* The hero scrolls away like any other panel. Pinning it made it show
   through everything below, which is the opposite of a clean break. */
.hero{ background:var(--white); }
.panel{ background:var(--white); }
.panel.blue{ background:var(--blue); }
.hero + *{ box-shadow:0 -1px 0 var(--line); }
.hero-cue{
  position:absolute; z-index:4; left:50%; bottom:clamp(74px,10vh,104px); transform:translateX(-50%);
  width:22px; height:36px; border:1.5px solid var(--line); border-radius:100px;
}
.hero-cue::after{
  content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:3px;
  background:var(--blue); transform:translateX(-50%); animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{ 0%{ opacity:0; transform:translate(-50%,0) } 30%{opacity:1} 70%{ opacity:1; transform:translate(-50%,14px) } 100%{ opacity:0; transform:translate(-50%,14px) } }
@media(max-width:820px){ .hero-cue{ display:none } }
.hero-field{ position:absolute; inset:0; z-index:0; }
.hero-field canvas{ width:100%; height:100%; }
.hero-in{ position:relative; z-index:2; text-align:center; pointer-events:none; }
.hero-in .b{ pointer-events:auto; }
.hero h1{ margin:0 0 26px; }
.hero h1 em{ font-style:normal; color:var(--blue); }
.hero .t1{ margin:0 auto 38px; max-width:30ch; }

/* The hero reticle is the app's detection frame, not an invented lens:
   square bounding box, corner brackets, circular target, green centre dot. */
.lens{
  position:absolute; z-index:1; left:50%; top:50%; width:var(--d,300px); height:var(--d,300px);
  transform:translate(-50%,-50%); pointer-events:none;
  border:1.5px solid rgba(5,114,233,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.7), 0 0 60px rgba(30,111,184,.14);
  transition:opacity .5s;
}
.lens b{ position:absolute; width:18px; height:18px; border:2.5px solid #0572E9; }
.lens b:nth-child(1){ top:-2px; left:-2px;  border-right:0; border-bottom:0; }
.lens b:nth-child(2){ top:-2px; right:-2px; border-left:0;  border-bottom:0; }
.lens b:nth-child(3){ bottom:-2px; left:-2px;  border-right:0; border-top:0; }
.lens b:nth-child(4){ bottom:-2px; right:-2px; border-left:0; border-top:0; }
.lens::before{                       /* circular target */
  content:""; position:absolute; left:50%; top:50%; width:46%; aspect-ratio:1;
  transform:translate(-50%,-50%); border:1.5px solid rgba(5,114,233,.7); border-radius:50%;
}
.lens::after{                        /* centre dot */
  content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
  background:#22B473; transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(34,180,115,.25);
}
.lens-label{
  position:absolute; left:50%; top:-30px; transform:translateX(-50%);
  font-family:var(--fm); font-size:.54rem; letter-spacing:.1em; text-transform:uppercase;
  color:#0572E9; white-space:nowrap;
}
.lens-label[data-hit="1"]{ color:#fff; background:#E5484D; padding:4px 10px; border-radius:6px; }

/* readout under the lens */
.readout{
  position:absolute; z-index:3; left:50%; bottom:clamp(26px,6vh,54px); transform:translateX(-50%);
  display:flex; gap:26px; align-items:center; font-family:var(--fm);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}
.readout b{ color:var(--ink); font-weight:500; }
.readout .sep{ width:1px; height:12px; background:var(--line); }
.readout .lv[data-lv="clear"]{ color:var(--green); }
.readout .lv[data-lv="found"]{ color:var(--red); }
@media(max-width:640px){ .readout{ font-size:.55rem; gap:14px; } }

/* A survey pin sits on the page permanently — a small mark saying "there is
   something here". Scanning it is what turns it into a finding. */
.tag{ position:absolute; z-index:3; transform:translate(-50%,-50%); pointer-events:none; }
.tag::before,.tag::after{
  content:""; position:absolute; left:50%; top:50%; background:rgba(5,114,233,.45);
  transition:background .35s var(--ease);
}
.tag::before{ width:13px; height:1px; transform:translate(-50%,-50%); }
.tag::after{ width:1px; height:13px; transform:translate(-50%,-50%); }
.tag.on::before,.tag.on::after{ background:var(--blue); }

.tag i, .tag span{ opacity:0; transition:opacity .4s var(--ease); }
.tag.on i, .tag.on span{ opacity:1; }
.tag i{
  display:block; width:var(--w,140px); height:var(--h,110px);
  border:1px solid var(--blue); transform:translate(-50%,-50%);
  position:absolute; left:50%; top:50%;
}
.tag span{
  position:absolute; left:50%; top:50%; transform:translate(-50%,calc(-50% - var(--h,110px)/2 - 16px));
  font-family:var(--fm); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--blue); color:#fff; padding:4px 9px; white-space:nowrap;
}
@media(max-width:820px){ .tag{ display:none; } }

/* ---------- Statement lines ---------- */
.lines{ list-style:none; margin:0; padding:0; }
.lines li{
  font-family:var(--fd);
  font-size:clamp(1.35rem,2.9vw,2.3rem); line-height:1.28; letter-spacing:-.032em; font-weight:700;
  padding:clamp(18px,2.4vw,30px) 0; border-top:1px solid var(--line-inv);
  display:flex; align-items:baseline; gap:clamp(14px,2.4vw,34px);
}
.lines li:last-child{ border-bottom:1px solid var(--line-inv); }
.lines .n{ font-family:var(--fm); font-size:.62rem; letter-spacing:.2em; opacity:.55; flex:none; }
@media(max-width:600px){ .lines li{ display:block } .lines .n{ display:block; margin-bottom:10px } }

/* ---------- Steps: device centred, giant numeral behind ---------- */
.steps{ position:relative; display:flex; flex-direction:column; align-items:center; width:100%; }
.steps-figure{ position:relative; display:grid; place-items:center; width:100%; }
.steps-copy{ width:100%; }
.ghost{
  position:absolute; z-index:0; inset:0; display:grid; place-items:center;
  font-size:min(30vw,22rem); font-weight:800; letter-spacing:-.06em; line-height:.8;
  color:var(--blue-pale); user-select:none; pointer-events:none;
}
.blue .ghost{ color:rgba(255,255,255,.10); }
.steps-copy{ margin-top:clamp(18px,2.6vh,32px); text-align:center; position:relative; z-index:2; min-height:7.4em; }
.step{ position:absolute; inset:0; visibility:hidden; }
.step.on{ visibility:visible; animation:stepIn .5s var(--ease); }
@keyframes stepIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.step h3{ font-family:var(--fd); font-size:clamp(1.6rem,3vw,2.35rem); letter-spacing:-.04em; line-height:1; margin:0 0 14px; font-weight:700; }
.step p{ margin:0 auto; max-width:40ch; font-size:clamp(.98rem,1.15vw,1.08rem); line-height:1.6; color:var(--ink-2); }
.blue .step p{ color:rgba(255,255,255,.78); }
.dots{ display:flex; gap:8px; justify-content:center; margin-top:clamp(16px,2.4vh,28px); }
.dots button{ width:34px; height:3px; border-radius:3px; background:var(--line); transition:.3s; }
.blue .dots button{ background:rgba(255,255,255,.25); }
.dots button[aria-current="true"]{ background:var(--blue); width:52px; }
.blue .dots button[aria-current="true"]{ background:#fff; }

/* ---------- Phone ---------- */
.phone{
  position:relative; z-index:1; width:min(212px,46vw); padding:2.1%;
  border-radius:15%/7.1%;
  background:linear-gradient(152deg,#454A55 0%,#0D1016 26%,#0D1016 72%,#3A3F49 100%);
  box-shadow:0 44px 86px -26px rgba(10,20,50,.44), 0 5px 16px rgba(10,20,50,.16),
             inset 0 0 0 1.5px rgba(255,255,255,.12);
}
/* dynamic island */
.phone::after{
  content:""; position:absolute; z-index:4; top:3.1%; left:50%; transform:translateX(-50%);
  width:30%; height:2.15%; border-radius:100px; background:#05070B;
}
/* side rails */
.phone i.btn-l,.phone i.btn-r{ position:absolute; width:1.6%; border-radius:2px; background:#2B303A; }
.phone i.btn-l{ left:-1.1%; top:20%;  height:12.4%; }
.phone i.btn-r{ right:-1.1%; top:24%; height:9.2%; }
.phone-s{
  position:relative; width:100%; aspect-ratio:1179/2556;
  border-radius:12.6%/5.9%; overflow:hidden; background:#F2F5F9;
}
.phone-s img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; visibility:hidden; }
.steps-figure.drag{ cursor:grab; }
.steps-figure.drag:active{ cursor:grabbing; }
.phone-s img.on{ z-index:2; visibility:visible; animation:stepIn .45s var(--ease); }

/* ---------- Big centred figure ---------- */
.figure{ width:min(420px,84vw); margin-inline:auto; border-radius:20px; overflow:hidden; }
.figure img{ width:100%; }

/* ---------- Split (used sparingly) ---------- */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; }
@media(max-width:860px){ .two{ grid-template-columns:1fr; text-align:center; } .two .narrow-w{ margin-inline:auto } }

/* ---------- Price ---------- */
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-inv); border-block:1px solid var(--line-inv); }
@media(max-width:860px){ .tiers{ grid-template-columns:1fr 1fr } }
@media(max-width:520px){ .tiers{ grid-template-columns:1fr } }
.tier{
  background:var(--blue); padding:clamp(26px,3vw,40px) clamp(18px,2vw,28px); text-align:center;
  transition:background .3s var(--ease);
}
/* the same gesture as the consultations cards, inverted for the blue field */
.tier:hover{ background:rgba(255,255,255,.12); }
.tier .amt{ font-family:var(--fd); font-size:clamp(2.1rem,3.6vw,3rem); font-weight:800; letter-spacing:-.045em; line-height:1; margin:14px 0 8px; }
.tier .amt sup{ font-size:.4em; top:-.8em; font-weight:600; }
.tier .lb{ font-family:var(--fm); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; opacity:.62; }
.tier p{ margin:14px 0 0; font-size:.9rem; color:rgba(255,255,255,.72); line-height:1.45; }

/* ---------- Stores ---------- */
.stores{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.store{
  display:flex; align-items:center; gap:11px; height:56px; padding:0 24px; border-radius:100px;
  background:var(--ink); color:#fff; transition:transform .3s var(--ease), opacity .3s;
}
.blue .store{ background:#fff; color:var(--ink); }
.store:hover{ transform:translateY(-2px); }
.store.soon{ opacity:.42; pointer-events:none; }
.store span{ display:block; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; opacity:.65; line-height:1.3; }
.store strong{ display:block; font-size:.98rem; font-weight:600; letter-spacing:-.02em; line-height:1.2; }

/* ---------- the market panel, two states in turn ----------
   Both headlines occupy the same grid cell, so the block is already as tall
   as the taller line and nothing below it moves when they swap. */
.cyc-lines{ display:grid; }
.cyc-lines > span{
  grid-area:1 / 1;
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.cyc-lines > span.on{ opacity:1; transform:none; }

.cyc-foot{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px,1.6vw,20px); flex-wrap:wrap;
  margin-top:clamp(30px,4.5vh,50px);
}
.cyc-dots{ display:flex; gap:7px; }
.cyc-dots i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.34); transition:background .4s, width .4s var(--ease);
}
.cyc-dots i.on{ background:#fff; width:18px; border-radius:100px; }
.cyc-src{ margin:0; color:rgba(255,255,255,.55); }

@media(prefers-reduced-motion:reduce){
  .cyc-lines > span{ transition:none; }
}

/* ---------- Reveal ---------- */
[data-r]{ opacity:0; transform:translateY(20px); }
[data-r].in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-r][data-d="1"].in{ transition-delay:.1s } [data-r][data-d="2"].in{ transition-delay:.2s }
[data-r][data-d="3"].in{ transition-delay:.3s } [data-r][data-d="4"].in{ transition-delay:.4s }

/* ---------- Footer ---------- */
.foot{ background:var(--ink); color:#fff; padding:clamp(56px,8vh,88px) var(--gut) 34px; }
.foot-in{ max-width:var(--maxw); margin-inline:auto; }
.foot-top{ display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
.foot a{ color:rgba(255,255,255,.6); transition:color .25s; }
.foot a:hover{ color:#fff; }
.foot-nav{ display:flex; gap:clamp(18px,3vw,42px); flex-wrap:wrap; font-size:.92rem; }
.foot-base{
  margin-top:clamp(34px,6vh,60px); padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between;
  font-family:var(--fm); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4);
}
.socials{ display:flex; gap:10px; }
.socials a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); }
.socials a:hover{ background:#fff; color:var(--ink); }
.socials svg{ width:16px; height:16px; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-r]{ opacity:1; transform:none; }
}

/* ============================================================
   Sub-page components
   ============================================================ */

/* ---------- Plans ---------- */
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); align-items:stretch; }
@media(max-width:1000px){ .plans{ grid-template-columns:1fr 1fr; } }
/* ---------- Prices, driven by the scrollbar ----------
   Below 900px the row is wider than the screen. Rather than a separate swipe
   gesture, the stage is made tall, the row pins inside it, and scrolling down
   walks the cards sideways. When they run out the page carries on down. JS
   sets the stage height from the real overflow, so this is inert wherever the
   row already fits — desktop included. */
/* .panel sets overflow:hidden, which kills position:sticky inside it: the
   panel becomes the sticky element's scroll container and never scrolls. This
   section has no bleeding decoration to clip. */
.panel-flow{ overflow:visible; }
.plans-hint{ display:none; text-align:center; margin-top:22px; }
.plans-hint .ph-rail{
  display:block; width:120px; height:2px; margin:0 auto 12px;
  background:var(--line); border-radius:2px; overflow:hidden;
}
.plans-hint .ph-rail i{ display:block; height:100%; width:0; background:var(--blue); }

@media(max-width:900px){
  .plans-stick{ overflow:hidden; }
  .plans{
    display:flex; gap:14px; width:max-content; align-items:stretch;
    will-change:transform;
  }
  .plan{ flex:0 0 min(300px,76vw); }
  .plans-hint{ display:block; }
}
/* no JS, or motion turned down: it stays a plain swipe rather than a stuck page */
@media(max-width:900px){
  html:not(.hs) .plans{ width:auto; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  html:not(.hs) .plans::-webkit-scrollbar{ display:none }
  html:not(.hs) .plan{ scroll-snap-align:center; }
}
@media(prefers-reduced-motion:reduce){
  .plans-stage{ height:auto !important; }
  .plans-stick{ position:static !important; height:auto !important; }
  .plans{ transform:none !important; overflow-x:auto; }
}
.plan{
  display:flex; flex-direction:column; padding:clamp(24px,2.4vw,34px);
  border:1px solid var(--line); border-radius:20px; background:var(--white);
  transition:background .3s var(--ease), border-color .3s var(--ease),
             transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* Blue is the hover state, not a permanent "recommended" badge — nothing
   should be shouting while the page is at rest. :focus-within keeps the
   card reachable when you tab into its button. */
.plan:hover,.plan:focus-within{
  background:var(--blue); border-color:var(--blue); color:#fff;
  transform:translateY(-4px); box-shadow:0 20px 44px -24px rgba(5,114,233,.6);
}
.plan .lb{ font-family:var(--fm); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.plan:is(:hover,:focus-within) .lb{ color:rgba(255,255,255,.66); }
.plan .amt{ font-family:var(--fd); font-size:clamp(2.2rem,3.4vw,2.9rem); font-weight:800; letter-spacing:-.045em; line-height:1; margin:16px 0 10px; }
.plan .amt sup{ font-size:.4em; top:-.85em; font-weight:600; }
.plan .blurb{ margin:0 0 20px; font-size:.92rem; line-height:1.5; color:var(--ink-2); }
.plan:is(:hover,:focus-within) .blurb{ color:rgba(255,255,255,.78); }
.plan ul{ list-style:none; margin:0 0 26px; padding:0; flex:1; }
/* the blurbs run to different lengths, so the buttons align on the floor */
.plan .b{ margin-top:auto; }
.plan li{ display:flex; gap:11px; padding:7px 0; font-size:.92rem; line-height:1.45; color:var(--ink-2); }
.plan li svg{ color:var(--blue); transition:color .3s var(--ease); }
.plan:is(:hover,:focus-within) li{ color:rgba(255,255,255,.86); }
.plan:is(:hover,:focus-within) li svg{ color:#fff; }
.plan .b{ height:48px; font-size:.94rem; width:100%; }
/* The button has to invert with the card, and it has to keep that inversion
   when the pointer lands on the button itself — otherwise `.b-ghost:hover`
   wins and paints blue text onto the blue card. */
.plan:is(:hover,:focus-within) .b-ghost,
.plan:is(:hover,:focus-within) .b-ghost:hover{
  background:#fff; color:var(--blue); box-shadow:inset 0 0 0 1.5px #fff;
}

/* ---------- Form ---------- */
.form{ display:flex; flex-direction:column; gap:16px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:520px){ .f-row{ grid-template-columns:1fr; } }
.form label{
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--fm); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.form .opt{ text-transform:none; letter-spacing:.04em; opacity:.7; }
.form label > span.opt{ display:inline; }
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  font-family:var(--f); font-size:1rem; font-weight:400; line-height:1.5;
  letter-spacing:normal; text-transform:none; color:var(--ink);
  padding:15px 18px; border:1px solid var(--line); border-radius:12px; background:var(--white);
  transition:border-color .25s, box-shadow .25s; width:100%;
}
.form textarea{ resize:vertical; min-height:110px; }
.form :is(input,select,textarea):focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(5,114,233,.12);
}
.form .check{
  flex-direction:row; align-items:center; gap:11px; text-transform:none;
  letter-spacing:normal; font-family:var(--f); font-size:.94rem; color:var(--ink-2);
}
.form .check input{ width:19px; height:19px; accent-color:var(--blue); }
.form .b{ align-self:flex-start; margin-top:6px; }
.form-note{ margin:0; }
/* on a blue field the inputs keep their white fill; only the labels around
   them need lifting off the muted ink greys */
.blue .form label{ color:rgba(255,255,255,.7); }
.blue .form :is(input,textarea):focus{ box-shadow:0 0 0 4px rgba(255,255,255,.28); border-color:#fff; }

/* form status: only ever shown after a real outcome */
.form-status{ margin:18px 0 0; font-size:.95rem; line-height:1.6; }
.form-status:empty{ display:none; }
.form-status.ok{ color:#fff; }
.form-status.ok strong{ color:#fff; }
.form-status.err{ color:#FFD9D4; }
.form-status a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- About: hero facts ---------- */
.c-hero{ padding-block:clamp(70px,12vh,140px) clamp(60px,9vh,110px); }
.c-facts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.blue .c-facts{ border-top-color:var(--line-inv); }
.c-facts li{
  padding:16px 0 16px 26px; border-bottom:1px solid var(--line); position:relative;
  font-size:.98rem; color:var(--ink-2);
}
.blue .c-facts li{ border-bottom-color:var(--line-inv); color:rgba(255,255,255,.76); }
.c-facts li::before{
  content:""; position:absolute; left:0; top:24px;
  width:7px; height:7px; border-radius:50%; background:var(--blue);
}
.blue .c-facts li::before{ background:#fff; }

/* ---------- About: the split ----------
   Photo hard against the left edge, text on the right. No card, no gutter
   between them: the picture is half the page. */
.jsplit{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
@media(max-width:900px){ .jsplit{ grid-template-columns:1fr; } }

.jsplit-img{
  position:sticky; top:0; align-self:start; height:100svh;
  margin:0; background:var(--blue);
}
.jsplit-img img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:45% 40%;   /* keeps Josh and some signage */
}
.jsplit-img figcaption{
  position:absolute; left:clamp(18px,2.4vw,30px); bottom:clamp(16px,2.2vw,26px);
  color:rgba(255,255,255,.92); text-shadow:0 1px 14px rgba(0,0,0,.65);
}
/* The nav is fixed and opaque, and on one column the portrait starts at y=0,
   so the nav was covering the 74px of headroom above Josh's head and reading
   as a crop. Drop the photo below it. */
@media(max-width:900px){
  .jsplit-img{ position:relative; height:calc(62vh - var(--nav-h)); margin-top:var(--nav-h); }
}

.jsplit-txt{
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 7vh) var(--gut) 9vh;
}
.jsplit-txt > div{ max-width:52ch; }
@media(max-width:900px){ .jsplit-txt{ padding-top:clamp(40px,6vh,58px); } }

.pull{
  margin:clamp(28px,4vh,40px) 0 0; padding-left:22px;
  border-left:2px solid var(--blue);
  font-family:var(--fd); font-weight:650; letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.4;
}
.pull cite{
  display:block; margin-top:14px; font-style:normal;
  font-family:var(--fm); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400;
}
.blue .pull{ border-left-color:var(--line-inv); }
.blue .pull cite{ color:rgba(255,255,255,.5); }

/* ---------- About: video ----------
   preload="none" and a poster, so a 5.8MB file costs nothing until asked for.
   The custom button hands over to the native controls on first play. */
.vplay{ position:relative; border-radius:20px; overflow:hidden; background:var(--ink); }
.vplay video{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.vbtn{
  position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%;
  display:grid; place-items:center; background:var(--blue); color:#fff;
  box-shadow:0 12px 40px -10px rgba(5,114,233,.7);
  transition:transform .3s var(--ease), opacity .3s var(--ease), background .25s;
}
.vbtn svg{ margin-left:3px; }
.vbtn:hover{ transform:scale(1.08); background:var(--blue-deep); }
.vplay.playing .vbtn,.vplay.playing .vlabel{ opacity:0; pointer-events:none; }
.vlabel{
  position:absolute; left:clamp(16px,2vw,24px); bottom:clamp(14px,2vw,20px);
  color:rgba(255,255,255,.86); transition:opacity .3s var(--ease);
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* ---------- About: credentials ---------- */
.creds{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px); text-align:left; }
@media(max-width:760px){ .creds{ grid-template-columns:1fr; } }
.cred{
  padding:clamp(28px,3vw,40px); border:1px solid var(--line); border-radius:20px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.cred:hover{ border-color:var(--blue); transform:translateY(-3px); }
.cred img{ height:46px; width:auto; margin-bottom:clamp(22px,3vh,30px); }
.cred h3{
  margin:0 0 12px; font-family:var(--fd); font-weight:700; letter-spacing:-.028em;
  font-size:clamp(1.1rem,1.6vw,1.35rem);
}
.cred p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--ink-2); }

/* ---------- About: the vision, driven by scroll ----------
   The stage is tall; the panel inside it sticks for that whole distance, so
   scrolling walks the highlight down the four steps instead of moving the
   page. Sticky is scoped inside .v-stage and cannot escape it — the last
   attempt at a pinned element was loose on the page and bled through
   everything under it. */
.vision{ background:var(--blue); color:#fff; }
.v-stage{ position:relative; height:360vh; }
.v-stick{
  position:sticky; top:0; height:100svh; display:grid; place-items:center;
  padding:calc(var(--nav-h) + 4vh) var(--gut) 8vh; overflow:hidden;
}
.v-grid{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,5vw,80px); align-items:center;
}
.v-left .kicker{ color:rgba(255,255,255,.62); }
.v-rail{ margin:clamp(28px,4vh,44px) 0 16px; height:2px; background:rgba(255,255,255,.24); border-radius:2px; }
.v-rail i{
  display:block; height:100%; width:0; background:#fff; border-radius:2px;
  transition:width .35s var(--ease);
}
.v-left .num{ color:rgba(255,255,255,.55); }

.v-steps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,2.2vh,26px); }
.v-steps li{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,1.6vw,22px);
  padding:clamp(14px,2vh,20px) 0; border-top:1px solid rgba(255,255,255,.18);
  opacity:.34; transition:opacity .4s var(--ease);
}
.v-steps li.on{ opacity:1; }
.v-steps .n{ font-family:var(--fm); font-size:.6rem; letter-spacing:.2em; padding-top:6px; }
.v-steps h3{
  margin:0 0 8px; font-family:var(--fd); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.1rem,1.7vw,1.45rem); line-height:1.16;
}
.v-steps li > div{ min-width:0; }
.v-steps p{
  margin:0; font-size:.94rem; line-height:1.55; color:rgba(255,255,255,.74);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s var(--ease), opacity .4s var(--ease), margin-top .45s var(--ease);
}
.v-steps li.on p{ max-height:9em; opacity:1; margin-top:4px; }

/* On a small screen pinning fights the reader for the scrollbar, so the
   stage collapses and every step is simply open. */
@media(max-width:900px){
  .v-stage{ height:auto; }
  .v-stick{ position:static; height:auto; padding-block:clamp(80px,12vh,140px); }
  .v-grid{ grid-template-columns:1fr; gap:clamp(30px,5vh,44px); }
  .v-rail{ display:none; }
  .v-left .num{ display:none; }
  .v-steps li{ opacity:1; }
  .v-steps p{ max-height:none; opacity:1; }
}

/* ---------- The film ----------
   Opens as you scroll, but the frame keeps the video's own 16:9 the whole way
   and its width is capped by the height available, so it never crops. The
   previous version fixed the height and let object-fit:cover eat the top and
   bottom of the picture. It waits paused on its poster until someone presses
   play. */
.reel{ background:var(--ink); }
.reel-stage{ position:relative; height:220svh; }
.reel-stick{
  position:sticky; top:var(--nav-h); height:calc(100svh - var(--nav-h));
  display:grid; place-items:center; overflow:hidden;
}
.reel-frame{
  position:relative;
  /* whichever is smaller: the scroll-driven width, or the width that still
     fits the viewport height at 16:9 */
  width:min(var(--w,34vw), calc((100svh - var(--nav-h) - 48px) * 16 / 9));
  aspect-ratio:16/9;
  border-radius:calc(18px * (1 - var(--p,0)));
  overflow:hidden; background:#000;
  box-shadow:0 30px 80px -40px rgba(0,0,0,calc(.8 * (1 - var(--p,0))));
}
.reel-frame video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }

.reel-frame b{
  position:absolute; width:24px; height:24px; border:2px solid #fff;
  mix-blend-mode:difference;
  pointer-events:none; opacity:calc(1 - var(--p,0) * 1.6); --o:clamp(14px,1.6vw,22px);
}
.reel-frame b:nth-of-type(1){ top:var(--o); left:var(--o); border-right:0; border-bottom:0 }
.reel-frame b:nth-of-type(2){ top:var(--o); right:var(--o); border-left:0; border-bottom:0 }
.reel-frame b:nth-of-type(3){ bottom:var(--o); right:var(--o); border-left:0; border-top:0 }
.reel-frame b:nth-of-type(4){ bottom:var(--o); left:var(--o); border-right:0; border-top:0 }

.reel-tag{
  position:absolute; left:clamp(16px,1.8vw,26px); bottom:clamp(14px,1.6vw,22px); z-index:3;
  color:#fff; mix-blend-mode:difference;
}
/* Frosted rather than a solid disc: it reads against the white end card and
   against dark footage without changing colour, and the blur ties it to the
   picture instead of sitting on top of it like a sticker. */
.reel-play{
  position:absolute; inset:0; margin:auto; z-index:4;
  width:clamp(60px,5.4vw,80px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:rgba(10,16,32,.52);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 12px 34px -12px rgba(0,0,0,.6);
  transition:transform .45s var(--ease), background .3s, box-shadow .3s, opacity .35s var(--ease);
}
.reel-play .ic-play{ margin-left:3px; }
.reel-play .ic-pause{ display:none; }
.reel-play:hover{
  transform:scale(1.07); background:rgba(10,16,32,.68);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72), 0 14px 38px -12px rgba(0,0,0,.6);
}
/* Safari and Firefox without backdrop-filter get a solid disc instead of a
   transparent one, which would otherwise wash out on the white card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .reel-play{ background:rgba(10,16,32,.8); }
}

/* The whole frame is the control: click anywhere to play or pause. While it is
   playing the button gets out of the way, and hovering brings it back wearing
   the pause icon, so the gesture is always visible before you make it. */
.reel-frame{ cursor:pointer; }
.reel.playing .reel-tag{ opacity:0; }
.reel.playing .reel-play{ opacity:0; transform:scale(.85); }
.reel.playing .reel-frame:hover .reel-play{ opacity:1; transform:none; }
.reel.playing .reel-play .ic-play{ display:none; }
.reel.playing .reel-play .ic-pause{ display:block; }

/* On one column it stops being a full-bleed strip and becomes a card: inset to
   the page gutter and rounded, so the white end card reads as deliberate
   against the dark panel rather than as a letterbox. */
@media(max-width:760px), (prefers-reduced-motion:reduce){
  .reel-stage{ height:auto !important; }
  .reel-stick{ position:static; height:auto; padding:clamp(28px,5vh,56px) var(--gut); }
  .reel-frame{ width:100% !important; border-radius:16px; }
  /* On a card this size the corner brackets are clutter and they collide with
     the caption, so the card keeps its rounded edge and loses them. */
  .reel-frame b{ display:none; }
  .reel-tag{ left:14px; bottom:11px; }
}

/* ---------- the four demo screens ---------- */
.a-mid{ text-align:center; }
.a-lead{ margin:6% 0 3%; font-size:.66rem; font-weight:800; letter-spacing:-.02em; color:var(--aink); line-height:1.25; }
.a-help.mid{ text-align:center; }
.a-store{
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:#111418; color:#fff; border-radius:8px; padding:3.4% 4%; margin-top:3.5%;
}
.a-store svg{ width:13px; height:13px; flex:none; }
.a-store div{ text-align:left; line-height:1.05; }
.a-store span{ display:block; font-size:.34rem; opacity:.8; }
.a-store strong{ display:block; font-size:.5rem; font-weight:700; }

/* ---------- Accordion ---------- */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-btn{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 0; text-align:left; font-family:var(--fd);
  font-size:clamp(1.05rem,1.5vw,1.24rem); font-weight:650; letter-spacing:-.02em;
}
.acc-btn i{ flex:none; width:20px; height:20px; position:relative; }
.acc-btn i::before,.acc-btn i::after{
  content:""; position:absolute; inset:50% 0 auto; height:1.6px; background:currentColor; transition:.35s var(--ease);
}
.acc-btn i::after{ transform:rotate(90deg); }
.acc-btn[aria-expanded="true"] i::after{ transform:rotate(0); }
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.acc-panel p{ margin:0 0 24px; color:var(--ink-2); max-width:62ch; line-height:1.62; }

/* ---------- Trust marks ---------- */
.marks{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.marks img{ height:40px; width:auto; filter:brightness(0) invert(1); opacity:.85; }

/* ---------- Sub-page tweaks ---------- */
.panel-auto .inner.mid .d1{ margin-inline:auto; }
.two .figure{ margin-inline:0; }
@media(max-width:860px){ .two .figure{ margin-inline:auto; } }

.form ::placeholder{ font-family:var(--f); color:var(--ink-3); }

/* ============================================================
   iPhone — real proportions, and a scan you can actually run
   ============================================================ */

/* iPhone 15 Pro: device 70.6×146.6mm, screen 65.0×140.9mm.
   Everything below is derived from those, so it reads as a device. */
.iphone{
  /* Percentage padding resolves against the containing block, not the element,
     so the bezel has to be derived from the phone's own width. */
  --w:min(268px,60vw);
  position:relative; z-index:2; width:var(--w); aspect-ratio:70.6/146.6;
  padding:calc(var(--w) * 0.0397); border-radius:17.6%/8.48%;
  background:
    linear-gradient(148deg,#8A8F99 0%,#3C414B 8%,#1A1D24 22%,#141720 50%,#1A1D24 78%,#3C414B 92%,#8A8F99 100%);
  box-shadow:0 50px 100px -28px rgba(8,16,40,.42), 0 8px 22px rgba(8,16,40,.16);
}
.blue .iphone{ box-shadow:0 50px 100px -28px rgba(0,0,0,.46), 0 8px 22px rgba(0,0,0,.2); }
.iphone::before{                     /* inner rim so the rail reads as metal */
  content:""; position:absolute; inset:calc(var(--w) * 0.012);
  border-radius:16.4%/7.9%; background:#05070C; z-index:0;
}
.iphone .rail{ position:absolute; background:#5A6070; border-radius:2px; }
.iphone .rail.v1{ left:-1px; top:20.5%; width:2px; height:4.4%; }
.iphone .rail.v2{ left:-1px; top:27.5%; width:2px; height:7.6%; }
.iphone .rail.v3{ left:-1px; top:36.5%; width:2px; height:7.6%; }
.iphone .rail.pw{ right:-1px; top:31%;  width:2px; height:11%; }

.screen{
  position:relative; z-index:1; width:100%; height:100%;
  border-radius:14.8%/7.05%; overflow:hidden; background:#F2F5F9;
  display:flex; flex-direction:column;
}
.island{
  position:absolute; z-index:9; top:1.5%; left:50%; transform:translateX(-50%);
  width:31%; height:4.05%; border-radius:100px; background:#05070C;
}
.status{
  flex:none; height:5.6%; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 8% 0.4%; font-size:.52rem; font-weight:600; color:var(--ink); letter-spacing:-.01em;
}
.blue-head .status{ color:#fff; }

/* ---------- demo stage ---------- */
.demo{ position:relative; width:100%; flex:1; overflow:hidden; }
.view{
  position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .34s var(--ease);
}
.view.on{ opacity:1; visibility:visible; }

/* ---------- real AccuMold app UI ---------- */
.demo{ --ab:#1E6FB8; --abd:#185C99; --alime:#8CC152; --agreen:#2E9E5B;
       --aamber:#F5A623; --abg:#F2F4F7; --aink:#1A1D21; --agrey:#6B7280; --aline:#E3E7ED; }
.view{ background:var(--abg); }
.sb{ flex:none; height:5.4%; display:flex; align-items:flex-end; justify-content:space-between;
     padding:0 9% 0.5%; font-size:.5rem; font-weight:600; letter-spacing:-.02em; }
.sb.on-blue{ color:#fff; }
.a-scroll{ flex:1; overflow:hidden; }

.a-hd{ background:var(--ab); color:#fff; padding:2.5% 7% 5.5%; }
.a-hd h4{ margin:0; font-size:.95rem; font-weight:800; letter-spacing:-.02em; }
.a-hd p{ margin:1px 0 0; font-size:.6rem; opacity:.92; }
.a-pad{ padding:6% 6.5%; }
.a-stats{ display:flex; gap:3.5%; }
.a-stat{ flex:1; background:#fff; border-radius:12px; padding:9% 3% 8%; text-align:center; box-shadow:0 1px 3px rgba(16,24,40,.07); }
.a-stat .i{ font-size:.78rem; line-height:1; }
.a-stat b{ display:block; font-size:.72rem; font-weight:700; margin-top:5%; letter-spacing:-.02em; color:var(--aink); }
.a-stat span{ display:block; font-size:.46rem; color:var(--agrey); margin-top:1px; }
.a-t{ margin:8% 0 4%; font-size:.72rem; font-weight:800; letter-spacing:-.02em; color:var(--aink); }
.a-t.row{ display:flex; justify-content:space-between; align-items:baseline; }
.a-t .all{ font-size:.5rem; font-weight:600; color:var(--ab); }
.a-qa{ display:flex; gap:3.5%; }
.a-qa div{ flex:1; background:var(--ab); color:#fff; border-radius:11px; padding:9% 2% 7%; text-align:center; }
.a-qa .i{ font-size:.66rem; line-height:1; }
.a-qa span{ display:block; font-size:.44rem; margin-top:8%; line-height:1.25; }
.a-empty{ background:#fff; border-radius:12px; padding:9% 6%; text-align:center; box-shadow:0 1px 3px rgba(16,24,40,.07); }
.a-empty .i{ font-size:1.05rem; color:#9AA3B0; }
.a-empty p{ margin:5% 0 6%; font-size:.52rem; color:var(--agrey); }
.a-lime{ display:inline-block; background:var(--alime); color:#fff; font-size:.56rem; font-weight:700;
         padding:5% 9%; border-radius:100px; box-shadow:0 3px 8px -2px rgba(140,193,82,.7); }
.a-tabs{ flex:none; display:flex; border-top:1px solid var(--aline); background:#fff; padding:2% 0 3.4%; }
.a-tabs div{ flex:1; text-align:center; font-size:.4rem; color:#9AA3B0; }
.a-tabs div.on{ color:var(--ab); }
.a-tabs .i{ display:block; font-size:.6rem; margin-bottom:2px; }

.a-logo{ text-align:center; padding:6% 0 3%; }
.a-logo img{ height:26px; margin:0 auto; }
.a-logo small{ display:block; font-size:.5rem; color:var(--agrey); margin-top:3%; }
.a-card{ background:#fff; border-radius:12px; padding:6% 6.5%; box-shadow:0 1px 3px rgba(16,24,40,.07); margin-bottom:5%; }
.a-card h6{ margin:0 0 5%; font-size:.62rem; font-weight:800; color:var(--aink); }
.a-btn{ display:flex; align-items:center; justify-content:center; gap:6px; border-radius:10px;
        padding:5.5% 4%; font-size:.6rem; font-weight:700; color:#fff; background:var(--ab); }
.a-btn.g{ background:var(--agreen); }
.a-btn.o{ background:#fff; color:var(--ab); box-shadow:inset 0 0 0 1px #CBD9E8; }
.a-btn + .a-btn{ margin-top:3.5%; }
.a-list li{ display:flex; gap:8px; font-size:.5rem; color:var(--aink); padding:3.4% 0; list-style:none; line-height:1.45; }
.a-list{ margin:0; padding:0; }
.a-list .ck{ flex:none; width:11px; height:11px; border-radius:50%; background:var(--ab); display:grid; place-items:center; margin-top:1px; }
.a-list .ck.g{ background:var(--agreen); }
/* the consultation list carries a line of explanation under each item, as the
   app does, so it reads as a benefit rather than a checklist */
.a-list.rich li{ align-items:flex-start; padding:4% 0; }
.a-list.rich b{ display:block; font-size:.5rem; font-weight:800; letter-spacing:-.01em; color:var(--aink); }
.a-list.rich .d{ display:block; margin-top:2%; font-size:.42rem; line-height:1.5; color:var(--agrey); }
.a-list .ck svg{ width:6px; height:6px; }

.a-prog{ height:3px; background:var(--aline); border-radius:3px; overflow:hidden; }
.a-prog i{ display:block; height:100%; width:20%; background:var(--ab); }
.a-step{ text-align:center; font-size:.48rem; color:var(--agrey); margin:3% 0 7%; }
.a-q{ font-size:.76rem; font-weight:800; letter-spacing:-.02em; line-height:1.3; color:var(--aink); margin:0 0 7%; }
.a-opt{ background:#fff; border:1px solid var(--aline); border-radius:11px; padding:6.5% 5.5%;
        text-align:center; font-size:.58rem; color:var(--aink); margin-bottom:3.5%; }
.a-opt.sel{ border-color:var(--ab); box-shadow:0 0 0 2px rgba(30,111,184,.16); }

.a-cam{ position:absolute; inset:0; background:#111; }
.a-cam img{ width:100%; height:100%; object-fit:cover; }
.a-tip{ position:absolute; left:6%; right:6%; top:7%; background:rgba(20,22,26,.86); color:#fff;
        border-radius:9px; padding:4% 5%; font-size:.46rem; line-height:1.45; text-align:center; }
.a-shot{ position:absolute; left:0; right:0; bottom:5%; display:flex; align-items:center; justify-content:space-around; }
.a-shot .fl{ font-size:.44rem; color:#FFD54F; text-align:center; }
.a-shot .fl .i{ display:block; font-size:.7rem; }
.a-shot .lib{ font-size:.44rem; color:#fff; text-align:center; }
.a-shot .lib .i{ display:block; font-size:.7rem; }
.a-ring{ width:17%; aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.4); }

.a-analyse{ position:absolute; inset:0; background:rgba(18,20,24,.94); display:flex; flex-direction:column;
            align-items:center; justify-content:center; padding:0 6%; }
.a-frame{ position:relative; width:100%; border-radius:8px; overflow:hidden; }
.a-frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.a-box{ position:absolute; inset:9% 8%; border:1.5px solid #4DA3FF; }
.a-box span{ position:absolute; width:13px; height:13px; border:2.5px solid #4DA3FF; }
.a-box span:nth-child(1){ top:-2px; left:-2px; border-right:0; border-bottom:0; }
.a-box span:nth-child(2){ top:-2px; right:-2px; border-left:0; border-bottom:0; }
.a-box span:nth-child(3){ bottom:-2px; left:-2px; border-right:0; border-top:0; }
.a-box span:nth-child(4){ bottom:-2px; right:-2px; border-left:0; border-top:0; }
.a-target{ position:absolute; left:50%; top:50%; width:44%; aspect-ratio:1; transform:translate(-50%,-50%);
           border:1.5px solid rgba(77,163,255,.85); border-radius:50%; }
.a-target::after{ content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; border-radius:50%;
                  background:#6EE7A8; transform:translate(-50%,-50%); }
.a-scanning{ margin-top:5%; color:#fff; font-size:.58rem; font-weight:600; text-align:center; }
.a-scanning.dark{ color:var(--aink); margin:4% 0 5%; }
.a-cam.short{ position:relative; inset:auto; flex:1; }
.a-know{ margin-top:6%; background:rgba(58,62,70,.9); border-radius:10px; padding:6% 6% 4%; text-align:center; width:100%; }
.a-know .i{ font-size:.7rem; }
.a-know p{ margin:4% 0 5%; font-size:.5rem; line-height:1.5; color:#fff; }
.a-know b{ font-size:.46rem; color:#FFC94D; }

.a-res-top{ display:flex; justify-content:flex-end; padding:4% 6% 0; }
.a-pill{ background:var(--agreen); color:#fff; font-size:.46rem; font-weight:800; line-height:1.2;
         padding:2.5% 4%; border-radius:7px; text-align:center; }
/* a detection is the result that leads somewhere, so it reads as an alert */
.a-pill.red{ background:#D93B30; border-radius:100px; padding:2.6% 6%; letter-spacing:.04em; }
.a-when{ font-size:.46rem; color:var(--agrey); padding:0 6% 3%; }
.a-det{ border-left:3px solid var(--agreen); background:#EAF7EE; border-radius:0 7px 7px 0;
        padding:3.5% 4%; font-size:.52rem; font-weight:700; color:#1E7A44; }
.a-ana{ border-left:3px solid var(--aamber); background:#FFF8E8; border-radius:0 7px 7px 0;
        padding:3.5% 4%; margin-top:3.5%; }
.a-ana b{ display:block; font-size:.5rem; color:#B07407; margin-bottom:2%; }
.a-ana p{ margin:0; font-size:.46rem; line-height:1.55; color:#45505F; }
/* the control strip under the phone */
.demo-ui{ text-align:center; margin-top:clamp(24px,4vh,40px); }
.demo-ui .cap{ min-height:5.2em; }
.demo-ui h3{ font-family:var(--fd); font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:700; letter-spacing:-.04em; line-height:1; margin:0 0 12px; }
.demo-ui p{ margin:0 auto; max-width:38ch; font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.6; color:var(--ink-2); }
.blue .demo-ui p{ color:rgba(255,255,255,.78); }
.track{
  display:flex; gap:0; justify-content:center; margin-top:clamp(20px,3vh,32px);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.track::-webkit-scrollbar{ display:none }
.track button{ flex:none }
@media(max-width:560px){ .track{ justify-content:flex-start; padding-inline:var(--gut); margin-inline:calc(var(--gut) * -1); } }
.track button{
  font-family:var(--fm); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 16px; color:var(--ink-3); border-bottom:2px solid var(--line); transition:.3s var(--ease);
}
.blue .track button{ color:rgba(255,255,255,.5); border-bottom-color:rgba(255,255,255,.2); }
.track button[aria-current="true"]{ color:var(--blue); border-bottom-color:var(--blue); }
.blue .track button[aria-current="true"]{ color:#fff; border-bottom-color:#fff; }
.track button:disabled{ opacity:.45; cursor:default; }

.ap-empty{
  margin-top:7%; border:1px dashed #D3DEEC; border-radius:11px;
  padding:11% 6%; text-align:center; color:#9AA8BC;
}
.ap-empty .ic{ font-size:1.05rem; line-height:1; }
.ap-empty span{ display:block; font-size:.5rem; margin-top:5%; }

/* ---------- download, straight after the demo ---------- */
.demo-get{
  margin-top:clamp(34px,5vh,58px); padding-top:clamp(28px,4vh,44px);
  border-top:1px solid var(--line); text-align:center;
}
.demo-get h3{
  font-family:var(--fd); font-size:clamp(1.4rem,2.4vw,2rem); font-weight:700;
  letter-spacing:-.04em; margin:0 0 clamp(18px,2.6vh,26px);
}
.demo-get .stores{ justify-content:center; }

/* ---------- stat row (restored from the brief) ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,60px); margin-top:clamp(46px,8vh,92px); }
@media(max-width:760px){ .stats{ grid-template-columns:1fr; gap:40px; } }
.stats b{
  display:block; font-family:var(--fd); font-size:clamp(3rem,7vw,5.6rem);
  font-weight:800; letter-spacing:-.055em; line-height:.9;
}
.stats span{ display:block; margin-top:16px; font-size:.95rem; line-height:1.45; color:rgba(255,255,255,.72); }

/* light pricing strip so it does not sit against the blue close */
.tier.light{ background:var(--white); color:var(--ink); }
.tiers:has(.tier.light){ background:var(--line); border-block:1px solid var(--line); }
.tier.light .lb{ color:var(--ink-3); }
.tier.light p{ color:var(--ink-2); }

/* ---------- approvals ---------- */
.approved{ margin-top:clamp(46px,7vh,84px); padding-top:clamp(30px,4vh,46px); border-top:1px solid var(--line); }
.approved .num{ display:block; margin-bottom:22px; }
/* IAQA and BBB are navy marks. They can't be recoloured and they'd disappear
   into the blue panel, so each sits on its own white chip at its real colours. */
.marks-l{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,24px); flex-wrap:wrap; }
.marks-l span{
  display:flex; align-items:center; justify-content:center;
  height:92px; padding:0 clamp(22px,2.6vw,34px); border-radius:16px; background:#fff;
}
.marks-l img{ width:auto; }
/* sized so the two marks carry the same optical weight despite one being
   a wide lockup and the other a tall badge */
.marks-l .iaqa{ height:42px; }
.marks-l .bbb{ height:60px; }

/* ============================================================
   AccuMold scan overlay — copied from the app's analysis screen:
   blue tint, rounded box with corner brackets, centre ring with a
   rotating radar arm, green centre dot, and a horizontal sweep line.
   ============================================================ */
.amscan{ position:absolute; inset:0; pointer-events:none; }
.amscan .tint{ position:absolute; inset:0; background:rgba(59,155,240,.28); }
.amscan .box{
  position:absolute; inset:7%; border:1.5px solid #3B9BF0; border-radius:10px;
}
.amscan .box i{ position:absolute; width:15%; height:13%; border:3px solid #3B9BF0; }
.amscan .box i:nth-child(1){ top:-2px; left:-2px;  border-right:0; border-bottom:0; border-radius:10px 0 0 0; }
.amscan .box i:nth-child(2){ top:-2px; right:-2px; border-left:0;  border-bottom:0; border-radius:0 10px 0 0; }
.amscan .box i:nth-child(3){ bottom:-2px; left:-2px;  border-right:0; border-top:0; border-radius:0 0 0 10px; }
.amscan .box i:nth-child(4){ bottom:-2px; right:-2px; border-left:0; border-top:0; border-radius:0 0 10px 0; }
.amscan .ring{
  position:absolute; left:50%; top:50%; width:52%; aspect-ratio:1;
  transform:translate(-50%,-50%); border:1.5px solid #3B9BF0; border-radius:50%;
}
/* the radar arm sweeps from the centre */
.amscan .arm{
  position:absolute; left:50%; top:50%; width:26%; height:1.5px;
  background:linear-gradient(90deg,#3B9BF0,rgba(59,155,240,.15));
  transform-origin:0 50%; animation:amArm 3.4s linear infinite;
}
@keyframes amArm{ to{ transform:rotate(360deg) } }
.amscan .dot{
  position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%;
  background:#3DDC84; transform:translate(-50%,-50%); box-shadow:0 0 8px rgba(61,220,132,.9);
}
/* the horizontal line travelling down the frame */
.amscan .sweep{
  position:absolute; left:7%; right:7%; height:1.5px; background:rgba(120,190,255,.9);
  box-shadow:0 0 10px rgba(59,155,240,.8); animation:amSweep 2.8s ease-in-out infinite;
}
@keyframes amSweep{ 0%{ top:10% } 50%{ top:88% } 100%{ top:10% } }
/* the loose detection specks */
.amscan .spec{ position:absolute; width:3px; height:3px; border-radius:50%; background:#6FB8F5; opacity:.85; }

@media(prefers-reduced-motion:reduce){
  .amscan .arm,.amscan .sweep{ animation:none; }
}

/* hero reticle borrows the same arm and sweep */
.lens .arm{
  position:absolute; left:50%; top:50%; width:23%; height:1.5px;
  background:linear-gradient(90deg,#0572E9,rgba(5,114,233,.1));
  transform-origin:0 50%; animation:amArm 3.4s linear infinite;
}
.lens .sweep{
  position:absolute; left:0; right:0; height:1.5px; background:rgba(5,114,233,.85);
  box-shadow:0 0 10px rgba(5,114,233,.5); animation:amSweep 2.8s ease-in-out infinite;
}

/* ---------- find-a-pro screen ----------
   Laid out as the app has it: distance in its own card behind a label, the
   BBB filter as a full-width pair under it, then the count, then the
   listings. They were stacked flush before and collided. */
.a-filter{ display:flex; align-items:center; gap:4%; padding:4% 5%; }
.a-filter-l{ flex:none; font-size:.44rem; font-weight:700; color:var(--aink); }
.a-chips{ display:flex; gap:3.5%; flex:1; }
.a-chips span{
  flex:1; text-align:center; font-size:.42rem; padding:3.5% 1%; border-radius:100px;
  background:#EEF2F7; color:#6B7280; white-space:nowrap;
}
.a-chips span.on{ background:#1E6FB8; color:#fff; font-weight:700; }
.a-seg{ display:flex; gap:3.5%; margin-bottom:4%; }
.a-seg span{
  flex:1; text-align:center; font-size:.46rem; padding:4% 2%; border-radius:9px;
  background:#EEF2F7; color:#6B7280; font-weight:600;
}
.a-seg span.on{ background:#1E6FB8; color:#fff; }
.a-found{ margin:0 0 4%; font-size:.42rem; font-style:italic; color:var(--agrey); }
.a-pro{ display:flex; gap:4%; align-items:center; }
.a-pro-mark{
  width:14%; aspect-ratio:1; border-radius:9px; background:#1E6FB8; color:#fff;
  display:grid; place-items:center; font-size:.42rem; font-weight:800; letter-spacing:-.02em; flex:none;
}
.a-pro b{ display:block; font-size:.58rem; font-weight:800; color:#1A1D21; letter-spacing:-.01em; }
.a-pro span{ display:block; font-size:.44rem; color:#6B7280; }
.a-pro .star{ color:#B07407; margin-top:2px; }

/* side-by-side actions inside the phone */
.a-row2{ display:flex; gap:4%; }
.a-row2 .a-btn{ flex:1; margin-top:0; font-size:.54rem; padding:5% 2%; }

/* ---------- confirm and pay ---------- */
.a-pay{ display:flex; align-items:flex-start; gap:4%; }
.a-pay b{ display:block; font-size:.52rem; font-weight:800; color:var(--aink); letter-spacing:-.01em; }
.a-pay span{ display:block; margin-top:2%; font-size:.42rem; line-height:1.45; color:var(--agrey); }
.a-pay em{ margin-left:auto; font-style:normal; font-size:.56rem; font-weight:800; color:var(--aink); }
.a-pay i, .a-btn i{ font-style:normal; }
.a-pay.total{ border-top:1px solid var(--aline); margin-top:5.5%; padding-top:5.5%; }
.a-pay.total em{ color:var(--ab); font-size:.62rem; }
.a-code{
  display:flex; align-items:center; gap:4%;
  background:#fff; border:1px solid var(--aline); border-radius:10px;
  padding:5% 5.5%; margin-bottom:5%;
}
.a-code span{ flex:1; font-size:.46rem; color:#9AA3B0; }
.a-code i{ font-style:normal; font-size:.46rem; font-weight:700; color:var(--ab); }
.a-secure{ margin:0 0 5%; font-size:.4rem; line-height:1.5; color:var(--agrey); }

/* ---------- the dashboard, the way into the three flows ----------
   The app's home screen numbers what it does one, two, three. Each card is
   the whole tap target, so the demo opens on a hub rather than part way
   through one journey. */
.a-home{
  position:relative; display:flex; gap:4.5%; align-items:flex-start;
  background:#fff; border-radius:12px; padding:6% 6%; margin-bottom:5%;
  box-shadow:0 1px 3px rgba(16,24,40,.07);
}
.a-home-n{
  flex:none; width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ab); color:#fff; font-size:.44rem; font-weight:800;
}
.a-home b{ display:block; font-size:.56rem; font-weight:800; letter-spacing:-.01em; color:var(--aink); line-height:1.25; }
.a-home p{ margin:3.5% 0 0; font-size:.42rem; line-height:1.55; color:var(--agrey); }
.a-home .a-btn{ margin-top:7%; font-size:.5rem; padding:6% 3%; }

/* The dashboard is the fullest screen, and the phone shrinks faster than the
   type inside it, so it takes its padding back on small viewports rather than
   risk clipping the third card. */
@media(max-width:560px){
  .a-home{ padding:5% 5.5%; margin-bottom:4%; }
  .a-home .a-btn{ margin-top:6%; padding:5.5% 3%; }
  .a-pad{ padding:5% 6%; }
}


/* ---------- screens the client asked for: pre-check, report, booking ----------
   Same scale language as the rest of the phone: every size is a fraction of a
   rem so the whole app shrinks with the device, and the paddings are
   percentages of the screen width. */
.a-help{ font-size:.44rem; line-height:1.65; color:var(--agrey); margin:7% 0 0; }
.a-step-n{ text-align:center; font-size:.48rem; color:var(--agrey); margin:4% 0 8%; }

/* the report */
.a-pill-row{ display:flex; justify-content:center; margin:0 0 5%; }
.a-fact{ border-top:1px solid var(--aline); margin-top:5.5%; padding-top:5.5%; }
.a-fact:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.a-fact b{ display:block; font-size:.52rem; font-weight:800; letter-spacing:-.01em; color:var(--aink); }
.a-fact p{ margin:2.5% 0 0; font-size:.46rem; line-height:1.55; color:#45505F; }
.a-fact.lead b{ font-size:.6rem; letter-spacing:-.02em; }
.a-fact.lead p{ font-size:.48rem; }
.a-note{ margin:0 0 5%; font-size:.4rem; line-height:1.5; color:var(--agrey); }

/* the three consultation lengths. Flex so the price sits on the title's
   baseline and the description drops to its own line; the badge is absolute so
   it cannot push that row down. */
.a-len{
  position:relative; display:flex; flex-wrap:wrap; align-items:baseline;
  background:#fff; border:1px solid var(--aline); border-radius:11px;
  padding:6.5% 5.5%; margin-bottom:4.5%; box-shadow:0 1px 3px rgba(16,24,40,.06);
}
.a-len:first-of-type{ margin-top:4%; }
.a-len b{ font-size:.62rem; font-weight:800; letter-spacing:-.02em; color:var(--aink); }
.a-len em{ margin-left:auto; font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:-.02em; color:var(--ab); }
.a-len p{ flex:0 0 100%; margin:2.5% 0 0; font-size:.44rem; line-height:1.5; color:var(--agrey); }
.a-len .pop{
  position:absolute; top:-7px; left:5%;
  background:var(--alime); color:#fff; font-size:.36rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:100px;
}

/* the pro card */
.a-sub{ margin:-2% 0 0; font-size:.44rem; color:var(--agrey); }
.a-addr{ margin:3% 0 5%; font-size:.44rem; line-height:1.5; color:#45505F; }

/* ============================================================
   Tap affordance — only some controls in the demo are live, so
   they have to announce themselves.
   ============================================================ */
.demo [data-go],.demo [data-pick]{ position:relative; cursor:pointer; }
.demo [data-go]::before,.demo [data-pick]::before{
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(5,114,233,.9); pointer-events:none;
}
.view.on [data-go]::before,.view.on [data-pick]::before{ animation:tapPulse 1.8s ease-out infinite; }
/* Two rings, so the halo is still legible once the first has faded, and it
   holds a solid edge at rest rather than starting from nothing. */
@keyframes tapPulse{
  0%   { box-shadow:0 0 0 0 rgba(5,114,233,.9),   0 0 0 0 rgba(5,114,233,.55) }
  60%  { box-shadow:0 0 0 12px rgba(5,114,233,0), 0 0 0 5px rgba(5,114,233,.3) }
  100% { box-shadow:0 0 0 0 rgba(5,114,233,0),    0 0 0 0 rgba(5,114,233,.55) }
}
/* the round shutter keeps its own inner ring, so soften its halo */
.view.on .a-ring::before{ inset:-6px; border-radius:50%; }

@media(prefers-reduced-motion:reduce){
  .view.on [data-go]::before,.view.on [data-pick]::before{ animation:none; }
}

/* ============================================================
   The problem — one arresting fact, then where it hides
   ============================================================ */
/* ============================================================
   Who it's for — pick a person, read their reason
   ============================================================ */
.who-pick{
  display:inline-flex; gap:4px; margin-top:clamp(34px,5vh,54px);
  padding:5px; border-radius:100px; background:#F1F4F9;
}
@media(max-width:640px){ .who-pick{ flex-direction:column; width:100%; border-radius:18px; } }
.who-pick button{
  padding:12px 24px; border-radius:100px; font-size:.95rem; font-weight:600;
  color:var(--ink-2); transition:.3s var(--ease); white-space:nowrap;
}
.who-pick button[aria-current="true"]{ background:var(--blue); color:#fff; }
.who-stage{ position:relative; margin-top:clamp(38px,6vh,64px); min-height:20em; }
@media(max-width:640px){ .who-stage{ min-height:26em; } }
.who-card{ position:absolute; inset:0; visibility:hidden; }
.who-card.on{ visibility:visible; animation:whoIn .5s var(--ease); }
@keyframes whoIn{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
.who-q{
  font-family:var(--fm); font-size:.72rem; letter-spacing:.06em; color:var(--blue);
  margin:0 0 22px;
}
.who-card h3{ margin:0 0 24px; }
.who-card .t1{ margin-inline:auto; }

/* ---------- coming soon (speaker kit) ---------- */
/* The site's own reticle, pointed at an empty field. It says "nothing here
   yet" in the product's language rather than with another sentence. */
.jlens{
  position:relative; width:min(200px,42vw); aspect-ratio:1;
  margin:clamp(26px,4vh,42px) auto clamp(30px,5vh,48px);
}
.jlens b{ position:absolute; width:22px; height:22px; border:2px solid var(--blue); }
.jlens b:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.jlens b:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.jlens b:nth-child(3){ bottom:0; right:0; border-left:0; border-top:0; }
.jlens b:nth-child(4){ bottom:0; left:0; border-right:0; border-top:0; }
.jlens .sweep{
  position:absolute; left:12%; right:12%; top:0; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  animation:jlSweep 3.6s ease-in-out infinite;
}
/* `top`, not translateY — a percentage translate resolves against the line's
   own 1.5px height, so it would travel 21px instead of the whole square. */
@keyframes jlSweep{
  0%,100%{ top:0; opacity:0 }
  10%,90%{ opacity:1 }
  50%{ top:calc(100% - 1.5px) }
}
@media(prefers-reduced-motion:reduce){ .jlens .sweep{ animation:none; top:50%; opacity:.5 } }
.soon-form{ margin-top:clamp(28px,4vh,40px); }
.soon-field{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.soon-field input{
  font-family:var(--f); font-size:1rem; color:var(--ink); width:min(320px,100%);
  padding:0 22px; height:56px; border:1px solid var(--line); border-radius:100px; background:var(--white);
  transition:border-color .25s, box-shadow .25s;
}
.soon-field input::placeholder{ color:var(--ink-3); }
.soon-field input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(5,114,233,.12); }
.soon-form .form-note{ margin-top:16px; }