:root{
  --bg:#000;
  --text:rgba(255,255,255,0.94);
  --muted:rgba(255,255,255,0.64);

  --stroke:rgba(255,255,255,0.08);
  --strokeStrong:rgba(255,255,255,0.14);

  --green:#32D74B;
  --purple:#AF52DE;
  --blue:#5AC8FA;
  --amber:#FF9F0A;

  --shadowSoft:0 18px 60px rgba(0,0,0,0.52);
  --shadowDeep:0 40px 140px rgba(0,0,0,0.78);

  --r:32px;
  --rSmall:24px;
  --container:1240px;
  --content:1120px;
  --navH:76px;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{
    animation:none !important;
    transition:none !important;
  }
}

body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 680px at 16% -8%, rgba(50,215,75,0.055) 0%, rgba(50,215,75,0.02) 32%, transparent 68%),
    radial-gradient(1100px 680px at 84% -4%, rgba(175,82,222,0.055) 0%, rgba(175,82,222,0.02) 30%, transparent 68%),
    radial-gradient(760px 560px at 50% 120%, rgba(90,200,250,0.04) 0%, rgba(90,200,250,0.015) 36%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.012), rgba(0,0,0,0) 18%),
    #000;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.14) 42%, rgba(0,0,0,0.46) 100%);
  z-index:-1;
}

a, button{
  -webkit-tap-highlight-color:transparent;
}

img{
  max-width:100%;
  display:block;
}

.skip{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip:focus{
  left:18px;
  top:12px;
  width:auto;
  height:auto;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(0,0,0,0.92);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.14);
  text-decoration:none;
  z-index:1000;
}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid rgba(50,215,75,0.55);
  outline-offset:3px;
  border-radius:14px;
}

/* SHARED PAGE SHELLS */
.siteShell,
.wrap{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
  padding:0 0 88px;
}

main#content{
  width:100%;
}

/* FULL WIDTH HEADER */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--navH);
  width:100%;
  margin:0;
  padding:0;
  background:transparent;
  transition:
    height .2s ease,
    background .2s ease,
    backdrop-filter .2s ease,
    box-shadow .2s ease;
}

.nav::before{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:rgba(0,0,0,0);
  pointer-events:none;
  z-index:0;
  transition:
    background .2s ease,
    backdrop-filter .2s ease,
    -webkit-backdrop-filter .2s ease;
}

.nav::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:100vw;
  height:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,0.06);
  pointer-events:none;
}

.nav.compact{
  height:64px;
  box-shadow:0 10px 40px rgba(0,0,0,0.22);
}

.nav.compact::before{
  background:rgba(10,10,10,0.72);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.navInner{
  position:relative;
  z-index:1;
  width:min(var(--content), calc(100% - 32px));
  height:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}

.logoTile{
  width:36px;
  height:36px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 16px 42px rgba(0,0,0,0.45);
  object-fit:cover;
  flex:0 0 auto;
}

.brandName{
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.02em;
  white-space:nowrap;
}

.brandText{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.brandText h1{
  margin:0;
  font-size:18px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-0.02em;
}

.brandText p{
  margin:3px 0 0;
  font-size:12px;
  line-height:1.15;
  color:rgba(255,255,255,0.58);
  white-space:nowrap;
}

.navLinks,
.navRight{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  min-width:0;
}

.navLinks a,
.navRight a{
  color:rgba(255,255,255,0.68);
  text-decoration:none;
  font-size:13px;
  font-weight:750;
  white-space:nowrap;
}

.navLinks a:hover,
.navRight a:hover{
  color:rgba(255,255,255,0.94);
}

.navStore{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
}

.navStore img{
  height:42px;
  width:auto;
  filter:drop-shadow(0 14px 38px rgba(0,0,0,0.50));
}

/* LEGACY BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,0.04);
  color:var(--text) !important;
  text-decoration:none;
  font-size:13px !important;
  font-weight:850 !important;
  transition:transform .14s ease, background .14s ease, border-color .14s ease, opacity .14s ease, box-shadow .14s ease;
}

.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 12px 32px rgba(0,0,0,0.22);
}

.btn.ghost{
  background:rgba(255,255,255,0.02);
}

.btn.primary{
  background:
    radial-gradient(circle at 20% 0%, rgba(50,215,75,0.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-color:rgba(50,215,75,0.22);
}

.btn.small{
  min-height:32px;
  padding:0 12px;
  font-size:12px !important;
}

/* HERO */
.hero{
  min-height:calc(100vh - 96px);
  display:grid;
  grid-template-columns:1.02fr 0.98fr;
  align-items:center;
  gap:24px;
  padding:34px 0 24px;
}

.heroCopy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.heroEyebrow,
.kicker{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.68);
  font-size:11px;
  font-weight:900;
  letter-spacing:0.18em;
  text-transform:uppercase;
}

.kickerDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(50,215,75,0.14);
  margin-right:8px;
}

.heroTitle,
.title{
  margin:18px 0 14px;
  font-size:clamp(54px, 7vw, 98px);
  line-height:1.0;
  letter-spacing:-0.065em;
  font-weight:950;
  max-width:7.6ch;
}

.heroTitle span{
  display:block;
  padding-bottom:0.06em;
  background:linear-gradient(90deg, var(--green), #79a8ff 52%, var(--purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}

.heroSubtitle,
.subtitle{
  margin:0;
  max-width:36rem;
  font-size:18px;
  line-height:1.65;
  color:rgba(255,255,255,0.66);
}

.heroPills,
.trustRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.heroPills span,
.trustPill{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.85);
  font-size:13px;
  font-weight:850;
}

.trustPill i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(50,215,75,0.88);
  display:inline-block;
  margin-right:8px;
}

.heroDiff{
  margin-top:20px;
  font-size:14px;
  font-weight:800;
  letter-spacing:0.01em;
  color:rgba(255,255,255,0.52);
}

.heroActions,
.ctaBlock{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-top:28px;
}

.heroMeta,
.ctaEyebrow{
  font-size:13px;
  color:rgba(255,255,255,0.54);
  font-weight:700;
}

.app-store-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .16s ease, opacity .16s ease;
}

.app-store-badge:hover{
  transform:translateY(-1px);
  opacity:0.96;
}

.app-store-badge img{
  height:62px;
  width:auto;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,0.54));
}

/* Hero CTA — primary, largest */
.heroCta img{
  height:68px;
}

