/* =============================================================
   LastMile landing page
   Palette and type taken from the brand system (design_system.png):
   Deep Summit / Sky Blue / Altitude / Snow / Sunrise, Inter for text.
   The page commits to a single bright alpine world — there is no dark
   variant, because the brand is literally "a brighter tomorrow".
   ============================================================= */

:root {
  --summit:  #0F2B46;
  --sky:     #3B82F6;
  --sky-dk:  #2563EB;
  --altitude:#7EC8FF;
  --snow:    #F5F9FF;
  --sunrise: #FFD88A;

  --ink:     #0F2B46;
  --ink-2:   #3D5876;
  --ink-3:   #58718C;
  --line:    #DCE7F3;
  --paper:   #FFFFFF;
  --wash:    #F2F7FD;

  /* Inter is the brand's committed text face (design_system.png §07) and stays.
     Display is a separate, rounder geometric grotesque because the comp's
     headline plainly isn't Inter; the two are held apart by weight and size,
     not by fighting each other at the same scale. */
  --display: 'Figtree', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --script:  'Caveat', ui-rounded, cursive;

  /* Spacing scale. Every gap and pad below resolves to one of these; the page
     had accumulated one-off 7/9/11/13/22px values that read as noise. */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px;  --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --shadow-sm: 0 2px 10px rgba(15,43,70,.05), 0 1px 2px rgba(15,43,70,.04);
  --shadow-md: 0 18px 40px -18px rgba(15,43,70,.20), 0 2px 8px rgba(15,43,70,.05);
  --shadow-lg: 0 40px 90px -30px rgba(15,43,70,.34);

  --nav-h: 74px;

  /* Named z-index scale — no bare 40/50/999 scattered through the file. */
  --z-base: 1; --z-raised: 2; --z-sticky: 40; --z-nav: 50; --z-skip: 100;

  /* Exponential ease-outs. --ease stays the general-purpose curve; the sharper
     two are for motion that should arrive and settle immediately. */
  --ease:      cubic-bezier(.22, .68, .24, 1);
  --ease-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
/* width/height attributes are set on every img to reserve layout space and
   avoid CLS; without this the attribute height wins and the phones render at
   their full intrinsic pixel height. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

svg[viewBox] {
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
/* The comp's ten-area row and trust row run wider than the reading column. */
.wrap.wide { max-width: 1360px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-skip);
  background: var(--sky); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  transition: top .2s;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

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

p { text-wrap: pretty; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 4.9vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); }
em { font-style: normal; color: var(--sky); }

.eyebrow {
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(.72rem, 1.15vw, .78rem);
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.85;
  margin-bottom: 22px;
  position: relative;
}
.eyebrow .q { position: absolute; margin-left: 2px; }
.eyebrow.dark { color: #2C3F57; }

.kicker {
  font-family: var(--body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sky-dk);
  margin-bottom: 12px;
}

.sub {
  color: var(--ink-2);
  font-size: clamp(.88rem, 1.15vw, .96rem);
  max-width: 62ch;
  margin: 14px auto 0;
}
.sub.left { margin-inline: 0; }

.script {
  font-family: var(--script);
  font-weight: 600;
  color: #2E5C93;
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: .01em;
}

/* ---------------- App Store button ---------------- */

.appstore {
  display: inline-flex; align-items: center; gap: 11px;
  background: #06121F; color: #fff;
  padding: 10px 20px 10px 17px;
  border-radius: 13px;
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease-expo), box-shadow .3s var(--ease-expo), background .3s;
}
.appstore:hover { transform: translateY(-2px); background: #0C1E31; box-shadow: var(--shadow-lg); }
.appstore:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.appstore .apple { width: 24px; height: 24px; fill: #fff; stroke: none; flex: none; }
.appstore span { display: block; line-height: 1.05; }
.appstore small { display: block; font-size: .64rem; letter-spacing: .04em; opacity: .92; }
.appstore strong { display: block; font-size: 1.12rem; font-weight: 500; letter-spacing: -.015em; }
.appstore.lg { padding: 13px 26px 13px 21px; border-radius: 15px; }
.appstore.lg .apple { width: 30px; height: 30px; }
.appstore.lg small { font-size: .72rem; }
.appstore.lg strong { font-size: 1.42rem; }

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

#nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
#nav.stuck {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(15,43,70,.05);
}
.nav-row { display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; min-height: 44px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow-sm); }
.brand-word {
  font-family: var(--display); font-weight: 800;
  font-size: 1.32rem; letter-spacing: -.035em; color: var(--summit);
}
.brand-word b { color: var(--sky); font-weight: 800; }

