:root {
  --ink: #112a26; 
  --pine: #12372f; 
  --forest: #1f574b; 
  --jade: #5e8e7c;
  --sage: #cbdac8; 
  --lime: #e6efb8; 
  --gold: #d5a34f; 
  --sun: #f0d497;
  --cream: #f8f7f1; 
  --white: #fffefb; 
  --mist: #edf2ed;
  --line: rgba(17, 42, 38, .14); 
  --muted: #65736e;
  --sans: Inter, Aptos, "Segoe UI", Helvetica, Arial, sans-serif;
  --max: 1240px; 
  --shadow: 0 38px 100px rgba(25, 59, 50, .16);
}

* { 
  box-sizing: border-box; 
}

html { 
  scroll-behavior: smooth; 
  scroll-padding-top: 100px; 
}

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

button, a { 
  color: inherit; 
  font: inherit; 
} 

button { 
  cursor: pointer; 
} 

a { 
  text-decoration: none; 
}

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

h1, h2, h3, p { 
  margin-top: 0; 
} 

h1, h2, h3 { 
  text-wrap: balance; 
} 

p { 
  text-wrap: pretty; 
}

:focus-visible { 
  outline: 3px solid var(--gold); 
  outline-offset: 4px; 
} 

::selection { 
  color: var(--white); 
  background: var(--forest); 
}

.shell { 
  width: min(calc(100% - 48px), var(--max)); 
  margin-inline: auto; 
}

.skip-link { 
  position: fixed; 
  top: 12px; 
  left: 12px; 
  z-index: 999; 
  padding: 10px 14px; 
  color: var(--white); 
  background: var(--pine); 
  transform: translateY(-160%); 
}

.skip-link:focus { 
  transform: translateY(0); 
}

.eyebrow { 
  margin: 0 0 18px; 
  color: var(--forest); 
  font-size: .88rem; 
  font-weight: 800; 
  letter-spacing: .1em; 
  font-variant-caps: all-small-caps; 
}

/* Base Button Centering */
a.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 2px 28px 0; /* Optical vertical re-balance */
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  box-sizing: border-box;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Primary State */
a.button-primary,
button.button-primary {
  color: #fffefb;
  background-color: var(--pine);
  border: 1px solid var(--pine);
  box-shadow: 0 14px 34px rgba(18,55,47,.2);
}

a.button-primary:hover,
button.button-primary:hover {
  background-color: var(--forest);
  border-color: var(--forest);
  transform: translateY(-2px);
}

/* Soft / Transparent State */
a.button-soft,
button.button-soft {
  color: var(--pine);
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(18, 55, 47, 0.15);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

a.button-soft:hover,
button.button-soft:hover {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(18, 55, 47, 0.25);
  transform: translateY(-2px);
}

/* Site Header */
.site-header { 
  position: absolute; 
  inset: 20px 0 auto; 
  z-index: 50; 
}

.nav { 
  min-height: 62px; 
  display: grid; 
  grid-template-columns: 1fr auto 1fr; 
  align-items: center; 
  gap: 24px; 
}

.brand { 
  display: inline-flex; 
  align-items: center; 
  gap: 11px; 
  width: max-content; 
  font-size: 1.05rem; 
  font-weight: 850; 
  letter-spacing: -.02em; 
}

.brand-mark { 
  width: 34px; 
  height: 34px; 
  display: grid; 
  place-items: center; 
  border-radius: 11px; 
  color: var(--white); 
  background: var(--pine); 
  box-shadow: 0 10px 24px rgba(18,55,47,.16); 
}

.brand-mark svg { 
  width: 18px; 
}

.nav-pill { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  padding: 6px; 
  border: 1px solid rgba(255,255,255,.7); 
  border-radius: 999px; 
  background: rgba(255,255,255,.58); 
  box-shadow: 0 14px 45px rgba(40,50,45,.07); 
  backdrop-filter: blur(18px); 
}

.nav-pill a { 
  padding: 9px 16px; 
  border-radius: 999px; 
  font-size: .82rem; 
}

.nav-pill a:first-child { 
  background: var(--white); 
  box-shadow: 0 5px 14px rgba(17,42,38,.08); 
}

.nav-cta { 
  justify-self: end; 
  padding: 11px 18px; 
  border-radius: 999px; 
  color: var(--white); 
  background: var(--pine); 
  font-size: .82rem; 
  font-weight: 760; 
}

/* Hero Section */
.hero { 
  position: relative; 
  min-height: 960px; 
  overflow: hidden; 
  background: #eef2e9; 
}

.hero::before, .hero::after { 
  content: ""; 
  position: absolute; 
  border-radius: 50%; 
  filter: blur(20px); 
}

.hero::before { 
  width: 800px; 
  height: 560px; 
  left: -12%; 
  top: 3%; 
  background: radial-gradient(circle, rgba(203,218,200,.92), rgba(203,218,200,0) 69%); 
}

.hero::after { 
  width: 760px; 
  height: 620px; 
  right: -10%; 
  top: -5%; 
  background: radial-gradient(circle, rgba(240,212,151,.64), rgba(240,212,151,0) 70%); 
}

.aurora { 
  position: absolute; 
  inset: 0; 
  opacity: .92; 
  background: 
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.98) 0 22%, rgba(255,255,255,.12) 54%, transparent 72%), 
    radial-gradient(ellipse at 22% 68%, rgba(160,196,181,.68), transparent 45%), 
    radial-gradient(ellipse at 76% 68%, rgba(235,206,139,.62), transparent 46%); 
}