.heroVisual{
  position:relative;
  min-height:760px;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

.heroGlow{
  position:absolute;
  border-radius:999px;
  opacity:0.92;
  pointer-events:none;
  background:transparent;
}

.heroGlowGreen{
  width:240px;
  height:460px;
  left:6%;
  top:24%;
  background:
    radial-gradient(ellipse at center,
      rgba(50,215,75,0.16) 0%,
      rgba(50,215,75,0.08) 34%,
      rgba(50,215,75,0.00) 72%);
}

.heroGlowPurple{
  width:300px;
  height:520px;
  right:0;
  top:18%;
  background:
    radial-gradient(ellipse at center,
      rgba(175,82,222,0.16) 0%,
      rgba(175,82,222,0.08) 34%,
      rgba(175,82,222,0.00) 74%);
}

.wave{
  position:absolute;
  width:78%;
  height:180px;
  opacity:0.72;
  filter:drop-shadow(0 0 24px currentColor);
  mask-image:linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.wave::before{
  content:"";
  position:absolute;
  inset:0;
  background:currentColor;
  clip-path:polygon(
    0% 60%, 6% 52%, 11% 70%, 18% 28%, 26% 64%, 33% 35%, 40% 58%, 47% 18%,
    54% 72%, 61% 30%, 68% 55%, 75% 36%, 82% 66%, 89% 42%, 100% 58%,
    100% 63%, 89% 47%, 82% 71%, 75% 41%, 68% 60%, 61% 35%, 54% 77%, 47% 23%,
    40% 63%, 33% 40%, 26% 69%, 18% 33%, 11% 75%, 6% 57%, 0% 65%
  );
}

.waveGreen{
  left:2%;
  top:38%;
  color:rgba(50,215,75,0.82);
}

.wavePurple{
  right:-2%;
  top:48%;
  color:rgba(175,82,222,0.80);
}

/* Device pair wrapper — pass-through on desktop */
.devicePair{
  display:contents;
}

.heroPhone{
  position:relative;
  width:min(430px, 86%);
  z-index:3;
  filter:drop-shadow(0 42px 120px rgba(0,0,0,0.76));
}

.heroWatch{
  position:absolute;
  width:min(220px, 36%);
  right:-13%;
  top:15%;
  z-index:4;
  filter:drop-shadow(0 30px 90px rgba(0,0,0,0.76));
}

/* PROOF BAR */
.proofBar{
  margin-top:6px;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  border-radius:24px;
}

.proofInner{
  min-height:88px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:20px 34px;
  padding:18px 22px;
}

.proofInner span{
  font-size:13px;
  font-weight:850;
  color:rgba(255,255,255,0.72);
  white-space:nowrap;
}

/* SECTIONS */
.section{
  margin-top:84px;
  scroll-margin-top:92px;
}

.sectionIntro{
  display:grid;
  gap:12px;
  margin-bottom:30px;
}

.sectionIntroWide .sectionTitle{
  max-width:9ch;
}

.sectionIntroCenter{
  text-align:center;
  justify-items:center;
}

.sectionEyebrow{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:rgba(255,255,255,0.46);
  font-weight:900;
}

.sectionTitle{
  margin:0;
  font-size:clamp(34px, 4.6vw, 64px);
  line-height:0.98;
  letter-spacing:-0.05em;
  font-weight:950;
  color:rgba(255,255,255,0.97);
  max-width:9ch;
}

.sectionLead{
  margin:0;
  max-width:44rem;
  color:rgba(255,255,255,0.66);
  font-size:16px;
  line-height:1.7;
}

/* OLDER SECTION SUPPORT */
.sectionHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
  flex-wrap:wrap;
}

.sectionHeader h2{
  margin:0;
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.04;
  letter-spacing:-0.04em;
  font-weight:950;
  color:rgba(255,255,255,0.96);
}

.sectionHeader .right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* FEATURE PANELS */
.featureGrid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
}

.featurePanel{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 18% 82%, rgba(50,215,75,0.08) 0%, rgba(50,215,75,0.04) 20%, rgba(50,215,75,0) 52%),
    radial-gradient(circle at 84% 18%, rgba(175,82,222,0.08) 0%, rgba(175,82,222,0.04) 20%, rgba(175,82,222,0) 54%),
    radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,0.035), rgba(255,255,255,0.00) 60%),
    rgba(255,255,255,0.03);
  box-shadow:var(--shadowSoft);
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px;
  align-items:flex-start;
  isolation:isolate;
}

.featurePanelLarge{
  grid-column:span 6;
}

.featurePanel:not(.featurePanelLarge){
  grid-column:span 6;
}

.featureText{
  position:relative;
  z-index:2;
  max-width:22rem;
}

.featureEyebrow{
  font-size:11px;
  font-weight:900;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.48);
  margin-bottom:10px;
}

.featureText h3{
  margin:0 0 10px;
  font-size:clamp(28px, 3.2vw, 46px);
  line-height:1.02;
  letter-spacing:-0.04em;
  font-weight:950;
  max-width:10ch;
}

.featureText p{
  margin:0;
  font-size:15px;
  line-height:1.68;
  color:rgba(255,255,255,0.66);
  max-width:30rem;
}

.featureMedia{
  position:relative;
  min-height:50px;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  z-index:2;
}

.featureMedia img{
  max-height:230px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 30px 100px rgba(0,0,0,0.72));
}

.featurePanel::before{
  display:none;
}

.featureGreen .featureMedia{
  justify-content:center;
  align-items:flex-end;
}

.featureGreen .featureMedia img{
  max-height:390px;
  transform:translateY(10px);
}

.featurePurple .featureMedia{
  justify-content:center;
}

.featurePurple .featureMedia img{
  max-height:390px;
  transform:translateY(10px);
}

.featureBlue .featureMedia{
  justify-content:center;
}

.featureBlue .featureMedia img{
  max-height:360px;
  transform:none;
}

.watchOnly{
  justify-content:center;
  align-items:flex-end;
}

.watchOnly img{
  max-height:350px;
}

.duoMedia{
  min-height:280px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  padding-top:12px;
}

.duoPhone{
  position:relative;
  z-index:2;
  left:-50%;
  width:min(250px, 68%);
  max-height:none !important;
}

.duoWatch{
  position:absolute;
  width:min(35px, 36%);
  right:2%;
  top:26%;
  z-index:4;
  filter:drop-shadow(0 30px 90px rgba(0,0,0,0.76));
}

