/* ============================================================
   My Health Scanner — pre-launch site
   Palette sampled from the product mockups.
   ============================================================ */

:root{
  --green-900:#143A2B;
  --green-800:#1A4534;
  --green-700:#204C3B;   /* primary */
  --green-600:#2A6349;
  --green-500:#3B7F5E;
  --mint-500:#63C7A6;
  --mint-300:#9BDCC2;
  --mint-100:#E3F4EC;

  --cream:#F8F8F3;
  --cream-2:#F1F3EA;
  --card:#FFFFFF;
  --line:#E2E6DC;

  --ink:#17291F;
  --ink-2:#4A5A50;
  --ink-3:#7B8981;

  --gold:#D9A03C;
  --rose:#C0453F;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;

  --shadow-sm:0 1px 2px rgba(20,58,43,.06), 0 2px 8px rgba(20,58,43,.05);
  --shadow-md:0 4px 12px rgba(20,58,43,.07), 0 16px 40px rgba(20,58,43,.08);
  --shadow-lg:0 8px 24px rgba(20,58,43,.10), 0 32px 70px rgba(20,58,43,.13);

  --wrap:1160px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--green-600); text-decoration-thickness:1px; text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.015em; line-height:1.14; color:var(--green-900); margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--green-700); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--mint-500); outline-offset:2px; border-radius:6px;
}

/* ─────────── Buttons ─────────── */
.btn{
  --btn-bg:var(--green-700);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--btn-bg); color:var(--btn-fg);
  font:600 16px/1 var(--sans);
  padding:16px 26px; border:0; border-radius:999px; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 2px 6px rgba(20,58,43,.18);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{background:var(--green-600); transform:translateY(-1px); box-shadow:0 6px 18px rgba(20,58,43,.22)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:11px 18px; font-size:14.5px}
.btn--block{width:100%; padding:17px 26px; font-size:16.5px}
.btn--light{--btn-bg:#fff; --btn-fg:var(--green-800)}
.btn--light:hover{background:var(--mint-100)}
.btn[disabled]{opacity:.62; cursor:not-allowed; transform:none; box-shadow:none}

.btn__spinner{display:none; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-dasharray:44 22; animation:spin .8s linear infinite}
.btn.is-busy .btn__spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .btn__spinner{animation-duration:2.4s} }

/* ─────────── Nav ─────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(248,248,243,.86);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck{border-bottom-color:var(--line); box-shadow:0 1px 14px rgba(20,58,43,.05)}
.nav__inner{display:flex; align-items:center; gap:24px; min-height:72px}

.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand__mark{flex:none}
.brand__text{display:flex; flex-direction:column; line-height:1}

/* Wordmark matches the app's lockup: "MyHealth" set solid, "Scanner" lighter
   and ranged right beneath it. Sans, not the display serif — the serif is for
   headlines, and using it here made the logo read as a heading. */
.brand__name{
  font-family:var(--sans); font-weight:700; font-size:22px; letter-spacing:-.025em;
  color:var(--green-900);
}
.brand__sub{
  font-family:var(--sans); font-weight:400; font-size:15px; letter-spacing:.005em;
  color:var(--green-800); text-align:right; margin-top:1px;
}
.brand__tag{font-size:11.5px; color:var(--ink-3); letter-spacing:.01em; margin-top:3px}
.brand--light .brand__name{color:#fff}
.brand--light .brand__name-light{font-weight:400; color:rgba(255,255,255,.88)}
.brand--light .brand__tag{color:rgba(255,255,255,.72)}
.brand--light .brand__text{line-height:1.25}

.nav__links{margin-left:auto; display:flex; gap:28px}
.nav__links a{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:500}
.nav__links a:hover{color:var(--green-700)}
@media (max-width:760px){ .nav__links{display:none} .nav__inner{gap:12px} .nav .btn{margin-left:auto} }
@media (max-width:420px){ .brand__name{font-size:19px} .brand__sub{font-size:13px} }

/* ─────────── Hero ─────────── */
.hero{position:relative; padding:64px 0 76px; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:180px; pointer-events:none;
  background:linear-gradient(to bottom,rgba(248,248,243,0),var(--cream-2));
}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:56px; align-items:center;
}
@media (max-width:980px){ .hero{padding:44px 0 60px} .hero__grid{grid-template-columns:1fr; gap:48px} }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green-600); background:var(--mint-100);
  padding:7px 15px; border-radius:999px; margin:0 0 20px;
}
.eyebrow--center{display:flex; width:max-content; margin-inline:auto}
.dot{width:7px; height:7px; border-radius:50%; background:var(--mint-500); flex:none;
  box-shadow:0 0 0 0 rgba(99,199,166,.7); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(99,199,166,0)}100%{box-shadow:0 0 0 0 rgba(99,199,166,0)}}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} }