.aurora::before { 
  content: ""; 
  position: absolute; 
  left: -8%; 
  right: -8%; 
  bottom: 18%; 
  height: 260px; 
  border-radius: 50%; 
  opacity: .38; 
  background: linear-gradient(105deg, transparent 8%, #fff 38%, rgba(255,255,255,.1) 55%, #fff 76%, transparent 92%); 
  filter: blur(23px); 
  transform: rotate(-5deg); 
}

.hero-inner { 
  position: relative; 
  z-index: 2; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  padding-top: 148px; 
  text-align: center; 
}

.hero-badge { 
  display: inline-flex; 
  align-items: center; 
  gap: 9px; 
  margin-bottom: 22px; 
  padding: 8px 13px; 
  border: 1px solid rgba(31,87,75,.14); 
  border-radius: 999px; 
  color: var(--forest); 
  background: rgba(255,255,255,.68); 
  font-size: .75rem; 
  font-weight: 730; 
  backdrop-filter: blur(12px); 
}

.hero-badge span { 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: var(--gold); 
  box-shadow: 0 0 0 5px rgba(213,163,79,.13); 
}

.hero h1 { 
  max-width: 990px; 
  margin: 0; 
  font-size: clamp(3.5rem, 7vw, 7rem); 
  font-weight: 900; 
  letter-spacing: -.068em; 
  line-height: .93; 
}

.hero h1 strong { 
  color: var(--forest); 
  font-weight: 590; 
}

.hero-copy { 
  max-width: 620px; 
  margin: 26px auto 0; 
  color: #5c6a65; 
  font-size: 1.4rem; 
}

.hero-actions { 
  display: flex; 
  gap: 12px; 
  margin-top: 29px; 
}

.device-stage { 
  position: relative; 
  width: min(100%, 1040px); 
  height: 470px; 
  margin-top: 32px; 
}

.phone { 
  position: absolute; 
  width: 272px; 
  aspect-ratio: 800 / 1482; 
  filter: drop-shadow(0 32px 35px rgba(21,48,42,.22)); 
}

.phone-frame { 
  position: absolute; 
  inset: 0; 
  z-index: 3; 
  width: 100%; 
  height: 100%; 
  object-fit: fill; 
  pointer-events: none; 
}

.phone-screen { 
  position: absolute; 
  z-index: 2; 
  inset: 3.5% 6.3% 3.7%; 
  overflow: hidden; 
  border-radius: 11.5% / 6.4%; 
  background: #fbfcf7; 
}

.phone-main { 
  left: 50%; 
  top: 4px; 
  z-index: 5; 
  transform: translateX(-50%); 
}

.phone-left { 
  left: 22%; 
  top: 86px; 
  width: 236px; 
  z-index: 3; 
  transform: rotate(-5deg); 
  opacity: .93; 
}

.phone-right { 
  right: 22%; 
  top: 74px; 
  width: 236px; 
  z-index: 4; 
  transform: rotate(5deg); 
  opacity: .93; 
}

.phone-ui { 
  height: 100%; 
  padding: 17% 9% 9%; 
  color: var(--ink); 
  font-size: 9px; 
  text-align: left; 
}

.phone-ui .mini-top { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  color: #73807b; 
  font-size: 7px; 
}

.phone-ui small, .phone-ui .mini-top, .health-card small { 
  text-transform: lowercase; 
  font-variant-caps: all-small-caps; 
  letter-spacing: .06em; 
}

.avatar { 
  width: 24px; 
  height: 24px; 
  display: grid; 
  place-items: center; 
  border-radius: 50%; 
  color: var(--white); 
  background: var(--forest); 
  font-weight: 800; 
}

.phone-ui h3 { 
  margin: 15px 0 4px; 
  font-size: 19px; 
  line-height: 1.06; 
  letter-spacing: -.04em; 
}

.phone-ui > p { 
  margin-bottom: 13px; 
  color: #71807a; 
  font-size: 8px; 
}

.health-card { 
  padding: 13px; 
  border-radius: 15px; 
  color: var(--white); 
  background: linear-gradient(145deg, #1c5649, #337466); 
}

.health-card small { 
  opacity: .75; 
  font-size: 7px; 
} 

.health-card strong { 
  display: block; 
  margin: 4px 0 8px; 
  font-size: 17px; 
}

.chart { 
  height: 38px; 
  display: flex; 
  align-items: flex-end; 
  gap: 4px; 
} 

.chart i { 
  flex: 1; 
  display: block; 
  border-radius: 4px 4px 1px 1px; 
  background: rgba(255,255,255,.72); 
}

.chart i:nth-child(1) { height: 26%; } 
.chart i:nth-child(2) { height: 38%; } 
.chart i:nth-child(3) { height: 48%; } 
.chart i:nth-child(4) { height: 44%; } 
.chart i:nth-child(5) { height: 62%; } 
.chart i:nth-child(6) { height: 58%; }

.mini-label { 
  display: flex; 
  justify-content: space-between; 
  margin: 15px 0 7px; 
  font-weight: 760; 
} 

.mini-label a { 
  color: var(--forest); 
}

.next-card { 
  display: grid; 
  grid-template-columns: 31px 1fr; 
  gap: 9px; 
  align-items: center; 
  padding: 10px; 
  border: 1px solid #e3e8e1; 
  border-radius: 12px; 
  background: var(--white); 
}

.next-icon { 
  width: 31px; 
  height: 31px; 
  display: grid; 
  place-items: center; 
  border-radius: 9px; 
  color: var(--forest); 
  background: var(--lime); 
  font-weight: 900; 
}

.next-card strong { 
  display: block; 
  font-size: 9px; 
} 

.next-card span { 
  color: #7d8984; 
  font-size: 7px; 
}

.bottom-nav { 
  position: absolute; 
  left: 9%; 
  right: 9%; 
  bottom: 4.8%; 
  display: flex; 
  justify-content: space-around; 
  padding-top: 8px; 
  border-top: 1px solid #e4e8e3; 
  color: #87928e; 
  font-size: 7px; 
} 

.bottom-nav b { 
  color: var(--forest); 
}

.screen-title { 
  margin-top: 19px; 
  font-size: 17px; 
  line-height: 1.08; 
}

.question { 
  margin-top: 11px; 
  padding: 11px; 
  border-radius: 12px; 
  background: #f0f4ed; 
} 

.question + .question { 
  margin-top: 7px; 
}

.question small { 
  color: #7c8984; 
} 

.question strong { 
  display: block; 
  margin-top: 3px; 
  font-size: 9px; 
}

.result-pill { 
  display: inline-flex; 
  margin-top: 12px; 
  padding: 7px 9px; 
  border-radius: 999px; 
  color: var(--forest); 
  background: var(--lime); 
  font-size: 7px; 
  font-weight: 800; 
}

.result-number { 
  margin-top: 17px; 
  font-size: 33px; 
  font-weight: 650; 
  letter-spacing: -.06em; 
} 

.result-number span { 
  font-size: 9px; 
  letter-spacing: 0; 
}

.result-line { 
  position: relative; 
  height: 85px; 
  margin-top: 5px; 
  border-bottom: 1px solid #dce3dc; 
} 

.result-line svg { 
  width: 100%; 
  height: 100%; 
}

.result-note { 
  padding: 9px; 
  border-radius: 10px; 
  background: #f5eddc; 
  font-size: 8px; 
}

.float-card { 
  position: absolute; 
  z-index: 8; 
  display: flex; 
  align-items: center; 
  padding: 12px 15px; 
  border: 1px solid rgba(255,255,255,.8); 
  border-radius: 15px; 
  background: rgba(255,255,255,.78); 
  box-shadow: 0 18px 50px rgba(35,60,53,.12); 
  backdrop-filter: blur(14px); 
  font-size: .74rem; 
  font-weight: 720; 
}

.float-one { 
  left: 7%; 
  top: 145px; 
  transform: rotate(-4deg); 
} 

.float-two { 
  right: 5%; 
  top: 195px; 
  transform: rotate(3deg); 
}

/* Trust Band */
.trust-band { 
  position: relative; 
  z-index: 4; 
  padding: 22px 0; 
  color: var(--white); 
  background: var(--pine); 
}

.trust-grid { 
  display: grid; 
  grid-template-columns: repeat(4, minmax(0, 1fr)); 
}

.trust-item { 
  min-width: 0; 
  display: flex; 
  align-items: baseline; 
  gap: 13px; 
  padding: 3px 28px; 
  border-left: 1px solid rgba(255,255,255,.17); 
}

.trust-item:first-child { 
  padding-left: 0; 
  border-left: 0; 
}

.trust-item:last-child { 
  padding-right: 0; 
}

.trust-item strong { 
  display: block; 
  color: var(--sun); 
  font-size: clamp(1.7rem, 2.8vw, 2.35rem); 
  font-weight: 640; 
  letter-spacing: -.045em; 
  line-height: 1; 
  font-variant-numeric: tabular-nums; 
}

.trust-item span { 
  display: block; 
  color: rgba(255,255,255,.72); 
  font-size: .78rem; 
  font-weight: 680; 
  letter-spacing: .075em; 
  line-height: 1.2; 
  font-variant-caps: all-small-caps; 
}

/* Intro Section */
.intro { 
  padding: 105px 0 0; 
  background: var(--white) !important; 
  color: var(--ink) !important; 
}

.intro-copy { 
  display: grid; 
  grid-template-columns: 1.05fr .8fr; 
  gap: 100px; 
  align-items: end; 
}

.intro h2 { 
  max-width: 730px; 
  margin: 0; 
  color: var(--ink) !important; 
  font-size: clamp(3rem, 6vw, 6.2rem); 
  font-weight: 580; 
  letter-spacing: -.066em; 
  line-height: .94; 
}

.intro h2 span { 
  color: #8a9691 !important; 
} 

.intro-copy > div:last-child { 
  padding-bottom: 8px; 
}

.intro p, .intro-copy p { 
  color: var(--ink) !important; 
  font-size: 1.07rem; 
}

.text-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 11px; 
  padding-bottom: 4px; 
  border-bottom: 1px solid var(--ink); 
  font-size: .88rem; 
  font-weight: 760; 
}

.pass-stage { 
  position: relative; 
  min-height: 820px; 
  display: grid; 
  place-items: center; 
  overflow: hidden; 
  margin-top: 70px; 
  border-radius: 34px; 
  background: linear-gradient(160deg, #f0f3ef, #f8f8f4); 
}

.pass-word { 
  position: absolute; 
  top: 47%; 
  left: 50%; 
  color: #dbe3dd; 
  font-size: clamp(10rem, 28vw, 24rem); 
  font-weight: 740; 
  letter-spacing: -.1em; 
  line-height: .7; 
  transform: translate(-51%, -50%); 
  white-space: nowrap; 
}

.pass-stage .phone { 
  position: relative; 
  width: 340px; 
  z-index: 2; 
  transform: none; 
}

.stage-note { 
  position: absolute; 
  z-index: 4; 
  max-width: 220px; 
  padding: 15px 17px; 
  border-radius: 16px; 
  background: var(--white); 
  box-shadow: 0 20px 50px rgba(18,55,47,.11); 
  font-size: .78rem; 
}

.stage-note strong { 
  display: block; 
  margin-bottom: 3px; 
  font-size: .8rem; 
} 

.stage-note span { 
  color: var(--muted); 
}

.stage-note-one { left: 9%; top: 27%; } 
.stage-note-two { right: 9%; top: 50%; }

.stage-note::after { 
  content: ""; 
  position: absolute; 
  top: 50%; 
  width: 92px; 
  height: 1px; 
  background: var(--jade); 
}

.stage-note-one::after { left: 100%; } 
.stage-note-two::after { right: 100%; }

/* Journey Divider */
.journey-divider { 
  color: var(--white); 
  background: var(--ink); 
}

.journey-divider .shell { 
  min-height: auto;
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  align-items: center; 
}

.journey-divider span { 
  min-height: 38px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  border-left: 1px solid rgba(255,255,255,.17); 
  color: rgba(255,255,255,.8); 
  font-size: .84rem; 
  font-weight: 760; 
  letter-spacing: .095em; 
  font-variant-caps: all-small-caps; 
}

.journey-divider span:first-child { 
  border-left: 0; 
}

.journey-divider span::before { 
  content: ""; 
  width: 6px; 
  height: 6px; 
  flex: 0 0 auto; 
  border-radius: 50%; 
  background: var(--gold); 
}

/* Walkthrough Section */
.walkthrough { 
  padding: 88px 0 130px; 
  background: #f2f4f0 !important; 
  color: var(--ink) !important; 
}

.walk-header { 
  max-width: 740px; 
  margin: 0 auto 75px; 
  text-align: center; 
}

.walk-header h2 { 
  margin: 0; 
  color: var(--ink) !important; 
  font-size: clamp(3rem, 5.8vw, 5.6rem); 
  font-weight: 580; 
  letter-spacing: -.063em; 
  line-height: .95; 
}

.walk-header p, .walk-header p:last-child { 
  max-width: 570px; 
  margin: 23px auto 0; 
  color: var(--ink) !important; 
}

.walk-board { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 28px; 
  align-items: start; 
  padding: 54px 48px 46px; 
  overflow: hidden; 
  border: 1px solid rgba(18,55,47,.07); 
  border-radius: 34px; 
  background: rgba(255,255,255,.66); 
}

.walk-item { 
  min-width: 0; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

.walk-phone { 
  position: relative; 
  width: min(100%, 285px); 
}

.walk-phone-one { transform: rotate(-3deg); } 
.walk-phone-two { transform: none; } 
.walk-phone-three { transform: rotate(3deg); }

.walk-callout { 
  position: relative; 
  z-index: 6; 
  width: min(100%, 285px); 
  margin-top: 28px; 
  padding-top: 18px; 
}

.walk-callout b { 
  display: block; 
  margin-bottom: 7px; 
  color: var(--forest); 
  font-size: .92rem; 
  letter-spacing: .08em; 
  font-variant-caps: all-small-caps; 
}

.walk-callout p { 
  margin-bottom: 0; 
  color: var(--ink) !important; 
  font-size: .88rem; 
} 

.walk-callout::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 42px; 
  height: 2px; 
  background: var(--gold); 
}


/*.journey { */
/*  padding: 80px 0 40px !important; */
/*  background: var(--pine) !important; */
/*  color: var(--white) !important; */
/*}*/

/*.journey-head { */
/*  display: grid; */
/*  grid-template-columns: 1fr .75fr; */
/*  gap: 80px; */
/*  align-items: end; */
/*  margin-bottom: 36px; */
/*}*/

/*.journey .eyebrow { */
/*  color: var(--sun); */
/*} */

/*.journey h2 { */
/*  max-width: 720px; */
/*  margin: 0; */
/*  color: var(--white) !important; */
/*  font-size: clamp(3rem, 5.4vw, 5.5rem); */
/*  font-weight: 570; */
/*  letter-spacing: -.062em; */
/*  line-height: .95; */
/*}*/

/*.journey p, .journey-head p:last-child { */
/*  color: rgba(255, 255, 255, 0.92) !important; */
/*}*/



/* Auto-height grid prevents bottom white space */
/*.journey-grid { */
/*  display: grid; */
/*  grid-template-columns: repeat(2, minmax(0, 1fr)); */
/*  gap: 16px; */
/*  align-items: stretch;*/
/*}*/

/*.journey-card { */
/*  min-height: auto; */
/*  display: flex !important; */
/*  flex-direction: column !important; */
/*  justify-content: space-between !important; */
/*  padding: 24px; */
/*  overflow: hidden; */
/*  border: 1px solid rgba(255,255,255,.11); */
/*  border-radius: 22px; */
/*  background: #19453c; */
/*}*/

/*.journey-card > div {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  height: 100%;*/
/*  justify-content: space-between;*/
/*}*/

/*.journey-number { */
/*  width: 38px; */
/*  height: 38px; */
/*  display: grid; */
/*  place-items: center; */
/*  border: 1px solid currentColor; */
/*  border-radius: 50%; */
/*  font-size: .77rem; */
/*  margin-bottom: 16px;*/
/*}*/

/*.journey-card h3 { */
/*  margin: 0 0 8px; */
/*  font-size: 1.55rem; */
/*  font-weight: 620; */
/*  letter-spacing: -.035em; */
/*}*/

/*.journey-card p {*/
/*  margin-bottom: 0;*/
/*  font-size: .95rem;*/
/*  line-height: 1.5;*/
/*}*/

/*.journey-btn {*/
/*  display: inline-flex !important;*/
/*  align-items: center !important;*/
/*  gap: 6px !important;*/
/*  white-space: nowrap !important;*/
/*  text-decoration: none;*/
/*  margin-top: 16px;*/
/*}*/

/*.journey-btn svg {*/
/*  display: inline-block !important;*/
/*  flex-shrink: 0;*/
/*  vertical-align: middle;*/
/*}*/

/* Journey Section - Compact Card Layout */
.journey {
padding: 80px 0 12px !important;
background: var(--pine) !important;
color: var(--white) !important;
}

.journey-head {
display: grid;
grid-template-columns: 1fr .75fr;
gap: 80px;
align-items: end;
margin-bottom: 36px;
}

.journey-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
align-items: start;
}

.journey-card {
min-height: 0;
height: auto;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
padding: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.11);
border-radius: 18px;
background: #19453c;
}