/* WATCH SHOWCASE */
.watchShowcase{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
  border-radius:36px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 18% 82%, rgba(50,215,75,0.08) 0%, rgba(50,215,75,0.04) 20%, rgba(50,215,75,0) 54%),
    radial-gradient(circle at 84% 18%, rgba(175,82,222,0.08) 0%, rgba(175,82,222,0.04) 20%, rgba(175,82,222,0) 54%),
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,0.035), transparent 58%),
    rgba(255,255,255,0.03);
  box-shadow:var(--shadowSoft);
  overflow:hidden;
  padding:34px;
  isolation:isolate;
}

.watchShowcaseCopy{
  max-width:460px;
}

.watchList{
  display:grid;
  gap:18px;
}

.watchItem strong{
  display:block;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin-bottom:6px;
}

.watchItem p{
  margin:0;
  color:rgba(255,255,255,0.64);
  font-size:15px;
  line-height:1.65;
  max-width:34rem;
}

.watchShowcaseVisual{
  position:relative;
  min-height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.watchGlow{
  display:none;
}

.watchShowcaseVisual img{
  position:relative;
  width:min(360px, 82%);
  filter:drop-shadow(0 34px 100px rgba(0,0,0,0.74));
  z-index:2;
}

/* STEPS */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.stepCard{
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.04), transparent 60%),
    rgba(255,255,255,0.03);
  box-shadow:var(--shadowSoft);
  padding:28px;
}

.stepNum,
.num{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  font-weight:900;
  font-size:15px;
  margin-bottom:18px;
  flex:0 0 auto;
}

.stepCard h3,
.step h3{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.12;
  letter-spacing:-0.03em;
  font-weight:900;
}

.stepCard p,
.step p{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:rgba(255,255,255,0.64);
}

.step{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

/* CTA */
.ctaSection{
  margin-top:84px;
}

.ctaCard{
  position:relative;
  overflow:hidden;
  border-radius:38px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 18% 82%, rgba(50,215,75,0.08) 0%, rgba(50,215,75,0.04) 20%, rgba(50,215,75,0) 52%),
    radial-gradient(circle at 84% 18%, rgba(175,82,222,0.09) 0%, rgba(175,82,222,0.045) 18%, rgba(175,82,222,0) 54%),
    radial-gradient(140% 140% at 20% 0%, rgba(255,255,255,0.04), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.03);
  box-shadow:var(--shadowDeep);
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:20px;
  align-items:center;
  padding:34px 34px 24px;
  min-height:380px;
  isolation:isolate;
}

.ctaCard::before,
.ctaCard::after{
  display:none;
}

.ctaCopy{
  position:relative;
  z-index:2;
}

.ctaCopy h2{
  margin:10px 0 12px;
  font-size:clamp(40px, 5vw, 72px);
  line-height:0.96;
  letter-spacing:-0.05em;
  font-weight:950;
  max-width:8ch;
}

.ctaCopy p{
  margin:0 0 24px;
  max-width:28rem;
  color:rgba(255,255,255,0.66);
  font-size:17px;
  line-height:1.7;
}

.ctaVisual{
  position:relative;
  min-height:340px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:2;
}

.ctaPhone{
  width:min(270px, 64%);
  filter:drop-shadow(0 34px 100px rgba(0,0,0,0.72));
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
}

.ctaWatch{
  position:absolute;
  right:4%;
  top:14%;
  width:min(150px, 28%);
  filter:drop-shadow(0 26px 80px rgba(0,0,0,0.72));
}

/* FAQ */
.faq{
  display:grid;
  gap:12px;
}

details{
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.03), transparent 58%),
    rgba(255,255,255,0.03);
  box-shadow:var(--shadowSoft);
  overflow:hidden;
}

summary{
  cursor:pointer;
  list-style:none;
  padding:20px 22px;
  font-weight:900;
  font-size:17px;
  letter-spacing:-0.02em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

summary::-webkit-details-marker{ display:none; }

details[open] summary{
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}

.faqBody{
  padding:16px 22px 22px;
  color:rgba(255,255,255,0.66);
  font-size:15px;
  line-height:1.7;
}

.chev{
  width:10px;
  height:10px;
  border-right:2px solid rgba(255,255,255,0.52);
  border-bottom:2px solid rgba(255,255,255,0.52);
  transform:rotate(45deg);
  transition:transform .15s ease;
  flex:0 0 auto;
}

details[open] .chev{
  transform:rotate(-135deg);
}

/* LEGACY CARDS */
.card,
.mediaCard,
.valueTile,
.watchFrame{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,0.04), rgba(255,255,255,0.00) 60%),
    rgba(255,255,255,0.03);
  box-shadow:var(--shadowSoft);
}

.cardInner{
  padding:28px;
}

.valueGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.valueTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.valueTop b{
  font-weight:900;
  letter-spacing:-0.02em;
}

.valueTile p{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,0.64);
}

.chip,
.pill,
.miniPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.78);
  font-size:12px;
  font-weight:850;
}

.dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(50,215,75,0.88);
  box-shadow:0 0 0 4px rgba(255,255,255,0.05);
}

.thumbRow,
.miniMeta,
.watchBulletList{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.thumb{
  width:56px;
  height:56px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  flex:0 0 auto;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.paired{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.pairedCopy h3{
  margin:10px 0 6px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.02em;
}

.pairedCopy p{
  margin:0;
  color:rgba(255,255,255,0.64);
  font-size:14px;
  line-height:1.65;
}

.pairedNote{
  margin-top:14px;
  color:rgba(255,255,255,0.62);
  font-size:12px;
  font-weight:800;
  line-height:1.5;
}

.watchMedia{
  position:relative;
  width:min(320px, 100%);
  aspect-ratio:1 / 1.1;
  margin:0 auto;
}

.watchImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:translateY(6px) scale(0.99);
  transition:opacity .18s ease, transform .18s ease;
}

.watchImg.isActive{
  opacity:1;
  transform:translateY(0) scale(1);
}

.how{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.phoneFrame{
  margin:8px 18px 18px;
  position:relative;
  aspect-ratio:9 / 19.5;
  display:grid;
  place-items:center;
}

.phoneImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:translateY(8px) scale(0.99);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.phoneImg.isActive{
  opacity:1;
  transform:translateY(0) scale(1);
}

.heroHint{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.40);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:12px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 18px 70px rgba(0,0,0,0.55);
  pointer-events:none;
}

.heroHint .t{
  font-weight:900;
  font-size:12px;
  color:rgba(255,255,255,0.88);
}

.heroHint .s{
  font-size:12px;
  color:rgba(255,255,255,0.60);
}

.segmented{
  display:inline-flex;
  gap:6px;
  margin-top:14px;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  flex-wrap:wrap;
}

.segBtn{
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(255,255,255,0.78);
  font-weight:900;
  font-size:12px;
  cursor:pointer;
}

.segBtn.isActive{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.92);
}

/* PRIVACY PAGE */
.policyCard,
.policyContent{
  color:rgba(255,255,255,0.68);
  font-size:15px;
  line-height:1.75;
}

.policyContent h3{
  margin:24px 0 10px;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-0.02em;
  color:rgba(255,255,255,0.92);
}

.policyContent p{
  margin:0 0 16px;
}

.policyContent ul{
  margin:0 0 18px 20px;
  padding:0;
}

.policyContent li{
  margin:0 0 10px;
}

.policyMeta{
  color:rgba(255,255,255,0.52);
  font-size:12px;
  font-weight:850;
  margin-top:6px;
}

/* FOOTER */
.footer{
  margin-top:72px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  color:rgba(255,255,255,0.54);
  font-size:13px;
}

.footerLinks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}