.hero h1{font-size:clamp(2.35rem,5.4vw,3.85rem); margin-bottom:20px}
.hero h1 em{font-style:italic; color:var(--green-600)}
.lede{font-size:clamp(1.02rem,1.35vw,1.15rem); color:var(--ink-2); max-width:56ch; margin-bottom:30px}
.lede strong{color:var(--green-800); font-weight:600}

.trust{list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:26px 0 0}
.trust li{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); font-weight:500}
.trust svg{width:17px; height:17px; flex:none; fill:none; stroke:var(--mint-500); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round}

/* ── Hero phones ──
   Children are fixed-size .pvw boxes (see screens.css), so the fan is composed
   by position and rotation here, and sized by --pv-scale per breakpoint. */
.hero__art{position:relative; display:flex; align-items:center; justify-content:center;
  min-height:430px; padding:10px 0}
.phone{margin:0; position:absolute; transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.phone--front{position:relative; z-index:3}
.phone--front .pvw{--pv-scale:.46}
.phone--back{z-index:2; right:18px; top:1%; transform:rotate(6deg)}
.phone--back .pvw{--pv-scale:.40}
.phone--side{z-index:1; left:18px; bottom:3%; transform:rotate(-6.5deg)}
.phone--side .pvw{--pv-scale:.38}
.hero__art:hover .phone--front{transform:translateY(-6px)}
.hero__art:hover .phone--back{transform:rotate(7.5deg) translateY(-4px)}
.hero__art:hover .phone--side{transform:rotate(-8deg) translateY(-4px)}
@media (prefers-reduced-motion:reduce){ .phone{transition:none} }
@media (max-width:1100px){
  .phone--front .pvw{--pv-scale:.42} .phone--back .pvw{--pv-scale:.36} .phone--side .pvw{--pv-scale:.34}
  .hero__art{min-height:400px}
}
@media (max-width:560px){
  /* Three phones cannot fan on a handset without colliding. Keep the scanner
     and the result it produces — that pairing is the product in one glance —
     and drop the third. */
  .hero__art{min-height:340px}
  .phone--back{display:none}
  .phone--front .pvw{--pv-scale:.42}
  .phone--side .pvw{--pv-scale:.34}
  .phone--front{margin-left:16%}
  .phone--side{left:18px; bottom:6%; transform:rotate(-7deg)}
}

/* ── Leaf field ── */
.leaf-field{position:absolute; inset:0; z-index:0; pointer-events:none}
.leaf{position:absolute; fill:var(--mint-500); opacity:.085}
.leaf--a{width:280px; top:-40px; left:-130px; transform:rotate(18deg)}
.leaf--b{width:190px; bottom:-30px; left:8%; transform:rotate(-140deg); opacity:.06}
.leaf--c{width:340px; top:-140px; right:-150px; transform:rotate(-30deg); opacity:.07}
.leaf--d{width:210px; bottom:-70px; right:4%; transform:rotate(160deg); opacity:.055}

/* ─────────── Sign-up card ─────────── */
.signup{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:28px; box-shadow:var(--shadow-md); max-width:520px;
}
.signup__title{font-size:1.45rem; margin-bottom:6px}
.signup__sub{font-size:14.5px; color:var(--ink-3); margin-bottom:20px}

.field{margin-bottom:16px}
.field--half-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:440px){ .field--half-row{grid-template-columns:1fr} }
.field label{display:block; font-size:13.5px; font-weight:600; color:var(--green-800); margin-bottom:7px}
.field label .opt{font-weight:400; color:var(--ink-3)}

