/* Shared opening: readable copy, a full video frame, then one clear action. */
.landing-page .preview-bar,
.landing-page .preview-note {
  min-height: 24px;
  padding: 4px 12px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}
.landing-page .header {
  min-height: 58px;
  padding-block: 7px;
}
.landing-page .header .brand {
  min-height: 36px;
  font-size: 28px;
}
.landing-page .header .brand svg { width: 28px; height: 28px; }
.landing-page .hero {
  --media-width: min(900px, calc((100svh - 420px) * 16 / 9));
  width: min(1000px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
  padding-top: 22px;
  padding-bottom: 38px;
  text-align: center;
}
.landing-page .hero > .eyebrow {
  margin: 0 auto 10px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1px;
}
.landing-page .hero h1 {
  max-width: 960px;
  margin: 0 auto 16px;
  font-size: clamp(38px, 4.1vw, 56px);
  line-height: 1.08;
  letter-spacing: -1.9px;
}
.landing-page .hero > .hero-lead {
  max-width: 850px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.5;
}
.landing-page .hero .hero-media {
  display: grid;
  place-items: center;
  position: relative;
  width: var(--media-width);
  max-width: 100%;
  aspect-ratio: var(--media-aspect-ratio, 16 / 9);
  margin: 20px auto 16px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 48px 110px -40px rgba(20,20,30,.4), 0 20px 48px -24px rgba(20,20,30,.16);
  background: var(--ink);
  color: #fff;
}
.landing-page .hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--media-aspect-ratio, 16 / 9);
  object-fit: contain;
  background: var(--ink);
}
.landing-page .hero-media [hidden] { display: none !important; }
/* Keep the recording proportional while reserving room for the complete CTA. */
.landing-page .hero.hero-with-vsl {
  --media-width: min(680px, max(180px, calc((100svh - 460px) * 3 / 2)));
}
.landing-page .hero.hero-with-vsl .hero-action {
  width: min(100%, max(420px, var(--media-width)));
}
@media (max-width: 700px) {
  .landing-page .hero.hero-with-vsl { --media-width: 100%; }
  .landing-page .hero.hero-with-vsl .hero-action { width: 100%; }
}
@media (min-width: 851px) and (max-height: 600px) {
  .landing-page .hero.hero-with-vsl { padding-top: 12px; padding-bottom: 24px; }
  .landing-page .hero.hero-with-vsl > .eyebrow { margin-bottom: 6px; font-size: 10px; }
  .landing-page .hero.hero-with-vsl h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.08; margin-bottom: 12px; }
  body.landing-page .hero.hero-with-vsl > .hero-lead { font-size: 14px; line-height: 1.4; }
  .landing-page .hero.hero-with-vsl .hero-media { margin-top: 12px; margin-bottom: 12px; }
}
@media (min-width: 851px) and (max-height: 500px) {
  .landing-page .hero.hero-with-vsl { display: flex; flex-direction: column; align-items: center; }
  .landing-page .hero.hero-with-vsl .hero-action { order: 1; margin-top: 12px; }
  .landing-page .hero.hero-with-vsl .hero-media { order: 2; margin-top: 24px; }
}
.landing-page .hero-media .video-pending,
.landing-page .hero-media .video-placeholder {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  text-align: center;
}
.landing-page .hero-media .video-heading {
  justify-content: center;
  flex-wrap: wrap;
  color: #d2daed;
}
.landing-page .hero-media .video-label {
  display: block;
  margin: 0 0 10px;
  color: #d2daed;
  font-size: 11px;
  line-height: 1.5;
}
.landing-page .hero-media h2 {
  margin: 14px 0 10px;
  color: #fff;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.5px;
}
.landing-page .hero-media p {
  max-width: 580px;
  margin: 0 auto;
  color: #d2daed;
  font-size: 14px;
  line-height: 1.5;
}
.landing-page .hero-media .owner-note {
  margin: 14px auto 0;
  padding-top: 12px;
  border-color: #3b4358;
  font-size: 12px;
}
.landing-page .hero .hero-action {
  width: var(--media-width);
  max-width: 100%;
  margin: 0 auto;
}
.landing-page .hero .hero-action .button {
  display: flex;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 15px 20px;
  font-size: 16px;
  line-height: 1.4;
  gap: 20px;
}
.landing-page .hero .hero-action .cta-note {
  max-width: 650px;
  margin: 10px auto 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.landing-page .hero > .scope-line {
  display: block;
  max-width: 800px;
  margin: 12px auto 0;
  font-size: 12px;
  line-height: 1.5;
}
@media (min-width: 701px) and (max-height: 700px) {
  .landing-page .hero { --media-width: min(900px, max(420px, calc((100svh - 380px) * 16 / 9))); padding-top: 16px; }
  .landing-page .hero h1 { font-size: 42px; margin-bottom: 12px; }
  .landing-page .hero > .hero-lead { font-size: 17px; }
  .landing-page .hero .hero-media { margin-top: 16px; margin-bottom: 12px; }
}
@media (max-width: 700px) {
  .landing-page .header { min-height: 54px; padding-block: 5px; }
  .landing-page .header .brand { font-size: 27px; }
  .landing-page .hero {
    --media-width: 100%;
    width: calc(100% - 36px);
    padding-top: 22px;
    padding-bottom: 32px;
  }
  .landing-page .hero > .eyebrow { max-width: 460px; font-size: 11px; line-height: 1.5; letter-spacing: .65px; margin-bottom: 12px; }
  .landing-page .hero h1 { font-size: clamp(32px, 7.8vw, 44px); line-height: 1.1; letter-spacing: -1.25px; margin-bottom: 16px; }
  .landing-page .hero > .hero-lead { font-size: 16px; line-height: 1.5; }
  .landing-page .hero .hero-media { margin-top: 20px; margin-bottom: 14px; }
  .landing-page .hero-media .video-pending,
  .landing-page .hero-media .video-placeholder { padding: 16px; }
  .landing-page .hero-media .video-heading { font-size: 9px; gap: 8px; }
  .landing-page .hero-media .recording-label { font-size: 9px; }
  .landing-page .hero-media h2 { font-size: 20px; margin: 10px 0 8px; }
  .landing-page .hero-media p { font-size: 12px; line-height: 1.4; }
  .landing-page .hero-media .owner-note { margin-top: 8px; padding-top: 8px; font-size: 10px; }
  .landing-page .hero .hero-action .button { min-height: 54px; padding: 14px; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .landing-page .hero { padding-top: 16px; }
  .landing-page .hero h1 { margin-bottom: 12px; }
  .landing-page .hero .hero-media { margin-top: 16px; }
}
@media (max-width: 360px) {
  .landing-page .hero-media .video-pending { padding: 12px; }
  .landing-page .hero-media .video-pending h2 { font-size: 18px; margin: 8px 0 6px; }
  .landing-page .hero-media .video-pending > p { font-size: 11px; }
  .landing-page .hero-media .video-pending .owner-note { margin-top: 6px; padding-top: 6px; font-size: 10px; }
}

/* Explain the next step above each primary CTA. */
.landing-page .cta-instruction{margin:0 auto 12px;color:var(--muted);font-size:16px;line-height:1.5;text-align:center}
@media(max-width:700px){.landing-page .cta-instruction{font-size:14px}}

/* Reference measurements: h-16 (64px), rounded-2xl (16px), md:text-xl (20px), gap-2.5 (10px), size-4 arrow (16px). */
.landing-page a.button,.landing-page .hero .hero-action .button{
  height:64px;
  min-height:64px;
  padding:0 24px;
  border:0;
  border-radius:16px;
  box-shadow:inset 0 1px rgba(255,255,255,.28),inset 0 -2px rgba(20,39,112,.35),0 14px 34px -12px rgba(53,89,220,.65),0 4px 12px -4px rgba(35,70,160,.4);
  gap:10px;
  font-size:20px;
  line-height:28px;
  letter-spacing:-.01em;
  font-weight:700;
  transition:transform .15s ease-out,box-shadow .15s ease-out,filter .15s ease-out;
}
.landing-page .button .cta-arrow{display:block;width:16px;height:16px;flex:none;filter:brightness(0) invert(1);transition:transform .15s ease-out}
.landing-page a.button:hover{filter:brightness(1.08) saturate(1.05);box-shadow:inset 0 1px rgba(255,255,255,.32),inset 0 -2px rgba(20,39,112,.35),0 18px 40px -12px rgba(53,89,220,.8),0 6px 14px -4px rgba(35,70,160,.45)}
.landing-page a.button:hover .cta-arrow{transform:translateX(2px)}
.landing-page a.button:active{transform:scale(.985)}
@media(max-width:767px){.landing-page a.button,.landing-page .hero .hero-action .button{font-size:18px}}
@media(prefers-reduced-motion:reduce){.landing-page a.button,.landing-page .button .cta-arrow{transition:none}.landing-page a.button:active,.landing-page a.button:hover .cta-arrow{transform:none}}

/* Founder and leadership introduction. */
.landing-page .founder-section{width:min(900px,calc(100% - 48px));margin:16px auto 0;padding:56px 0 62px;border-top:1px solid var(--line)}
.landing-page .founder-section>h2{font-size:clamp(29px,3.4vw,40px);line-height:1.2;letter-spacing:-1px;margin:0 0 30px;text-align:center}
.founder-introduction{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;align-items:start}
.founder-identity{padding-top:4px}
.founder-identity h3{font-size:28px;line-height:1.2;letter-spacing:-.7px;margin:0 0 6px;color:var(--ink)}
.founder-identity p{font-size:16px;line-height:1.5;margin:0;color:var(--blue)}
.founder-copy p{font-size:17px;line-height:1.7;color:var(--muted);margin:0 0 16px}
.founder-copy p:last-child{margin-bottom:0}
@media(max-width:700px){
 .landing-page .founder-section{width:calc(100% - 36px);padding:38px 0 42px;margin-top:8px}
 .landing-page .founder-section>h2{text-align:left;margin-bottom:24px}
 .founder-introduction{grid-template-columns:1fr;gap:22px}
 .founder-identity h3{font-size:25px}
 .founder-copy p{font-size:16px}
}

/* Founder introduction. */
.leadership-team{display:grid;grid-template-columns:minmax(0,300px);justify-content:center;gap:28px;padding:8px 0 0}
.team-member{text-align:center;min-width:0}
.team-member h3{font-size:26px;line-height:1.25;letter-spacing:-.6px;margin:0 0 8px;color:var(--ink)}
.team-member .team-role{font-size:15px;line-height:1.5;color:var(--blue);margin:0}
@media(max-width:600px){.leadership-team{grid-template-columns:1fr;gap:0;padding:0}.team-member{text-align:left;padding:22px 0}.team-member+.team-member{border-top:1px solid var(--line)}.team-member h3{font-size:25px}}

.team-member .team-photo{display:block;width:100%;max-width:240px;aspect-ratio:1;height:auto;object-fit:cover;object-position:center;border-radius:20px;margin:0 auto 24px;background:#eef0f6;box-shadow:0 20px 44px -22px rgba(20,20,30,.28),0 6px 18px -10px rgba(20,20,30,.12)}
@media(max-width:600px){.team-member{padding:26px 0}.team-member .team-photo{max-width:none;width:100%;margin:0 0 22px}.team-member h3{font-size:26px}}

.landing-page .team-action{margin:40px auto 0;width:100%;max-width:900px}
.landing-page .hero-with-vsl + .founder-section .team-action{max-width:680px}
.landing-page .team-action .button{width:100%;display:flex;align-items:center;justify-content:center}

/* Continuous transition between hero, team and the following section. */
.landing-page .founder-section,.landing-page .founder-section + section{border-top:0;border-bottom:0}

/* Phone layout uses width, not the remaining viewport height. */
@media(max-width:850px){
 body.landing-page .hero.hero-with-vsl{--media-width:100%;padding-top:12px;padding-bottom:24px}
 body.landing-page .hero.hero-with-vsl>.eyebrow{margin-bottom:8px;font-size:10px;line-height:1.45}
 body.landing-page .hero.hero-with-vsl h1{font-size:clamp(28px,7.5vw,40px);line-height:1.12;margin-bottom:12px;letter-spacing:-1px}
 body.landing-page .hero.hero-with-vsl>.hero-lead{font-size:15px;line-height:1.45}
 body.landing-page .hero.hero-with-vsl .hero-media{width:var(--media-width);margin-top:16px;margin-bottom:16px;border-radius:16px;min-width:0}
 body.landing-page .hero.hero-with-vsl .hero-action{width:100%}
 body.landing-page .hero.hero-with-vsl .hero-action .button{height:58px;min-height:58px;padding:0 14px;font-size:16px;gap:9px}
 body.landing-page .hero.hero-with-vsl .hero-action .cta-instruction{margin-top:12px;font-size:13px;line-height:1.45}
}