.footer a{
  color:rgba(255,255,255,0.70);
  text-decoration:none;
}

.footer a:hover{
  color:rgba(255,255,255,0.94);
}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
}

.reveal.in{
  opacity:1;
  transform:translateY(0);
}

/* RESPONSIVE */
@media (max-width: 1120px){
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:20px;
  }

  .heroVisual{
    min-height:620px;
  }

  .heroTitle,
  .title{
    max-width:8.2ch;
  }

  .watchShowcase,
  .ctaCard,
  .paired{
    grid-template-columns:1fr;
  }

  .steps,
  .how{
    grid-template-columns:1fr;
  }

  .valueGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 980px){
  .siteShell,
  .wrap{
    width:min(var(--container), calc(100% - 24px));
    padding-bottom:72px;
  }

  .nav{
    height:68px;
  }

  .nav.compact{
    height:60px;
  }

  .navInner{
    width:min(var(--content), calc(100% - 24px));
    gap:12px;
    grid-template-columns:auto 1fr auto;
  }

  .navLinks{
    display:none;
  }

  .navStore img{
    height:40px;
  }

  .brandText p{
    display:none;
  }

  .heroTitle,
  .title{
    font-size:clamp(46px, 14vw, 76px);
    line-height:1.0;
  }

  .heroSubtitle,
  .subtitle{
    font-size:16px;
  }

  .heroVisual{
    min-height:520px;
  }

  .heroPhone{
    width:min(350px, 88vw);
  }

  .heroWatch{
    width:min(150px, 34vw);
    right:2%;
    top:26%;
  }

  .proofInner{
    gap:14px 20px;
    min-height:auto;
    padding:16px;
  }

  .section{
    margin-top:64px;
  }

  .sectionTitle,
  .sectionHeader h2{
    font-size:clamp(30px, 10vw, 48px);
    max-width:12ch;
  }

  .featureGrid{
    grid-template-columns:1fr;
  }

  .featurePanel,
  .featurePanelLarge,
  .featurePanel:not(.featurePanelLarge){
    grid-column:auto;
    min-height:auto;
    padding:24px 20px 20px;
  }

  .featureMedia{
    min-height:20px;
    margin-top:20px;
  }

  .featureMedia img{
    max-height:220px;
  }

  .featureGreen .featureMedia img,
  .featurePurple .featureMedia img,
  .featureBlue .featureMedia img{
    max-height:320px;
    transform:none;
  }

  .duoPhone{
    width:min(250px, 72vw);
  }

  .duoWatch{
    right:0;
    top:20%;
    width:min(150px, 34vw);
    bottom:10%;
  }

  .watchShowcase{
    padding:24px 20px;
  }

  .watchShowcaseVisual{
    min-height:380px;
  }

  .watchShowcaseVisual img{
    width:min(300px, 78vw);
  }

  .ctaSection{
    margin-top:64px;
  }

  .ctaCard{
    padding:24px 20px 16px;
    min-height:auto;
    grid-template-columns:1fr;
  }

  .ctaCopy h2{
    font-size:clamp(34px, 12vw, 54px);
    max-width:10ch;
  }

  .ctaVisual{
    min-height:250px;
  }

  .ctaPhone{
    width:min(220px, 64vw);
  }

  .ctaWatch{
    width:min(120px, 26vw);
    right:4%;
    top:6%;
  }

  summary{
    font-size:16px;
    padding:18px 18px;
  }

  .faqBody{
    padding:14px 18px 18px;
    font-size:14px;
  }

  .cardInner{
    padding:22px 18px;
  }

  .footer{
    margin-top:64px;
  }
}

@media (max-width: 640px){
  .siteShell,
  .wrap{
    width:min(var(--container), calc(100% - 20px));
  }

  .navInner{
    width:min(var(--content), calc(100% - 20px));
  }

  .brandName,
  .brandText h1{
    font-size:17px;
  }

  .logoTile{
    width:34px;
    height:34px;
    border-radius:12px;
  }

  .navStore img{
    height:36px;
  }

  .heroPills,
  .trustRow{
    gap:8px;
  }

  .heroPills span,
  .trustPill{
    min-height:38px;
    padding:0 12px;
    font-size:12px;
  }

  .app-store-badge img{
    height:56px;
  }

  .proofBar{
    border-radius:20px;
  }

  .featurePanel,
  .card,
  .mediaCard,
  .valueTile,
  .watchFrame,
  .stepCard,
  details,
  .ctaCard,
  .watchShowcase{
    border-radius:24px;
  }

  .heroGlow{
    opacity:0.72;
  }

  .wave{
    opacity:0.56;
  }
}

/* WHY REPSENSE / FLOW CARDS */
.featureStack{
  display:grid;
  gap:18px;
}

.flowCard{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items:center;
  gap:20px;
  min-height:520px;
  padding:34px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 18% 78%, rgba(50,215,75,0.095) 0%, rgba(50,215,75,0.05) 18%, rgba(50,215,75,0.00) 52%),
    radial-gradient(circle at 82% 30%, rgba(175,82,222,0.095) 0%, rgba(175,82,222,0.045) 20%, rgba(175,82,222,0.00) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    #050505;
  box-shadow:var(--shadowSoft);
  isolation:isolate;
}

.flowCard::before{
  display:none;
}

.flowCopy{
  position:relative;
  z-index:2;
  max-width:30rem;
  min-width:0;
}