.field__control{position:relative; display:flex; align-items:center}
.field__icon{
  position:absolute; left:14px; width:19px; height:19px; pointer-events:none;
  fill:none; stroke:var(--ink-3); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.field__control input,
.field__control select,
.field__control textarea{
  width:100%; font:400 16px/1.4 var(--sans); color:var(--ink);
  background:var(--cream); border:1.5px solid var(--line); border-radius:14px;
  padding:14px 16px; transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field__control textarea{resize:vertical; min-height:110px; line-height:1.55}
.field__icon ~ input, .field__icon ~ select{padding-left:42px}
.field__control select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8981' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px;
  padding-right:40px;
}
.field__control :is(input,select,textarea):hover{border-color:var(--mint-300)}
.field__control :is(input,select,textarea):focus{
  outline:none; background:#fff; border-color:var(--mint-500);
  box-shadow:0 0 0 4px rgba(99,199,166,.18);
}
.field__control input::placeholder,.field__control textarea::placeholder{color:#A9B4AD}
.field__help{font-size:12.5px; color:var(--ink-3); margin:7px 0 0}

.field.is-invalid .field__control :is(input,textarea){border-color:var(--rose); background:#FDF5F5}
.field.is-invalid .field__help{color:var(--rose)}

/* honeypot */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-note{font-size:14px; margin:14px 0 0; min-height:1px}
.form-note:empty{display:none}
.form-note.is-error{color:var(--rose)}
.form-note.is-ok{
  color:var(--green-700); background:var(--mint-100); border:1px solid var(--mint-300);
  border-radius:var(--r-md); padding:13px 15px; font-weight:500;
}
.fineprint{font-size:12px; color:var(--ink-3); margin:14px 0 0; text-align:center}

/* ─────────── CAPTCHA ─────────── */
.captcha{margin:18px 0 20px; min-height:68px}
.captcha[data-state="loading"] .captcha__loading{
  font-size:13.5px; color:var(--ink-3); padding:22px 0; text-align:center;
}
.captcha[data-state="ready"] .captcha__loading{display:none}

.challenge{
  background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r-md); padding:15px 16px;
}
.challenge__row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.challenge__q{font-size:14.5px; font-weight:600; color:var(--green-800); flex:1 1 130px; min-width:0}
.challenge__q span{font-weight:400; color:var(--ink-3); display:block; font-size:12px; margin-top:2px}
.challenge__row input{
  flex:none; width:82px; font:600 16px/1.4 var(--sans); text-align:center;
  background:#fff; border:1.5px solid var(--line); border-radius:11px; padding:11px 10px; color:var(--ink);
}
.challenge__row input:focus{outline:none; border-color:var(--mint-500); box-shadow:0 0 0 4px rgba(99,199,166,.18)}
.challenge__refresh{
  flex:none; background:none; border:0; cursor:pointer; color:var(--green-600); white-space:nowrap;
  font:500 13px/1 var(--sans); padding:8px 2px; text-decoration:underline; text-underline-offset:3px;
}
.challenge.is-invalid{border-color:var(--rose); background:#FDF5F5}

/* ─────────── Stats ─────────── */
.stats{background:var(--cream-2); padding:44px 0; border-block:1px solid var(--line)}
.stats__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center}
.stats__grid div{display:flex; flex-direction:column; align-items:center; gap:6px}
.stats__grid strong{
  font-family:var(--serif); font-size:2.9rem; font-weight:600; line-height:1; color:var(--green-700);
}
.stats__grid span{font-size:14px; color:var(--ink-2); max-width:26ch}
@media (max-width:760px){ .stats__grid{grid-template-columns:1fr; gap:26px} }

/* ─────────── Sections ─────────── */
.section{padding:88px 0}
.section--tint{background:var(--cream-2); border-block:1px solid var(--line)}
.section__title{font-size:clamp(1.85rem,3.6vw,2.75rem); text-align:center; margin-bottom:14px}
.section__sub{text-align:center; color:var(--ink-2); max-width:58ch; margin:0 auto 52px; font-size:1.02rem}
@media (max-width:760px){ .section{padding:64px 0} }

/* ── Steps ── */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media (max-width:900px){ .steps{grid-template-columns:1fr; max-width:520px; margin-inline:auto} }
.step{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:30px 26px 0; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  /* The screenshots rise out of the card's bottom edge and are clipped by it. */
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.step:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.step__head{display:flex; align-items:center; gap:13px; margin-bottom:12px}
.step__num{
  flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--green-700); color:#fff;
  font:600 16px/36px var(--sans); text-align:center;
}
.step h3{font-size:1.35rem}
.step p{font-size:15px; color:var(--ink-2); margin-bottom:24px}
.shot{margin:auto 0 0; display:flex; justify-content:center; align-items:flex-end}
.shot .pvw{--pv-scale:.40; margin-bottom:-46px}
/* Two overlapping phones, for a step that covers two screens. */
.shot--pair .pvw{--pv-scale:.30}
.shot--pair .pvw:first-child{transform:translate(24px,20px) rotate(-4deg); z-index:1}
.shot--pair .pvw:last-child{--pv-scale:.34; transform:translateX(-24px); z-index:2}

/* ── Features ── */
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media (max-width:900px){ .features{grid-template-columns:1fr; max-width:560px; margin-inline:auto} }

.feature{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:32px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:24px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.feature h3{font-size:1.3rem; margin-bottom:10px}
.feature p{font-size:15px; color:var(--ink-2)}
.feature strong{color:var(--green-800); font-weight:600}
.feature__shot{margin:auto 0 0; display:flex; justify-content:center; align-items:flex-end}
.feature__shot .pvw{--pv-scale:.42}
.feature--wide{grid-column:1 / -1; flex-direction:row; align-items:center; gap:40px; padding:40px}
.feature--wide .feature__text{flex:1 1 55%}
.feature--wide .feature__shot{flex:0 0 auto; margin:0}
.feature--wide .feature__shot .pvw{--pv-scale:.46}
.feature--flip{flex-direction:row-reverse}
@media (max-width:900px){
  .feature--wide,.feature--flip{flex-direction:column; padding:32px; gap:24px}
}

.pill{
  display:inline-block; font-size:12.5px; font-weight:600; padding:2px 10px; border-radius:999px;
  white-space:nowrap; line-height:1.7;
}
.pill--safe{background:var(--mint-100); color:var(--green-700)}
.pill--limit{background:#FBF1DD; color:#8A6218}
.pill--avoid{background:#FBEAE9; color:var(--rose)}

/* ─────────── CTA band ─────────── */
.cta{background:var(--green-700); color:#fff; padding:60px 0; position:relative; overflow:hidden}
.cta::before{
  content:""; position:absolute; width:520px; height:520px; right:-140px; top:-220px; border-radius:50%;
  background:radial-gradient(circle,rgba(99,199,166,.28),transparent 68%);
}
.cta__inner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
.cta h2{color:#fff; font-size:clamp(1.7rem,3.2vw,2.3rem); margin-bottom:8px}
.cta p{color:rgba(255,255,255,.82); font-size:1rem; max-width:48ch}

/* ─────────── Contact ─────────── */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:36px; align-items:start}
@media (max-width:900px){ .contact{grid-template-columns:1fr; max-width:560px; margin-inline:auto} }

.contact__cards{display:grid; gap:14px}
.ccard{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 15px;
  align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
a.ccard:hover{border-color:var(--mint-500); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.ccard svg{
  grid-row:1 / 3; width:26px; height:26px; fill:none; stroke:var(--green-600);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.ccard__k{font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.ccard__v{font-size:15.5px; font-weight:500; color:var(--green-800); line-height:1.5; word-break:break-word}
.ccard--static{cursor:default}
.ccard--static .ccard__v{font-weight:400; color:var(--ink-2); font-size:14.5px}

.contact__form{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:30px; box-shadow:var(--shadow-md);
}
.contact__form h3{font-size:1.3rem; margin-bottom:20px}

/* ─────────── Footer ─────────── */
.footer{background:var(--green-800); color:rgba(255,255,255,.76); padding:54px 0 34px; font-size:14.5px}
.footer__top{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer__pillars{list-style:none; display:flex; gap:38px; padding:0; margin:0; flex-wrap:wrap}
.footer__pillars li{display:flex; flex-direction:column; gap:2px}
.footer__pillars strong{color:#fff; font-weight:600; font-size:15px}
.footer__pillars span{font-size:13px; color:rgba(255,255,255,.62)}
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:24px 0 18px; font-size:13.5px;
}
.footer__bottom p{margin:0}
.footer__bottom nav{display:flex; gap:22px; flex-wrap:wrap}
.footer a{color:rgba(255,255,255,.82); text-decoration:none}
.footer a:hover{color:#fff; text-decoration:underline}
.footer__disclaimer{
  font-size:12px; line-height:1.6; color:rgba(255,255,255,.5); margin:0;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.1); max-width:92ch;
}

/* ─────────── Legal pages ─────────── */
.legal{padding:60px 0 84px; max-width:760px}
.legal h1{font-size:clamp(2rem,4vw,2.7rem); margin-bottom:10px}
.legal .updated{color:var(--ink-3); font-size:14px; margin-bottom:38px}
.legal h2{font-size:1.3rem; margin:38px 0 12px}
.legal p,.legal li{color:var(--ink-2); font-size:15.5px}
.legal ul{padding-left:22px; margin:0 0 1em}
.legal li{margin-bottom:8px}
.legal .back{display:inline-block; margin-bottom:30px; font-weight:500; text-decoration:none}
.legal .back:hover{text-decoration:underline}

/* ─────────── Reveal on scroll ─────────── */
.reveal{opacity:0; transform:translateY(18px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none} }

/* ─────────── The scanner band ───────────
   Dark, so it reads as a break in the page and echoes the scanner's own UI.
   This is the feature everything else depends on, so it gets its own section
   rather than sitting as one card among six. */
.scanband{
  background:linear-gradient(165deg,var(--green-800),var(--green-900));
  color:rgba(255,255,255,.82);
  padding:88px 0; position:relative; overflow:hidden;
}
.scanband::before{
  content:""; position:absolute; width:620px; height:620px; right:-180px; top:-260px;
  border-radius:50%; background:radial-gradient(circle,rgba(99,199,166,.22),transparent 66%);
  pointer-events:none;
}
.scanband__grid{
  position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:64px; align-items:center;
}
.scanband h2{color:#fff; font-size:clamp(2rem,4vw,3rem); margin-bottom:22px}
.eyebrow--dark{background:rgba(99,199,166,.16); color:var(--mint-300)}
.scanband__lede{font-size:1.05rem; line-height:1.66; max-width:56ch; margin-bottom:34px}
.scanband__lede em{color:var(--mint-300); font-style:italic}

.scanband__unlocks{list-style:none; padding:0; margin:0 0 36px; display:grid; gap:22px}
.scanband__unlocks li{display:flex; gap:18px; align-items:flex-start}
.scanband__num{
  flex:none; font-family:var(--serif); font-size:15px; font-weight:600;
  color:var(--mint-500); width:34px; padding-top:2px;
  border-top:2px solid rgba(99,199,166,.45);
}
.scanband__unlocks strong{display:block; color:#fff; font-weight:600; font-size:16px; margin-bottom:3px}
.scanband__unlocks div{font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.72)}

.scanband__art{position:relative; display:flex; justify-content:center; align-items:center; margin:0}
.scanband__art img{
  position:relative; z-index:2; width:100%; max-width:460px; height:auto;
  border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.08);
}
/* a soft scan sweep behind the phone */
.scanband__beam{
  position:absolute; z-index:1; width:118%; height:58%; left:-9%;
  background:linear-gradient(90deg,transparent,rgba(99,199,166,.18),transparent);
  filter:blur(26px); pointer-events:none;
}

@media (max-width:980px){
  .scanband{padding:72px 0}
  .scanband__grid{grid-template-columns:1fr; gap:44px}
  .scanband__art{order:-1}
  .scanband__art img{max-width:400px}
}
@media (max-width:560px){
  .scanband__art img{max-width:320px}
  .scanband__unlocks{gap:18px}
}