.nav-links { display: flex; gap: clamp(14px, 2.6vw, 34px); margin-inline: auto; }
.nav-links a {
  font-size: .90rem; font-weight: 500; color: #24405E;
  position: relative;
  /* 44px tall hit area without moving the text off the nav baseline. */
  padding: 14px 0; margin: -14px 0;
  display: inline-flex; align-items: center;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 12px; height: 1.5px;
  background: var(--sky); border-radius: 2px;
  transition: right .32s var(--ease);
}
.nav-links a:hover::after { right: 0; }

.nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 12px; }
.nav-burger span { display: block; height: 2px; background: var(--summit); border-radius: 2px; transition: .3s var(--ease); }
.nav-burger span + span { margin-top: 6px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

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

.hero {
  position: relative;
  min-height: min(100svh, 980px);
  padding-top: var(--nav-h);
  display: flex; align-items: center;
  overflow: hidden;
  /* Base sky, so the page has the right colour before the canvas paints. */
  background:
    radial-gradient(120% 80% at 76% 10%, rgba(255,240,201,.62) 0%, rgba(255,240,201,0) 48%),
    linear-gradient(180deg, #8FC3F2 0%, #B7DAFC 30%, #DCEDFD 66%, #FFFFFF 100%);
}
#hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#hero-gl { z-index: 1; }
.hero-veil { z-index: 1; }
.hero-fade { z-index: 3; }
.hero-static-peak { position: absolute; width: 140%; max-width: none; right: -25%; bottom: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at 55% 45%, #000 35%, transparent 73%); mask-image: radial-gradient(ellipse at 55% 45%, #000 35%, transparent 73%); }
.hero-static-phone { position: relative; width: clamp(180px, 19vw, 270px); margin: 28px auto 28px 8%; transform: rotate(-7deg); }
.hero-webgl-ready .hero-static-phone, .hero-webgl-ready .hero-static-peak { visibility: hidden; }

/* Keeps the headline readable over the brightest part of the sky without
   flattening the art — a soft left-weighted scrim, not a full overlay. */
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 6% 42%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 26%, rgba(255,255,255,.28) 48%, rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 26%);
}
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 130px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 82%);
}