.flowCopy h3{
  margin:0 0 12px;
  font-size:clamp(30px, 3.4vw, 52px);
  line-height:1.02;
  letter-spacing:-0.045em;
  font-weight:950;
  max-width:10ch;
  text-wrap:balance;
}

.flowCopy p{
  margin:0;
  font-size:16px;
  line-height:1.72;
  color:rgba(255,255,255,0.66);
  max-width:32rem;
}

.flowBullets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.flowBullets span{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.84);
  font-size:12px;
  font-weight:850;
}

.flowVisual{
  position:relative;
  min-height:430px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:2;
  min-width:0;
}

.flowGlow{
  display:none;
}

.flowPhone{
  position:relative;
  z-index:2;
  width:min(290px, 62%);
  max-width:100%;
  height:auto;
  filter:drop-shadow(0 38px 110px rgba(0,0,0,0.76));
}

.flowWatch{
  position:absolute;
  z-index:3;
  width:min(155px, 28%);
  max-width:42%;
  height:auto;
  right:8%;
  top:14%;
  filter:drop-shadow(0 28px 80px rgba(0,0,0,0.72));
}

.flowCard:nth-child(even){
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.flowCard:nth-child(even) .flowCopy{
  order:2;
}

.flowCard:nth-child(even) .flowVisual{
  order:1;
}

.flowCard:nth-child(even) .flowWatch{
  right:auto;
  left:8%;
}

/* tablet */
@media (max-width: 1100px){
  .flowCard{
    grid-template-columns:1fr;
    min-height:auto;
    gap:22px;
  }

  .flowCard:nth-child(even){
    grid-template-columns:1fr;
  }

  .flowCard:nth-child(even) .flowCopy,
  .flowCard:nth-child(even) .flowVisual{
    order:initial;
  }

  .flowVisual{
    min-height:360px;
  }

  .flowPhone{
    width:min(250px, 72vw);
  }

  .flowWatch{
    width:min(135px, 30vw);
    right:6%;
    top:10%;
  }

  .flowCard:nth-child(even) .flowWatch{
    left:auto;
    right:6%;
  }
}

/* iPhone / iOS Safari */
@media (max-width: 640px){
  .featureStack{
    gap:16px;
  }

  .flowCard{
    padding:22px 18px 18px;
    border-radius:24px;
    gap:18px;
    background:
      radial-gradient(circle at 18% 82%, rgba(50,215,75,0.085) 0%, rgba(50,215,75,0.04) 18%, rgba(50,215,75,0.00) 50%),
      radial-gradient(circle at 84% 18%, rgba(175,82,222,0.085) 0%, rgba(175,82,222,0.04) 18%, rgba(175,82,222,0.00) 52%),
      linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
      #050505;
  }

  .flowCopy{
    max-width:none;
  }

  .flowCopy h3{
    font-size:clamp(26px, 9vw, 42px);
    line-height:0.98;
    max-width:8ch;
  }

  .flowCopy p{
    font-size:15px;
    line-height:1.6;
    max-width:none;
  }

  .flowBullets{
    gap:8px;
    margin-top:18px;
  }

  .flowBullets span{
    min-height:36px;
    padding:0 12px;
    font-size:11px;
  }

  .flowVisual{
    min-height:300px;
    padding-top:4px;
  }

  .flowPhone{
    width:min(220px, 64vw);
  }
}

/* very small phones */
@media (max-width: 430px){
  .flowCard{
    padding:20px 16px 16px;
  }

  .flowCopy h3{
    font-size:clamp(24px, 8.8vw, 36px);
    max-width:7ch;
  }

  .flowCopy p{
    font-size:14px;
    line-height:1.55;
  }

  .flowVisual{
    min-height:270px;
  }

  .flowPhone{
    width:min(200px, 60vw);
  }
}

.flowPhone .ctaPhone {
  mix-blend-mode: lighten;

  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}

/* ─── MOBILE REFINEMENT (768px) ─── */
@media (max-width: 768px){

  /* ══ Device composition system (final) ══
     Desktop reference:
       Phone: min(430px, 86%), Watch: min(220px, 36%)
       Watch anchor: right:-13%, top:15%
       Ratio: watch ~51% of phone

     Mobile (proportional scale-down):
       Phone:  min(240px, 58vw) — all sections
       Watch:  min(124px, 30vw) — all sections (~52% of phone)
       Watch anchor: right:-14%, top:14% — all sections
       Shadow: 0 16px 50px rgba(0,0,0,0.72) — all devices
  ══════════════════════════════════════════ */

  /* ── Shell ── */
  .siteShell{
    width:calc(100% - 24px);
    padding-bottom:40px;
    overflow-x:hidden;
  }

  /* ── Navigation ── */
  .nav{ height:50px; }
  .nav.compact{ height:46px; }
  .navInner{
    width:calc(100% - 24px);
    gap:0;
  }
  .navLinks{ display:none; }
  .navStore img{ height:30px; }
  .logoTile{ width:30px; height:30px; border-radius:9px; }
  .brandName{ font-size:15px; }
  .brand{ gap:9px; }

  /* ── Hero ── */
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:16px 0 0;
    gap:6px;
  }

  .heroCopy{
    align-items:flex-start;
    padding:0;
  }

  .heroEyebrow{
    min-height:26px;
    padding:0 10px;
    font-size:9px;
    letter-spacing:0.12em;
  }

  .heroTitle{
    margin:6px 0 2px;
    font-size:clamp(36px, 10vw, 52px);
    line-height:1.0;
    letter-spacing:-0.055em;
    max-width:100%;
  }

  .heroSubtitle{
    font-size:13.5px;
    line-height:1.42;
    max-width:32ch;
    color:rgba(255,255,255,0.56);
  }

  /* Hide secondary elements — header CTA is enough */
  .heroDiff{ display:none; }
  .heroActions{ display:none; }

  /* Chips already hidden */
  .heroPills{ display:none; }

  /* ── Device pair — lock watch overlap to phone ── */
  .devicePair{
    display:inline-block;
    position:relative;
    transform:translateX(-12%);
  }

  /* Hero device */
  .heroVisual{
    min-height:auto;
    padding:20px 16px 24px;
    margin-top:0;
    position:relative;
    justify-content:center;
  }

  .heroVisual .devicePair{
    width:min(280px, 68vw);
  }

  .heroPhone{
    width:100%;
    display:block;
  }

  .heroWatch{
    display:block;
    position:absolute;
    width:46%;
    right:0;
    top:16%;
    z-index:4;
    transform:translateX(62%);
    filter:drop-shadow(0 16px 50px rgba(0,0,0,0.72));
  }

  /* Decorative — minimal */
  .heroGlow{ opacity:0.18; }
  .heroGlowGreen,
  .heroGlowPurple{
    width:90px;
    height:180px;
  }
  .wave{ opacity:0.12; height:70px; }

  /* ── Proof bar — transitional strip ── */
  .proofBar{
    margin-top:-2px;
    border-radius:16px;
    opacity:0.85;
  }
  .proofInner{
    gap:6px 12px;
    padding:8px 12px;
    min-height:auto;
  }
  .proofInner span{ font-size:10.5px; }

  /* ── Sections — tighter rhythm ── */
  .section{ margin-top:28px; scroll-margin-top:52px; }
  .sectionIntro{ margin-bottom:14px; gap:5px; }
  .sectionEyebrow{ font-size:10.5px; }
  .sectionTitle{
    font-size:clamp(24px, 7.5vw, 36px);
    max-width:14ch;
  }
  .sectionLead{
    font-size:13.5px;
    line-height:1.42;
  }

  /* ── Flow cards ── */
  .featureStack{ gap:10px; }

  .flowCard{
    grid-template-columns:1fr;
    min-height:auto;
    padding:14px 14px 10px;
    gap:8px;
    border-radius:20px;
  }

  .flowCard:nth-child(even){
    grid-template-columns:1fr;
  }
  .flowCard:nth-child(even) .flowCopy,
  .flowCard:nth-child(even) .flowVisual{
    order:initial;
  }

  .flowCopy h3{
    font-size:clamp(22px, 7vw, 32px);
    max-width:12ch;
    margin-bottom:4px;
  }

  .flowCopy p{
    font-size:13.5px;
    line-height:1.42;
  }

  .flowBullets{
    gap:5px;
    margin-top:10px;
  }
  .flowBullets span{
    min-height:28px;
    padding:0 9px;
    font-size:10px;
  }

  /* Flow device — watch locked to phone via devicePair */
  .flowVisual{
    min-height:220px;
    padding-top:0;
    position:relative;
    justify-content:center;
  }

  .flowVisual .devicePair{
    width:min(280px, 68vw);
  }

  .flowPhone{
    width:100%;
    display:block;
  }

  .flowWatch{
    position:absolute;
    width:54%;
    right:0;
    top:16%;
    z-index:3;
    transform:translateX(62%);
    filter:drop-shadow(0 16px 50px rgba(0,0,0,0.72));
  }

  .flowCard:nth-child(even) .flowWatch{
    left:auto;
    right:0;
    transform:translateX(62%);
  }

  .flowGlow{ display:none; }

  /* History card — phone only, centered */
  .flowVisualSingle{
    min-height:200px;
    justify-content:center;
    padding-left:0;
  }
  .flowPhoneHistory{ width:min(240px, 58vw); }

  /* ── Watch showcase ── */
  .watchShowcase{
    grid-template-columns:1fr;
    padding:14px 14px;
    gap:12px;
    border-radius:20px;
  }

  .watchList{ gap:10px; }
  .watchItem strong{ font-size:15px; }
  .watchItem p{ font-size:13.5px; line-height:1.42; }

  .watchShowcaseVisual{ min-height:240px; justify-content:center; }
  .watchShowcaseVisual img{ width:min(240px, 58vw); }

  /* ── Steps ── */
  .steps{
    grid-template-columns:1fr;
    gap:8px;
  }

  .stepCard{
    padding:14px 14px;
    border-radius:20px;
  }
  .stepNum{
    width:34px; height:34px;
    font-size:12px;
    border-radius:10px;
    margin-bottom:8px;
  }
  .stepCard h3{ font-size:18px; margin-bottom:4px; }
  .stepCard p{ font-size:13.5px; line-height:1.42; }

  /* ── CTA ── */
  .ctaSection{ margin-top:36px; }

  .ctaCard{
    grid-template-columns:1fr;
    padding:14px 14px 10px;
    min-height:auto;
    gap:10px;
    border-radius:20px;
  }

  .ctaCopy h2{
    font-size:clamp(28px, 9vw, 42px);
    max-width:10ch;
  }
  .ctaCopy p{
    font-size:13.5px;
    line-height:1.42;
    margin-bottom:12px;
  }

  .app-store-badge img{ height:44px; }

  /* CTA device — watch locked to phone via devicePair */
  .ctaVisual{
    min-height:180px;
    position:relative;
    justify-content:center;
  }
  .ctaVisual .devicePair{
    width:min(280px, 68vw);
  }
  .ctaPhone{
    width:100%;
    display:block;
  }
  .ctaWatch{
    position:absolute;
    width:46%;
    right:0;
    top:16%;
    z-index:3;
    transform:translateX(62%);
    filter:drop-shadow(0 16px 50px rgba(0,0,0,0.72));
  }

  /* ── FAQ ── */
  details{ border-radius:20px; }
  summary{ font-size:14.5px; padding:12px 14px; }
  .faqBody{ padding:8px 14px 12px; font-size:13.5px; line-height:1.42; }

  /* ── Footer ── */
  .footer{
    margin-top:36px;
    padding-top:14px;
    flex-direction:column;
    gap:6px;
    font-size:11.5px;
  }
  .footerLinks{ gap:10px; }
}