.journey-card > div {
display: flex;
flex-direction: column;
height: auto;
justify-content: flex-start;
}

.journey-number {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
font-size: .77rem;
margin-bottom: 12px;
}

.journey-card h3 {
margin: 0 0 6px;
font-size: 1.35rem;
font-weight: 620;
letter-spacing: -.035em;
}

.journey-card p {
margin-bottom: 0;
font-size: .85rem;
line-height: 1.4;
}

.journey-btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
text-decoration: none;
margin-top: 10px;
}

.journey-btn svg {
display: inline-block !important;
flex-shrink: 0;
vertical-align: middle;
}


/* Support Section */
.support { 
  position: relative; 
  min-height: 740px; 
  display: grid; 
  align-items: flex-end; 
  overflow: hidden; 
  color: var(--white); 
  background: var(--ink); 
}

.support img { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center 42%; 
}

.support::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(0deg, rgba(8,31,27,.9), rgba(8,31,27,.1) 68%); 
}

.support-copy { 
  position: relative; 
  z-index: 2; 
  max-width: 800px; 
  padding: 150px 0 70px; 
}

.support-copy h2 { 
  margin: 0; 
  font-size: clamp(3rem, 6vw, 6.2rem); 
  font-weight: 560; 
  letter-spacing: -.065em; 
  line-height: .94; 
} 