.hero-grid {
  position: relative; z-index: var(--z-raised);
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 30px; align-items: center;
  padding-block: clamp(40px, 7vh, 84px);
}
.hero-copy { max-width: 620px; }
.hero h1 { margin-bottom: 26px; }
.lede { color: #2A4463; font-size: clamp(.97rem, 1.28vw, 1.05rem); max-width: 40ch; margin-bottom: 28px; }

.hero-perks {
  display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap;
  margin-top: clamp(38px, 6vh, 62px);
  font-size: .86rem; font-weight: 600; line-height: 1.32; color: var(--summit);
}
.hero-perks li { text-align: center; }
.perk-ico {
  width: 54px; height: 54px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 6px 18px -8px rgba(15,43,70,.28);
  backdrop-filter: blur(6px);
  color: var(--sky);
  transition: transform .4s var(--ease), background .4s;
}
.perk-ico svg { width: 25px; height: 25px; stroke-width: 1.9; }
.hero-perks li:hover .perk-ico { transform: translateY(-4px); background: rgba(255,255,255,.86); }

.hero-stage { position: relative; min-height: 300px; align-self: stretch; }
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-stage { grid-column: 2; grid-row: 1 / span 2; display: grid; align-content: center; }
.hero-perks { grid-column: 1; grid-row: 2; margin-top: 0; }
.hero-script::before {
  content: ''; position: absolute; z-index: -1;
  inset: -70% -46% -64% -40%;
  background: radial-gradient(52% 48% at 50% 50%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.50) 62%, rgba(255,255,255,0) 84%);
}
.hero-script {
  position: absolute; right: -6px; bottom: 3%; isolation: isolate;
  transform: rotate(-3.5deg);
  text-align: left;
  color: #14406F;
  text-shadow: 0 1px 2px rgba(255,255,255,.9);
}
.squiggle { width: 58px; height: 38px; margin-top: 4px; color: #4E7DB5; stroke: currentColor; }

/* ---------------- section rhythm ---------------- */

.sec { padding-block: clamp(48px, 6.4vh, 76px); position: relative; }
.areas { text-align: center; padding-block: clamp(30px, 4vh, 44px); }
.areas .kicker { letter-spacing: .26em; }

/* Ten across in a single row, as in the comp — small, quiet cards whose job
   is to be scanned, not read one at a time. */
.area-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(10, 1fr);
  margin-top: clamp(20px, 2.8vh, 26px);
}
.area {
  background: rgba(255,255,255,.72);
  border: 1px solid #E7EFF9;
  border-radius: var(--r-md);
  padding: 16px 7px 14px;
  transition: transform .4s var(--ease-expo), box-shadow .4s var(--ease-expo), border-color .4s, background .4s;
}
.area:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--shadow-md); border-color: #C6DCF4; }
.area-ico {
  width: 34px; height: 34px; margin: 0 auto 9px;
  display: grid; place-items: center; color: var(--sky);
  transition: transform .4s var(--ease);
}
.area:hover .area-ico { transform: translateY(-2px) scale(1.06); }
.area-ico svg { width: 27px; height: 27px; stroke-width: 1.75; }
.area h3 { font-size: .8rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 3px; line-height: 1.2; }
.area p { font-size: .72rem; color: var(--ink-3); line-height: 1.32; }

/* ---------------- coach ---------------- */