/* ─── SMALL PHONES (≤400px) ─── */
@media (max-width: 400px){

  .siteShell{
    width:calc(100% - 20px);
  }

  .navInner{ width:calc(100% - 20px); }
  .logoTile{ width:28px; height:28px; }
  .brandName{ font-size:14px; }
  .navStore img{ height:28px; }

  .heroEyebrow{
    min-height:24px;
    padding:0 8px;
    font-size:8.5px;
  }

  .heroTitle{
    margin:5px 0 2px;
    font-size:clamp(32px, 10vw, 44px);
  }

  .heroSubtitle{
    font-size:12.5px;
    max-width:28ch;
  }

  .heroVisual{
    padding:14px 10px 18px;
  }

  .heroVisual .devicePair{ width:min(230px, 60vw); }

  .proofInner{ padding:7px 10px; }
  .proofInner span{ font-size:10px; }

  .section{ margin-top:24px; }
  .sectionTitle{ font-size:clamp(22px, 7vw, 32px); }
  .sectionLead{ font-size:12.5px; }

  .flowCard{ padding:12px 12px 8px; gap:6px; border-radius:18px; }
  .flowCopy h3{ font-size:clamp(20px, 6.5vw, 28px); }
  .flowCopy p{ font-size:12.5px; }
  .flowBullets span{ min-height:26px; padding:0 8px; font-size:9.5px; }

  .flowVisual .devicePair{ width:min(230px, 60vw); }

  .flowVisualSingle{ min-height:180px; }
  .flowPhoneHistory{ width:min(210px, 56vw); }

  .watchShowcaseVisual img{ width:min(210px, 56vw); }

  .stepCard{ padding:12px 12px; border-radius:18px; }
  .stepCard h3{ font-size:16px; }
  .stepCard p{ font-size:12.5px; }

  .ctaCard{ padding:12px 12px 8px; border-radius:18px; }
  .ctaCopy h2{ font-size:clamp(24px, 8vw, 36px); }
  .ctaCopy p{ font-size:12.5px; }
  .ctaVisual .devicePair{ width:min(230px, 60vw); }

  .app-store-badge img{ height:40px; }

  details{ border-radius:18px; }
  summary{ font-size:13.5px; padding:10px 12px; }
  .faqBody{ font-size:12.5px; padding:6px 12px 10px; }

  .footer{ margin-top:28px; font-size:11px; }
}