.support-copy p { 
  max-width: 570px; 
  margin: 24px 0 0; 
  color: rgba(255,255,255,.76); 
}

/* Questions / FAQ Section */
.questions { 
  padding: 120px 0; 
  background: var(--white) !important; 
  color: var(--ink) !important; 
}

.questions h2 { 
  max-width: 680px; 
  margin-bottom: 44px; 
  color: var(--ink) !important; 
  font-size: clamp(2.8rem, 5vw, 5rem); 
  font-weight: 580; 
  letter-spacing: -.06em; 
  line-height: .96; 
}

.faq { 
  display: grid; 
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  column-gap: 50px; 
  border-top: 1px solid var(--line); 
} 

details { 
  border-bottom: 1px solid var(--line); 
}

summary { 
  position: relative; 
  min-height: 94px; 
  padding: 24px 54px 24px 0; 
  list-style: none; 
  color: var(--ink) !important; 
  font-weight: 680; 
  cursor: pointer; 
} 

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

summary::after, summary::before { 
  content: ""; 
  position: absolute; 
  right: 12px; 
  top: 35px; 
  width: 16px; 
  height: 2px; 
  background: var(--ink); 
  transition: transform .2s ease; 
}

summary::before { 
  transform: rotate(90deg); 
} 

details[open] summary::before { 
  transform: rotate(90deg) scaleX(0); 
}