.coach { background: linear-gradient(180deg, #fff 0%, #F6FAFF 40%, #fff 100%); overflow: hidden; padding-block: clamp(44px, 5.6vh, 68px); }
.band-ridge {
  position: absolute; right: -8%; bottom: 2%; width: 74%; opacity: .62;
  pointer-events: none; z-index: 0;
}
.coach-grid {
  position: relative; z-index: var(--z-base);
  display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(24px, 3.4vw, 46px); align-items: center;
}
.coach-visual { position: relative; padding-left: clamp(0px, 9vw, 128px); }
/* The chat screenshot is tall; without a cap it drives the whole section's
   height and swallows the annotations either side of it. */
/* Capped and cropped at the bottom, the way the comp presents it — a full
   1300px-tall chat screenshot would otherwise set the section's height. */
.coach-visual .phone-frame {
  max-width: 374px; margin-left: auto;
  max-height: 648px; overflow: hidden;
}
.coach-visual .phone-frame img { border-radius: 27px 27px 0 0; }
.coach-script-l {
  position: absolute; left: -6px; top: 12%; transform: rotate(-5deg);
  z-index: 2; text-align: left; max-width: 150px;
  color: #1E4E86;
  text-shadow: 0 1px 6px #fff, 0 0 16px #fff, 0 0 30px rgba(255,255,255,.9);
}
.coach-rail {
  position: absolute; left: 0; bottom: 10%;
  font-size: .72rem; letter-spacing: .21em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; line-height: 2.5;
}
/* The comp floats this beside the bullet list, not under the button. */
.coach-copy { position: relative; }
.coach-script-r {
  position: absolute; right: -8px; top: 46%;
  transform: rotate(3.5deg); text-align: left; width: 8.6em;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  color: #3568A5;
  text-shadow: 0 1px 6px #fff, 0 0 16px rgba(255,255,255,.9);
}

.phone-frame {
  border-radius: 34px;
  padding: 7px;
  background: linear-gradient(150deg, #F0F4F8, #C3CCD6 28%, #8E9AA8 52%, #E6ECF2 78%, #AAB6C3);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(15,43,70,.06);
  overflow: hidden;
}
.phone-frame img { border-radius: 27px; display: block; width: 100%; }
.phone-frame.tilt {
  transform: perspective(1600px) rotateY(-8deg) rotateX(1.5deg);
  transition: transform .9s var(--ease);
}
.phone-frame.tilt:hover { transform: perspective(1600px) rotateY(-3deg) rotateX(0deg) translateY(-6px); }
.phone-frame.sm { border-radius: 24px; padding: 5px; }
.phone-frame.sm img { border-radius: 19px; }

.ticks { margin: 20px 0 24px; display: grid; gap: 11px; max-width: 27em; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: .875rem; color: #24405E; }
.ticks svg { width: 21px; height: 21px; color: var(--sky); flex: none; }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 999px;
  background: #fff; border: 1px solid #C9DEF6; color: var(--sky-dk);
  font-weight: 600; font-size: .9rem;
  box-shadow: var(--shadow-sm);
  transition: .35s var(--ease);
}
.pill svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.pill:hover { background: var(--sky); border-color: var(--sky); color: #fff; box-shadow: var(--shadow-md); }
.pill:active { transform: scale(.98); transition-duration: .08s; }
.pill:hover svg { transform: translateX(4px); }

.link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--sky-dk); font-weight: 600; font-size: .93rem;
  /* Inline link, but still a 44px target on touch. */
  min-height: 44px; margin-top: var(--s-3);
}
.link svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.link:hover svg { transform: translateX(5px); }

/* ---------------- integrations ---------------- */

.integrations { background: linear-gradient(180deg, #fff, #F4F9FF); padding-block: clamp(40px, 5.2vh, 60px); }
.int-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 54px); align-items: center;
}

.hub { position: relative; display: grid; grid-template-columns: 164px minmax(48px, 92px) 1fr; align-items: center; }
.hub-node {
  text-align: center; z-index: 2;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 16px 15px; box-shadow: var(--shadow-md);
  width: 164px;
}
.hub-heart {
  width: 60px; height: 60px; margin: 0 auto 10px; display: grid; place-items: center;
  border-radius: 16px; background: #FFF1F2; color: #F43F5E;
}
.hub-heart svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.hub-node b { display: block; font-size: .9rem; font-weight: 700; }
.hub-node small { display: block; font-size: .74rem; color: var(--ink-3); line-height: 1.6; margin-top: 6px; }

.hub-wires {
  width: 100%; height: 100%; align-self: stretch;
  color: #A9C7EA; z-index: 0;
}
.hub-wires path { stroke-dasharray: 3 5; }

.hub-list { display: grid; gap: 5px; z-index: 1; justify-items: stretch; }
.hub-list li {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 8px 14px; font-size: .82rem; font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), border-color .4s;
}
.hub-list li:hover { transform: translateX(5px); border-color: #C0D9F5; }
.hub-list svg { width: 20px; height: 20px; flex: none; stroke-width: 1.9; }
.c-orange { color: #F97316 } .c-red { color: #EF4444 } .c-indigo { color: #6366F1 }
.c-green { color: #16A34A } .c-blue { color: #2563EB } .c-slate { color: #94A3B8 }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(26px, 3.5vh, 40px); }
.trust-card {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 13px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 18px; box-shadow: var(--shadow-sm);
}
.trust-card span { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #EEF5FF; color: var(--sky); }
.trust-card span svg { width: 21px; height: 21px; }
.trust-card b { font-size: .855rem; align-self: end; }
.trust-card small { font-size: .745rem; color: var(--ink-3); align-self: start; }

/* ---------------- screenshots ---------------- */

.shots { background: #F4F9FF; padding-block: clamp(40px, 5.4vh, 62px); }
.shots-grid { display: grid; gap: clamp(24px, 3vw, 42px); grid-template-columns: minmax(0, .84fr) minmax(0, 1.62fr); align-items: center; }
.shot-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 1.2vw, 16px); }
.shot-browser { min-width: 0; }
.shot-hint { display: none; }
.shot-rail li { text-align: center; }
.shot-rail span { display: block; margin-top: var(--s-3); font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.shot-rail .phone-frame { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.shot-rail li:hover .phone-frame { transform: translateY(-10px) scale(1.03); box-shadow: var(--shadow-lg); }

/* ---------------- faq ---------------- */

.faq { background: #F4F9FF; padding-top: 0; padding-bottom: clamp(46px, 6vh, 72px); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 4px 22px; box-shadow: var(--shadow-sm);
  transition: border-color .35s, box-shadow .35s;
}
.faq details[open] { border-color: #C6DCF4; box-shadow: var(--shadow-md); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none;
  padding: 15px 0; font-weight: 600; font-size: .95rem;
}
.faq summary::-webkit-details-marker { display: none; }
.chev { width: 11px; height: 11px; border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky); transform: rotate(45deg) translate(-2px,-2px); transition: transform .35s var(--ease); flex: none; }
.faq details[open] .chev { transform: rotate(-135deg) translate(-2px,-2px); }
.faq details p { padding: 0 0 18px; font-size: .9rem; color: var(--ink-2); max-width: 62ch; }

/* ---------------- cta ---------------- */

.cta {
  position: relative; min-height: 560px; display: flex; align-items: center;
  overflow: hidden; border-radius: 44px 44px 0 0;
}
.cta-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cta::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(95% 120% at 2% 50%, rgba(255,255,255,.80) 0%, rgba(255,255,255,.42) 34%, rgba(255,255,255,0) 62%),
    radial-gradient(58% 78% at 97% 4%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 46%, rgba(255,255,255,0) 76%);
}
.cta-grid { position: relative; z-index: var(--z-raised); display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 74px; }
/* Pinned to the top, where the art keeps open sky — level with the eyebrow,
   as in the comp, rather than centred over the figure. */
.cta-list { align-self: flex-start; margin-top: 6px; }
.cta h2 { margin-bottom: 14px; color: #0B2138; font-size: clamp(2rem, 3.6vw, 2.95rem); }
.cta-sub { color: #1B3654; font-size: .95rem; margin-bottom: 26px; }
.cta-list {
  /* The comp sets this straight on the sky. The regenerated art keeps the
     upper right pale, so it reads without a card behind it. */
  text-align: right; font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #0D2138; line-height: 2.4;
  text-shadow: 0 1px 2px rgba(255,255,255,.95);
}

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

footer { background: #fff; border-top: 1px solid var(--line); padding-block: 28px; }
.foot-row { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.foot-links { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.foot-links a {
  font-size: .86rem; color: var(--ink-2);
  display: inline-flex; align-items: center; min-height: 44px;
}
.foot-links a:hover { color: var(--sky); }
.social { display: flex; gap: 8px; margin-left: auto; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9px; background: #0F1B2A; color: #fff; transition: .3s var(--ease); }
.social a:hover { background: var(--sky); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }
.foot-tag { font-size: .79rem; color: var(--ink-3); }

/* ---------------- reveal ---------------- */

/* Reveals enhance an already-visible page; they never gate it.

   Everything is visible by default. Only once main.js has confirmed it can
   actually run the animation (JS alive, IntersectionObserver present, motion
   not reduced) does it set .js-motion on <html> and hand the hidden state over.
   The previous arrangement hid content in CSS and relied on a transition to
   bring it back — so anywhere the transition never ran (a background tab, a
   headless renderer, a JS error) the section shipped blank. It did, twice. */
.js-motion .rv { opacity: 0; will-change: opacity, transform; }
.js-motion .rv.in {
  opacity: 1; transform: none; filter: none;
  transition:
    opacity .72s var(--ease-quart),
    transform .72s var(--ease-quart),
    filter .72s var(--ease-quart);
}
.js-motion .d1.in { transition-delay: .07s } .js-motion .d2.in { transition-delay: .14s }
.js-motion .d3.in { transition-delay: .21s } .js-motion .d4.in { transition-delay: .28s }

/* Each section's reveal is shaped like the thing it reveals, rather than one
   identical fade-up applied sixty times. */
.js-motion .hero-copy .rv     { transform: translateY(16px); }
.js-motion .areas .rv         { transform: translateY(12px); }
.js-motion .area              { transform: translateY(10px) scale(.985); }
.js-motion .coach-copy .ticks li { transform: translateX(-14px); }
.js-motion .hub-list li       { transform: translateX(16px); }
.js-motion .trust-card        { transform: translateY(14px); }
.js-motion .shot-rail li      { transform: translateY(18px) scale(.97); }
.js-motion .faq details       { transform: translateY(8px); }
.js-motion .cta .rv           { transform: translateY(14px); }
.js-motion .coach-visual      { transform: translateY(20px) scale(.99); }

/* The ten cards stagger across the row rather than all arriving together. */
.js-motion .area:nth-child(1).in { transition-delay: 0s }
.js-motion .area:nth-child(2).in { transition-delay: .04s }
.js-motion .area:nth-child(3).in { transition-delay: .08s }
.js-motion .area:nth-child(4).in { transition-delay: .12s }
.js-motion .area:nth-child(5).in { transition-delay: .16s }
.js-motion .area:nth-child(6).in { transition-delay: .2s }
.js-motion .area:nth-child(7).in { transition-delay: .24s }
.js-motion .area:nth-child(8).in { transition-delay: .28s }
.js-motion .area:nth-child(9).in { transition-delay: .32s }
.js-motion .area:nth-child(10).in { transition-delay: .36s }
.js-motion .ticks li:nth-child(2).in { transition-delay: .06s }
.js-motion .ticks li:nth-child(3).in { transition-delay: .12s }
.js-motion .ticks li:nth-child(4).in { transition-delay: .18s }
.js-motion .ticks li:nth-child(5).in { transition-delay: .24s }
.js-motion .hub-list li:nth-child(n+2).in { transition-delay: .05s }
.js-motion .hub-list li:nth-child(n+4).in { transition-delay: .1s }
.js-motion .hub-list li:nth-child(n+6).in { transition-delay: .15s }

/* ---------------- responsive ---------------- */

@media (max-width: 1080px) {
  .area-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .shots-grid, .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .coach-script-r { position: static; width: auto; margin-top: 24px; transform: none; }
  .shot-browser {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 20px 16px 28px;
    border-radius: 20px;
    scrollbar-width: thin;
    scrollbar-color: #9BBADB transparent;
  }
  .shot-rail { display: flex; gap: 24px; width: max-content; }
  .shot-rail li { flex: 0 0 auto; width: clamp(210px, 60vw, 260px); scroll-snap-align: start; }
  .shot-rail span { font-size: .9rem; }
  .shot-hint { display: block; font-size: .85rem; color: var(--ink-2); margin-top: -16px; }
  .shot-hint span { margin-left: 8px; }
}

@media (max-width: 900px) {
  :root { --nav-h: 66px; }
  .wrap { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  #nav { background: rgba(245,249,255,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .nav-row { justify-content: space-between; gap: 12px; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto; flex-direction: column; gap: 0;
    background: #F5F9FF; border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px; margin: 0;
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
    visibility: hidden; transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    box-shadow: 0 18px 28px -20px rgba(15,43,70,.3);
  }
  .nav-links.open { visibility: visible; transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 14px 8px; margin: 0; min-height: 52px; font-size: 1rem; }
  .nav-links a::after { display: none; }
  .nav-burger { display: block; flex: none; margin-left: auto; }
  .nav-cta { display: none; }

  .hero { min-height: auto; }
  #hero-gl { display: none; }
  .hero-fallback { object-position: 60% bottom; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 36px 44px; }
  .hero-copy, .hero-stage, .hero-perks { grid-column: 1; grid-row: auto; }
  .hero-copy { max-width: 600px; }
  .hero h1 { font-size: clamp(2.15rem, 6.5vw, 3.3rem); line-height: 1.06; margin-bottom: 20px; }
  .hero h1 br { display: none; }
  .hero h1 em { display: block; }
  .eyebrow { margin-bottom: 20px; letter-spacing: .22em; }
  .lede { font-size: 1rem; line-height: 1.65; max-width: 52ch; margin-bottom: 24px; }
  .hero-stage { min-height: 0; height: 440px; width: 100%; max-width: 620px; justify-self: center; }
  .hero-static-phone { width: 190px; margin: 0 auto; transform: rotate(-5deg); z-index: 1; }
  .hero-static-peak { width: 125%; right: -15%; bottom: -30px; max-height: 500px; object-fit: contain; }
  .hero-webgl-ready .hero-static-phone, .hero-webgl-ready .hero-static-peak { visibility: visible; }
  .hero-script { right: 0; bottom: 2%; font-size: 1.3rem; z-index: 2; }
  .hero-veil { background: linear-gradient(180deg, #F5F9FF 0%, rgba(245,249,255,.94) 32%, rgba(245,249,255,.25) 68%, rgba(255,255,255,.8) 100%); }
  .hero-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 12px; margin-top: 0; z-index: 4; }
  .hero-perks li { min-width: 0; font-size: .8rem; line-height: 1.5; }
  .perk-ico { width: 46px; height: 46px; margin-bottom: 8px; }

  .sec { padding-block: 48px; }
  .sub, .ticks li, .faq details p { font-size: 1rem; line-height: 1.65; }
  .coach-grid, .int-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .coach-visual { padding-left: 0; width: min(100%, 300px); max-width: none; margin-inline: auto; order: 2; }
  .coach-visual .phone-frame { max-height: none; }
  .coach-visual .phone-frame img { border-radius: 27px; }
  .coach-script-l, .coach-rail { display: none; }
  .coach-script-r { font-size: 1.5rem; }
  .coach-script-r br { display: none; }
  .band-ridge { width: 120%; right: -10%; opacity: .35; }
  .ticks { gap: 16px; max-width: none; }
  .ticks li { align-items: flex-start; }
  .ticks svg { margin-top: 3px; }
  .pill { min-height: 48px; max-width: 100%; padding-inline: 18px; }
  .pill svg, .link svg { flex-shrink: 0; }
  .hub { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; }
  .hub-node { width: 100%; display: grid; grid-template-columns: 60px 1fr; column-gap: 16px; text-align: left; align-items: center; padding: 20px; }
  .hub-heart { grid-row: span 2; margin: 0; }
  .hub-node b { font-size: 1rem; }
  .hub-node small { font-size: .85rem; margin-top: 0; }
  .hub-node small br { display: none; }
  .hub-wires { display: none; }
  .hub-list { width: 100%; gap: 8px; }
  .hub-list li { min-height: 48px; font-size: .9rem; padding: 12px 16px; }
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust-card { padding: 16px; }
  .trust-card b { font-size: .95rem; }
  .trust-card small { font-size: .85rem; }
  .faq { padding-top: 16px; }
  .faq summary { font-size: 1rem; min-height: 56px; }
  .faq details { padding-inline: 16px; }
  .cta { min-height: auto; border-radius: 28px 28px 0 0; }
  .cta-grid { flex-direction: column; align-items: flex-start; padding-block: 48px; gap: 32px; }
  .cta-list { text-align: left; margin-top: 0; }
  .cta-bg { object-position: 65% center; }
  .cta::after { background: linear-gradient(180deg, rgba(245,249,255,.98), rgba(245,249,255,.92) 60%, rgba(245,249,255,.75)); }
  .cta-sub { font-size: 1rem; max-width: 34ch; }
  .foot-row { justify-content: center; text-align: center; }
  .foot-links { justify-content: center; flex-wrap: wrap; }
  .social { margin-left: 0; }
  .foot-tag { flex-basis: 100%; }
  /* Keep mobile scrolling responsive; no delayed hidden content on touch. */
  .js-motion .rv, .js-motion .rv.in { opacity: 1; transform: none; filter: none; will-change: auto; transition: none; }
}

@media (max-width: 620px) {
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .area { padding: 20px 12px; }
  .area h3 { font-size: .95rem; line-height: 1.35; margin-bottom: 6px; }
  .area p { font-size: .8rem; line-height: 1.5; }
  .hero-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stage { height: 410px; }
  .hero-script { font-size: 1.15rem; right: -8px; bottom: 0; }
  .hero-static-phone { width: 174px; }
  .shots-grid { gap: 24px; }
  .shot-rail { gap: 20px; }
  .shot-rail li { width: clamp(200px, 65vw, 260px); }
  .shot-browser { padding-inline: 8px; scroll-padding-inline: 8px; }
}

@media (max-width: 360px) {
  .wrap { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .hero h1 { font-size: 2rem; }
  .hero-script { font-size: 1rem; }
  .hero-stage { height: 390px; }
  .hero-static-phone { width: 164px; }
}

@media (hover: none), (pointer: coarse) {
  .appstore:hover, .area:hover, .phone-frame.tilt:hover, .shot-rail li:hover .phone-frame, .hub-list li:hover, .social a:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* .js-motion is never set under reduced motion, so .rv is already visible;
     this is a belt-and-braces guard, not the mechanism. */
  .rv, .js-motion .rv { opacity: 1; transform: none; filter: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Goal-led coaching: outcome cards and a concrete conversation prompt. */
.goal-section { padding-block: 72px; background: linear-gradient(180deg, #fff, #F5F9FF); }
.goal-section h2 { font-size: clamp(1.85rem, 3.5vw, 2.75rem); }
.goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; text-align: left; }
.goal-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid #DCE7F3; border-radius: 24px; background: linear-gradient(145deg, #fff, #F0F7FF); box-shadow: 0 10px 32px -24px rgba(15,43,70,.3); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.goal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.goal-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #2563EB; background: #E5F0FF; }
.goal-icon svg { width: 26px; height: 26px; }
.goal-number { font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: #58718C; }
.goal-card h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.025em; margin-bottom: 14px; }
.goal-card p { font-size: .94rem; line-height: 1.65; color: #3D5876; margin-bottom: 24px; }
.goal-tags { margin-top: auto; padding-top: 16px; border-top: 1px solid #DCE7F3; font-size: .75rem; font-weight: 600; line-height: 1.6; color: #3D5876; }
.goal-featured { background: linear-gradient(145deg, #123B60, #0F2B46); color: #fff; border-color: #123B60; }
.goal-featured p, .goal-featured .goal-tags, .goal-featured .goal-number { color: #D7E9FA; }
.goal-featured .goal-tags { border-color: #46627D; }
.goal-featured .goal-icon { background: #254E73; color: #A6DAFF; }
.goal-footnote { margin-top: 28px; color: #3D5876; font-size: .9rem; }
.coach-prompt { position: relative; margin-top: 28px; padding: 24px 60px 24px 24px; border: 1px solid #C9DEF6; border-radius: 20px 20px 20px 4px; background: #EAF4FF; }
.coach-prompt > span { display: block; font-size: .72rem; color: #315980; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-bottom: 10px; }
.coach-prompt p { font-family: var(--display); font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: #0F2B46; }
.coach-prompt > svg { position: absolute; right: 22px; top: 26px; width: 24px; height: 24px; color: #2563EB; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .goal-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(15,43,70,.35); } }
@media (max-width: 900px) { .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .goal-card { padding: 24px; } .goal-section { padding-block: 48px; } }
@media (max-width: 560px) { .goal-grid { grid-template-columns: minmax(0, 1fr); margin-top: 28px; } .goal-card { padding: 24px; } .goal-top { margin-bottom: 18px; } .goal-card h3 { font-size: 1.45rem; } .goal-card p { font-size: 1rem; margin-bottom: 18px; } .goal-tags { font-size: .8rem; } .coach-prompt { padding: 20px; } .coach-prompt > svg { display: none; } }