/* ─── TABLET (769px – 1024px) ─── */
@media (min-width: 769px) and (max-width: 1024px){

  .siteShell{
    width:min(var(--container), calc(100% - 40px));
  }

  /* Hero — more spacious single-column */
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:24px 0 0;
    gap:20px;
  }

  .heroCopy{
    align-items:flex-start;
    max-width:640px;
  }

  .heroTitle{
    font-size:clamp(52px, 8vw, 72px);
    max-width:9ch;
  }

  .heroSubtitle{
    font-size:17px;
    line-height:1.58;
    max-width:38ch;
  }

  .heroDiff{
    font-size:14px;
  }

  .heroActions .app-store-badge img{ height:58px; }

  .heroPills span{
    min-height:38px;
    padding:0 14px;
    font-size:12.5px;
  }

  /* Hero device — larger for tablet, centered */
  .heroVisual{
    min-height:auto;
    padding:20px 0 30px;
  }

  .heroPhone{
    width:min(380px, 52vw);
  }

  .heroWatch{
    width:min(195px, 27vw);
    right:8%;
    top:16%;
  }

  /* Sections — more breathing room */
  .section{ margin-top:56px; }
  .sectionIntro{ margin-bottom:22px; }
  .sectionTitle{
    font-size:clamp(32px, 5vw, 52px);
  }
  .sectionLead{
    font-size:16px;
    line-height:1.6;
  }

  /* Flow cards — wider padding, larger devices */
  .flowCard{
    grid-template-columns:1fr;
    padding:26px 22px 20px;
    gap:16px;
  }

  .flowCopy h3{
    font-size:clamp(28px, 4vw, 40px);
  }

  .flowCopy p{
    font-size:15px;
    line-height:1.55;
  }

  .flowVisual{
    min-height:320px;
  }

  .flowPhone{
    width:min(320px, 44vw);
  }

  .flowWatch{
    width:min(165px, 23vw);
    right:8%;
    top:12%;
  }

  .flowPhoneHistory{
    width:min(320px, 44vw);
  }

  /* Watch showcase */
  .watchShowcase{
    grid-template-columns:1fr 1fr;
    padding:28px 24px;
  }

  .watchShowcaseVisual img{
    width:min(320px, 44vw);
  }

  /* Steps — 3 columns on tablet */
  .steps{
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
  }

  .stepCard{
    padding:22px 18px;
  }

  /* CTA */
  .ctaCard{
    grid-template-columns:1fr 0.9fr;
    padding:28px 24px 20px;
  }

  .ctaCopy h2{
    font-size:clamp(36px, 5vw, 52px);
  }

  .ctaVisual{
    min-height:300px;
  }

  .ctaPhone{
    width:min(260px, 36vw);
  }

  .ctaWatch{
    width:min(135px, 19vw);
    right:6%;
    top:10%;
  }

  /* FAQ */
  summary{ font-size:16px; }

  /* Proof bar */
  .proofInner{
    gap:16px 28px;
    padding:16px 20px;
  }
  .proofInner span{ font-size:12.5px; }
}

/* ─── LARGE PHONES (481px – 768px) ─── */
@media (min-width: 481px) and (max-width: 768px){

  .siteShell{
    width:calc(100% - 32px);
  }

  .heroTitle{
    font-size:clamp(40px, 10vw, 56px);
  }

  .heroSubtitle{
    font-size:14px;
    max-width:36ch;
  }

  .heroVisual{
    padding:24px 20px 28px;
  }

  .heroVisual .devicePair{ width:min(300px, 72vw); }

  .section{ margin-top:32px; }

  .flowCard{ padding:16px 16px 12px; }
  .flowVisual .devicePair{ width:min(280px, 68vw); }
  .flowPhoneHistory{ width:min(280px, 68vw); }

  .watchShowcaseVisual img{ width:min(280px, 68vw); }

  .ctaVisual .devicePair{ width:min(280px, 68vw); }

  .stepCard{ padding:16px 16px; }

  .proofInner{ padding:10px 14px; }
  .proofInner span{ font-size:11px; }
}

/* ─── New UI: hero "New" link, iPhone-only and iPhone Duo sections ─── */

.heroNew{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:12px 0 0 8px;
  color:rgba(255,255,255,0.82);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}

.heroNew span{
  padding:3px 9px;
  border-radius:999px;
  background:rgba(50,215,75,0.14);
  border:1px solid rgba(50,215,75,0.28);
  color:var(--green);
  font-size:11px;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.heroNew:hover{ color:#fff; }

.phoneOnly{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:24px;
  align-items:center;
  border-radius:36px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 82% 78%, rgba(50,215,75,0.08) 0%, rgba(50,215,75,0) 54%),
    rgba(255,255,255,0.03);
  box-shadow:var(--shadowSoft);
  overflow:hidden;
  padding:34px;
}

.phoneOnlyList{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 28px;
}

.phoneOnlyVisual{
  position:relative;
  display:flex;
  justify-content:center;
}

.phoneOnlyVisual img{
  width:min(300px, 80%);
  height:auto;
  filter:drop-shadow(0 34px 100px rgba(0,0,0,0.74));
}

/* iPhone Duo: a full-bleed band with the devices large. */
.duoBand{
  margin-top:96px;
  padding:6px 0 72px;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(175,82,222,0.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  scroll-margin-top:92px;
}

.duoBand .sectionIntroCenter .sectionLead{
  margin:0 auto;
}

.duoStage{
  display:grid;
  grid-template-columns:minmax(0, 620px) minmax(0, 300px);
  justify-content:center;
  gap:48px;
  align-items:end;
  margin-top:8px;
}

.duoShot{
  margin:0;
  text-align:center;
}

.duoShot img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 40px 120px rgba(0,0,0,0.8));
}