details p { 
  max-width: 780px; 
  padding: 0 0 25px; 
  color: var(--ink) !important; 
}

/* Closing Section */
.closing { 
  position: relative; 
  overflow: hidden; 
  padding: 120px 0 44px; 
  background: var(--lime) !important; 
  color: var(--ink) !important; 
}

.closing::before { 
  content: ""; 
  position: absolute; 
  width: 620px; 
  height: 620px; 
  right: -12%; 
  top: -60%; 
  border-radius: 50%; 
  background: rgba(255,255,255,.45); 
  filter: blur(10px); 
}

.closing-inner { 
  position: relative; 
  z-index: 2; 
  display: grid; 
  grid-template-columns: 1fr auto; 
  align-items: flex-end; 
  gap: 50px; 
  padding-bottom: 105px; 
}

.closing h2 { 
  max-width: 880px; 
  margin: 0; 
  color: var(--ink) !important; 
  font-size: clamp(3.5rem, 7vw, 7.2rem); 
  font-weight: 580; 
  letter-spacing: -.07em; 
  line-height: .9; 
} 

.closing .button { 
  color: var(--white); 
  background: var(--pine); 
}

footer { 
  position: relative; 
  z-index: 2; 
  display: flex; 
  justify-content: space-between; 
  gap: 30px; 
  padding-top: 25px; 
  border-top: 1px solid rgba(17,42,38,.18); 
  color: rgba(17,42,38,.68); 
  font-size: .82rem; 
}

/* Reveal Animation State Safety */
.reveal { 
  opacity: 1 !important; 
  transform: none !important; 
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.7,.2,1); 
} 

js .reveal { 
  opacity: 0 !important; 
  transform: translateY(28px) !important; 
} 

js .reveal.in { 
  opacity: 1 !important; 
  transform: none !important; 
}

/* Responsive Styles */
@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; } 
  .nav-pill { display: none; } 
  .hero { min-height: 900px; }
  .phone-left { left: 11%; } 
  .phone-right { right: 11%; } 
  .float-one { left: 1%; } 
  .float-two { right: 1%; }
  .intro-copy, .journey-head { grid-template-columns: 1fr; gap: 32px; } 
  .pass-stage { min-height: 700px; }
  .walk-board { padding-inline: 30px; } 
  .walk-phone { width: 245px; }
}

@media (max-width: 720px) {
  .shell { width: min(calc(100% - 28px), var(--max)); } 
  .site-header { top: 10px; } 
  .nav { min-height: 52px; } 
  .nav-cta { padding: 9px 13px; }
  .hero { min-height: 850px; } 
  .hero-inner { padding-top: 120px; } 
  .hero h1 { font-size: clamp(3.25rem, 16vw, 5.3rem); }
  .hero-actions { flex-direction: column; width: 100%; max-width: 310px; } 
  .device-stage { height: 390px; margin-top: 32px; }
  .trust-band { padding: 17px 0; }
  .trust-item { display: block; padding: 2px 9px; }
  .trust-item:first-child { padding-left: 0; } 
  .trust-item:last-child { padding-right: 0; }
  .trust-item strong { margin-bottom: 5px; font-size: 1.38rem; }
  .trust-item span { font-size: .75rem; letter-spacing: .045em; }
  .phone-main { width: 238px; } 
  .phone-left, .phone-right { width: 190px; top: 100px; opacity: .56; } 
  .phone-left { left: -7%; } 
  .phone-right { right: -7%; } 
  .float-card { display: none; }
  .intro { padding: 90px 0 0; } 
  .walkthrough { padding: 56px 0 90px; } 
  .intro h2, .walk-header h2, .questions h2 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .intro-copy { gap: 28px; }
  .pass-stage { 
    min-height: 0; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    grid-template-rows: auto auto; 
    gap: 12px; 
    align-items: stretch; 
    justify-items: center; 
    margin-top: 55px; 
    padding: 30px 14px 14px; 
    border-radius: 22px; 
  }
  .pass-stage .phone { grid-column: 1 / -1; grid-row: 1; width: 250px; }
  .stage-note { 
    position: relative; 
    inset: auto; 
    width: 100%; 
    max-width: none; 
    min-height: 96px; 
    padding: 13px; 
    border: 1px solid rgba(18,55,47,.09); 
    border-radius: 14px; 
    box-shadow: none; 
    font-size: .68rem; 
  }
  .stage-note-one { grid-column: 1; grid-row: 2; } 
  .stage-note-two { grid-column: 2; grid-row: 2; }
  .stage-note::after { display: none; }
  .journey-divider .shell { min-height: 68px; }
  .journey-divider span { min-height: 32px; gap: 7px; padding-inline: 4px; font-size: .75rem; letter-spacing: .055em; }
  .journey-divider span::before { width: 5px; height: 5px; }
  .walk-board { grid-template-columns: 1fr; gap: 36px; padding: 34px 20px; border-radius: 22px; }
  .walk-item, .walk-item:nth-child(2) { 
    display: grid; 
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); 
    gap: 18px; 
    align-items: center; 
    padding-top: 0; 
  }
  .walk-item:nth-child(2) .walk-phone { order: 2; } 
  .walk-item:nth-child(2) .walk-callout { order: 1; }
  .walk-phone { width: 100%; max-width: 170px; transform: none; }
  .walk-callout { width: 100%; margin-top: 0; }

  /* ==========================================================================
     UPDATED: Mobile Specific Overrides for Journey Section
     ========================================================================== */
  .journey { 
    padding: 48px 0 32px !important; 
  }

  .journey h2 { 
    font-size: clamp(2.2rem, 10vw, 3.2rem); 
  }

  .journey-head {
    gap: 18px;
    margin-bottom: 24px;
  }

  .journey-head p {
    font-size: 0.92rem !important;
    line-height: 1.45;
  }

  .journey-grid { 
    grid-template-columns: 1fr !important; /* Forces 100% width full card per row */
    gap: 12px; 
  }

  .journey-card { 
    width: 100%;
    padding: 16px 18px; 
    border-radius: 16px; 
  }

  .journey-number { 
    width: 32px; 
    height: 32px; 
    font-size: .68rem; 
    margin-bottom: 12px;
  }

  .journey-card h3 { 
    margin-bottom: 6px; 
    font-size: 1.18rem; 
    line-height: 1.15; 
  } 

  .journey-card p { 
    font-size: .84rem; 
    line-height: 1.4; 
  }

  .support { min-height: 650px; } 
  .support-copy h2 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .questions { padding: 90px 0; } 
  .faq { grid-template-columns: 1fr; } 
  summary { min-height: auto; }
  .closing { padding-top: 90px; } 
  .closing-inner { grid-template-columns: 1fr; padding-bottom: 75px; } 
  .closing h2 { font-size: clamp(3.5rem, 16vw, 5rem); } 
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { 
  html { scroll-behavior: auto; } 
  *, *::before, *::after { animation: none !important; transition: none !important; } 
  .reveal { opacity: 1 !important; transform: none !important; } 
}