.duoShot:not(.duoShotWide) img{
  width:min(100%, 300px);
}

.duoShot figcaption{
  margin-top:16px;
  color:rgba(255,255,255,0.62);
  font-size:14px;
}

.duoPoints{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:34px;
}

.duoPoints span{
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.8);
  font-size:13px;
  font-weight:650;
}

@media (max-width: 980px){
  .phoneOnly{ grid-template-columns:1fr; padding:26px; }
  .phoneOnlyVisual{ order:-1; }
  .duoStage{ grid-template-columns:minmax(0, 620px); gap:34px; }
}

@media (max-width: 640px){
  .phoneOnlyList{ grid-template-columns:1fr; gap:18px; }
  .heroNew{ margin-left:0; }
  .duoBand{ margin-top:72px; padding-bottom:52px; }
}

/* ─── iPhone Duo and mid-size screens ───
   Duo inner display: 669 pt portrait, 951 pt landscape; outer display 466 pt.
   Earlier rules stack up between 640 and 1120 px; these come last and settle them. */

/* The hero always offers the App Store, at every width. */
@media (max-width: 768px){
  .heroActions{
    display:flex;
    margin-top:14px;
  }
  .heroActions .app-store-badge img{ height:44px; }
  .heroMeta{ display:none; }
}

/* Duo landscape and small laptops: copy and devices side by side, not one narrow
   column beside an empty half. */
@media (min-width: 860px) and (max-width: 1120px){
  .hero{
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items:center;
    gap:24px;
    padding-top:18px;
  }
  .heroTitle{
    font-size:clamp(46px, 5.6vw, 62px);
    max-width:10ch;
  }
  .heroSubtitle{ max-width:36ch; }
  .heroVisual{
    min-height:auto;
    padding:12px 0 20px;
  }
  .heroPhone{ width:min(290px, 72%); }
  .heroWatch{
    width:min(150px, 34%);
    right:2%;
    top:18%;
  }
}

/* Short, wide screens (Duo landscape): keep each device within one screen height. */
@media (max-height: 760px) and (min-width: 860px){
  .flowPhone,
  .flowPhoneHistory{ max-height:520px; width:auto; }
  .phoneOnlyVisual img{ max-height:520px; width:auto; }
  .watchShowcaseVisual{ min-height:auto; }
  .watchShowcaseVisual img{ max-height:440px; width:auto; }
}

/* Centre each Duo image in its column. */
.duoShot img{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* Feature cards between phone and desktop widths. */
@media (min-width: 769px) and (max-width: 1100px){
  /* Keep the Watch on the phone it belongs to, not floating at the card's edge. */
  .flowVisual{ display:flex; justify-content:center; }
  .flowVisual .devicePair{
    display:inline-block;
    position:relative;
    width:min(250px, 46%);
    transform:translateX(-10%);
  }
  .flowVisual .devicePair .flowPhone{ width:100%; display:block; }
  .flowVisual .devicePair .flowWatch,
  .flowCard:nth-child(even) .flowVisual .devicePair .flowWatch{
    left:auto;
    right:-34%;
    top:14%;
    width:52%;
  }
}

/* Duo landscape and small laptops: copy beside the devices, alternating sides. */
@media (min-width: 860px) and (max-width: 1100px){
  .flowCard{
    grid-template-columns:minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap:20px;
    padding:28px;
  }
  .flowCard:nth-child(even){
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .flowCard:nth-child(even) .flowCopy{ order:2; }
  .flowCard:nth-child(even) .flowVisual{ order:1; }
  .flowVisual{ min-height:auto; }
  .flowVisual .devicePair{ width:min(230px, 62%); }
}

/* The App Store link keeps its own column even when the nav links are hidden;
   otherwise it falls into the middle track and Safari doesn't draw it. */
.navStore{
  grid-column:3;
  justify-self:end;
}

/* Hero: the App Store button with the iPhone Duo link beside it. */
.heroActions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px;
}
.heroActions .heroNew{ margin:0; }

/* Tempo-led hero: each phrase on one line, at every width. */
.heroTitle{
  max-width:none;
  font-size:clamp(40px, 5.4vw, 80px);
  white-space:nowrap;
}
.heroTitle span{ white-space:nowrap; }
@media (min-width: 860px) and (max-width: 1120px){
  .heroTitle{ font-size:clamp(40px, 5vw, 56px); max-width:none; }
}
@media (max-width: 859px){
  .heroTitle{ font-size:clamp(34px, 9.4vw, 64px); max-width:none; }
}

/* ─── App Store buttons (as on controlpad.tech) ───
   Our own button instead of Apple's badge image: a glyph for iPhone and Apple Watch,
   "Download on the / App Store", bright enough to be the page's primary action. */
.button{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:200px;
  min-height:58px;
  padding:8px 22px 8px 18px;
  border-radius:16px;
  line-height:1.15;
  text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.button:hover{ transform:translateY(-1px); }
.button:active{ transform:translateY(0); }

.button--primary{
  color:#05070c;
  background:#f5f5f7;
  box-shadow:0 10px 30px rgba(50, 215, 75, 0.18);
}
.button--primary:hover{
  color:#05070c;
  background:#fff;
  box-shadow:0 12px 36px rgba(50, 215, 75, 0.26);
}

.button-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.button-icon{
  width:28px;
  height:28px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.button-small{
  font-size:11px;
  font-weight:500;
  opacity:.8;
}
.button-large{
  font-size:20px;
  font-weight:600;
  letter-spacing:-0.02em;
}

/* Nav: a compact pill in the action green, the same green as the app's buttons. */
.navStore{
  color:#05070c;
  background:var(--green);
  font-size:14px;
  font-weight:600;
  padding:8px 18px;
  border-radius:999px;
  text-decoration:none;
  transition:background-color .15s ease, transform .15s ease;
}
.navStore:hover{
  color:#05070c;
  background:#4ae061;
  transform:translateY(-1px);
}

/* Phones: full-width-ish buttons that never squeeze the label. */
@media (max-width:520px){
  .button{ width:min(100%, 300px); justify-content:center; }
}