:root {
  --navy: #0b1b2f;
  --navy-2: #132a47;
  --navy-3: #1d466f;
  --ink: #10233b;
  --muted: #66758a;
  --blue: #276ef1;
  --blue-dark: #1454d2;
  --blue-soft: #eaf1ff;
  --yellow: #ffc928;
  --yellow-dark: #e5a900;
  --green: #11865b;
  --green-soft: #e5f7ef;
  --paper: #ffffff;
  --canvas: #f6f8fc;
  --line: #dde6f1;
  --shadow: 0 24px 70px rgba(15, 42, 73, .13);
  --shadow-deep: 0 38px 100px rgba(3, 20, 40, .26);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
.container { width: min(1220px, calc(100% - 40px)); margin-inline: auto; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 1000; left: 16px; top: 16px; padding: 10px 16px; color: white; background: var(--navy); border-radius: 10px; }

.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  border-bottom: 1px solid rgba(221, 230, 241, .78);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(20px);
}
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 950; letter-spacing: .12em; }
.brand-mark { width: 40px; height: 40px; flex: 0 0 40px; background: url('/assets/brand/logo.png') center / cover no-repeat; border-radius: 13px; box-shadow: 0 6px 17px rgba(16, 35, 59, .2); }
.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.site-nav a { color: #3e516a; font-size: 14px; font-weight: 800; }
.site-nav a:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-login { color: var(--ink); font-size: 14px; font-weight: 850; }
.header-login:hover { color: var(--blue); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line); background: white; border-radius: 13px; }
.menu-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: var(--navy); border-radius: 2px; }

.button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  color: white;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 16px;
  box-shadow: 0 13px 30px rgba(39, 110, 241, .24);
  font-weight: 900;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); background: var(--blue-dark); box-shadow: 0 17px 38px rgba(39, 110, 241, .3); }
.button-small { min-height: 44px; padding-inline: 19px; border-radius: 13px; font-size: 14px; box-shadow: none; }
.button-ghost { color: var(--ink); background: white; border-color: var(--line); box-shadow: none; }

/* Legal and account-control pages */
.legal-header { justify-content: space-between; }
.legal-page { min-height: calc(100vh - 150px); padding: 72px 0 100px; background: var(--canvas); }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 760px); justify-content: center; gap: 72px; align-items: start; }
.legal-index { position: sticky; top: 110px; display: grid; gap: 10px; padding: 24px; color: white; background: var(--navy); border-radius: 22px; box-shadow: var(--shadow); }
.legal-index span { color: var(--yellow); font-size: 11px; font-weight: 950; letter-spacing: .13em; }
.legal-index strong { font-size: 22px; line-height: 1.25; }
.legal-index small { color: #b9c7d8; }
.legal-index nav { display: grid; gap: 7px; padding-top: 10px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.14); }
.legal-index nav a { padding: 7px 9px; color: #dbe6f2; border-radius: 9px; font-size: 13px; font-weight: 750; }
.legal-index nav a:hover { color: white; background: rgba(255,255,255,.09); }
.legal-copy { padding: 44px 48px; background: white; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.legal-copy h1 { max-width: 700px; margin-bottom: 18px; font-size: clamp(38px, 6vw, 64px); line-height: 1.03; letter-spacing: -.045em; }
.legal-copy h2 { margin: 0 0 14px; color: var(--ink); font-size: 24px; line-height: 1.2; }
.legal-copy section { padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--line); }
.legal-copy p, .legal-copy li { color: #44566d; }
.legal-copy a:not(.button) { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal-lead { max-width: 650px; color: var(--muted); font-size: 20px; line-height: 1.55; }
.legal-steps { display: grid; gap: 12px; padding: 0; margin: 0 0 24px; list-style: none; counter-reset: legal-step; }
.legal-steps li { position: relative; display: grid; gap: 3px; min-height: 64px; padding: 12px 14px 12px 62px; background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; counter-increment: legal-step; }
.legal-steps li::before { content: counter(legal-step); position: absolute; top: 12px; left: 14px; display: grid; width: 36px; height: 36px; place-items: center; color: var(--navy); background: var(--yellow); border-radius: 11px; font-weight: 950; }
.legal-steps b { color: var(--ink); }
.legal-note { padding: 26px !important; background: var(--blue-soft); border: 0 !important; border-radius: 20px; }
.legal-note h2 { color: var(--blue-dark); }
.legal-footer { padding-top: 0; }

@media (max-width: 820px) {
  .legal-page { padding: 36px 0 64px; }
  .legal-layout { grid-template-columns: 1fr; gap: 18px; }
  .legal-index { position: static; }
  .legal-copy { padding: 30px 24px; border-radius: 22px; }
  .legal-copy h1 { font-size: 40px; }
}
.button-ghost:hover { color: var(--blue); background: var(--blue-soft); }
.button-dark { background: var(--navy); border-color: var(--navy); box-shadow: 0 14px 32px rgba(11, 27, 47, .18); }
.button-dark:hover { background: var(--navy-2); }
.button-light { color: var(--navy); background: white; border-color: white; box-shadow: none; }
.button-light:hover { color: var(--blue); background: #f4f7fc; }
.button-yellow { color: var(--navy); background: var(--yellow); border-color: var(--yellow); box-shadow: none; }
.button-yellow:hover { color: var(--navy); background: #ffd451; }

.hero { position: relative; overflow: hidden; min-height: 760px; padding: 88px 0 64px; background: radial-gradient(circle at 83% 7%, #dce9ff 0, transparent 30%), linear-gradient(180deg, #fbfdff 0%, var(--canvas) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(16,35,59,.038) 1px, transparent 1px), linear-gradient(90deg, rgba(16,35,59,.038) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, #000 5%, transparent 76%); }
.road-lines { position: absolute; width: 580px; height: 130px; right: -110px; bottom: 45px; opacity: .36; border-radius: 50%; border-top: 2px solid #8ea2bb; transform: rotate(-16deg); }
.road-lines::before, .road-lines::after { content: ""; position: absolute; left: 0; right: 0; border-top: 2px dashed #a5b4c7; border-radius: 50%; }
.road-lines::before { top: 36px; }
.road-lines::after { top: 74px; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 50px; }
.eyebrow, .kicker { color: var(--blue); font-size: 12px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid #cbdcff; background: rgba(255,255,255,.84); border-radius: 99px; }
.eyebrow span { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(17,134,91,.12); }
.hero h1 { max-width: 660px; margin: 25px 0; font-size: clamp(48px, 5.5vw, 76px); line-height: .98; letter-spacing: -.058em; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-lead { max-width: 600px; margin-bottom: 30px; color: #3f536c; font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 15px 0 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.hero-note span { padding-inline: 5px; color: var(--blue); }
.platform-note { display: flex; align-items: center; gap: 13px; margin-top: 30px; }
.platform-icon { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--navy); border-radius: 12px; font-size: 13px; font-weight: 950; }
.platform-note strong, .platform-note small { display: block; }
.platform-note strong { font-size: 13px; }
.platform-note small { color: var(--muted); font-size: 11px; }

.hero-showcase { position: relative; min-height: 620px; display: grid; place-items: center; }
.hero-orbit { position: absolute; border: 1px solid rgba(39,110,241,.16); border-radius: 50%; }
.orbit-one { width: 550px; height: 550px; }
.orbit-two { width: 430px; height: 430px; border-style: dashed; }
.phone { position: relative; overflow: hidden; padding: 7px; background: #06111e; border: 1px solid #203853; border-radius: 39px; box-shadow: var(--shadow-deep); }
.phone-speaker { position: absolute; z-index: 3; top: 13px; left: 50%; width: 54px; height: 6px; background: #07111d; border-radius: 99px; transform: translateX(-50%); }
.phone-screen { width: 100%; height: 100%; overflow: hidden; background: var(--canvas); border-radius: 32px; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-main { z-index: 3; width: 310px; aspect-ratio: 1440 / 3120; transform: rotate(2deg); }
.phone-side { position: absolute; z-index: 2; width: 245px; aspect-ratio: 1440 / 3120; right: 5px; bottom: 5px; opacity: .94; transform: rotate(8deg); }
.showcase-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: rgba(255,255,255,.95); border: 1px solid white; border-radius: 16px; box-shadow: 0 18px 42px rgba(20, 52, 87, .18); }
.showcase-chip b, .showcase-chip span { display: block; }
.showcase-chip b { color: var(--blue); }
.showcase-chip span { color: #53657b; font-size: 11px; font-weight: 800; }
.chip-progress { left: 0; top: 100px; display: block; }
.chip-sync { right: 45px; top: 30px; }
.chip-sync i { width: 9px; height: 9px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px var(--green-soft); }

.proof-strip { color: white; background: var(--navy); }
.proof-grid { min-height: 118px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.proof-grid > div { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; padding: 0 27px; border-right: 1px solid rgba(255,255,255,.13); }
.proof-grid > div:first-child { padding-left: 0; }
.proof-grid > div:last-child { border: 0; }
.proof-grid span { grid-row: 1 / 3; align-self: center; color: var(--yellow); font-size: 12px; font-weight: 950; }
.proof-grid strong, .proof-grid small { display: block; }
.proof-grid strong { font-size: 16px; }
.proof-grid small { color: #aebdd0; font-size: 11px; }

.section { padding: 108px 0; }
.legacy-anchor { position: relative; top: -90px; display: block; width: 0; height: 0; }
.section-heading { display: grid; grid-template-columns: 1.12fr .88fr; align-items: end; gap: 70px; margin-bottom: 50px; }
.section-heading h2, .product-copy h2, .driver-copy h2, .faq-layout h2, .confidence-copy h2 { margin: 10px 0 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.08; letter-spacing: -.047em; }
.section-heading > p { max-width: 500px; margin-bottom: 5px; color: var(--muted); font-size: 17px; }
.section-heading.centered { display: block; max-width: 740px; margin: 0 auto 48px; text-align: center; }
.section-heading.centered p { margin: 15px auto 0; }

.directions { overflow: hidden; }
.mode-tabs { display: inline-flex; gap: 5px; padding: 5px; background: #edf2f8; border-radius: 17px; }
.mode-tab { min-width: 132px; min-height: 46px; padding: 0 19px; color: #52657b; background: transparent; border: 0; border-radius: 13px; font-weight: 900; cursor: pointer; }
.mode-tab.active { color: white; background: var(--navy); box-shadow: 0 8px 20px rgba(11,27,47,.15); }
.mode-stage { min-height: 590px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 55px; margin-top: 22px; padding: 54px 56px; overflow: hidden; background: linear-gradient(135deg, #f5f8fc, #eaf1ff); border: 1px solid #dce6f2; border-radius: 34px; }
.mode-copy { position: relative; z-index: 3; }
.mode-index { color: var(--blue); font-size: 12px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.mode-copy h3 { margin: 13px 0 16px; font-size: clamp(31px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.04em; }
.mode-copy > p { max-width: 500px; color: var(--muted); font-size: 17px; }
.check-list { margin: 25px 0 28px; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 8px 0 8px 30px; font-weight: 750; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 7px; width: 21px; height: 21px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 50%; font-size: 11px; font-weight: 950; }
.text-link { color: var(--blue); font-weight: 900; }
.text-link span { margin-left: 8px; }
.mode-visual { position: relative; align-self: stretch; min-height: 480px; }
.mode-halo { position: absolute; width: 520px; height: 520px; right: -80px; top: 5px; background: radial-gradient(circle, rgba(39,110,241,.24), transparent 66%); }
.mode-person { position: absolute; z-index: 2; left: -35px; bottom: -150px; width: 350px; max-width: none; filter: drop-shadow(0 24px 28px rgba(23,45,72,.18)); transition: opacity .22s ease, transform .22s ease; }
.mode-phone { position: absolute; z-index: 3; right: 4px; bottom: -130px; width: 285px; aspect-ratio: 1440 / 3120; overflow: hidden; padding: 6px; background: var(--navy); border-radius: 36px; box-shadow: var(--shadow-deep); transform: rotate(3deg); }
.mode-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; transition: opacity .22s ease; }
.mode-stage.switching .mode-person, .mode-stage.switching .mode-phone img { opacity: .2; transform: translateY(6px); }

.product-section { overflow: hidden; color: white; background: radial-gradient(circle at 78% 24%, #234f82 0, transparent 28%), linear-gradient(135deg, #081726, #102a49); }
.product-layout { display: grid; grid-template-columns: 1fr .82fr; gap: 90px; align-items: center; }
.kicker-light { color: #91b7ff; }
.product-copy > p { max-width: 600px; color: #b7c7da; font-size: 17px; }
.tour-list { display: grid; gap: 8px; margin-top: 30px; }
.tour-item { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; color: #bdcada; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 16px; cursor: pointer; }
.tour-item:hover { background: rgba(255,255,255,.05); }
.tour-item.active { color: white; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); }
.tour-item > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--yellow); background: rgba(255,201,40,.1); border-radius: 11px; font-size: 11px; font-weight: 950; }
.tour-item strong, .tour-item small { display: block; }
.tour-item strong { font-size: 15px; }
.tour-item small { margin-top: 2px; color: #9eb0c6; font-size: 11px; }
.product-device-wrap { position: relative; min-height: 690px; display: grid; place-items: center; }
.product-device-glow { position: absolute; width: 520px; height: 520px; background: radial-gradient(circle, rgba(70,132,246,.4), transparent 65%); }
.product-device { z-index: 2; width: 315px; aspect-ratio: 1440 / 3120; transition: transform .25s ease; }
.product-device.changing { transform: scale(.975); }
.product-device img { transition: opacity .22s ease; }
.product-device.changing img { opacity: .25; }
.device-caption { position: absolute; z-index: 4; left: 5px; bottom: 70px; padding: 15px 18px; color: var(--navy); background: white; border-radius: 16px; box-shadow: var(--shadow-deep); }
.device-caption span, .device-caption strong { display: block; }
.device-caption span { color: var(--blue); font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .09em; }
.device-caption strong { margin-top: 2px; font-size: 14px; }

.driver-section { background: var(--canvas); }
.driver-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 85px; align-items: center; }
.driver-visual { position: relative; min-height: 600px; }
.browser-card { position: absolute; left: 0; right: 36px; top: 38px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 25px; box-shadow: var(--shadow); }
.browser-top { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 15px; background: #edf2f7; }
.browser-top i { width: 8px; height: 8px; background: #b6c3d2; border-radius: 50%; }
.browser-top span { margin-left: 10px; padding: 5px 45px; color: #8392a5; background: white; border-radius: 99px; font-size: 9px; }
.browser-content { height: 455px; display: grid; grid-template-columns: 72px 1fr; }
.browser-sidebar { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 24px; color: white; background: var(--navy); }
.browser-sidebar b { width: 34px; height: 34px; display: grid; place-items: center; color: var(--navy); background: var(--yellow); border-radius: 11px; }
.browser-sidebar span { width: 25px; height: 8px; background: #47617e; border-radius: 99px; }
.browser-main { padding: 35px; background: #f8fafd; }
.browser-title small, .browser-title strong { display: block; }
.browser-title small { color: var(--blue); font-size: 10px; font-weight: 950; text-transform: uppercase; }
.browser-title strong { font-size: 26px; }
.browser-car { margin-top: 25px; padding: 25px; color: white; background: linear-gradient(135deg, var(--navy), var(--navy-3)); border-radius: 20px; }
.browser-car span, .browser-car strong, .browser-car small { display: block; }
.browser-car span { color: #aabbd0; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.browser-car strong { margin: 4px 0; font-size: 27px; }
.browser-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.browser-stats > div { padding: 15px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.browser-stats b, .browser-stats small { display: block; }
.browser-stats small { color: var(--muted); font-size: 9px; }
.mini-phone { position: absolute; right: -3px; bottom: -15px; width: 205px; aspect-ratio: 1440 / 3120; overflow: hidden; padding: 5px; background: var(--navy); border-radius: 29px; box-shadow: var(--shadow-deep); transform: rotate(4deg); }
.mini-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.driver-copy > p { color: var(--muted); font-size: 17px; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 9px; margin: 27px 0 31px; }
.feature-pills span { padding: 8px 12px; color: #38506c; background: white; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; font-weight: 850; }

.business-section { overflow: hidden; }
.business-heading h2 { max-width: 700px; }
.business-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 16px; }
.business-card { min-height: 255px; padding: 27px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.business-card-main { grid-row: span 2; min-height: 526px; display: grid; grid-template-columns: 1fr 240px; gap: 12px; overflow: hidden; color: white; background: linear-gradient(145deg, var(--navy), #1a4776); border: 0; }
.business-copy { position: relative; z-index: 2; align-self: center; }
.card-label { display: inline-block; padding: 6px 10px; color: var(--navy); background: var(--yellow); border-radius: 99px; font-size: 10px; font-weight: 950; text-transform: uppercase; }
.business-copy h3 { margin: 17px 0 12px; font-size: 36px; line-height: 1.1; }
.business-copy p { color: #c1d0e0; }
.business-copy a { color: var(--yellow); font-size: 13px; font-weight: 900; }
.business-phone { align-self: end; width: 235px; height: 480px; overflow: hidden; padding: 5px; margin-bottom: -150px; background: #06111e; border-radius: 31px; box-shadow: var(--shadow-deep); transform: rotate(4deg); }
.business-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 26px; }
.business-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 15px; font-weight: 950; }
.business-card > h3 { margin: 36px 0 8px; font-size: 21px; }
.business-card > p { color: var(--muted); font-size: 14px; }

.prices-section { background: var(--canvas); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; min-height: 470px; padding: 30px; background: white; border: 1px solid var(--line); border-radius: 26px; }
.price-featured { border: 2px solid var(--blue); box-shadow: 0 24px 60px rgba(39,110,241,.13); }
.price-badge { position: absolute; right: 20px; top: -13px; padding: 5px 11px; color: var(--navy); background: var(--yellow); border-radius: 99px; font-size: 10px; font-weight: 950; }
.price-kicker { color: var(--blue); font-size: 11px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.price-card h3 { margin: 12px 0 10px; font-size: 23px; }
.price { display: flex; align-items: baseline; gap: 7px; margin: 9px 0 20px; }
.price strong { font-size: 48px; line-height: 1; letter-spacing: -.05em; }
.price span { color: var(--muted); font-size: 12px; }
.price-card ul { flex: 1; margin: 6px 0 24px; padding: 0; list-style: none; }
.price-card li { position: relative; padding: 9px 0 9px 25px; color: #445970; border-top: 1px solid #edf1f6; font-size: 14px; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 950; }
.more-prices { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.more-prices span { padding: 10px 14px; color: #53667c; background: white; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; }
.more-prices b { color: var(--ink); }

.confidence-section { color: white; background: linear-gradient(135deg, #0a1b2e, #174b79); }
.confidence-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 90px; align-items: center; }
.confidence-copy > p { max-width: 620px; color: #bfd0e1; font-size: 17px; }
.confidence-copy .button { margin-top: 14px; }
.confidence-list { display: grid; gap: 11px; }
.confidence-list > div { display: grid; grid-template-columns: 45px 1fr; padding: 17px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.11); border-radius: 18px; }
.confidence-list span { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; color: var(--navy); background: var(--yellow); border-radius: 10px; font-weight: 950; }
.confidence-list strong, .confidence-list small { display: block; }
.confidence-list small { color: #aec1d5; }

.faq-section { padding-top: 90px; }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 24px 44px 24px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 850; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 20px; color: var(--blue); font-size: 25px; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding-right: 42px; color: var(--muted); }

.final-cta { padding: 0 0 90px; }
.final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 55px 60px; color: white; background: radial-gradient(circle at 82% 10%, #285d95 0, transparent 28%), var(--navy); border-radius: 32px; box-shadow: var(--shadow); }
.final-cta h2 { margin: 9px 0 5px; font-size: clamp(34px, 4vw, 50px); line-height: 1.08; letter-spacing: -.045em; }
.final-cta p { margin: 0; color: #adbed1; }

footer { padding: 54px 0 30px; color: white; background: #071421; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 36px; }
.brand-footer { color: white; }
.footer-grid > div > p { margin: 14px 0 0; color: #93a7bd; font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 23px; color: #c1ccda; font-size: 13px; font-weight: 750; }
.footer-links a:hover { color: white; }
.copyright { grid-column: 1 / -1; margin: 28px 0 0; padding-top: 26px; color: #71869e; border-top: 1px solid #1c334b; font-size: 12px; }

.business-landing { background: #f5f8fc; }
.business-hero { position: relative; overflow: hidden; padding: 78px 0 74px; background: radial-gradient(circle at 82% 18%, rgba(255,197,47,.22), transparent 31%), linear-gradient(135deg, #f8fafc 0%, #eef4fb 100%); }
.business-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 58px; }
.business-hero-copy h1 { margin: 18px 0 21px; font-size: clamp(52px, 6vw, 86px); line-height: .96; letter-spacing: -.055em; }
.business-hero-copy h1 em { color: var(--blue); font-style: normal; }
.business-hero-copy > p { max-width: 660px; margin: 0; color: var(--muted); font-size: 19px; line-height: 1.7; }
.business-trust-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.business-trust-row span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.74); color: var(--navy); font-size: 12px; font-weight: 800; }
.business-hero-visual { position: relative; min-height: 590px; }
.business-character { position: absolute; left: -2%; bottom: -8%; z-index: 2; width: 48%; height: 94%; }
.business-character img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.business-dashboard { position: absolute; right: 0; top: 6%; width: 79%; padding: 12px; overflow: hidden; border: 1px solid rgba(16,37,63,.12); border-radius: 28px; background: rgba(255,255,255,.86); box-shadow: 0 32px 75px rgba(16,37,63,.2); transform: rotate(2deg); }
.business-dashboard img { display: block; width: 100%; border-radius: 18px; }
.business-direction-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.business-direction-grid article { min-height: 245px; padding: 25px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 14px 35px rgba(16,37,63,.06); }
.business-direction-grid article span { display: inline-grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--yellow); color: var(--navy); font-size: 12px; font-weight: 900; }
.business-direction-grid h3 { margin: 25px 0 10px; font-size: 23px; }
.business-direction-grid p { margin: 0; color: var(--muted); line-height: 1.6; }
.business-workflow { padding: 86px 0; background: var(--navy); color: white; }
.business-workflow-heading h2 { color: white; }
.business-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.business-steps article { padding: 26px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(255,255,255,.06); }
.business-steps b { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--yellow); color: var(--navy); }
.business-steps h3 { margin: 22px 0 8px; font-size: 22px; }
.business-steps p { margin: 0; color: #c1ccda; line-height: 1.6; }
.business-final { padding: 78px 0; }
.business-final-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 46px; border-radius: 30px; background: white; box-shadow: var(--shadow); }
.business-final h2 { margin: 8px 0; font-size: clamp(32px, 4vw, 48px); }
.business-final p { margin: 0; color: var(--muted); }
.business-landing .site-footer { padding: 28px 0; }
.business-landing .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.business-landing .site-footer p { margin: 0; color: #71869e; font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .reveal.is-revealing { animation: reveal-in 220ms ease-out both; }
  @keyframes reveal-in { from { opacity: .65; } to { opacity: 1; } }
}

@media (max-width: 1060px) {
  .business-hero-grid { grid-template-columns: 1fr; }
  .business-hero-visual { min-height: 540px; }
  .business-direction-grid { grid-template-columns: 1fr 1fr; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-showcase { max-width: 760px; width: 100%; margin: 0 auto; }
  .proof-grid { grid-template-columns: 1fr 1fr; padding: 18px 0; }
  .proof-grid > div { padding: 16px 28px; }
  .proof-grid > div:nth-child(2) { border-right: 0; }
  .mode-stage { grid-template-columns: 1fr; }
  .mode-visual { min-height: 500px; }
  .mode-person { left: 10%; }
  .mode-phone { right: 12%; }
  .product-layout, .driver-grid { gap: 50px; }
  .business-grid { grid-template-columns: 1fr 1fr; }
  .business-card-main { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 820px) {
  .business-nav { display: none; }
  .business-steps { grid-template-columns: 1fr; }
  .business-final-inner { display: block; padding: 36px 28px; }
  .business-final .button { margin-top: 24px; }
  .business-landing .footer-inner { align-items: flex-start; flex-direction: column; }
  .header-inner { min-height: 68px; }
  .menu-toggle { order: 3; display: block; margin-left: 0; }
  .header-actions { order: 2; margin-left: auto; }
  .header-actions .header-cta { display: none; }
  .header-login { display: inline-flex; min-height: 44px; align-items: center; padding-inline: 10px; }
  .site-nav { order: 4; }
  .site-nav { position: fixed; left: 14px; right: 14px; top: 76px; display: none; padding: 14px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
  .site-nav.open { display: grid; }
  .site-nav a { padding: 12px 10px; }
  .hero { padding-top: 58px; }
  .section { padding: 82px 0; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 20px; }
  .mode-stage { padding: 40px 30px; }
  .product-layout, .driver-grid, .confidence-grid, .faq-layout { grid-template-columns: 1fr; }
  .product-device-wrap { min-height: 680px; }
  .driver-copy { order: -1; }
  .driver-visual { min-height: 560px; }
  .price-grid { grid-template-columns: 1fr; }
  .price-card { min-height: auto; }
  .final-cta-inner { display: block; padding: 42px 34px; }
  .final-cta .button { margin-top: 26px; }
}

@media (max-width: 580px) {
  .business-hero { padding: 46px 0 34px; }
  .business-hero-copy h1 { font-size: 48px; }
  .business-hero-copy > p { font-size: 16px; }
  .business-hero .hero-actions .button { width: 100%; }
  .business-hero-visual { min-height: 390px; }
  .business-character { left: -16%; width: 62%; }
  .business-dashboard { top: 7%; width: 85%; }
  .business-direction-grid { grid-template-columns: 1fr; }
  .business-direction-grid article { min-height: auto; }
  .container { width: min(100% - 28px, 1220px); }
  .hero { padding: 45px 0 46px; }
  .hero h1 { font-size: clamp(43px, 13vw, 62px); }
  .hero-lead { font-size: 17px; }
  .hero-actions .button { width: 100%; }
  .hero-showcase { min-height: 520px; margin-top: 18px; }
  .orbit-one { width: 430px; height: 430px; }
  .orbit-two { width: 330px; height: 330px; }
  .phone-main { width: 245px; }
  .phone-side { width: 180px; right: -18px; }
  .chip-progress { left: -4px; top: 55px; }
  .chip-sync { right: 0; top: 12px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11); }
  .proof-grid > div:first-child { padding-left: 28px; }
  .section { padding: 68px 0; }
  .section-heading h2, .product-copy h2, .driver-copy h2, .faq-layout h2, .confidence-copy h2 { font-size: 36px; }
  .mode-tabs { width: 100%; }
  .mode-tab { min-width: 0; flex: 1; padding-inline: 10px; font-size: 13px; }
  .mode-stage { min-height: 780px; padding: 31px 22px; border-radius: 26px; }
  .mode-copy h3 { font-size: 34px; }
  .mode-visual { min-height: 390px; }
  .mode-person { left: -70px; bottom: -85px; width: 280px; }
  .mode-phone { right: -20px; bottom: -85px; width: 210px; }
  .tour-item { padding: 13px 10px; }
  .product-device-wrap { min-height: 610px; }
  .product-device { width: 270px; }
  .device-caption { left: 0; bottom: 35px; }
  .driver-visual { min-height: 500px; }
  .browser-card { right: 0; }
  .browser-content { height: 390px; grid-template-columns: 52px 1fr; }
  .browser-main { padding: 22px 15px; }
  .browser-stats { grid-template-columns: 1fr 1fr; }
  .browser-stats > div:last-child { display: none; }
  .mini-phone { width: 150px; right: -5px; }
  .business-grid { grid-template-columns: 1fr; }
  .business-card-main { min-height: 570px; grid-template-columns: 1fr; }
  .business-phone { position: absolute; width: 190px; height: 405px; right: -12px; bottom: -125px; }
  .business-copy { max-width: 77%; align-self: start; }
  .business-copy h3 { font-size: 31px; }
  .more-prices { align-items: stretch; flex-direction: column; }
  .confidence-grid { gap: 42px; }
  .final-cta { padding-bottom: 60px; }
  .final-cta-inner { padding: 34px 23px; border-radius: 25px; }
  .footer-grid { grid-template-columns: 1fr; }
  .copyright { grid-column: auto; }
}

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

/* KERMO Digital — optional second visual system. The classic rules above stay
   untouched so both designs can be compared against the same content. */
.design-toggle {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

html[data-design="digital"] {
  color-scheme: dark;
  --navy: #0b0e0d;
  --navy-2: #121614;
  --navy-3: #222824;
  --ink: #f3f7f2;
  --muted: #a7b1aa;
  --blue: #b8f23d;
  --blue-dark: #9ed51f;
  --blue-soft: #26331a;
  --yellow: #b8f23d;
  --yellow-dark: #8fbf21;
  --green: #49d69a;
  --green-soft: #19342a;
  --paper: #121614;
  --canvas: #0b0e0d;
  --line: #303831;
  --shadow: none;
  --shadow-deep: none;
}

html[data-design="digital"] body {
  color: var(--ink);
  background: var(--canvas);
}

html[data-design="digital"] .site-header {
  border-color: rgba(184, 242, 61, .10);
  background: rgba(11, 14, 13, .88);
}

html[data-design="digital"] :is(.site-nav a, .header-login) { color: var(--muted); }
html[data-design="digital"] :is(.site-nav a, .header-login):hover { color: var(--blue); }
html[data-design="digital"] .design-toggle {
  color: var(--blue);
  background: #171c19;
  border-color: #35412e;
}

html[data-design="digital"] .button {
  color: #10140e;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: none;
}

html[data-design="digital"] :is(.button-ghost, .button-dark) {
  color: var(--ink);
  background: #191e1b;
  border-color: var(--line);
}

html[data-design="digital"] .hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 18%, rgba(184, 242, 61, .13), transparent 28%),
    linear-gradient(145deg, #0b0e0d, #151a17 62%, #1d241c);
}

html[data-design="digital"] .hero-road { opacity: .22; filter: saturate(.55); }
html[data-design="digital"] .hero-copy h1 em,
html[data-design="digital"] .kicker,
html[data-design="digital"] .eyebrow,
html[data-design="digital"] .text-link { color: var(--blue); }

html[data-design="digital"] :is(
  .journey,
  .personalization,
  .my-car,
  .daily-dashboard,
  .profile-section,
  .services,
  body:not(.business-landing) .business-section,
  body:not(.business-landing) .final-cta,
  .business-directions,
  .business-final
) { background: var(--canvas); }

html[data-design="digital"] :is(
  .journey-card,
  .personal-preview,
  .level-card,
  .digital-car,
  .auto-id-card,
  .club-panel,
  .situation-card,
  .daily-card,
  .profile-card,
  .services-grid a,
  .business-direction-grid article,
  .business-final-inner
) {
  color: var(--ink);
  background: #171c19;
  border-color: var(--line);
  box-shadow: none;
}

html[data-design="digital"] :is(.preview-grid article, .car-stats div, .profile-stats span, .answer-result) {
  color: var(--ink);
  background: #202622;
}

html[data-design="digital"] :is(.road-statement, .club-section, .business-panel, .business-hero, .business-workflow, .final-cta-inner) {
  background:
    radial-gradient(circle at 88% 12%, rgba(184, 242, 61, .10), transparent 30%),
    #121614;
}

html[data-design="digital"] :is(.level-card, .digital-car, .auto-id-card, .club-panel) {
  background: linear-gradient(145deg, #171c19, #202721);
}

html[data-design="digital"] .site-footer { background: #080a09; }
html[data-design="digital"] .menu-toggle { background: #171c19; border-color: var(--line); }
html[data-design="digital"] .menu-toggle > span:not(.sr-only) { background: var(--ink); }

@media (max-width: 580px) {
  .design-toggle { min-height: 38px; padding-inline: 10px; }
  html[data-design="digital"] .header-actions { gap: 7px; }
}

/* KERMO journey homepage v2 — component styles */
.site-header { transition: box-shadow .24s ease, background .24s ease; }
.site-header.compact { background: rgba(255,255,255,.96); box-shadow: 0 8px 30px rgba(11,27,47,.08); }
.site-header.compact .header-inner { min-height: 64px; }
.header-inner { transition: min-height .24s ease; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-login { color: var(--ink); font-size: 14px; font-weight: 850; }
.header-login:hover { color: var(--blue); }
.button-outline-light { color: white; background: transparent; border-color: rgba(255,255,255,.32); box-shadow: none; }
.button-outline-light:hover { color: var(--navy); background: white; border-color: white; }

.hero { min-height: 720px; padding: 82px 0 72px; background: radial-gradient(circle at 82% 12%, #dfeaff 0, transparent 31%), linear-gradient(180deg,#fff 0%,#f5f8fd 100%); }
.hero::before { opacity: .3; }
.hero-road { position: absolute; right: -8%; bottom: 3%; width: 54%; height: 180px; border-top: 2px solid rgba(39,110,241,.14); border-radius: 50%; transform: rotate(-11deg); }
.hero-road::after { content: ""; position: absolute; inset: 40px 0 auto; border-top: 2px dashed rgba(16,35,59,.14); border-radius: 50%; }
.hero-grid { grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr); gap: 32px; }
.hero h1 { max-width: 720px; margin: 24px 0; font-size: clamp(52px,6.15vw,84px); }
.hero-lead { max-width: 650px; margin-bottom: 29px; }
.hero-note { margin: 15px 0 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.hero-note span { padding-inline: 5px; color: var(--blue); }
.hero-product { position: relative; min-height: 570px; display: grid; place-items: center; }
.hero-glow { position: absolute; width: 470px; height: 470px; background: radial-gradient(circle,#bfd3ff 0,rgba(191,211,255,.2) 46%,transparent 72%); border-radius: 50%; }
.app-phone { position: relative; z-index: 3; overflow: hidden; padding: 7px; background: #071321; border: 1px solid #29415f; border-radius: 40px; box-shadow: 0 42px 100px rgba(7,25,48,.28); }
.app-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 33px; }
.app-phone-hero { width: 300px; aspect-ratio: 1440/3120; transform: rotate(1.6deg); transition: transform .18s linear; }
.phone-top { position: absolute; z-index: 2; top: 13px; left: 50%; width: 54px; height: 6px; background: #071321; border-radius: 99px; transform: translateX(-50%); }
.product-float { position: absolute; z-index: 4; padding: 14px 16px; background: rgba(255,255,255,.97); border: 1px solid white; border-radius: 18px; box-shadow: 0 20px 52px rgba(20,52,87,.18); }
.float-progress { left: 5px; top: 92px; min-width: 195px; display: flex; align-items: center; gap: 10px; }
.float-progress div { flex: 1; }
.float-progress small,.float-progress strong { display: block; }
.float-progress small,.float-streak small,.float-level small,.float-level span { color: var(--muted); font-size: 10px; font-weight: 800; }
.float-progress i,.preview-progress i,.level-xp i { display: block; height: 5px; margin-top: 6px; overflow: hidden; background: var(--line); border-radius: 99px; }
.float-progress i b,.preview-progress i b,.level-xp i b { display: block; width: calc(var(--progress)*100%); height: 100%; background: var(--blue); border-radius: inherit; transform-origin: left; animation: progress-in .9s ease both; }
.ui-icon { width: 42px; height: 42px; display: grid; place-items: center; color: white; border-radius: 13px; font-size: 9px; font-weight: 950; }
.ui-icon-blue { background: var(--blue); }
.float-level { right: 18px; top: 32px; text-align: center; }
.float-level strong { display: block; margin: 2px 0; color: var(--navy); font-size: 31px; line-height: 1; }
.float-streak { right: 5px; bottom: 84px; display: flex; align-items: center; gap: 10px; }
.float-streak > span { width: 35px; height: 35px; display: grid; place-items: center; color: var(--navy); background: var(--yellow); border-radius: 12px; }
.float-streak strong,.float-streak small { display: block; }
@keyframes progress-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.trust-line { color: white; background: var(--navy); }
.trust-flow { min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 13px; font-weight: 850; }
.trust-flow i { width: 56px; border-top: 1px dashed rgba(255,255,255,.42); }
.trust-flow span:nth-of-type(3) { color: var(--yellow); }

.section { padding: 112px 0; }
.section-heading.centered { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.section-heading.centered p { max-width: 720px; margin: 18px auto 0; }
.journey { background: white; }
.journey-grid { display: grid; gap: 18px; }
.journey-card { position: relative; min-height: 430px; display: grid; grid-template-columns: 1fr 330px; overflow: hidden; padding: 38px; background: var(--canvas); border: 1px solid var(--line); border-radius: 30px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.journey-card:hover { transform: translateY(-3px); border-color: #b7cced; box-shadow: var(--shadow); }
.journey-card:nth-child(2) { color: white; background: linear-gradient(145deg,var(--navy),#173e69); border-color: transparent; }
.journey-card:nth-child(2) p,.journey-card:nth-child(2) li { color: #d4e0ef; }
.journey-card:nth-child(2) .text-link { color: var(--yellow); }
.journey-copy { position: relative; z-index: 2; max-width: 640px; }
.journey-index { color: var(--blue); font-size: 12px; font-weight: 950; letter-spacing: .16em; }
.journey-card:nth-child(2) .journey-index { color: var(--yellow); }
.journey-card h3 { margin: 12px 0 14px; font-size: clamp(38px,4vw,58px); letter-spacing: -.04em; }
.journey-card p { max-width: 580px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.compact-list { columns: 2; max-width: 580px; margin: 24px 0; padding: 0; list-style: none; }
.compact-list li { position: relative; break-inside: avoid; padding: 6px 0 6px 23px; color: #42566f; font-size: 13px; font-weight: 750; }
.compact-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 950; }
.journey-screen { position: absolute; right: 42px; bottom: -205px; width: 260px; aspect-ratio: 1440/3120; overflow: hidden; padding: 5px; background: var(--navy); border-radius: 32px; box-shadow: var(--shadow-deep); transform: rotate(3deg); }
.journey-screen img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; }
.situation-mini { align-self: center; justify-self: end; width: 300px; padding: 26px; color: var(--ink); background: white; border-radius: 24px; box-shadow: var(--shadow-deep); }
.situation-mini > span,.situation-mini > strong,.situation-mini > small { display: block; }
.situation-mini > span { color: var(--blue); font-size: 10px; font-weight: 950; letter-spacing: .1em; }
.situation-mini > strong { margin-top: 6px; font-size: 20px; }
.situation-mini > small { color: var(--muted); }
.mini-crossroad { position: relative; height: 150px; margin: 17px 0; overflow: hidden; background: #dcebdc; border-radius: 17px; }
.mini-crossroad::before,.mini-crossroad::after { content: ""; position: absolute; background: #69788a; }
.mini-crossroad::before { left: 42%; width: 16%; height: 100%; }
.mini-crossroad::after { top: 42%; width: 100%; height: 16%; }
.mini-crossroad i { position: absolute; z-index: 2; width: 34px; height: 24px; display: grid; place-items: center; color: white; border-radius: 7px; font-size: 11px; font-style: normal; font-weight: 950; }
.mini-crossroad i:first-child { left: 46%; bottom: 16px; background: var(--blue); }
.mini-crossroad i:nth-child(2) { right: 19px; top: 46%; background: var(--yellow-dark); }

.road-statement { position: relative; overflow: hidden; padding: 128px 0; color: white; background: var(--navy); }
.statement-inner { position: relative; z-index: 2; max-width: 1000px; text-align: center; }
.statement-inner h2 { margin: 16px 0 20px; font-size: clamp(48px,7vw,88px); letter-spacing: -.055em; }
.statement-inner > p { max-width: 760px; margin: 0 auto; color: #c5d3e5; font-size: 19px; line-height: 1.7; }
.statement-stages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 42px; }
.statement-stages span { padding: 9px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; font-size: 12px; font-weight: 850; }
.statement-stages b { color: var(--yellow); }
.statement-road { position: absolute; inset: 0; opacity: .16; }
.statement-road::before,.statement-road::after { content: ""; position: absolute; left: -10%; right: -10%; top: 54%; border-top: 2px dashed white; border-radius: 50%; transform: rotate(-5deg); }
.statement-road::after { top: 67%; border-top-style: solid; }

.personalization { background: var(--canvas); }
.personalization-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.personal-copy > p,.level-copy > p,.car-copy > p,.auto-id-copy > p,.profile-copy > p { color: var(--muted); font-size: 17px; line-height: 1.65; }
.personal-copy h3 { margin-top: 30px; }
.personal-selector { display: grid; gap: 8px; margin-top: 14px; }
.personal-option { min-height: 52px; padding: 0 16px; text-align: left; background: white; border: 1px solid var(--line); border-radius: 15px; font-weight: 850; cursor: pointer; }
.personal-option:hover,.personal-option.active { color: var(--blue); background: var(--blue-soft); border-color: #a9c4f8; }
.personal-option:focus-visible,.answer-grid button:focus-visible { outline: 3px solid rgba(39,110,241,.35); outline-offset: 2px; }
.personal-preview { padding: 30px; background: white; border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); }
.preview-header span,.preview-header strong { display: block; }
.preview-header span { color: var(--blue); font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.preview-header strong { margin-top: 5px; font-size: 28px; }
.preview-progress { padding: 18px; margin: 20px 0; background: var(--canvas); border-radius: 18px; }
.preview-progress span { display: flex; justify-content: space-between; gap: 20px; }
.preview-progress i { height: 8px; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preview-grid article { min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; background: var(--canvas); border: 1px solid var(--line); border-radius: 18px; }
.preview-grid article:first-child { color: white; background: var(--navy); border-color: transparent; }
.preview-grid span { color: var(--blue); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.preview-grid article:first-child span { color: var(--yellow); }
.preview-grid strong { margin: 6px 0 3px; }
.preview-grid small { color: var(--muted); }
.preview-grid article:first-child small { color: #c8d6e8; }

.level-section { background: white; }
.level-grid,.car-layout,.auto-id-grid,.club-grid,.situation-grid,.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.level-card { padding: 34px; color: white; background: linear-gradient(145deg,var(--navy),#1b4c80); border-radius: 30px; box-shadow: var(--shadow-deep); }
.level-card-top { display: flex; align-items: center; justify-content: space-between; }
.level-card-top span { color: var(--yellow); font-size: 12px; font-weight: 950; letter-spacing: .12em; }
.level-card-top b { font-size: 64px; line-height: 1; }
.level-xp { padding: 18px; margin: 24px 0; background: rgba(255,255,255,.09); border-radius: 18px; }
.level-xp span,.level-xp strong,.level-xp small { display: block; }
.level-xp small { margin-top: 3px; color: #c8d6e8; }
.level-xp i { background: rgba(255,255,255,.15); }
.level-xp i b { background: var(--yellow); }
.level-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.level-actions span { padding: 11px; background: rgba(255,255,255,.08); border-radius: 12px; font-size: 12px; }
.level-actions b { color: var(--yellow); }
.preview-label { display: block; margin-top: 17px; color: #9eb1c8; font-size: 10px; font-weight: 750; }
.soft-note { padding: 13px 15px; background: var(--blue-soft); border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; font-size: 13px !important; }

.my-car { background: var(--canvas); }
.digital-car { padding: 28px; color: white; background: linear-gradient(150deg,#101f33,#1f456e); border-radius: 32px; box-shadow: var(--shadow-deep); }
.digital-car-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.digital-car-head span > * { display: block; }
.digital-car-head small { color: #9fc1ff; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.digital-car-head strong { margin-top: 5px; font-size: 30px; }
.digital-car-head em { color: #c7d5e7; font-style: normal; }
.digital-car-head > b { padding: 7px 10px; color: var(--navy); background: white; border-radius: 9px; font-size: 11px; }
.car-visual { position: relative; height: 170px; display: grid; place-items: center; margin: 18px 0; overflow: hidden; background: radial-gradient(circle,#315e8e 0,transparent 66%); border-radius: 22px; }
.car-visual span { position: relative; z-index: 2; font-size: 62px; font-weight: 950; letter-spacing: -.08em; opacity: .92; }
.car-visual i { position: absolute; width: 78%; height: 40px; bottom: 27px; background: #06111e; border-radius: 55% 55% 22% 22%; box-shadow: 0 12px 22px rgba(0,0,0,.4); }
.car-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.car-stats div { padding: 13px; background: rgba(255,255,255,.08); border-radius: 13px; }
.car-stats small,.car-stats strong { display: block; }
.car-stats small { color: #aebfd3; font-size: 10px; }
.car-timeline { display: grid; gap: 0; margin-top: 20px; }
.car-timeline > span { position: relative; display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; padding: 10px 0 10px 18px; border-left: 1px solid rgba(255,255,255,.18); font-size: 12px; }
.car-timeline i { position: absolute; left: -4px; top: 16px; width: 7px; height: 7px; background: var(--yellow); border-radius: 50%; }
.car-timeline small { color: #aebfd3; }

.auto-id { background: white; }
.auto-id-card { padding: 30px; background: #f8fafc; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.auto-id-brand { display: flex; align-items: center; justify-content: space-between; }
.auto-id-brand span { font-weight: 950; letter-spacing: .12em; }
.auto-id-brand b { padding: 6px 9px; color: var(--navy); background: var(--yellow); border-radius: 9px; font-size: 11px; }
.auto-id-code { padding: 22px; margin: 20px 0; color: white; background: var(--navy); border-radius: 18px; }
.auto-id-code small,.auto-id-code strong { display: block; }
.auto-id-code small { color: #9fc1ff; font-size: 9px; letter-spacing: .12em; }
.auto-id-code strong { margin-top: 5px; font-size: 26px; }
.auto-id-card dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 0; }
.auto-id-card dl div { padding: 12px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.auto-id-card dt { color: var(--muted); font-size: 9px; }
.auto-id-card dd { margin: 4px 0 0; font-size: 12px; font-weight: 850; }

.club-section { color: white; background: var(--navy); }
.club-copy p { color: #c7d5e7; font-size: 17px; line-height: 1.65; }
.club-panel { padding: 30px; color: var(--ink); background: white; border-radius: 30px; box-shadow: var(--shadow-deep); }
.club-car span,.club-car small { display: block; }
.club-car span { font-size: 28px; font-weight: 950; }
.club-car small { margin-top: 3px; color: var(--muted); }
.club-metrics { display: flex; gap: 9px; margin: 20px 0; }
.club-metrics span { flex: 1; padding: 13px; background: var(--canvas); border-radius: 13px; font-size: 11px; }
.club-metrics b { color: var(--blue); font-size: 18px; }
.club-topics { display: grid; }
.club-topics > small { margin-bottom: 6px; color: var(--blue); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.club-topics a { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-weight: 850; }
.club-topics a span { color: var(--muted); font-size: 10px; font-weight: 700; }

.daily-situation { background: var(--canvas); }
.situation-copy p { color: var(--muted); font-size: 17px; line-height: 1.65; }
.situation-copy > small { color: var(--blue); font-weight: 850; }
.situation-card { padding: 26px; background: white; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.intersection { position: relative; height: 250px; overflow: hidden; background: #dfece0; border-radius: 20px; }
.intersection::before,.intersection::after { content: ""; position: absolute; background: #667588; }
.intersection::before { left: 41%; width: 18%; height: 100%; }
.intersection::after { top: 41%; width: 100%; height: 18%; }
.intersection i,.intersection b { position: absolute; z-index: 1; opacity: .6; }
.intersection i { top: 49%; width: 100%; border-top: 2px dashed white; }
.intersection b { left: 50%; height: 100%; border-left: 2px dashed white; }
.intersection span { position: absolute; z-index: 2; width: 50px; height: 34px; display: grid; place-items: center; color: white; border-radius: 9px; font-weight: 950; box-shadow: 0 7px 15px rgba(0,0,0,.22); }
.car-a { left: 45%; bottom: 25px; background: var(--blue); }
.car-b { right: 24px; top: 44%; background: var(--yellow-dark); }
.situation-card h3 { margin: 20px 0 12px; font-size: 24px; }
.answer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.answer-grid button { min-height: 48px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 13px; font-weight: 900; cursor: pointer; }
.answer-grid button:hover,.answer-grid button.selected { color: white; background: var(--blue); border-color: var(--blue); }
.answer-grid button.correct { color: white; background: var(--green); border-color: var(--green); }
.answer-result { min-height: 66px; padding: 12px 14px; margin: 10px 0 5px; color: var(--muted); background: var(--canvas); border-radius: 13px; font-size: 13px; }
.answer-result.success { color: #0a6d49; background: var(--green-soft); }

.daily-dashboard { background: white; }
.daily-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.daily-card { grid-column: span 2; display: flex; align-items: center; gap: 13px; min-height: 125px; padding: 18px; background: var(--canvas); border: 1px solid var(--line); border-radius: 20px; }
.daily-card:nth-child(4),.daily-card:nth-child(5) { grid-column: span 3; }
.daily-icon { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 13px; font-size: 11px; font-weight: 950; }
.daily-fire { color: var(--navy); background: var(--yellow); }
.daily-car { background: var(--green); }
.daily-rule { background: #7857d6; }
.daily-club { background: var(--navy); }
.daily-card div { min-width: 0; flex: 1; }
.daily-card small,.daily-card strong { display: block; }
.daily-card small { color: var(--blue); font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.daily-card strong { margin-top: 5px; font-size: 14px; }
.daily-card > b { color: var(--blue); }

.profile-section { background: var(--canvas); }
.profile-card { padding: 30px; background: white; border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); }
.profile-head { display: flex; align-items: center; gap: 12px; }
.profile-avatar { width: 58px; height: 58px; display: grid; place-items: center; color: white; background: var(--navy); border-radius: 18px; font-size: 22px; font-weight: 950; }
.profile-head span { flex: 1; }
.profile-head span > * { display: block; }
.profile-head span strong { font-size: 20px; }
.profile-head span small { color: var(--muted); }
.profile-head > b { padding: 7px 9px; color: var(--navy); background: var(--yellow); border-radius: 10px; font-size: 10px; }
.profile-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 24px 0; }
.profile-stats span { padding: 12px 8px; text-align: center; background: var(--canvas); border-radius: 12px; }
.profile-stats strong,.profile-stats small { display: block; }
.profile-stats small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-badges span { padding: 7px 9px; color: #594600; background: #fff5cf; border-radius: 99px; font-size: 10px; font-weight: 850; }

.services { background: white; }
.services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }
.services-grid a { min-height: 142px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; background: var(--canvas); border: 1px solid var(--line); border-radius: 20px; transition: transform .2s ease, border-color .2s ease; }
.services-grid a:hover { transform: translateY(-3px); border-color: #a8c1e8; }
.services-grid span { width: 43px; height: 43px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 13px; font-size: 9px; font-weight: 950; }
.services-grid strong { font-size: 14px; }
.center-action { margin-top: 24px; text-align: center; }

body:not(.business-landing) .business-section { padding: 80px 0; background: white; }
.business-panel { min-height: 560px; display: grid; grid-template-columns: 1fr 360px; align-items: center; overflow: hidden; padding: 58px; color: white; background: radial-gradient(circle at 90% 8%,#2d6098 0,transparent 28%),var(--navy); border-radius: 34px; box-shadow: var(--shadow-deep); }
.business-panel .business-copy { max-width: 670px; }
.business-panel .business-copy h2 { margin: 14px 0; font-size: clamp(42px,5vw,68px); }
.business-panel .business-copy p { color: #c5d4e6; font-size: 17px; line-height: 1.65; }
.business-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 28px; }
.business-tags span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; font-size: 11px; font-weight: 800; }
.business-actions,.final-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.business-device { align-self: end; justify-self: end; width: 285px; height: 540px; overflow: hidden; padding: 6px; margin-bottom: -165px; background: #06111e; border-radius: 36px; box-shadow: var(--shadow-deep); transform: rotate(4deg); }
.business-device img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; }

body:not(.business-landing) .final-cta { padding: 38px 0 90px; background: white; }
body:not(.business-landing) .final-cta-inner { display: block; padding: 70px; text-align: center; }
.final-cta-inner h2 { max-width: 850px; margin: 15px auto; font-size: clamp(45px,6vw,78px); letter-spacing: -.05em; }
.final-cta-inner > p { color: #c8d6e8; font-size: 19px; }
.final-actions { justify-content: center; margin-top: 28px; }
.final-line { display: block; margin-top: 28px; color: var(--yellow); }

.site-footer { padding: 72px 0 26px; color: white; background: #071321; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: 42px; }
.brand-footer { color: white; }
.footer-brand p { color: #9fb0c5; }
.footer-grid nav { display: grid; align-content: start; gap: 10px; }
.footer-grid nav strong { margin-bottom: 5px; color: white; }
.footer-grid nav a { color: #9fb0c5; font-size: 13px; }
.footer-grid nav a:hover { color: white; }
.social-links { display: flex; gap: 7px; }
.social-links :is(a,span) { width: 36px; height: 36px; display: grid; place-items: center; color: white; border: 1px solid #30445e; border-radius: 11px; font-size: 9px; font-weight: 900; }
.social-links span { opacity: .48; cursor: not-allowed; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 25px; margin-top: 52px; color: #72849a; border-top: 1px solid #22354c; font-size: 11px; }

@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .journey-card { grid-template-columns: 1fr 260px; }
  .personalization-grid,.level-grid,.car-layout,.auto-id-grid,.club-grid,.situation-grid,.profile-grid { gap: 42px; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1.5fr repeat(2,1fr); }
  .footer-brand { grid-row: span 2; }
}

@media (max-width: 820px) {
  .header-inner { gap: 10px; }
  .header-actions { order: 2; margin-left: auto; }
  .header-actions .header-cta { display: none; }
  .header-login { display: inline-flex; min-height: 44px; align-items: center; padding-inline: 8px; }
  .menu-toggle { order: 3; margin-left: 0; }
  .site-nav { order: 4; }
  .hero { padding: 56px 0 52px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow { justify-content: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-product { min-height: 540px; }
  .trust-flow { overflow-x: auto; justify-content: flex-start; padding-block: 18px; }
  .trust-flow span { white-space: nowrap; }
  .journey-card { min-height: 520px; grid-template-columns: 1fr; padding: 30px; }
  .journey-screen { width: 205px; right: 20px; bottom: -210px; opacity: .88; }
  .situation-mini { position: absolute; right: 24px; bottom: 24px; width: 245px; }
  .compact-list { max-width: 65%; columns: 1; }
  .statement-stages { flex-direction: column; }
  .statement-stages b { transform: rotate(90deg); }
  .personalization-grid,.level-grid,.car-layout,.auto-id-grid,.club-grid,.situation-grid,.profile-grid { grid-template-columns: 1fr; }
  .personal-copy,.level-copy,.car-copy,.auto-id-copy,.club-copy,.situation-copy,.profile-copy { max-width: 680px; }
  .car-copy,.auto-id-copy,.club-copy,.profile-copy { order: -1; }
  .daily-grid { grid-template-columns: 1fr 1fr; }
  .daily-card,.daily-card:nth-child(4),.daily-card:nth-child(5) { grid-column: span 1; }
  .daily-card:last-child { grid-column: 1/-1; }
  .business-panel { min-height: 650px; grid-template-columns: 1fr; padding: 42px; }
  .business-device { position: absolute; right: 25px; bottom: -185px; width: 225px; height: 470px; opacity: .76; }
  .business-panel .business-copy { position: relative; z-index: 2; max-width: 72%; }
  body:not(.business-landing) .final-cta-inner { padding: 52px 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; grid-row: auto; }
}

@media (max-width: 580px) {
  .container { width: min(100% - 28px,1220px); }
  .brand { font-size: 17px; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
  .header-login { font-size: 13px; }
  .hero h1 { font-size: clamp(43px,13.4vw,62px); }
  .hero-lead { font-size: 16px; line-height: 1.55; }
  .hero-actions .button { width: 100%; }
  .hero-product { min-height: 470px; margin-top: 4px; }
  .hero-glow { width: 350px; height: 350px; }
  .app-phone-hero { width: 225px; }
  .float-progress { left: 0; top: 76px; min-width: 155px; padding: 10px; }
  .float-level { right: 0; top: 22px; padding: 10px; }
  .float-level strong { font-size: 24px; }
  .float-streak { right: 0; bottom: 62px; padding: 10px; }
  .section { padding: 82px 0; }
  .section-heading.centered { text-align: left; }
  .journey-card { min-height: 620px; padding: 24px; }
  .journey-card h3 { font-size: 42px; }
  .journey-card p { font-size: 15px; }
  .compact-list { max-width: 100%; }
  .journey-screen { width: 180px; right: 18px; bottom: -132px; }
  .situation-mini { right: 18px; left: 18px; bottom: 18px; width: auto; }
  .road-statement { padding: 90px 0; }
  .statement-inner h2 { font-size: 47px; }
  .statement-inner > p { font-size: 16px; }
  .personal-preview,.level-card,.digital-car,.auto-id-card,.club-panel,.situation-card,.profile-card { padding: 20px; border-radius: 23px; }
  .preview-grid,.level-actions { grid-template-columns: 1fr; }
  .level-card-top b { font-size: 48px; }
  .car-visual { height: 130px; }
  .car-visual span { font-size: 47px; }
  .car-stats { grid-template-columns: 1fr; }
  .car-timeline > span { grid-template-columns: 68px 1fr; }
  .car-timeline > span > b { grid-column: 2; }
  .auto-id-card dl { grid-template-columns: 1fr 1fr; }
  .club-metrics { flex-direction: column; }
  .club-topics a { display: grid; }
  .intersection { height: 200px; }
  .answer-grid { grid-template-columns: 1fr; }
  .daily-grid { grid-template-columns: 1fr; }
  .daily-card,.daily-card:nth-child(4),.daily-card:nth-child(5),.daily-card:last-child { grid-column: auto; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .services-grid a { min-height: 120px; }
  .business-panel { min-height: 720px; padding: 30px 24px; }
  .business-panel .business-copy { max-width: 100%; }
  .business-device { right: -18px; bottom: -218px; width: 205px; }
  .business-actions .button,.final-actions .button { width: 100%; }
  body:not(.business-landing) .final-cta-inner { padding: 42px 22px; }
  .final-cta-inner h2 { font-size: 46px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer-brand { grid-column: 1/-1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .app-phone-hero { transform: none !important; }
  .float-progress i b,.preview-progress i b,.level-xp i b { animation: none; }
}

/* Digital finishing layer. Kept last so legacy landing-page declarations with
   literal light colours cannot reduce contrast after the theme is enabled. */
html[data-design="digital"] .site-header.compact {
  background: rgba(11,14,13,.96);
  box-shadow: none;
}
html[data-design="digital"] .hero-lead { color: var(--muted); }
html[data-design="digital"] .eyebrow {
  color: var(--blue);
  background: rgba(184,242,61,.08);
  border-color: rgba(184,242,61,.32);
}
html[data-design="digital"] .eyebrow span {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(184,242,61,.12);
}
html[data-design="digital"] :is(.product-float,.situation-mini,.personal-option,.answer-grid button,.auto-id-card dl div) {
  color: var(--ink);
  background: #191e1b;
  border-color: var(--line);
  box-shadow: none;
}
html[data-design="digital"] :is(.float-progress small,.float-streak small,.float-level small,.float-level span,.compact-list li,.preview-grid small,.club-topics a span) {
  color: var(--muted);
}
html[data-design="digital"] .float-level strong { color: var(--ink); }
html[data-design="digital"] :is(.preview-grid article:first-child,.auto-id-code) {
  color: var(--ink);
  background: #202622;
  border-color: var(--line);
}
html[data-design="digital"] .soft-note {
  color: var(--ink);
  background: var(--blue-soft);
  border-left-color: var(--blue);
}
html[data-design="digital"] .answer-grid button:hover,
html[data-design="digital"] .answer-grid button.selected {
  color: #10140e;
  background: var(--blue);
  border-color: var(--blue);
}
html[data-design="digital"] .journey-card:nth-child(2) {
  color: var(--ink);
  background: linear-gradient(145deg,#171c19,#202721);
  border-color: var(--line);
}
html[data-design="digital"] .journey-card:nth-child(2) :is(p,li) {
  color: var(--muted);
}
html[data-design="digital"] .button-outline-light {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}

/* Homepage 2026 — product-led landing. All selectors are scoped so public
   profiles, PDR, business and legal pages keep their existing layout. */
.landing-home { overflow-x: hidden; background: #fff; }
.landing-home .site-nav { gap: 19px; }
.landing-home .site-nav a { font-size: 13px; white-space: nowrap; }
.landing-home .header-inner { gap: 22px; }
.landing-home .header-actions { gap: 12px; }
.landing-home .button { border-radius: 15px; }

.lp-hero {
  position: relative;
  min-height: 790px;
  overflow: hidden;
  padding: 88px 0 70px;
  background:
    radial-gradient(circle at 78% 20%, rgba(39,110,241,.16), transparent 31%),
    linear-gradient(180deg,#fbfdff 0%,#f2f6fc 100%);
}
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .44;
  background-image: linear-gradient(rgba(16,35,59,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(16,35,59,.05) 1px,transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg,#000 0%,transparent 72%);
}
.lp-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 78px; }
.lp-hero-copy,.lp-hero-visual,.lp-copy,.lp-screen-stack,.lp-practice-visual,.lp-driver-copy,.lp-driver-devices { min-width: 0; }
.lp-hero-copy { padding-block: 36px; }
.lp-eyebrow,.lp-kicker { color: var(--blue); font-size: 12px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; background: rgba(255,255,255,.82); border: 1px solid #ceddF8; border-radius: 99px; }
.lp-eyebrow span { width: 8px; height: 8px; background: #10a36d; border-radius: 50%; box-shadow: 0 0 0 5px rgba(16,163,109,.12); }
.lp-hero h1 { max-width: 650px; margin: 24px 0 10px; font-size: clamp(52px,6vw,82px); line-height: .98; letter-spacing: -.062em; }
.lp-hero h1 em { display: block; color: var(--blue); font-style: normal; }
.lp-hero-subtitle { margin-bottom: 18px; color: #17304f; font-size: clamp(23px,2.1vw,31px); font-weight: 900; letter-spacing: -.025em; }
.lp-hero-lead { max-width: 620px; margin-bottom: 30px; color: #50627a; font-size: 18px; line-height: 1.65; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-primary { min-width: 230px; }
.lp-hero-points { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 26px 0 0; padding: 0; color: #66758a; list-style: none; font-size: 12px; }
.lp-hero-points li { position: relative; padding-left: 15px; }
.lp-hero-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--yellow); border-radius: 50%; }
.lp-hero-points b { color: var(--ink); }

.lp-hero-visual { position: relative; min-height: 630px; display: grid; place-items: center; }
.lp-orbit { position: absolute; z-index: -1; width: 570px; height: 570px; border: 1px solid rgba(39,110,241,.19); border-radius: 50%; box-shadow: 0 0 0 64px rgba(39,110,241,.035),0 0 0 128px rgba(39,110,241,.025); }
.lp-phone { position: relative; overflow: hidden; width: 294px; aspect-ratio: 1440/3120; padding: 7px; background: #071421; border: 1px solid #223b58; border-radius: 38px; box-shadow: 0 34px 90px rgba(11,27,47,.24); }
.lp-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 31px; }
.lp-phone-speaker { position: absolute; z-index: 2; top: 13px; left: 50%; width: 56px; height: 6px; background: #071421; border-radius: 20px; transform: translateX(-50%); }
.lp-phone-main { z-index: 2; width: 324px; transform: rotate(2.5deg); }
.lp-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 14px 17px; color: var(--ink); background: rgba(255,255,255,.96); border: 1px solid white; border-radius: 17px; box-shadow: 0 18px 46px rgba(24,57,94,.17); }
.lp-float small,.lp-float strong { display: block; }
.lp-float small { color: var(--blue); font-size: 10px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.lp-float strong { margin-top: 2px; font-size: 13px; }
.lp-float > span { width: 35px; height: 35px; display: grid; place-items: center; color: var(--navy); background: var(--yellow); border-radius: 11px; font-weight: 950; }
.lp-float-trainer { left: 0; top: 118px; }
.lp-float-sync { right: 0; bottom: 95px; }
.lp-float-sync > span { color: #08764e; background: #ddf8ec; }

.lp-process { color: white; background: var(--navy); }
.lp-process-grid { min-height: 105px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.lp-process-grid span { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 850; white-space: nowrap; }
.lp-process-grid b { color: var(--yellow); font-size: 10px; letter-spacing: .08em; }
.lp-process-grid i { width: 45px; height: 1px; background: rgba(255,255,255,.22); }

.lp-section { padding: 110px 0; }
.lp-heading { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 70px; margin-bottom: 48px; }
.lp-heading.centered { display: block; max-width: 790px; margin: 0 auto 50px; text-align: center; }
.lp-heading h2,.lp-copy h2,.lp-final h2,.lp-business-copy h2 { margin: 10px 0 0; font-size: clamp(38px,4.4vw,58px); line-height: 1.05; letter-spacing: -.05em; }
.lp-heading p,.lp-copy > p { max-width: 600px; margin: 16px 0 0; color: var(--muted); font-size: 17px; }
.lp-heading.centered p { margin-inline: auto; }
.lp-kicker.light { color: #9dbfff; }

.lp-seven { background: white; }
.lp-week { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.lp-week article { min-height: 205px; padding: 24px; background: var(--canvas); border: 1px solid var(--line); border-radius: 22px; }
.lp-week article:nth-child(n+5) { transform: translateX(50%); }
.lp-week article.accent { color: white; background: linear-gradient(145deg,var(--navy),#1d4e81); border-color: transparent; }
.lp-week span { color: var(--blue); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.lp-week .accent span { color: var(--yellow); }
.lp-week strong { display: block; margin-top: 15px; font-size: 19px; line-height: 1.2; }
.lp-week p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.lp-week .accent p { color: #c6d4e6; }
.lp-disclaimer { max-width: 780px; margin: 30px auto 0; color: #7a8799; font-size: 12px; text-align: center; }

.lp-trainer { overflow: hidden; color: white; background: radial-gradient(circle at 83% 20%,#244f81 0,transparent 28%),linear-gradient(145deg,#081725,#112e4f); }
.trainer-layout { min-height: 700px; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(390px,.95fr); align-items: center; gap: 76px; }
.trainer-copy > p { color: #b9c8da; }
.trainer-steps { display: grid; gap: 9px; margin: 29px 0 31px; }
.trainer-step { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 13px; padding: 12px 14px; color: white; text-align: left; background: rgba(255,255,255,.045); border: 1px solid rgba(171,199,226,.14); border-radius: 16px; cursor: pointer; transition: background .2s ease,border-color .2s ease,transform .2s ease; }
.trainer-step:hover { background: rgba(255,255,255,.075); transform: translateX(3px); }
.trainer-step:focus-visible { outline: 3px solid rgba(86,148,255,.55); outline-offset: 2px; }
.trainer-step > span { width: 38px; height: 38px; display: grid; place-items: center; color: #a9bfd7; background: #1c3854; border-radius: 12px; font-size: 10px; font-weight: 950; }
.trainer-step > div { min-width: 0; display: grid; }
.trainer-step strong { font-size: 14px; line-height: 1.3; }
.trainer-step small { margin-top: 2px; color: #93a9bf; font-size: 10px; line-height: 1.45; }
.trainer-step.active { background: linear-gradient(135deg,rgba(39,110,241,.3),rgba(26,76,138,.28)); border-color: rgba(94,154,255,.72); }
.trainer-step.active > span { color: #13243a; background: var(--yellow); }
.trainer-step.active small { color: #c3d5e8; }
.trainer-actions { display: flex; align-items: center; gap: 22px; }
.trainer-secondary { color: #dce8f5; font-size: 12px; font-weight: 850; }
.trainer-secondary:hover { text-decoration: underline; text-underline-offset: 4px; }
.trainer-demo { position: relative; min-height: 650px; display: grid; place-items: center; isolation: isolate; }
.trainer-demo-glow { position: absolute; z-index: -1; width: 500px; height: 500px; background: radial-gradient(circle,rgba(62,126,197,.4),rgba(19,60,101,.1) 48%,transparent 70%); border: 1px solid rgba(151,188,224,.12); border-radius: 50%; }
.trainer-demo-glow::before,.trainer-demo-glow::after { content: ""; position: absolute; inset: 47px; border: 1px dashed rgba(166,199,230,.14); border-radius: inherit; }
.trainer-demo-glow::after { inset: 105px; border-style: solid; }
.trainer-visual { z-index: 1; width: min(500px,100%); height: auto; object-fit: contain; filter: drop-shadow(0 28px 40px rgba(0,0,0,.24)); animation: trainer-visual-float 5s ease-in-out infinite alternate; }
.trainer-insight { position: absolute; z-index: 3; left: 3px; bottom: 105px; width: 285px; padding: 16px 18px 15px; color: var(--ink); background: rgba(255,255,255,.97); border: 1px solid white; border-radius: 19px; box-shadow: 0 22px 55px rgba(0,0,0,.27); backdrop-filter: blur(14px); }
.trainer-insight.is-changing { animation: trainer-insight-in .38s ease; }
.trainer-insight-top { display: flex; align-items: center; gap: 8px; }
.trainer-insight-top > span { width: 25px; height: 25px; display: grid; place-items: center; color: #14233a; background: var(--yellow); border-radius: 8px; font-size: 11px; }
.trainer-insight small { color: var(--blue); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.trainer-insight strong { display: block; margin: 10px 0 3px; font-size: 16px; line-height: 1.25; }
.trainer-insight p { margin: 0; color: var(--muted); font-size: 11px; }
.trainer-insight-progress { height: 5px; margin-top: 13px; overflow: hidden; background: #e5ebf3; border-radius: 99px; }
.trainer-insight-progress i { display: block; width: 32%; height: 100%; background: linear-gradient(90deg,var(--blue),#67a2ff); border-radius: inherit; transition: width .35s ease; }
.trainer-insight-dots { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.trainer-insight-dots i { width: 5px; height: 5px; background: #c5cfda; border-radius: 50%; transition: width .2s ease,background .2s ease; }
.trainer-insight-dots i.active { width: 17px; background: var(--blue); border-radius: 99px; }
@keyframes trainer-insight-in { from { opacity: .35; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes trainer-insight-mobile-in { from { opacity: .35; transform: translate(-50%,7px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes trainer-visual-float { from { transform: translateY(-4px) rotate(-.6deg); } to { transform: translateY(5px) rotate(.6deg); } }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.lp-split-dark { min-height: 700px; }
.lp-split-dark .lp-copy > p { color: #b9c8da; }
.lp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 30px 0 34px; padding: 0; list-style: none; }
.lp-checks li { position: relative; padding: 4px 0 4px 30px; color: #e6edf6; font-size: 14px; font-weight: 750; }
.lp-checks li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; display: grid; place-items: center; color: #10233b; background: var(--yellow); border-radius: 50%; font-size: 10px; font-weight: 950; }
.lp-checks.ink li { color: var(--ink); }
.lp-checks.ink li::before { color: #08764e; background: #dff7ed; }
.lp-screen-stack { position: relative; min-height: 680px; display: grid; place-items: center; }
.lp-phone-tests { width: 312px; transform: rotate(2deg); }
.lp-insight { position: absolute; z-index: 3; left: -10px; bottom: 100px; min-width: 265px; padding: 17px 19px; color: var(--ink); background: white; border-radius: 18px; box-shadow: 0 22px 55px rgba(0,0,0,.27); }
.lp-insight small,.lp-insight strong,.lp-insight span { display: block; }
.lp-insight small { color: var(--blue); font-size: 10px; font-weight: 950; text-transform: uppercase; }
.lp-insight strong { margin: 4px 0; font-size: 15px; }
.lp-insight span { color: var(--muted); font-size: 11px; }

.lp-learning { background: #f6f8fc; }
.lp-learning-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.lp-feature { min-height: 280px; padding: 30px; background: white; border: 1px solid var(--line); border-radius: 24px; }
.lp-feature.featured { color: white; background: var(--navy); border-color: var(--navy); }
.lp-feature-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 14px; font-size: 11px; font-weight: 950; }
.lp-feature.featured .lp-feature-icon { color: var(--navy); background: var(--yellow); }
.lp-feature > strong { display: block; margin-top: 24px; font-size: 22px; }
.lp-feature p { min-height: 76px; margin: 10px 0 20px; color: var(--muted); font-size: 14px; }
.lp-feature.featured p { color: #b9c7d8; }
.lp-feature a { color: var(--blue); font-weight: 900; }
.lp-feature.featured a { color: var(--yellow); }
.lp-learning-preview { min-height: 560px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 90px; margin-top: 20px; padding: 55px 80px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 30px; }
.lp-learning-preview .lp-phone { width: 274px; margin: 105px auto -240px; }
.lp-preview-copy h3 { margin: 10px 0 15px; font-size: 38px; line-height: 1.1; letter-spacing: -.04em; }
.lp-preview-copy > p { color: var(--muted); font-size: 16px; }
.lp-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.lp-mini-stats span { padding: 17px; background: var(--canvas); border-radius: 15px; color: var(--muted); font-size: 12px; }
.lp-mini-stats b { display: block; color: var(--blue); font-size: 22px; }

.lp-practice { background: white; }
.lp-practice-visual { position: relative; min-height: 690px; display: grid; place-items: center; background: radial-gradient(circle,#d9e7ff 0,transparent 66%); }
.lp-practice-visual .lp-phone { width: 315px; }
.lp-practice-chip { position: absolute; left: 0; bottom: 110px; display: flex; align-items: center; gap: 12px; max-width: 285px; padding: 15px 17px; background: white; border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow); font-size: 12px; }
.lp-practice-chip span { width: 32px; height: 32px; display: grid; place-items: center; color: #08764e; background: #dff7ed; border-radius: 10px; }
.lp-practice-cards { display: grid; gap: 10px; margin: 26px 0; }
.lp-practice-cards article { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 17px; background: var(--canvas); border: 1px solid var(--line); border-radius: 17px; }
.lp-practice-cards article > span { width: 44px; height: 44px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 13px; font-size: 11px; font-weight: 950; }
.lp-practice-cards strong { font-size: 16px; }
.lp-practice-cards p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

/* Practice finder — a live preview of the KERMO school and instructor search. */
.practice-finder { overflow: hidden; background: #f5f8fc; }
.practice-finder-heading { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.55fr); align-items: end; gap: 60px; margin-bottom: 38px; }
.practice-finder-heading h2 { max-width: 820px; margin: 10px 0 0; font-size: clamp(38px,4.3vw,64px); line-height: .98; letter-spacing: -.055em; }
.practice-finder-heading > p { max-width: 480px; margin: 0 0 4px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.practice-finder-shell { padding: 20px; background: white; border: 1px solid var(--line); border-radius: 32px; box-shadow: 0 28px 80px rgba(20,47,79,.11); }
.practice-type-switch { width: fit-content; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 16px; padding: 5px; background: #edf2f8; border-radius: 16px; }
.practice-type-switch button { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; color: #5b6b7f; background: transparent; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 900; transition: .2s ease; }
.practice-type-switch button span { width: 25px; height: 25px; display: grid; place-items: center; color: #607188; background: rgba(255,255,255,.72); border-radius: 8px; font-size: 12px; }
.practice-type-switch button.active { color: white; background: var(--navy); box-shadow: 0 8px 20px rgba(10,35,62,.18); }
.practice-type-switch button.active span { color: var(--navy); background: var(--yellow); }
.practice-filters { display: grid; grid-template-columns: 1.2fr .8fr .8fr auto; gap: 10px; margin-bottom: 16px; padding: 12px; background: #f6f8fb; border: 1px solid #e3eaf3; border-radius: 20px; }
.practice-filters label { min-width: 0; min-height: 58px; display: grid; align-content: center; gap: 3px; padding: 7px 14px; background: white; border: 1px solid #e0e7f0; border-radius: 13px; }
.practice-filters label > span { color: #77879a; font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.practice-filters select { width: 100%; padding: 0 26px 0 0; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; }
.practice-search-action { min-width: 196px; align-self: stretch; border-radius: 13px; box-shadow: none; }
.practice-finder-workspace { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); gap: 16px; }
.practice-map-card { position: relative; min-height: 510px; overflow: hidden; background: #dfe7ef; border: 1px solid #d9e1eb; border-radius: 24px; isolation: isolate; }
.practice-map-card iframe { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border: 0; }
.practice-map-summary { position: absolute; z-index: 2; left: 18px; bottom: 18px; max-width: calc(100% - 36px); display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; padding: 12px 15px 12px 12px; color: white; background: rgba(6,24,42,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 15px; box-shadow: 0 12px 35px rgba(4,18,32,.23); backdrop-filter: blur(12px); }
.practice-map-summary > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--yellow); background: rgba(255,199,37,.13); border-radius: 9px; font-size: 12px; }
.practice-map-summary strong,.practice-map-summary small { display: block; }
.practice-map-summary strong { font-size: 13px; }
.practice-map-summary small { margin-top: 2px; color: #b9c8d8; font-size: 10px; }
.practice-results { min-width: 0; min-height: 510px; display: flex; flex-direction: column; padding: 20px; color: white; background: linear-gradient(150deg,#081828,#143b63); border-radius: 24px; }
.practice-results-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.practice-results-top > span { padding: 8px 10px; color: #161c13; background: var(--yellow); border-radius: 99px; font-size: 9px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.practice-results-top small { color: #aabed2; font-size: 11px; }
.practice-result-card { display: block; padding: 20px; color: var(--ink); background: white; border-radius: 20px; box-shadow: 0 18px 42px rgba(3,16,30,.18); }
.practice-result-card[hidden] { display: none; }
.practice-result-head { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 14px; }
.practice-result-head img { width: 62px; height: 62px; object-fit: contain; background: #071522; border-radius: 17px; }
.practice-result-head img.practice-person { object-fit: cover; object-position: top center; background: #e8eff9; }
.practice-result-label { margin-bottom: 4px; color: #637388; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.practice-result-label b { display: inline-grid; place-items: center; min-width: 17px; min-height: 17px; margin-left: 3px; padding-inline: 4px; color: #08764e; background: #dff7ed; border-radius: 99px; }
.practice-result-head h3 { margin: 0; font-size: 21px; line-height: 1.1; letter-spacing: -.025em; }
.practice-result-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.practice-rating { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e3e9f1; }
.practice-rating strong { font-size: 18px; }
.practice-rating span { color: #f5aa19; font-size: 12px; letter-spacing: .05em; }
.practice-rating small { color: var(--muted); font-size: 10px; }
.practice-result-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.practice-result-stats span { padding: 8px 10px; color: #607188; background: #f1f5f9; border-radius: 10px; font-size: 9px; font-weight: 800; }
.practice-result-stats b { color: var(--ink); }
.practice-result-note { min-height: 42px; margin: 15px 0 18px; color: #5c6c7f; font-size: 11px; line-height: 1.55; }
.practice-result-actions { display: flex; align-items: center; gap: 16px; }
.practice-result-actions .button { min-height: 43px; padding: 0 17px; border-radius: 12px; box-shadow: none; font-size: 11px; }
.practice-text-link { color: var(--blue); font-size: 11px; font-weight: 900; }
.practice-trust { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; margin-top: auto; padding: 17px 4px 0; }
.practice-trust > span { width: 34px; height: 34px; display: grid; place-items: center; color: #072a1d; background: #7de5bd; border-radius: 11px; font-weight: 950; }
.practice-trust p,.practice-trust strong,.practice-trust small { display: block; margin: 0; }
.practice-trust strong { font-size: 11px; }
.practice-trust small { margin-top: 2px; color: #9fb3c7; font-size: 9px; line-height: 1.45; }
.practice-mobile-view { display: none; }

.lp-driver { overflow: hidden; color: white; background: radial-gradient(circle at 80% 30%,rgba(39,110,241,.32),transparent 31%),#091827; }
.lp-driver .lp-heading p { color: #bac9da; }
.lp-driver-showcase { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 70px; }
.lp-driver-copy { display: grid; gap: 8px; }
.lp-driver-copy article { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 16px; color: #b5c4d5; border: 1px solid transparent; border-radius: 17px; }
.lp-driver-copy article.active,.lp-driver-copy article:hover { color: white; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.11); }
.lp-driver-copy article > span { color: var(--yellow); font-size: 10px; font-weight: 950; }
.lp-driver-copy strong { font-size: 16px; }
.lp-driver-copy p { margin: 3px 0 0; color: #9eb0c5; font-size: 12px; }
.lp-driver-copy .button { justify-self: start; margin-top: 18px; }
.lp-driver-devices { position: relative; min-height: 710px; }
.lp-driver-main { position: absolute; z-index: 2; left: 50px; top: 10px; width: 315px; transform: rotate(-2deg); }
.lp-driver-side { position: absolute; right: 0; bottom: -80px; width: 265px; opacity: .94; transform: rotate(7deg); }

.lp-club { background: #f6f8fc; }
.lp-club-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0 32px; }
.lp-club-tags span { padding: 9px 13px; background: white; border: 1px solid var(--line); border-radius: 99px; color: #53657b; font-size: 12px; font-weight: 800; }
.lp-club-visual { min-height: 620px; display: grid; place-items: center; background: radial-gradient(circle,#dfeaff 0,transparent 65%); }
.lp-club-visual .lp-phone { width: 300px; transform: rotate(2deg); }

.lp-access { background: white; }
.lp-price-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; align-items: stretch; }
.lp-price-grid article { grid-column: span 2; min-height: 270px; display: flex; flex-direction: column; padding: 28px; background: var(--canvas); border: 1px solid var(--line); border-radius: 23px; }
.lp-price-grid article:nth-child(4) { grid-column: 2/span 2; }
.lp-price-grid article:nth-child(5) { grid-column: 4/span 2; }
.lp-price-grid article.recommended { position: relative; color: white; background: linear-gradient(145deg,var(--navy),#1e4f82); border-color: transparent; transform: translateY(-10px); box-shadow: var(--shadow); }
.lp-price-grid article > b { position: absolute; top: -13px; right: 18px; padding: 7px 11px; color: var(--navy); background: var(--yellow); border-radius: 99px; font-size: 10px; text-transform: uppercase; }
.lp-price-grid article > span { font-size: 14px; font-weight: 900; }
.lp-price-grid article > strong { margin: 13px 0 8px; font-size: 34px; line-height: 1; }
.lp-price-grid p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.lp-price-grid .recommended p { color: #c0cfe0; }
.lp-price-grid small { margin-top: auto; color: var(--blue); font-weight: 850; }
.lp-price-grid .button { min-height: 44px; margin-top: auto; color: var(--navy); background: var(--yellow); border-color: var(--yellow); box-shadow: none; }

.lp-business { color: white; background: #f6f8fc; }
.lp-business-panel { display: grid; grid-template-columns: 1.12fr .88fr; gap: 75px; padding: 72px; background: radial-gradient(circle at 90% 0,rgba(39,110,241,.28),transparent 30%),var(--navy); border-radius: 34px; }
.lp-business-copy > p { max-width: 620px; color: #bac9da; }
.lp-business-types { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 32px; }
.lp-business-types span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; font-size: 13px; font-weight: 800; }
.lp-business-types b { color: var(--yellow); }
.lp-business-steps { display: grid; align-content: center; gap: 10px; }
.lp-business-steps article { display: grid; grid-template-columns: 34px 1fr; gap: 4px 13px; padding: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 17px; }
.lp-business-steps b { grid-row: 1/3; color: var(--yellow); font-size: 10px; }
.lp-business-steps strong { font-size: 15px; }
.lp-business-steps small { color: #aebfd1; line-height: 1.45; }

.lp-final { padding: 115px 0; color: white; background: #071421; }
.lp-final-inner { max-width: 850px; text-align: center; }
.lp-final h2 { margin-inline: auto; }
.lp-final p { margin: 20px auto 30px; color: #b8c8da; font-size: 17px; }
.lp-final .lp-actions { justify-content: center; }
.landing-home .site-footer { padding-top: 76px; }

html[data-design="digital"] .landing-home { background: var(--canvas); }
html[data-design="digital"] .lp-hero { background: radial-gradient(circle at 78% 20%,rgba(184,242,61,.12),transparent 31%),linear-gradient(145deg,#0b0e0d,#151a17); }
html[data-design="digital"] :is(.lp-eyebrow,.lp-float,.lp-week article,.lp-feature,.lp-learning-preview,.lp-practice-cards article,.lp-practice-chip,.lp-club-tags span,.lp-price-grid article) { color: var(--ink); background: #171c19; border-color: var(--line); box-shadow: none; }
html[data-design="digital"] :is(.lp-seven,.lp-learning,.lp-practice,.lp-club,.lp-access,.lp-business) { background: var(--canvas); }
html[data-design="digital"] .lp-hero-subtitle { color: var(--ink); }
html[data-design="digital"] :is(.lp-hero-lead,.lp-heading p,.lp-copy > p,.lp-feature p,.lp-preview-copy > p,.lp-practice-cards p,.lp-price-grid p,.lp-club-tags span) { color: var(--muted); }
html[data-design="digital"] :is(.lp-feature.featured,.lp-week article.accent,.lp-price-grid article.recommended,.lp-business-panel,.lp-trainer,.lp-driver,.lp-final) { color: var(--ink); background: #171c19; border-color: var(--line); box-shadow: none; }
html[data-design="digital"] :is(.lp-feature.featured p,.lp-week .accent p,.lp-price-grid .recommended p,.lp-business-copy > p,.lp-final p,.lp-driver .lp-heading p) { color: var(--muted); }
html[data-design="digital"] .lp-process { background: #080a09; }
html[data-design="digital"] .lp-checks li::before { color: #10140e; background: var(--blue); }
html[data-design="digital"] .lp-insight { color: var(--ink); background: #202622; box-shadow: none; }
html[data-design="digital"] .practice-finder { background: var(--canvas); }
html[data-design="digital"] .practice-finder-shell { background: #121713; border-color: var(--line); box-shadow: none; }
html[data-design="digital"] .practice-type-switch,html[data-design="digital"] .practice-filters { background: #090c0a; border-color: var(--line); }
html[data-design="digital"] .practice-type-switch button.active { color: #0b100c; background: var(--blue); box-shadow: none; }
html[data-design="digital"] .practice-filters label,html[data-design="digital"] .practice-result-card { color: var(--ink); background: #191f1b; border-color: var(--line); }
html[data-design="digital"] .practice-filters select { color: var(--ink); }
html[data-design="digital"] .practice-filters option { color: #101712; background: white; }
html[data-design="digital"] .practice-results { background: #0a0d0b; border: 1px solid var(--line); }
html[data-design="digital"] .practice-rating { border-color: var(--line); }
html[data-design="digital"] .practice-result-stats span { color: var(--muted); background: #232b25; }
html[data-design="digital"] .practice-result-stats b,html[data-design="digital"] .practice-result-head h3 { color: var(--ink); }
html[data-design="digital"] .practice-result-note,html[data-design="digital"] .practice-result-head p { color: var(--muted); }
html[data-design="digital"] .trainer-step { color: #edf5eb; background: #141b16; border-color: #2d3930; }
html[data-design="digital"] .trainer-step.active { background: linear-gradient(135deg,#27341f,#19251a); border-color: #82ae31; }
html[data-design="digital"] .trainer-step.active > span,html[data-design="digital"] .trainer-insight-top > span { color: #10140e; background: #b8f23d; }
html[data-design="digital"] .trainer-step small { color: #93a098; }
html[data-design="digital"] .trainer-secondary { color: #d5dfd3; }
html[data-design="digital"] .trainer-demo-glow { background: radial-gradient(circle,rgba(128,174,45,.22),rgba(28,50,27,.08) 48%,transparent 70%); border-color: rgba(184,242,61,.1); }
html[data-design="digital"] .trainer-insight { color: #edf5eb; background: rgba(29,36,31,.97); border-color: #3c493d; box-shadow: 0 22px 55px rgba(0,0,0,.34); }
html[data-design="digital"] .trainer-insight p { color: #99a49c; }
html[data-design="digital"] .trainer-insight-progress { background: #394139; }
html[data-design="digital"] .trainer-insight-progress i,html[data-design="digital"] .trainer-insight-dots i.active { background: #b8f23d; }
html[data-design="digital"] .lp-phone { border-color: #3c4935; box-shadow: 0 0 0 1px rgba(184,242,61,.08); }
html[data-design="digital"] .lp-orbit { border-color: rgba(184,242,61,.20); box-shadow: 0 0 0 64px rgba(184,242,61,.025),0 0 0 128px rgba(184,242,61,.015); }

@media (max-width: 1120px) {
  .landing-home .site-nav { gap: 13px; }
  .landing-home .site-nav a { font-size: 12px; }
  .landing-home .header-login { display: none; }
  .lp-hero-grid { gap: 30px; }
  .lp-float-trainer { left: -10px; }
  .lp-float-sync { right: -10px; }
  .trainer-layout { grid-template-columns: minmax(0,1fr) minmax(350px,.85fr); gap: 38px; }
  .lp-week { grid-template-columns: repeat(3,1fr); }
  .lp-week article:nth-child(n+5) { transform: none; }
  .lp-week article:last-child { grid-column: 2; }
  .lp-driver-main { left: 0; }
}

@media (max-width: 920px) {
  .landing-home .menu-toggle { display: block; margin-left: auto; }
  .landing-home .site-nav { position: fixed; inset: 76px 0 auto; display: none; margin: 0; padding: 22px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .landing-home .site-nav.open { display: grid; }
  .landing-home .site-nav a { padding: 9px 5px; font-size: 15px; }
  .landing-home .header-actions { margin-left: 0; }
  .lp-hero { min-height: 0; padding-top: 60px; }
  .lp-hero-grid,.lp-split,.lp-driver-showcase,.lp-business-panel { grid-template-columns: 1fr; }
  .lp-hero-copy { text-align: center; }
  .lp-hero-lead { margin-inline: auto; }
  .lp-actions,.lp-hero-points { justify-content: center; }
  .lp-hero-visual { min-height: 650px; }
  .lp-process-grid { flex-wrap: wrap; padding-block: 25px; }
  .lp-process-grid i { width: 20px; }
  .lp-heading { grid-template-columns: 1fr; gap: 12px; }
  .lp-split { gap: 40px; }
  .trainer-layout { min-height: 0; grid-template-columns: 1fr; gap: 28px; }
  .trainer-demo { min-height: 520px; }
  .lp-learning-preview { grid-template-columns: .75fr 1.25fr; padding-inline: 45px; gap: 45px; }
  .lp-driver-copy { order: 2; }
  .lp-driver-devices { order: 1; max-width: 650px; width: 100%; margin-inline: auto; }
  .lp-price-grid { grid-template-columns: 1fr 1fr; }
  .lp-price-grid article,.lp-price-grid article:nth-child(4),.lp-price-grid article:nth-child(5) { grid-column: auto; }
  .lp-price-grid article.recommended { transform: none; }
  .lp-business-panel { padding: 55px; }
}

@media (max-width: 620px) {
  .container { width: min(1220px,calc(100% - 28px)); }
  .landing-home .header-inner { min-height: 68px; gap: 9px; }
  .landing-home .brand { font-size: 16px; }
  .landing-home .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .landing-home .site-nav { top: 68px; }
  .landing-home .header-cta { display: none; }
  .landing-home .design-toggle { min-height: 38px; padding: 0 10px; }
  .lp-section { padding: 72px 0; }
  .lp-hero { padding: 48px 0 35px; }
  .lp-hero h1 { margin-top: 20px; font-size: 49px; }
  .lp-eyebrow { display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
  .lp-eyebrow span { display: inline-block; margin-right: 8px; vertical-align: 1px; }
  .lp-hero-subtitle { max-width: 100%; font-size: 21px; overflow-wrap: anywhere; }
  .lp-hero-lead { font-size: 16px; }
  .lp-actions { display: grid; }
  .lp-actions .button { width: 100%; }
  .lp-hero-points { display: grid; justify-content: start; max-width: 330px; margin-inline: auto; text-align: left; }
  .lp-hero-visual { min-height: 565px; }
  .lp-phone-main { width: 270px; }
  .lp-orbit { width: 430px; height: 430px; }
  .lp-float { padding: 11px 12px; }
  .lp-float-trainer { left: 0; top: 70px; }
  .lp-float-sync { right: 0; bottom: 48px; }
  .lp-process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .lp-process-grid i { display: none; }
  .lp-heading h2,.lp-copy h2,.lp-final h2,.lp-business-copy h2 { font-size: 36px; }
  .lp-heading p,.lp-copy > p { font-size: 15px; }
  .lp-week,.lp-learning-grid,.lp-mini-stats,.lp-price-grid { grid-template-columns: 1fr; }
  .lp-week article,.lp-week article:last-child { grid-column: auto; min-height: 0; }
  .lp-checks { grid-template-columns: 1fr; }
  .lp-split-dark { min-height: 0; }
  .lp-screen-stack { min-height: 610px; }
  .lp-phone-tests { width: 275px; }
  .lp-insight { left: 0; bottom: 48px; min-width: 245px; }
  .lp-learning-preview { min-height: 780px; grid-template-columns: 1fr; padding: 34px 24px; gap: 25px; }
  .lp-learning-preview .lp-phone { width: 245px; margin: 0 auto -230px; }
  .lp-preview-copy { order: -1; }
  .lp-preview-copy h3 { font-size: 31px; }
  .lp-practice-visual { min-height: 610px; }
  .lp-practice-visual .lp-phone { width: 275px; }
  .lp-practice-chip { bottom: 55px; }
  .lp-driver-devices { min-height: 610px; }
  .lp-driver-main { width: 265px; }
  .lp-driver-side { right: -20px; width: 205px; bottom: -20px; }
  .lp-club-visual { min-height: 590px; }
  .lp-club-visual .lp-phone { width: 270px; }
  .lp-price-grid article { min-height: 0; }
  .lp-business-panel { padding: 36px 22px; border-radius: 24px; }
  .lp-business-types { display: grid; }
  .lp-final { padding: 80px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-phone-main,.lp-phone-tests,.lp-driver-main,.lp-driver-side,.lp-club-visual .lp-phone { transform: none; }
  .trainer-insight.is-changing { animation: none; }
  .trainer-visual { animation: none; }
}

/* Homepage ecosystem hero — approved KERMO concept */
.ecosystem-hero {
  --ecosystem-accent: var(--yellow);
  position: relative;
  overflow: hidden;
  padding: 42px 0;
  color: #f8fbff;
  background: #0d1723;
}
.ecosystem-hero::before {
  content: "";
  position: absolute;
  inset: 20px max(18px,calc((100vw - 1400px) / 2));
  border: 1px solid rgba(142,174,207,.14);
  border-radius: 34px;
  background:
    radial-gradient(circle at 83% 19%,rgba(45,117,185,.38),transparent 34%),
    radial-gradient(circle at 12% 91%,rgba(255,198,41,.11),transparent 29%),
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(145deg,#172b3e,#102235 57%,#163553);
  background-size: auto,auto,48px 48px,48px 48px,auto;
  box-shadow: inset 0 1px rgba(255,255,255,.05),0 38px 90px rgba(1,11,22,.24);
}
.ecosystem-hero-grid {
  position: relative;
  z-index: 1;
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0,.94fr) minmax(520px,1.06fr);
  align-items: center;
  gap: 42px;
  padding-block: 54px;
}
.ecosystem-hero-copy { max-width: 610px; padding-left: 8px; }
.ecosystem-eyebrow { margin-bottom: 19px; color: var(--ecosystem-accent); font-size: 12px; font-weight: 950; letter-spacing: .17em; text-transform: uppercase; }
.ecosystem-hero h1 { max-width: 640px; margin: 0 0 22px; color: white; font-size: clamp(44px,4.5vw,66px); line-height: 1.03; letter-spacing: -.048em; overflow-wrap: anywhere; }
.ecosystem-promise { margin-bottom: 16px; color: white; font-size: clamp(18px,1.6vw,22px); font-weight: 850; line-height: 1.42; }
.ecosystem-description { max-width: 590px; margin-bottom: 28px; color: #adc0d4; font-size: 16px; line-height: 1.65; }
.ecosystem-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ecosystem-actions .button { min-height: 50px; padding-inline: 20px; border-radius: 14px; }
.ecosystem-primary { color: white; background: var(--blue); border-color: var(--blue); }
.ecosystem-secondary { color: white; background: rgba(255,255,255,.055); border-color: rgba(174,197,221,.26); box-shadow: none; }
.ecosystem-secondary:hover { color: white; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.4); }
.ecosystem-club-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: white; font-size: 14px; font-weight: 850; }
.ecosystem-club-link span { color: var(--ecosystem-accent); }
.ecosystem-club-link:hover { color: var(--ecosystem-accent); }
.ecosystem-benefits { display: flex; flex-wrap: wrap; gap: 15px 25px; margin: 35px 0 0; padding: 0; color: #aabdd0; list-style: none; font-size: 13px; }
.ecosystem-benefits li { display: inline-flex; align-items: center; gap: 8px; }
.ecosystem-benefits li > span { color: #8aa4bd; font-size: 14px; }

.ecosystem-visual { position: relative; min-height: 590px; display: grid; place-items: center; }
.ecosystem-visual::before { content: ""; position: absolute; width: 440px; height: 440px; background: radial-gradient(circle,rgba(43,117,190,.32),rgba(43,117,190,.07) 52%,transparent 72%); border-radius: 50%; filter: blur(3px); }
.ecosystem-orbit { position: absolute; width: 455px; height: 455px; border: 2px dashed rgba(168,193,218,.32); border-radius: 50%; }
.ecosystem-orbit::before,.ecosystem-orbit::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 9px rgba(255,198,41,.12); }
.ecosystem-orbit::before { top: 37px; right: 73px; background: var(--ecosystem-accent); }
.ecosystem-orbit::after { bottom: 28px; left: 92px; background: var(--ecosystem-accent); }
.ecosystem-live { position: absolute; z-index: 6; top: 28px; right: 12px; display: inline-flex; align-items: center; gap: 8px; color: #e9f5ff; font-size: 12px; font-weight: 800; }
.ecosystem-live i { width: 9px; height: 9px; background: #45db9c; border-radius: 50%; box-shadow: 0 0 0 6px rgba(69,219,156,.12); }
.ecosystem-phone { position: relative; z-index: 3; width: 270px; padding: 7px; background: #e9edf1; border: 6px solid #e5e8ec; border-radius: 38px; box-shadow: 0 42px 92px rgba(0,8,18,.52); transform: rotate(3deg); animation: ecosystem-phone-float 7s ease-in-out infinite; }
.ecosystem-phone img { width: 100%; height: auto; border-radius: 27px; }
.ecosystem-phone-speaker { position: absolute; z-index: 2; top: 13px; left: 50%; width: 58px; height: 6px; background: #1d2630; border-radius: 99px; transform: translateX(-50%); }
.ecosystem-role { position: absolute; z-index: 5; width: 194px; min-height: 108px; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: rgba(18,33,49,.88); border: 1px solid rgba(146,179,210,.32); border-radius: 20px; box-shadow: 0 20px 46px rgba(0,10,22,.33); backdrop-filter: blur(16px); }
.ecosystem-role img { width: 70px; height: 92px; flex: 0 0 auto; object-fit: contain; object-position: center bottom; }
.ecosystem-role div { min-width: 0; display: grid; gap: 3px; }
.ecosystem-role strong { color: white; font-size: 14px; line-height: 1.25; }
.ecosystem-role span { color: #aab9c8; font-size: 12px; line-height: 1.35; }
.ecosystem-beta { display: inline-flex; margin-left: 4px; padding: 2px 5px; color: #132031; background: var(--ecosystem-accent); border-radius: 5px; font-size: 8px; font-weight: 950; letter-spacing: .08em; line-height: 1; vertical-align: 2px; }
.role-student { top: 42px; left: -8px; animation: ecosystem-card-float 5.8s ease-in-out infinite; }
.role-school { top: 112px; right: -4px; animation: ecosystem-card-float 6.4s ease-in-out -1.7s infinite; }
.role-instructor { bottom: 70px; left: -16px; animation: ecosystem-card-float 6.2s ease-in-out -.8s infinite; }
.role-driver { right: 0; bottom: 22px; animation: ecosystem-card-float 5.6s ease-in-out -2.3s infinite; }

html[data-design="digital"] .ecosystem-hero { --ecosystem-accent: #b8f23d; }
html[data-design="digital"] .ecosystem-primary { color: #10140e; background: #b8f23d; border-color: #b8f23d; box-shadow: 0 14px 34px rgba(184,242,61,.16); }
html[data-design="digital"] .ecosystem-primary:hover { color: #10140e; background: #c8ff54; }
html[data-design="digital"] .ecosystem-hero::before { background: radial-gradient(circle at 82% 18%,rgba(184,242,61,.12),transparent 33%),radial-gradient(circle at 12% 91%,rgba(184,242,61,.07),transparent 29%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(145deg,#101612,#111b17 57%,#14231b); background-size: auto,auto,48px 48px,48px 48px,auto; }

@keyframes ecosystem-phone-float { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-8px) rotate(2.2deg); } }
@keyframes ecosystem-card-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }

@media (max-width: 1100px) {
  .ecosystem-hero-grid { grid-template-columns: minmax(0,.9fr) minmax(460px,1.1fr); gap: 20px; }
  .ecosystem-role { width: 176px; }
  .ecosystem-role img { width: 62px; }
  .role-student,.role-instructor { left: 0; }
  .role-school,.role-driver { right: 0; }
}

@media (max-width: 920px) {
  .ecosystem-hero { padding: 24px 0 36px; }
  .ecosystem-hero::before { inset: 12px; }
  .ecosystem-hero-grid { grid-template-columns: 1fr; gap: 10px; padding-block: 52px; }
  .ecosystem-hero-copy { width: 100%; max-width: 720px; min-width: 0; padding: 0; margin-inline: auto; text-align: center; }
  .ecosystem-description { margin-inline: auto; }
  .ecosystem-actions,.ecosystem-benefits { justify-content: center; }
  .ecosystem-visual { width: min(650px,100%); min-height: 600px; margin-inline: auto; }
  .ecosystem-live { right: 26px; }
}

@media (max-width: 620px) {
  .ecosystem-hero::before { inset: 8px; border-radius: 26px; }
  .ecosystem-hero-grid { width: min(100% - 34px,1220px); padding-block: 34px 26px; }
  .ecosystem-eyebrow { font-size: 10px; letter-spacing: .13em; }
  .ecosystem-hero h1 { font-size: clamp(37px,10.6vw,48px); }
  .ecosystem-promise { font-size: 17px; }
  .ecosystem-description { font-size: 14px; line-height: 1.58; }
  .ecosystem-actions { display: grid; }
  .ecosystem-actions .button { width: 100%; }
  .ecosystem-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; margin-top: 28px; text-align: left; }
  .ecosystem-visual { min-height: 485px; margin-top: 15px; }
  .ecosystem-visual::before { width: 340px; height: 340px; }
  .ecosystem-orbit { width: 350px; height: 350px; }
  .ecosystem-phone { width: 214px; border-width: 5px; border-radius: 31px; }
  .ecosystem-phone img { border-radius: 22px; }
  .ecosystem-live { top: 8px; right: 8px; font-size: 10px; }
  .ecosystem-role { width: 146px; min-height: 78px; gap: 7px; padding: 5px 8px 5px 5px; border-radius: 15px; }
  .ecosystem-role img { width: 50px; height: 68px; }
  .ecosystem-role strong { font-size: 11px; }
  .ecosystem-role span { font-size: 9px; }
  .role-student { top: 42px; left: -4px; }
  .role-school { top: 98px; right: -4px; }
  .role-instructor { bottom: 70px; left: -4px; }
  .role-driver { right: -4px; bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecosystem-phone,.ecosystem-role { animation: none; }
}

/* Seven-day student learning roadmap */
.learning-roadmap { position: relative; overflow: hidden; padding: 112px 0 102px; background: #f4f7fb; }
.learning-roadmap::before { content: ""; position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(16,35,59,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,35,59,.035) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom,#000,transparent 88%); }
.learning-roadmap > .container { position: relative; z-index: 1; }
.learning-roadmap-heading { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 90px; margin-bottom: 42px; }
.learning-roadmap-heading h2 { max-width: 650px; margin: 10px 0 0; font-size: clamp(45px,5vw,70px); line-height: 1; letter-spacing: -.055em; }
.learning-roadmap-heading > div:last-child { padding-bottom: 5px; }
.learning-roadmap-heading > div:last-child strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 20px; }
.learning-roadmap-heading > div:last-child p { max-width: 520px; margin: 0; color: var(--muted); }

.learning-roadmap-shell { display: grid; grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr); gap: 16px; padding: 16px; color: white; background: linear-gradient(145deg,#0c1a2a,#142d48); border: 1px solid #203d5b; border-radius: 32px; box-shadow: 0 32px 86px rgba(8,31,58,.18); }
.learning-mobile-nav { display: none; }
.learning-days { position: relative; display: grid; align-content: start; gap: 7px; padding: 8px; }
.learning-days::before { content: ""; position: absolute; z-index: 0; top: 37px; bottom: 37px; left: 46px; width: 1px; background: linear-gradient(#4b8dff,rgba(111,145,180,.3)); }
.learning-day { position: relative; z-index: 1; width: 100%; min-height: 73px; display: grid; grid-template-columns: 60px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 9px 11px; color: #d7e3ef; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 17px; cursor: pointer; transition: color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease; }
.learning-day:hover { background: rgba(255,255,255,.055); transform: translateX(3px); }
.learning-day:focus-visible { outline: 3px solid rgba(88,150,255,.5); outline-offset: 2px; }
.learning-day > span { width: 55px; min-height: 35px; display: grid; place-items: center; color: #b8c9d9; background: #1c3854; border: 1px solid rgba(152,186,218,.2); border-radius: 11px; font-size: 10px; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.learning-day > div { min-width: 0; display: grid; }
.learning-day strong { color: inherit; font-size: 14px; line-height: 1.3; }
.learning-day small { overflow: hidden; color: #8fa5ba; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.learning-day > b { padding: 5px 8px; color: #9fb3c8; background: rgba(255,255,255,.055); border-radius: 8px; font-size: 9px; white-space: nowrap; }
.learning-day.active { color: white; background: linear-gradient(135deg,#276ef1,#1957c8); border-color: #4b8dff; box-shadow: 0 15px 35px rgba(10,71,183,.26); }
.learning-day.active > span { color: #13233a; background: var(--yellow); border-color: var(--yellow); }
.learning-day.active small { color: #d8e6ff; }
.learning-day.active > b { color: white; background: rgba(255,255,255,.14); }

.learning-day-panel { min-width: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 28px 30px 24px; color: var(--ink); background: radial-gradient(circle at 90% 10%,#e5efff,transparent 34%),white; border-radius: 23px; }
.learning-day-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.learning-trainer-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-dark); font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.learning-trainer-badge i { width: 27px; height: 27px; display: grid; place-items: center; color: #12355e; background: var(--yellow); border-radius: 9px; font-style: normal; }
.learning-day-count { color: var(--muted); font-size: 11px; font-weight: 850; }
.learning-day-content { display: grid; grid-template-columns: minmax(0,1fr) 245px; align-items: center; gap: 22px; padding: 28px 0 22px; }
.learning-day-copy { min-width: 0; }
.learning-focus { display: inline-block; margin-bottom: 9px; color: var(--blue); font-size: 11px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.learning-day-copy h3 { max-width: 500px; margin: 0 0 12px; font-size: clamp(27px,2.8vw,40px); line-height: 1.08; letter-spacing: -.035em; }
.learning-day-copy > p { max-width: 560px; margin-bottom: 21px; color: #52657b; font-size: 14px; line-height: 1.65; }
.learning-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 20px; }
.learning-meta span { display: grid; padding: 11px 12px; color: #6d7e92; background: #f4f7fb; border: 1px solid #e3eaf2; border-radius: 13px; font-size: 9px; text-transform: uppercase; }
.learning-meta b { color: var(--ink); font-size: 13px; text-transform: none; }
.learning-tasks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.learning-tasks li { position: relative; padding-left: 26px; color: #31475f; font-size: 12px; font-weight: 700; }
.learning-tasks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; color: #08734d; background: #def6eb; border-radius: 6px; font-size: 10px; font-weight: 950; }
.learning-phone-wrap { position: relative; min-height: 390px; display: grid; place-items: center; }
.learning-phone-wrap::before { content: ""; position: absolute; width: 260px; height: 260px; background: #dbe8ff; border-radius: 50%; filter: blur(2px); }
.learning-roadmap-phone { z-index: 1; width: 174px; transform: rotate(2deg); box-shadow: 0 28px 65px rgba(15,55,103,.23); }
.learning-helper-card { position: absolute; z-index: 2; right: -6px; bottom: 18px; width: 205px; display: grid; padding: 13px 15px; color: white; background: rgba(13,34,57,.94); border: 1px solid rgba(144,181,219,.38); border-radius: 15px; box-shadow: 0 18px 42px rgba(12,36,63,.28); backdrop-filter: blur(12px); }
.learning-helper-card small { color: var(--yellow); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.learning-helper-card strong { margin: 3px 0 2px; font-size: 13px; }
.learning-helper-card span { color: #aebfd0; font-size: 9px; line-height: 1.4; }
.learning-progress { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 13px; padding-top: 18px; border-top: 1px solid var(--line); }
.learning-progress > span { height: 7px; overflow: hidden; background: #e7edf5; border-radius: 99px; }
.learning-progress i { display: block; width: 8%; height: 100%; background: linear-gradient(90deg,var(--blue),#64a5ff); border-radius: inherit; transition: width .35s ease; }
.learning-progress b { color: #4e6074; font-size: 10px; }

.learning-instruction { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 18px; }
.learning-instruction article { min-height: 128px; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 13px; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 20px; }
.learning-instruction article > span { width: 35px; height: 35px; display: grid; place-items: center; color: var(--blue-dark); background: var(--blue-soft); border-radius: 11px; font-size: 10px; font-weight: 950; }
.learning-instruction strong { display: block; margin: 3px 0 5px; font-size: 13px; line-height: 1.35; }
.learning-instruction p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.learning-roadmap-actions { display: flex; align-items: center; gap: 22px; margin-top: 27px; }
.learning-roadmap-actions > a:not(.button) { color: var(--blue-dark); font-size: 13px; font-weight: 900; }
.learning-roadmap-actions > a:not(.button):hover { text-decoration: underline; text-underline-offset: 4px; }
.learning-roadmap-actions p { max-width: 430px; margin: 0 0 0 auto; color: var(--muted); font-size: 10px; line-height: 1.5; }

html[data-design="digital"] .learning-roadmap { background: #0b0f0c; }
html[data-design="digital"] .learning-roadmap::before { opacity: .2; }
html[data-design="digital"] .learning-roadmap-heading h2,html[data-design="digital"] .learning-roadmap-heading strong { color: #eff6ed; }
html[data-design="digital"] .learning-roadmap-heading p { color: #98a69c; }
html[data-design="digital"] .learning-roadmap-shell { background: linear-gradient(145deg,#111914,#17251b); border-color: #334431; box-shadow: 0 32px 86px rgba(0,0,0,.3); }
html[data-design="digital"] .learning-day.active { background: linear-gradient(135deg,#26351d,#172a16); border-color: #82ae31; box-shadow: 0 15px 35px rgba(87,128,28,.16); }
html[data-design="digital"] .learning-day.active > span { background: #b8f23d; border-color: #b8f23d; }
html[data-design="digital"] .learning-day-panel { background: radial-gradient(circle at 90% 10%,#e8f5d8,transparent 34%),#f7faf5; }
html[data-design="digital"] .learning-instruction article { background: #151b16; border-color: #2f3b31; }
html[data-design="digital"] .learning-instruction strong { color: #edf5eb; }
html[data-design="digital"] .learning-instruction p,html[data-design="digital"] .learning-roadmap-actions p { color: #96a299; }
html[data-design="digital"] .learning-instruction article > span { color: #14200f; background: #b8f23d; }
html[data-design="digital"] .learning-roadmap-actions > a:not(.button) { color: #b8f23d; }

@media (max-width: 1050px) {
  .learning-roadmap-shell { grid-template-columns: 1fr; }
  .learning-days { grid-template-columns: repeat(8,minmax(180px,1fr)); overflow-x: auto; padding-bottom: 13px; scroll-snap-type: x proximity; }
  .learning-days::before { display: none; }
  .learning-day { min-height: 82px; grid-template-columns: 47px minmax(0,1fr); scroll-snap-align: start; }
  .learning-day > span { width: 45px; }
  .learning-day > b { display: none; }
  .learning-day:hover { transform: translateY(-2px); }
  .learning-day-content { grid-template-columns: minmax(0,1fr) 280px; }
  .learning-instruction { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .learning-roadmap { padding: 78px 0 72px; }
  .learning-roadmap-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; text-align: center; }
  .learning-roadmap-heading h2 { margin-inline: auto; font-size: 46px; }
  .learning-roadmap-heading > div:last-child p { margin-inline: auto; }
  .learning-roadmap-shell { padding: 9px; border-radius: 25px; }
  .learning-day-panel { padding: 23px 20px 20px; border-radius: 19px; }
  .learning-day-content { grid-template-columns: 1fr; padding-top: 24px; }
  .learning-day-copy { text-align: left; }
  .learning-phone-wrap { min-height: 390px; }
  .learning-roadmap-phone { width: 180px; }
  .learning-helper-card { right: 50%; bottom: 8px; transform: translateX(50%); }
  .learning-roadmap-actions { flex-wrap: wrap; justify-content: center; text-align: center; }
  .learning-roadmap-actions p { width: 100%; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 520px) {
  .learning-roadmap-heading h2 { font-size: 40px; }
  .learning-roadmap-heading > div:last-child strong { font-size: 17px; }
  .learning-roadmap-heading > div:last-child p { font-size: 14px; }
  .learning-days { grid-template-columns: repeat(8,minmax(158px,1fr)); }
  .learning-day { min-height: 70px; grid-template-columns: 40px minmax(0,1fr); padding: 7px; }
  .learning-day > span { width: 40px; min-height: 33px; font-size: 8px; }
  .learning-day strong { font-size: 12px; }
  .learning-day small { font-size: 9px; }
  .learning-day-panel-top { align-items: flex-start; }
  .learning-trainer-badge { font-size: 9px; }
  .learning-day-copy h3 { font-size: 30px; }
  .learning-meta { grid-template-columns: 1fr; }
  .learning-instruction { grid-template-columns: 1fr; }
  .learning-instruction article { min-height: 0; }
  .learning-roadmap-actions { display: grid; gap: 14px; }
  .learning-roadmap-actions .button { width: 100%; }
}

/* Homepage mobile layout — purpose-built rather than scaled desktop blocks. */
.landing-home .mobile-nav-action { display: none; }

@media (max-width: 620px) {
  .landing-home { overflow-x: clip; }
  .landing-home :is(.ecosystem-hero,#seven-days,#trainer,#practice,#driver,#business) { scroll-margin-top: 68px; }
  .landing-home .site-header { box-shadow: 0 7px 24px rgba(10,31,55,.08); }
  .landing-home .header-inner { width: calc(100% - 24px); }
  .landing-home .brand { gap: 8px; letter-spacing: .09em; }
  .landing-home .header-actions { margin-left: auto; }
  .landing-home .design-toggle { min-width: 0; font-size: 11px; }
  .landing-home .menu-toggle { flex: 0 0 42px; width: 42px; height: 42px; padding: 10px; }
  .landing-home .site-nav { inset: 68px 10px auto; max-height: calc(100dvh - 78px); overflow-y: auto; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 0 0 20px 20px; }
  .landing-home .site-nav a { min-height: 43px; display: flex; align-items: center; padding: 8px 12px; border-radius: 11px; }
  .landing-home .site-nav .mobile-nav-action { display: flex; margin-top: 5px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); }
  .landing-home .site-nav .mobile-nav-primary { justify-content: center; color: white; background: var(--blue); border-color: var(--blue); }
  html[data-design="digital"] .landing-home .site-nav .mobile-nav-primary { color: #10140e; }

  .ecosystem-hero { padding: 18px 0 24px; }
  .ecosystem-hero::before { inset: 7px; border-radius: 23px; }
  .ecosystem-hero-grid { width: calc(100% - 34px); min-height: 0; gap: 0; padding: 30px 0 19px; }
  .ecosystem-hero-copy { max-width: 100%; }
  .ecosystem-eyebrow { margin-bottom: 14px; font-size: 9px; letter-spacing: .1em; }
  .ecosystem-hero h1 { max-width: 100%; margin-bottom: 16px; font-size: clamp(32px,9.1vw,39px); line-height: 1.06; letter-spacing: -.04em; overflow-wrap: normal; hyphens: auto; }
  .ecosystem-promise { max-width: 330px; margin: 0 auto 13px; font-size: 16px; line-height: 1.38; }
  .ecosystem-description { margin-bottom: 23px; font-size: 13px; line-height: 1.55; }
  .ecosystem-actions { gap: 9px; }
  .ecosystem-actions .button { min-height: 49px; padding-inline: 14px; font-size: 14px; }
  .ecosystem-club-link { justify-content: center; margin-top: 15px; font-size: 13px; }
  .ecosystem-benefits { grid-template-columns: 1fr 1fr; margin-top: 25px; padding: 0 2px; font-size: 11px; }
  .ecosystem-visual { width: 100%; min-height: 390px; margin-top: 6px; }
  .ecosystem-visual::before { width: 275px; height: 275px; }
  .ecosystem-orbit { width: 280px; height: 280px; }
  .ecosystem-phone { width: 174px; border-width: 4px; border-radius: 27px; }
  .ecosystem-phone img { border-radius: 19px; }
  .ecosystem-phone-speaker { top: 10px; width: 42px; height: 5px; }
  .ecosystem-live { top: 15px; right: 2px; max-width: 104px; font-size: 8px; line-height: 1.25; }
  .ecosystem-live i { width: 7px; height: 7px; box-shadow: 0 0 0 4px rgba(69,219,156,.12); }
  .ecosystem-role { width: 126px; min-height: 67px; gap: 5px; padding: 4px 6px 4px 4px; border-radius: 13px; }
  .ecosystem-role img { width: 42px; height: 57px; }
  .ecosystem-role strong { font-size: 10px; }
  .ecosystem-role span { font-size: 8px; }
  .role-student { top: 49px; left: 0; }
  .role-school { top: 96px; right: 0; }
  .role-instructor { bottom: 61px; left: 0; }
  .role-driver { right: 0; bottom: 22px; }

  .learning-roadmap { padding: 58px 0 62px; }
  .learning-roadmap-heading { gap: 13px; margin-bottom: 24px; text-align: left; }
  .learning-roadmap-heading h2 { margin-inline: 0; font-size: 38px; line-height: 1.04; }
  .learning-roadmap-heading > div:last-child strong { margin-bottom: 5px; font-size: 16px; }
  .learning-roadmap-heading > div:last-child p { margin-inline: 0; font-size: 13px; line-height: 1.55; }
  .learning-roadmap-shell { width: 100%; padding: 7px; border-radius: 22px; }
  .learning-mobile-nav { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; align-items: stretch; gap: 8px; padding: 3px 3px 1px; }
  .learning-mobile-arrow { min-width: 42px; min-height: 54px; display: grid; place-items: center; padding: 0; color: white; background: #1a3653; border: 1px solid rgba(161,194,226,.25); border-radius: 14px; font-size: 21px; font-weight: 900; cursor: pointer; transition: background .2s ease,transform .2s ease,opacity .2s ease; }
  .learning-mobile-arrow:active:not(:disabled) { transform: scale(.95); }
  .learning-mobile-arrow:focus-visible,.learning-mobile-select-wrap:focus-within { outline: 3px solid rgba(88,150,255,.55); outline-offset: 2px; }
  .learning-mobile-arrow:disabled { opacity: .32; cursor: default; }
  .learning-mobile-select-wrap { min-width: 0; display: grid; align-content: center; gap: 2px; padding: 7px 12px; color: #a9bdd0; background: rgba(255,255,255,.07); border: 1px solid rgba(161,194,226,.22); border-radius: 14px; }
  .learning-mobile-select-wrap > span { font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
  .learning-mobile-select-wrap select { width: 100%; min-width: 0; padding: 0 24px 0 0; overflow: hidden; color: white; background: transparent; border: 0; outline: 0; font: inherit; font-size: 12px; font-weight: 850; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
  .learning-mobile-select-wrap option { color: #10243a; background: white; }
  .learning-days { display: none; }
  .learning-day-panel { padding: 18px 15px 16px; border-radius: 17px; }
  .learning-day-panel-top { gap: 8px; padding-bottom: 14px; }
  .learning-trainer-badge { font-size: 8px; letter-spacing: .04em; }
  .learning-trainer-badge i { width: 23px; height: 23px; border-radius: 7px; }
  .learning-day-count { max-width: 130px; font-size: 8px; line-height: 1.35; text-align: right; }
  .learning-day-content { padding: 19px 0 14px; }
  .learning-focus { margin-bottom: 7px; font-size: 9px; }
  .learning-day-copy h3 { margin-bottom: 9px; font-size: 27px; line-height: 1.08; }
  .learning-day-copy > p { margin-bottom: 15px; font-size: 13px; line-height: 1.55; }
  .learning-meta { gap: 7px; margin-bottom: 16px; }
  .learning-meta span { padding: 10px 11px; }
  .learning-tasks { gap: 9px; }
  .learning-tasks li { padding-left: 25px; font-size: 12px; line-height: 1.45; }
  .learning-phone-wrap { min-height: 305px; }
  .learning-phone-wrap::before { width: 210px; height: 210px; }
  .learning-roadmap-phone { width: 137px; }
  .learning-helper-card { bottom: 4px; width: min(200px,82%); padding: 11px 13px; }
  .learning-helper-card strong { font-size: 12px; }
  .learning-helper-card span { font-size: 8px; }
  .learning-progress { padding-top: 14px; }
  .learning-instruction { gap: 8px; margin-top: 12px; }
  .learning-instruction article { min-height: 0; padding: 15px; border-radius: 16px; }
  .learning-instruction article > span { width: 31px; height: 31px; }
  .learning-instruction strong { font-size: 12px; }
  .learning-instruction p { font-size: 10px; }
  .learning-roadmap-actions { margin-top: 20px; }

  html[data-design="digital"] .learning-mobile-arrow { color: #dfffb0; background: #24331f; border-color: rgba(184,242,61,.28); }
  html[data-design="digital"] .learning-mobile-select-wrap { color: #9dac9f; background: #18221a; border-color: rgba(184,242,61,.24); }
  html[data-design="digital"] .learning-mobile-select-wrap select { color: #eff7ec; }

  .lp-section { padding: 58px 0; }
  .lp-heading { margin-bottom: 30px; }
  .lp-heading.centered { margin-bottom: 30px; text-align: left; }
  .lp-heading h2,.lp-copy h2,.lp-final h2,.lp-business-copy h2 { font-size: 32px; line-height: 1.08; letter-spacing: -.04em; overflow-wrap: anywhere; }
  .lp-heading p,.lp-copy > p,.lp-final p { font-size: 14px; line-height: 1.6; }
  .trainer-layout { gap: 20px; }
  .trainer-copy h2 { font-size: 32px; }
  .trainer-copy > p { margin-top: 13px; }
  .trainer-steps { gap: 7px; margin: 21px 0 22px; }
  .trainer-step { grid-template-columns: 36px minmax(0,1fr); gap: 10px; padding: 9px 10px; border-radius: 13px; }
  .trainer-step:hover { transform: none; }
  .trainer-step > span { width: 34px; height: 34px; border-radius: 10px; font-size: 9px; }
  .trainer-step strong { font-size: 12px; }
  .trainer-step small { font-size: 9px; }
  .trainer-actions { display: grid; gap: 14px; text-align: center; }
  .trainer-actions .button { width: 100%; }
  .trainer-demo { min-height: 365px; }
  .trainer-demo-glow { width: 300px; height: 300px; }
  .trainer-demo-glow::before { inset: 35px; }
  .trainer-demo-glow::after { inset: 78px; }
  .trainer-visual { width: min(310px,96%); }
  .trainer-insight { left: 50%; bottom: 20px; width: min(252px,88%); padding: 13px 15px; transform: translateX(-50%); }
  .trainer-insight.is-changing { animation-name: trainer-insight-mobile-in; }
  .lp-split { gap: 28px; }
  .lp-checks { gap: 8px; margin: 22px 0 25px; }
  .lp-checks li { font-size: 13px; }
  .lp-copy > .button,.lp-copy > .lp-actions,.lp-driver-copy > .button { width: 100%; }
  .lp-copy > .button,.lp-driver-copy > .button { justify-self: stretch; }
  .lp-screen-stack { min-height: 420px; }
  .lp-phone-tests { width: 205px; }
  .lp-insight { left: 50%; bottom: 24px; min-width: 0; width: min(250px,90%); padding: 13px 15px; transform: translateX(-50%); }
  .lp-feature { min-height: 0; padding: 22px; border-radius: 19px; }
  .lp-feature-icon { width: 39px; height: 39px; }
  .lp-feature > strong { margin-top: 18px; font-size: 19px; }
  .lp-feature p { min-height: 0; margin-bottom: 15px; }
  .lp-learning-preview { min-height: 0; padding: 25px 20px 0; border-radius: 22px; }
  .lp-preview-copy h3 { font-size: 28px; }
  .lp-learning-preview .lp-phone { width: 190px; margin: 0 auto -190px; }
  .lp-mini-stats { gap: 8px; }
  .lp-mini-stats span { padding: 13px; }
  .lp-practice .lp-copy { order: -1; }
  .lp-practice-visual { min-height: 410px; }
  .lp-practice-visual .lp-phone { width: 205px; }
  .lp-practice-chip { left: 50%; bottom: 26px; width: min(270px,88%); padding: 12px 14px; transform: translateX(-50%); }
  .lp-practice-cards { margin: 20px 0; }
  .lp-practice-cards article { grid-template-columns: 41px 1fr; gap: 11px; padding: 14px; }
  .lp-practice-cards article > span { width: 39px; height: 39px; }
  .lp-driver .lp-heading.centered { text-align: left; }
  .lp-driver-copy { order: 1; }
  .lp-driver-devices { order: 2; min-height: 430px; }
  .lp-driver-copy article { grid-template-columns: 31px 1fr; gap: 9px; padding: 13px; }
  .lp-driver-copy .button { margin-top: 10px; }
  .lp-driver-main { left: 5px; width: 205px; }
  .lp-driver-side { right: 3px; bottom: 4px; width: 150px; }
  .lp-club-tags { margin: 20px 0 24px; }
  .lp-club-tags span { padding: 7px 10px; font-size: 11px; }
  .lp-club-visual { min-height: 400px; }
  .lp-club-visual .lp-phone { width: 205px; }
  .lp-price-grid { gap: 10px; }
  .lp-price-grid article { min-height: 0; padding: 21px; border-radius: 19px; }
  .lp-price-grid article > strong { font-size: 30px; }
  .lp-business-panel { gap: 28px; padding: 29px 19px; border-radius: 22px; }
  .lp-business-types { gap: 7px; margin: 20px 0 24px; }
  .lp-business-types span { padding: 9px 11px; }
  .lp-business-steps article { padding: 15px; }
  .lp-final { padding: 65px 0; }
  .lp-final-inner { text-align: left; }
  .lp-final .lp-actions { display: grid; }
  .landing-home .site-footer { padding-top: 55px; }
  .landing-home .footer-grid { grid-template-columns: 1fr; gap: 27px; }
  .landing-home .footer-brand { grid-column: auto; }
  .landing-home .footer-grid nav { padding-bottom: 3px; }
  .landing-home .footer-bottom { margin-top: 34px; }
}

@media (max-width: 370px) {
  .landing-home .brand > span:last-child { font-size: 14px; }
  .landing-home .design-toggle { padding-inline: 8px; font-size: 10px; }
  .ecosystem-hero h1 { font-size: 31px; }
  .ecosystem-role { width: 118px; }
  .learning-day-copy h3,.lp-heading h2,.lp-copy h2,.lp-final h2,.lp-business-copy h2 { font-size: 28px; }
}

@media (max-width: 920px) {
  .practice-finder-heading { grid-template-columns: 1fr; gap: 14px; }
  .practice-finder-heading > p { max-width: 680px; }
  .practice-filters { grid-template-columns: 1.15fr .85fr .85fr; }
  .practice-search-action { grid-column: 1/-1; min-height: 50px; }
  .practice-finder-workspace { grid-template-columns: 1fr; }
  .practice-map-card { min-height: 410px; }
  .practice-results { min-height: 0; }
}

@media (max-width: 620px) {
  .practice-finder { padding-top: 60px; }
  .practice-finder-heading { margin-bottom: 25px; }
  .practice-finder-heading h2 { font-size: 34px; line-height: 1.04; }
  .practice-finder-heading > p { font-size: 13px; line-height: 1.58; }
  .practice-finder-shell { padding: 10px; border-radius: 23px; }
  .practice-type-switch { width: 100%; }
  .practice-type-switch button { min-width: 0; min-height: 46px; padding: 0 8px; font-size: 10px; }
  .practice-type-switch button span { width: 23px; height: 23px; }
  .practice-filters { grid-template-columns: 1fr 1fr; gap: 7px; padding: 8px; border-radius: 16px; }
  .practice-filters label { min-height: 55px; padding-inline: 10px; }
  .practice-filters label:first-child { grid-column: 1/-1; }
  .practice-filters select { font-size: 11px; }
  .practice-search-action { grid-column: 1/-1; min-width: 0; min-height: 48px; }
  .practice-mobile-view { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 10px 0; padding: 4px; background: #edf2f7; border-radius: 13px; }
  .practice-mobile-view button { min-height: 38px; color: #66778b; background: transparent; border: 0; border-radius: 10px; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
  .practice-mobile-view button.active { color: white; background: var(--navy); }
  .practice-finder-workspace { display: block; }
  .practice-finder-workspace:not(.show-map) .practice-map-card { display: none; }
  .practice-finder-workspace.show-map .practice-results { display: none; }
  .practice-map-card { min-height: 410px; border-radius: 18px; }
  .practice-results { min-height: 0; padding: 13px; border-radius: 18px; }
  .practice-results-top { margin-bottom: 12px; }
  .practice-result-card { padding: 16px; border-radius: 16px; }
  .practice-result-head { grid-template-columns: 54px 1fr; gap: 11px; }
  .practice-result-head img { width: 54px; height: 54px; border-radius: 14px; }
  .practice-result-head h3 { font-size: 18px; }
  .practice-result-stats { gap: 5px; }
  .practice-result-stats span { padding: 7px 8px; }
  .practice-result-note { min-height: 0; }
  .practice-result-actions { display: grid; grid-template-columns: 1fr auto; }
  .practice-result-actions .button { width: 100%; }
  .practice-trust { margin-top: 15px; padding: 14px 3px 2px; }
  html[data-design="digital"] .practice-mobile-view { background: #090c0a; }
  html[data-design="digital"] .practice-mobile-view button.active { color: #10140e; background: var(--blue); }
}

/* Practice journey — narrative transition from theory to real driving. */
.practice-journey { overflow: hidden; color: white; background: radial-gradient(circle at 75% 10%,rgba(45,117,185,.34),transparent 31%),linear-gradient(145deg,#071625,#102c49); }
.practice-journey-heading { max-width: 900px; margin: 0 auto 42px; text-align: center; }
.practice-journey-heading h2 { margin: 11px auto 18px; color: white; font-size: clamp(40px,4.6vw,66px); line-height: 1.02; letter-spacing: -.055em; }
.practice-journey-heading > p { max-width: 720px; margin: 0 auto; color: #b4c5d7; font-size: 16px; line-height: 1.65; }
.practice-story { padding: 18px; color: var(--ink); background: rgba(247,250,253,.98); border: 1px solid rgba(255,255,255,.24); border-radius: 32px; box-shadow: 0 38px 100px rgba(0,8,17,.35); }
.practice-story-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 5px 6px 16px; }
.practice-story-topline > span { display: inline-flex; align-items: center; gap: 9px; color: #17314d; font-size: 12px; font-weight: 900; }
.practice-story-topline i { width: 28px; height: 28px; display: grid; place-items: center; color: #063923; background: #7de5bd; border-radius: 9px; font-style: normal; }
.practice-story-topline p { margin: 0; color: #738399; font-size: 11px; font-weight: 800; }
.practice-story-stage { position: relative; min-height: 570px; overflow: hidden; background: #dfe7ef; border: 1px solid #dce4ec; border-radius: 24px; isolation: isolate; }
.practice-story-stage > iframe { position: absolute; z-index: -2; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border: 0; pointer-events: none; filter: saturate(.72) contrast(.92); }
.practice-story-map-wash { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(238,244,249,.86) 0%,rgba(238,244,249,.54) 38%,rgba(238,244,249,.2) 52%,rgba(238,244,249,.55) 68%,rgba(238,244,249,.87) 100%); }
.practice-story-search { position: absolute; top: 24px; left: 50%; width: min(620px,calc(100% - 48px)); display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 12px 15px; background: rgba(255,255,255,.94); border: 1px solid rgba(177,194,211,.7); border-radius: 16px; box-shadow: 0 15px 36px rgba(22,48,75,.15); backdrop-filter: blur(12px); transform: translateX(-50%); }
.practice-story-search > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 11px; font-size: 18px; }
.practice-story-search small,.practice-story-search strong { display: block; }
.practice-story-search small { color: #7c8b9d; font-size: 8px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.practice-story-search strong { margin-top: 3px; font-size: 13px; }
.practice-story-search > b { padding: 8px 10px; color: #40546a; background: #edf2f7; border-radius: 10px; font-size: 9px; }
.practice-showcase-card { position: absolute; z-index: 3; width: min(420px,37%); display: grid; grid-template-columns: 74px 1fr 35px; align-items: center; gap: 14px; padding: 17px; background: rgba(255,255,255,.96); border: 1px solid rgba(175,193,211,.74); border-radius: 21px; box-shadow: 0 24px 56px rgba(20,44,69,.2); backdrop-filter: blur(13px); }
.practice-school-card { left: 34px; top: 145px; }
.practice-instructor-card { right: 34px; bottom: 64px; }
.practice-showcase-image { position: relative; width: 74px; height: 74px; display: grid; place-items: center; overflow: visible; background: #0a1928; border-radius: 18px; }
.practice-showcase-image img { width: 62px; height: 62px; object-fit: contain; }
.practice-showcase-image.person { overflow: hidden; background: #e9f0fa; }
.practice-showcase-image.person img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.practice-showcase-image > span { position: absolute; left: 50%; bottom: -9px; padding: 5px 8px; color: #073522; background: #7de5bd; border: 3px solid white; border-radius: 99px; font-size: 7px; font-weight: 950; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.practice-showcase-copy { min-width: 0; }
.practice-showcase-copy > small { color: var(--blue); font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.practice-showcase-copy h3 { margin: 5px 0 4px; font-size: 20px; line-height: 1.12; }
.practice-showcase-copy > p { margin: 0; color: #6e7e91; font-size: 10px; }
.practice-showcase-copy > div { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.practice-showcase-copy strong { font-size: 12px; }
.practice-showcase-copy strong span { color: #f3a914; font-size: 9px; letter-spacing: .03em; }
.practice-showcase-copy em { color: #7c8a9a; font-size: 8px; font-style: normal; font-weight: 800; }
.practice-card-arrow { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 11px; font-size: 17px; font-weight: 900; }
.practice-story-route { position: absolute; z-index: 2; left: 50%; top: 54%; width: 170px; display: grid; justify-items: center; gap: 7px; color: #53667a; font-size: 8px; font-weight: 900; text-transform: uppercase; transform: translate(-50%,-50%) rotate(-8deg); }
.practice-story-route i { width: 100%; height: 2px; display: block; background: repeating-linear-gradient(90deg,var(--blue) 0 9px,transparent 9px 15px); }
.practice-story-route b { padding: 7px 10px; color: #17200f; background: var(--yellow); border-radius: 99px; font-size: 8px; }
.practice-story-pin { position: absolute; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; color: white; background: #1f6ff2; border: 5px solid white; border-radius: 50% 50% 50% 8px; box-shadow: 0 10px 25px rgba(26,74,126,.25); transform: rotate(-45deg); }
.practice-story-pin span { font-size: 7px; font-weight: 950; transform: rotate(45deg); }
.pin-school { left: 25%; bottom: 94px; }
.pin-instructor { right: 26%; top: 120px; background: #0aa36f; }
.practice-story-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 12px; }
.practice-story-benefits article { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 18px; background: white; border: 1px solid #e1e8f0; border-radius: 17px; }
.practice-story-benefits article > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 11px; font-size: 9px; font-weight: 950; }
.practice-story-benefits strong { display: block; font-size: 13px; }
.practice-story-benefits p { margin: 4px 0 0; color: #718196; font-size: 10px; line-height: 1.45; }
.practice-story-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 30px; padding: 26px 8px 8px; }
.practice-story-footer strong { display: block; font-size: 17px; }
.practice-story-footer p { max-width: 650px; margin: 6px 0 0; color: #748397; font-size: 11px; line-height: 1.5; }
.practice-story-footer .lp-actions { margin: 0; }
.practice-story-footer .button { min-height: 48px; border-radius: 13px; box-shadow: none; font-size: 12px; }

html[data-design="digital"] .practice-journey { background: radial-gradient(circle at 75% 8%,rgba(184,242,61,.12),transparent 29%),#090c0a; }
html[data-design="digital"] .practice-story { color: var(--ink); background: #151a17; border-color: var(--line); box-shadow: none; }
html[data-design="digital"] .practice-story-topline > span { color: var(--ink); }
html[data-design="digital"] .practice-story-stage { border-color: var(--line); }
html[data-design="digital"] .practice-story-map-wash { background: linear-gradient(90deg,rgba(18,24,20,.91),rgba(18,24,20,.55) 45%,rgba(18,24,20,.58) 58%,rgba(18,24,20,.92)); }
html[data-design="digital"] .practice-story-search,html[data-design="digital"] .practice-showcase-card,html[data-design="digital"] .practice-story-benefits article { color: var(--ink); background: rgba(23,29,25,.96); border-color: var(--line); }
html[data-design="digital"] .practice-story-search > b,html[data-design="digital"] .practice-story-benefits article > span { color: var(--blue); background: #253025; }
html[data-design="digital"] .practice-showcase-copy > p,html[data-design="digital"] .practice-showcase-copy em,html[data-design="digital"] .practice-story-benefits p,html[data-design="digital"] .practice-story-footer p { color: var(--muted); }
html[data-design="digital"] .practice-card-arrow { color: #10140e; background: var(--blue); }

@media (max-width: 920px) {
  .practice-story-stage { min-height: 680px; }
  .practice-showcase-card { width: min(430px,calc(100% - 50px)); }
  .practice-school-card { left: 25px; top: 130px; }
  .practice-instructor-card { right: 25px; bottom: 60px; }
  .practice-story-route { top: 51%; }
  .practice-story-benefits { grid-template-columns: 1fr; }
  .practice-story-footer { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 620px) {
  .practice-journey-heading { margin-bottom: 27px; text-align: left; }
  .practice-journey-heading h2 { margin-inline: 0; font-size: 34px; line-height: 1.04; }
  .practice-journey-heading > p { font-size: 13px; line-height: 1.58; }
  .practice-story { padding: 9px; border-radius: 23px; }
  .practice-story-topline { align-items: flex-start; padding: 5px 4px 12px; }
  .practice-story-topline p { max-width: 115px; line-height: 1.4; text-align: right; }
  .practice-story-stage { min-height: 660px; border-radius: 17px; }
  .practice-story-search { top: 12px; width: calc(100% - 20px); grid-template-columns: 31px 1fr; gap: 8px; padding: 9px; border-radius: 13px; }
  .practice-story-search > span { width: 31px; height: 31px; }
  .practice-story-search > b { display: none; }
  .practice-story-search strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .practice-showcase-card { width: calc(100% - 24px); grid-template-columns: 58px 1fr 29px; gap: 10px; padding: 13px; border-radius: 17px; }
  .practice-school-card { left: 12px; top: 102px; }
  .practice-instructor-card { right: 12px; bottom: 76px; }
  .practice-showcase-image { width: 58px; height: 58px; border-radius: 14px; }
  .practice-showcase-image img { width: 49px; height: 49px; }
  .practice-showcase-copy h3 { font-size: 16px; }
  .practice-showcase-copy > div { gap: 6px; margin-top: 8px; }
  .practice-showcase-copy em { max-width: 83px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .practice-card-arrow { width: 29px; height: 29px; border-radius: 9px; }
  .practice-story-route { top: 49%; width: 115px; }
  .pin-school { left: 20%; bottom: 218px; }
  .pin-instructor { right: 19%; top: 245px; }
  .practice-story-benefits { gap: 7px; margin-top: 8px; }
  .practice-story-benefits article { padding: 14px; border-radius: 14px; }
  .practice-story-footer { padding: 21px 5px 7px; }
  .practice-story-footer strong { font-size: 15px; }
  .practice-story-footer .lp-actions { display: grid; width: 100%; }
  .practice-story-footer .button { width: 100%; }
}

/* Homepage ecosystem navigation and compact journey. Scoped to the landing page. */
.landing-home .nav-group { position: relative; }
.landing-home .nav-group > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #3e516a;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.landing-home .nav-group > summary::-webkit-details-marker { display: none; }
.landing-home .nav-group > summary::after { content: "⌄"; color: #7a8ba0; font-size: 11px; transition: transform .2s ease; }
.landing-home .nav-group[open] > summary::after { transform: rotate(180deg); }
.landing-home .nav-group > summary:hover,.landing-home .nav-group > summary:focus-visible { color: var(--blue); }
.landing-home .nav-dropdown {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: calc(100% + 8px);
  min-width: 230px;
  display: none;
  gap: 3px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(11,27,47,.16);
  transform: translateX(-50%);
}
.landing-home .nav-group[open] > .nav-dropdown,.landing-home .nav-group:focus-within > .nav-dropdown { display: grid; }
@media (hover: hover) and (min-width: 921px) {
  .landing-home .nav-group:hover > .nav-dropdown { display: grid; }
}
.landing-home .nav-dropdown a { min-height: 42px; display: flex; align-items: center; padding: 9px 11px; border-radius: 10px; white-space: nowrap; }
.landing-home .nav-dropdown a:hover,.landing-home .nav-dropdown a:focus-visible { color: var(--blue); background: var(--blue-soft); }
.landing-home .nav-business { min-height: 44px; display: inline-flex; align-items: center; }

.role-entries { padding: 62px 0 72px; background: #fff; }
.role-entries-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.role-entries-heading h2 { max-width: 670px; margin: 8px 0 0; font-size: clamp(32px,4vw,48px); line-height: 1.05; letter-spacing: -.045em; }
.role-entry-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.role-entry-card { min-width: 0; min-height: 190px; display: flex; flex-direction: column; padding: 23px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: 22px; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.role-entry-card > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 24px; color: var(--blue); background: var(--blue-soft); border-radius: 12px; font-size: 10px; font-weight: 950; }
.role-entry-card > div { min-width: 0; }
.role-entry-card strong { display: block; margin-bottom: 7px; font-size: 20px; }
.role-entry-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.role-entry-card > b { margin-top: auto; align-self: end; color: var(--blue); font-size: 20px; }
.role-entry-card:hover,.role-entry-card:focus-visible { color: var(--ink); background: #fff; border-color: #9fbcf4; box-shadow: 0 18px 46px rgba(20,57,98,.12); transform: translateY(-5px); }
.role-entry-card:focus-visible { outline: 3px solid rgba(39,110,241,.25); outline-offset: 3px; }

.compact-learning-roadmap { padding: 84px 0; }
.compact-learning-steps { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 9px; margin: 38px 0 24px; padding: 0; list-style: none; }
.compact-learning-steps li { min-width: 0; min-height: 142px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; background: rgba(255,255,255,.07); border: 1px solid rgba(161,194,226,.2); border-radius: 17px; }
.compact-learning-steps span { width: 31px; height: 31px; display: grid; place-items: center; color: #152536; background: var(--yellow); border-radius: 10px; font-size: 10px; font-weight: 950; }
.compact-learning-steps strong { color: #eff6ff; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.compact-learning-summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 24px 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(161,194,226,.18); border-radius: 19px; }
.compact-learning-summary p { max-width: 720px; margin: 0; color: #aebfd1; font-size: 14px; line-height: 1.65; }
.compact-learning-summary .button { flex: 0 0 auto; min-height: 48px; }
.footer-design-toggle { min-height: 38px; margin-left: auto; color: inherit; background: transparent; }

html[data-design="digital"] .landing-home .nav-dropdown { background: #171c19; border-color: var(--line); }
html[data-design="digital"] .landing-home .nav-dropdown a:hover,html[data-design="digital"] .landing-home .nav-dropdown a:focus-visible { background: #243020; }
html[data-design="digital"] .role-entries { background: var(--canvas); }
html[data-design="digital"] .role-entry-card { background: #171c19; border-color: var(--line); }
html[data-design="digital"] .role-entry-card:hover,html[data-design="digital"] .role-entry-card:focus-visible { background: #202821; border-color: #749e2c; }
html[data-design="digital"] .role-entry-card > span { color: #10140e; background: var(--blue); }
html[data-design="digital"] .compact-learning-steps li,html[data-design="digital"] .compact-learning-summary { background: #171e19; border-color: #334431; }
html[data-design="digital"] .compact-learning-steps span { color: #10140e; background: var(--blue); }

@media (max-width: 920px) {
  .landing-home .site-nav { align-content: start; }
  .landing-home .nav-group { width: 100%; border-bottom: 1px solid var(--line); }
  .landing-home .nav-group > summary { min-height: 48px; justify-content: space-between; padding: 4px 8px; font-size: 15px; }
  .landing-home .nav-dropdown { position: static; min-width: 0; padding: 0 4px 10px 15px; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
  .landing-home .nav-dropdown a { min-height: 44px; padding: 8px 12px; font-size: 14px; }
  .landing-home .nav-business { min-height: 48px; padding-inline: 8px; font-size: 15px; }
  .role-entry-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .compact-learning-steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .role-entries { padding: 48px 0 54px; }
  .role-entries-heading { display: block; margin-bottom: 20px; }
  .role-entries-heading h2 { font-size: 31px; }
  .role-entry-grid { grid-template-columns: 1fr; gap: 8px; }
  .role-entry-card { min-height: 0; display: grid; grid-template-columns: 40px minmax(0,1fr) 24px; align-items: center; gap: 12px; padding: 15px; border-radius: 17px; }
  .role-entry-card > span { width: 40px; height: 40px; margin: 0; }
  .role-entry-card strong { margin-bottom: 3px; font-size: 16px; }
  .role-entry-card p { font-size: 11px; line-height: 1.42; }
  .role-entry-card > b { align-self: center; margin: 0; }
  .role-entry-card:hover { transform: none; }
  .compact-learning-roadmap { padding: 58px 0; }
  .compact-learning-steps { grid-auto-flow: column; grid-auto-columns: minmax(145px,72%); grid-template-columns: none; gap: 8px; margin: 26px -14px 18px; padding: 0 14px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .compact-learning-steps li { min-height: 112px; padding: 14px; scroll-snap-align: start; }
  .compact-learning-summary { display: grid; gap: 17px; padding: 19px; }
  .compact-learning-summary p { font-size: 13px; }
  .compact-learning-summary .button { width: 100%; }
  .footer-design-toggle { width: 100%; margin: 8px 0 0; }
}

/* Homepage header v2 — stable desktop dropdowns and tap-first mobile menu. */
.landing-home .site-header {
  border-bottom-color: rgba(207,219,234,.92);
  background: rgba(255,255,255,.96);
}
.landing-home .header-inner {
  min-height: 72px;
  gap: 18px;
}
.landing-home .site-header.compact .header-inner { min-height: 72px; }
.landing-home .header-brand {
  flex: 0 0 auto;
  gap: 10px;
  letter-spacing: 0;
}
.landing-home .header-brand-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  line-height: 1;
}
.landing-home .header-brand-copy strong {
  color: var(--navy);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .14em;
}
.landing-home .header-brand-copy small {
  color: var(--blue);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .18em;
}
.landing-home .site-nav {
  min-width: 0;
  gap: 8px;
  margin-left: auto;
}
.landing-home .nav-group > summary {
  min-height: 44px;
  padding: 0 10px;
  border-radius: 11px;
  transition: color .18s ease, background .18s ease;
}
.landing-home .nav-group[open] > summary,
.landing-home .nav-group.is-current > summary {
  color: var(--blue);
  background: var(--blue-soft);
}
.landing-home .nav-dropdown {
  left: 0;
  top: calc(100% + 7px);
  min-width: 245px;
  transform: none;
}
.landing-home .nav-group:last-child > .nav-dropdown {
  right: 0;
  left: auto;
}
.landing-home .nav-dropdown a[aria-current="page"] {
  color: var(--blue);
  background: var(--blue-soft);
}
.landing-home :is(.nav-group > summary,.nav-dropdown a,.header-cta,.menu-toggle):focus-visible {
  outline: 3px solid rgba(39,110,241,.28);
  outline-offset: 2px;
}
.landing-home .header-actions {
  flex: 0 0 auto;
  margin-left: 2px;
}
.landing-home .header-actions .header-cta {
  min-height: 44px;
  display: inline-flex;
  padding-inline: 16px;
  white-space: nowrap;
}
.landing-home .menu-toggle {
  position: relative;
  flex: 0 0 44px;
  cursor: pointer;
}
.landing-home .menu-toggle > span:not(.sr-only) {
  transition: transform .18s ease, opacity .18s ease;
}
.landing-home .menu-toggle[aria-expanded="true"] > span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.landing-home .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.landing-home .menu-toggle[aria-expanded="true"] > span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
html[data-design="digital"] .landing-home .header-brand-copy strong { color: var(--ink); }
html[data-design="digital"] .landing-home .header-brand-copy small { color: var(--blue); }
html[data-design="digital"] .landing-home .nav-group[open] > summary,
html[data-design="digital"] .landing-home .nav-group.is-current > summary {
  color: var(--blue);
  background: #243020;
}

@media (max-width: 1120px) and (min-width: 921px) {
  .landing-home .header-inner { gap: 12px; }
  .landing-home .site-nav { gap: 2px; }
  .landing-home .nav-group > summary { padding-inline: 7px; font-size: 12px; }
  .landing-home .header-actions .header-cta { padding-inline: 13px; font-size: 12px; }
}

@media (max-width: 920px) {
  .landing-home .header-inner { min-height: 72px; gap: 9px; }
  .landing-home .site-header.compact .header-inner { min-height: 72px; }
  .landing-home .header-brand { margin-right: auto; }
  .landing-home .header-actions { order: 2; margin-left: 0; }
  .landing-home .header-actions .header-cta { display: inline-flex; }
  .landing-home .menu-toggle { order: 3; display: block; margin-left: 0; }
  .landing-home .site-nav {
    top: 72px;
    right: 12px;
    left: 12px;
    max-height: calc(100dvh - 84px);
    align-content: start;
    gap: 3px;
    padding: 12px;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 60px rgba(11,27,47,.2);
  }
  .landing-home .nav-group { border-bottom: 1px solid var(--line); }
  .landing-home .nav-group:last-child { border-bottom: 0; }
  .landing-home .nav-group > summary {
    min-height: 50px;
    justify-content: space-between;
    padding: 3px 10px;
    font-size: 15px;
  }
  .landing-home .nav-dropdown,
  .landing-home .nav-group:last-child > .nav-dropdown {
    position: static;
    min-width: 0;
    padding: 2px 5px 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .landing-home .nav-dropdown a {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
    white-space: normal;
  }
}

@media (max-width: 620px) {
  .landing-home .header-inner,
  .landing-home .site-header.compact .header-inner { min-height: 68px; }
  .landing-home .header-brand-copy strong { font-size: 15px; }
  .landing-home .header-brand-copy small { font-size: 7px; }
  .landing-home .header-actions .header-cta {
    min-height: 44px;
    display: inline-flex;
    padding-inline: 11px;
    border-radius: 12px;
    font-size: 11px;
  }
  .landing-home .menu-toggle {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .landing-home .site-nav { top: 68px; }
}

@media (max-width: 374px) {
  .landing-home .header-brand-copy small { font-size: 6.5px; letter-spacing: .14em; }
  .landing-home .header-brand-copy strong { font-size: 14px; }
  .landing-home .header-actions .header-cta { padding-inline: 9px; font-size: 10px; }
}

/* Homepage hero v2 — one promise, one action and real KERMO screens. */
.home-hero-v2 {
  position: relative;
  padding: 18px 0 54px;
  background: #f5f8fd;
}
.home-hero-v2-panel {
  position: relative;
  isolation: isolate;
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(440px,1.08fr);
  align-items: center;
  gap: 36px;
  padding: 64px 66px;
  color: white;
  background: var(--navy);
  border: 1px solid rgba(138,180,224,.25);
  border-radius: 34px;
  box-shadow: 0 28px 70px rgba(10,32,57,.2);
}
.home-hero-v2-panel::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 52px 52px;
}
.home-hero-v2-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 78% 42%,rgba(39,110,241,.34),transparent 34%),
    radial-gradient(circle at 15% 100%,rgba(255,201,40,.1),transparent 28%);
  pointer-events: none;
}
.home-hero-v2-copy { position: relative; z-index: 3; }
.home-hero-v2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--yellow);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .16em;
}
.home-hero-v2-kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 99px;
}
.home-hero-v2 h1 {
  max-width: 610px;
  margin: 0 0 24px;
  color: white;
  font-size: clamp(36px,4vw,62px);
  line-height: 1.04;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.home-hero-v2 h1 > span { display: inline-block; max-width: 100%; }
.home-hero-v2 h1 > span:last-child { white-space: nowrap; }
.home-hero-v2-copy > p {
  max-width: 590px;
  margin: 0 0 32px;
  color: #c7d5e5;
  font-size: clamp(17px,1.5vw,20px);
  line-height: 1.58;
  text-wrap: pretty;
}
.home-hero-v2 .home-hero-v2-cta {
  min-height: 54px;
  padding-inline: 23px;
  color: #152536;
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 16px 34px rgba(255,201,40,.18);
}
.home-hero-v2 .home-hero-v2-cta:hover,
.home-hero-v2 .home-hero-v2-cta:focus-visible {
  color: #152536;
  background: #ffd95e;
  border-color: #ffd95e;
}
.home-hero-v2-visual {
  position: relative;
  min-width: 0;
  min-height: 520px;
}
.home-hero-v2-visual::before,
.home-hero-v2-visual::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(151,191,239,.2);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.home-hero-v2-visual::after {
  width: 310px;
  height: 310px;
  border-color: rgba(255,201,40,.13);
}
.home-hero-screen {
  position: absolute;
  overflow: hidden;
  background: #07111e;
  border: 7px solid #07111e;
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(0,0,0,.38);
}
.home-hero-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px;
}
.home-hero-screen-main {
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 244px;
  transform: translateX(-50%) rotate(-1deg);
}
.home-hero-screen-driver,
.home-hero-screen-business {
  z-index: 1;
  top: 68px;
  bottom: 40px;
  width: 190px;
  opacity: .86;
}
.home-hero-screen-driver { left: 0; transform: rotate(-7deg); }
.home-hero-screen-business { right: 0; transform: rotate(7deg); }
@media (prefers-reduced-motion: no-preference) {
  .home-hero-screen-main {
    animation: home-hero-screen-enter 620ms cubic-bezier(.2,.65,.3,1) both;
  }
  .home-hero-screen-business {
    animation: home-hero-screen-enter 680ms 130ms cubic-bezier(.2,.65,.3,1) both;
  }
  @keyframes home-hero-screen-enter {
    from { translate: 0 15px; opacity: 0; }
    to { translate: 0 0; }
  }
}
.home-hero-partners {
  position: absolute;
  z-index: 5;
  right: 42px;
  bottom: 0;
  left: 42px;
  min-height: 72px;
  align-items: center;
  gap: 22px;
  padding: 12px 20px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(11,27,47,.16);
  transform: translateY(50%);
}
.home-hero-partners:not([hidden]) { display: flex; }
.home-hero-partners > strong { flex: 0 0 auto; font-size: 13px; }
.home-hero-partners > div { min-width: 0; display: flex; align-items: center; gap: 22px; overflow-x: auto; }
.role-entries#possibilities { scroll-margin-top: 72px; }

html[data-design="digital"] .home-hero-v2 { background: var(--canvas); }
html[data-design="digital"] .home-hero-v2-panel {
  background: #0d120f;
  border-color: #334431;
}
html[data-design="digital"] .home-hero-v2-panel::after {
  background:
    radial-gradient(circle at 78% 42%,rgba(126,174,45,.22),transparent 35%),
    radial-gradient(circle at 15% 100%,rgba(184,242,61,.08),transparent 28%);
}
html[data-design="digital"] .home-hero-v2-kicker { color: var(--blue); }
html[data-design="digital"] .home-hero-v2 .home-hero-v2-cta {
  color: #10140e;
  background: var(--blue);
  border-color: var(--blue);
}

@media (max-width: 1080px) {
  .home-hero-v2-panel {
    grid-template-columns: minmax(0,.95fr) minmax(390px,1.05fr);
    gap: 24px;
    padding: 54px 46px;
  }
  .home-hero-v2-visual { min-height: 480px; }
  .home-hero-screen-main { width: 222px; }
  .home-hero-screen-driver,.home-hero-screen-business { width: 162px; }
}

@media (max-width: 820px) {
  .home-hero-v2 { padding-top: 12px; }
  .home-hero-v2-panel {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 50px 42px 0;
  }
  .home-hero-v2-copy { max-width: 650px; text-align: center; margin-inline: auto; }
  .home-hero-v2-kicker { justify-content: center; }
  .home-hero-v2 h1,.home-hero-v2-copy > p { margin-inline: auto; }
  .home-hero-v2-visual { width: min(100%,540px); min-height: 500px; margin-inline: auto; }
  .home-hero-screen-main { width: 232px; }
  .home-hero-screen-driver,.home-hero-screen-business { width: 175px; }
}

@media (max-width: 620px) {
  .home-hero-v2 { padding: 10px 0 38px; }
  .home-hero-v2-panel {
    width: calc(100% - 24px);
    gap: 22px;
    padding: 34px 17px 0;
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(10,32,57,.18);
  }
  .home-hero-v2-kicker { margin-bottom: 17px; font-size: 9px; }
  .home-hero-v2 h1 {
    max-width: 330px;
    margin-bottom: 18px;
    font-size: clamp(29px,8.6vw,42px);
    line-height: 1.02;
    letter-spacing: -.05em;
  }
  .home-hero-v2-copy > p {
    max-width: 330px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.52;
  }
  .home-hero-v2 .home-hero-v2-cta { width: 100%; min-height: 52px; }
  .home-hero-v2-visual { min-height: 390px; }
  .home-hero-v2-visual::before { width: 300px; height: 300px; }
  .home-hero-v2-visual::after { width: 220px; height: 220px; }
  .home-hero-screen { border-width: 5px; border-radius: 22px; }
  .home-hero-screen img { border-radius: 16px; }
  .home-hero-screen-main { width: 184px; }
  .home-hero-screen-driver,.home-hero-screen-business {
    top: 54px;
    bottom: 28px;
    width: 126px;
    opacity: .7;
  }
  .home-hero-screen-driver { left: -9px; }
  .home-hero-screen-business { right: -9px; }
  .home-hero-partners { right: 12px; left: 12px; min-height: 62px; padding: 9px 13px; }
  .home-hero-partners > strong { font-size: 11px; }
  .role-entries#possibilities { scroll-margin-top: 68px; }
}
/* Homepage student journey carousel */
.student-journey {
  --student-accent: #2f6ff2;
  padding: clamp(72px, 8vw, 118px) 0;
  scroll-margin-top: calc(var(--header-height, 76px) + 18px);
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(47, 111, 242, .1), transparent 30%),
    linear-gradient(180deg, #f8faff 0%, #eef4fc 100%);
}

.student-journey-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 470px);
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.student-journey-heading h2 {
  max-width: 820px;
  margin: 10px 0 0;
  color: #0b223f;
  font-size: clamp(34px, 4.6vw, 66px);
  line-height: .98;
  letter-spacing: -.045em;
}

.student-journey-heading > p {
  margin: 0;
  color: #5d6f86;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.62;
}

.student-carousel-shell {
  position: relative;
}

.student-carousel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.student-carousel-toolbar p {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0;
  color: #67778d;
  font-size: 14px;
  font-weight: 800;
}

.student-carousel-toolbar strong {
  color: #0b223f;
  font-size: 24px;
}

.student-carousel-toolbar small {
  margin-left: 11px;
  padding-left: 14px;
  border-left: 1px solid #c9d5e6;
  color: #2f6ff2;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.student-carousel-arrows {
  display: flex;
  gap: 10px;
}

.student-carousel-arrows button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #cad7e9;
  border-radius: 15px;
  background: #fff;
  color: #0b223f;
  font: 900 21px/1 inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(18, 45, 78, .08);
  transition: transform .2s ease, border-color .2s ease, opacity .2s ease;
}

.student-carousel-arrows button:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: #2f6ff2;
}

.student-carousel-arrows button:disabled {
  cursor: default;
  opacity: .35;
  box-shadow: none;
}

.student-carousel-arrows button:focus-visible,
.student-carousel-dots button:focus-visible,
.student-carousel-viewport:focus-visible {
  outline: 3px solid rgba(47, 111, 242, .42);
  outline-offset: 3px;
}

.student-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  touch-action: pan-x pan-y;
  cursor: grab;
}

.student-carousel-viewport::-webkit-scrollbar { display: none; }
.student-carousel-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.student-carousel-track {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 26px);
}

.student-journey-card {
  --card-accent: #2f6ff2;
  position: relative;
  display: grid;
  flex: 0 0 calc(100% - clamp(58px, 7vw, 104px));
  grid-template-columns: minmax(0, 1.02fr) minmax(300px, .78fr);
  min-height: clamp(520px, 48vw, 650px);
  overflow: hidden;
  border: 1px solid #d3deed;
  border-radius: clamp(28px, 3.2vw, 46px);
  background: #fff;
  box-shadow: 0 26px 70px rgba(21, 48, 80, .12);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.student-journey-card:nth-child(2) { --card-accent: #ffbf1f; }
.student-journey-card:nth-child(3) { --card-accent: #16a085; }
.student-journey-card:nth-child(4) { --card-accent: #ff8a34; }

.student-card-copy {
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(34px, 5vw, 74px);
}

.student-card-number {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 22px;
  padding: 7px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-accent) 13%, white);
  color: color-mix(in srgb, var(--card-accent) 82%, #0b223f);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.student-card-copy h3 {
  max-width: 690px;
  margin: 0;
  color: #0b223f;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.student-card-copy > p {
  max-width: 640px;
  margin: 22px 0 30px;
  color: #607188;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.62;
}

.student-card-copy .button {
  min-height: 50px;
  padding: 13px 20px;
  white-space: normal;
  text-align: center;
}

.student-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.student-card-actions .button-ghost {
  border: 1px solid #bfd0e7;
  background: #f5f8fd;
  color: #0b223f;
}

.student-card-visual {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: end center;
  overflow: hidden;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 18%, #f7faff), #eef4fc 72%);
}

.student-card-visual::before {
  position: absolute;
  inset: 9% 7% auto;
  height: 38%;
  border: 1px solid color-mix(in srgb, var(--card-accent) 22%, transparent);
  border-radius: 50%;
  content: "";
}

.student-card-orbit {
  position: absolute;
  width: min(34vw, 480px);
  aspect-ratio: 1;
  border: 58px solid color-mix(in srgb, var(--card-accent) 11%, transparent);
  border-radius: 50%;
  transform: translate(16%, 18%);
}

.student-card-phone {
  position: relative;
  z-index: 1;
  width: clamp(226px, 23vw, 324px);
  height: 91%;
  overflow: hidden;
  border: 8px solid #0a1829;
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  background: #fff;
  box-shadow: 0 24px 52px rgba(7, 27, 51, .24);
  transform: translateY(9%);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.student-journey-card.is-active .student-card-phone { transform: translateY(5%); }

.student-card-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.student-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}

.student-carousel-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #b7c5d7;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.student-carousel-dots button.is-active {
  width: 34px;
  background: #2f6ff2;
}

body[data-design="digital"] .student-journey {
  background: linear-gradient(180deg, #071b31, #0b233e);
}

body[data-design="digital"] .student-journey-heading h2,
body[data-design="digital"] .student-carousel-toolbar strong { color: #fff; }
body[data-design="digital"] .student-journey-heading > p,
body[data-design="digital"] .student-carousel-toolbar p { color: #b8c8db; }

@media (max-width: 820px) {
  .student-journey-heading { grid-template-columns: 1fr; gap: 18px; }
  .student-journey-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .student-card-copy { min-height: 410px; }
  .student-card-visual { height: 390px; }
  .student-card-phone { width: min(54vw, 300px); height: 105%; }
  .student-card-orbit { width: min(74vw, 500px); }
}

@media (max-width: 620px) {
  .student-journey { padding: 60px 0 70px; }
  .student-journey-heading { margin-bottom: 26px; }
  .student-journey-heading h2 { font-size: clamp(32px, 10vw, 43px); }
  .student-carousel-toolbar small { max-width: 122px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .student-carousel-arrows button { width: 44px; height: 44px; border-radius: 14px; }
  .student-carousel-track { gap: 12px; }
  .student-journey-card { flex-basis: calc(100% - 22px); border-radius: 26px; }
  .student-card-copy { min-height: 0; padding: 30px 24px 32px; }
  .student-card-number { margin-bottom: 17px; }
  .student-card-copy h3 { font-size: clamp(27px, 8.2vw, 36px); }
  .student-card-copy > p { margin: 17px 0 24px; font-size: 16px; }
  .student-card-actions { width: 100%; }
  .student-card-actions .button { width: 100%; }
  .student-card-visual { height: 340px; }
  .student-card-phone { width: min(66vw, 276px); border-width: 7px; border-radius: 29px 29px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .student-carousel-viewport { scroll-behavior: auto; }
  .student-card-phone { transition: none; }
}

/* Factual launch-review previews replace stale learning/trainer screenshots. */
.home-program-preview,.home-trainer-preview{position:relative;z-index:1;width:min(82%,310px);display:grid;gap:13px;padding:24px;color:#fff;background:linear-gradient(155deg,#102945,#071e38);border-radius:27px;box-shadow:0 24px 55px rgba(16,41,69,.22);transform:translateY(4%)}
.home-program-preview>span,.home-trainer-preview>span{color:#a9c6ff;font-size:10px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.home-program-preview ol,.home-trainer-preview ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.home-program-preview li{display:grid;grid-template-columns:52px 1fr;gap:3px 10px;align-items:center;padding:11px;background:rgba(255,255,255,.08);border-radius:12px}.home-program-preview b{grid-row:1/3;display:grid;place-items:center;min-height:40px;color:#102945;background:#ffc628;border-radius:10px;font-size:12px}.home-program-preview strong,.home-program-preview small{display:block}.home-program-preview small{color:#bdcee0;font-size:10px}.home-trainer-preview>strong{font-size:25px;line-height:1.12}.home-trainer-preview li{padding:11px 13px;background:rgba(255,255,255,.08);border-radius:11px;font-size:12px;font-weight:850}.home-trainer-preview>small{color:#bdcee0;font-size:10px;line-height:1.45}
@media(max-width:620px){.home-program-preview,.home-trainer-preview{width:min(82%,250px);padding:18px}.home-program-preview li{grid-template-columns:46px 1fr;padding:9px}.home-trainer-preview>strong{font-size:21px}}

/* Student carousel proportion and typography refinement */
.student-journey-heading h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
}

.student-journey-heading > p {
  max-width: 440px;
  font-size: clamp(15px, 1.25vw, 18px);
}

.student-carousel-shell {
  padding: clamp(10px, 1.5vw, 20px);
  border: 1px solid rgba(166, 187, 215, .55);
  border-radius: clamp(26px, 3vw, 40px);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 22px 70px rgba(35, 69, 108, .1);
  backdrop-filter: blur(16px);
}

.student-carousel-toolbar {
  margin-bottom: 14px;
  padding: 2px 4px;
}

.student-carousel-toolbar strong { font-size: clamp(21px, 2vw, 25px); }
.student-carousel-toolbar small { font-size: 12px; }

.student-journey-card {
  min-height: clamp(490px, 43vw, 590px);
  border-color: rgba(185, 203, 226, .85);
  box-shadow: 0 18px 48px rgba(21, 48, 80, .1);
}

.student-journey-card::after {
  position: absolute;
  z-index: 4;
  top: 0;
  right: clamp(22px, 4vw, 58px);
  left: clamp(22px, 4vw, 58px);
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--card-accent);
  content: "";
  opacity: .9;
}

.student-card-copy {
  padding: clamp(32px, 4.2vw, 62px);
}

.student-card-copy h3 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.student-card-copy > p {
  margin: 18px 0 26px;
  font-size: clamp(15px, 1.28vw, 18px);
  line-height: 1.58;
}

.student-card-number {
  margin-bottom: 18px;
  font-size: 11px;
}

.student-card-phone {
  width: clamp(218px, 21vw, 294px);
}

.student-carousel-dots {
  width: min(100%, 680px);
  margin: 18px auto 0;
  padding: 5px;
  gap: 4px;
  border: 1px solid #d6e0ee;
  border-radius: 17px;
  background: #edf3fb;
}

.student-carousel-dots button,
.student-carousel-dots button.is-active {
  display: flex;
  width: auto;
  min-width: 0;
  height: 42px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #6b7d93;
  font-size: 12px;
  font-weight: 850;
}

.student-carousel-dots button i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .05em;
  opacity: .62;
}

.student-carousel-dots button.is-active {
  border-color: #c9d8ed;
  background: #fff;
  color: #1f62e5;
  box-shadow: 0 5px 16px rgba(36, 81, 137, .12);
}

body[data-design="digital"] .student-carousel-shell {
  border-color: rgba(118, 156, 202, .3);
  background: rgba(10, 33, 58, .76);
}

@media (max-width: 820px) {
  .student-journey-heading h2 { font-size: clamp(31px, 7vw, 46px); }
  .student-card-copy { min-height: 0; padding: 32px; }
  .student-card-copy h3 { font-size: clamp(27px, 5.7vw, 38px); }
  .student-card-visual { height: 340px; }
  .student-card-phone { width: min(50vw, 270px); }
}

@media (max-width: 620px) {
  .student-journey-heading h2 {
    font-size: clamp(30px, 8.8vw, 38px);
    line-height: 1.04;
  }
  .student-journey-heading > p { font-size: 15px; line-height: 1.55; }
  .student-carousel-shell { padding: 8px; border-radius: 24px; }
  .student-carousel-toolbar { margin-bottom: 10px; padding: 1px 2px; }
  .student-carousel-toolbar strong { font-size: 21px; }
  .student-carousel-toolbar small { max-width: 96px; margin-left: 8px; padding-left: 10px; }
  .student-journey-card { flex-basis: calc(100% - 18px); border-radius: 23px; }
  .student-card-copy { padding: 27px 22px 28px; }
  .student-card-number { min-height: 30px; margin-bottom: 15px; padding: 6px 11px; }
  .student-card-copy h3 { font-size: clamp(25px, 7.6vw, 31px); line-height: 1.07; }
  .student-card-copy > p { margin: 15px 0 21px; font-size: 15px; line-height: 1.52; }
  .student-card-copy .button { min-height: 48px; padding: 12px 16px; font-size: 15px; }
  .student-card-visual { height: 300px; }
  .student-card-phone { width: min(62vw, 244px); }
  .student-carousel-dots { margin-top: 12px; padding: 4px; border-radius: 15px; }
  .student-carousel-dots button,
  .student-carousel-dots button.is-active { height: 38px; padding: 0 7px; border-radius: 11px; }
  .student-carousel-dots button span { display: none; }
  .student-carousel-dots button i { font-size: 11px; opacity: 1; }
}

/* Purpose-built mobile student carousel */
@media (max-width: 620px) {
  .student-journey {
    padding: 50px 0 58px;
    background:
      radial-gradient(circle at 92% 5%, rgba(47, 111, 242, .1), transparent 34%),
      linear-gradient(180deg, #f8faff 0%, #f1f6fd 100%);
  }

  .student-journey-heading {
    gap: 13px;
    margin-bottom: 23px;
  }

  .student-journey-heading .lp-kicker {
    font-size: 11px;
    letter-spacing: .13em;
  }

  .student-journey-heading h2 {
    max-width: 340px;
    margin-top: 8px;
    font-size: clamp(29px, 8.5vw, 36px);
    line-height: 1.04;
    letter-spacing: -.035em;
  }

  .student-journey-heading > p {
    max-width: 345px;
    font-size: 14.5px;
    line-height: 1.5;
  }

  .student-carousel-shell {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .student-carousel-toolbar {
    min-height: 46px;
    margin: 0 0 11px;
    padding: 0;
  }

  .student-carousel-toolbar p {
    gap: 2px;
    font-size: 12px;
  }

  .student-carousel-toolbar strong {
    font-size: 20px;
  }

  .student-carousel-toolbar small {
    max-width: 112px;
    margin-left: 7px;
    padding-left: 9px;
    font-size: 11px;
  }

  .student-carousel-arrows { gap: 7px; }

  .student-carousel-arrows button {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(18, 45, 78, .07);
  }

  .student-carousel-track { gap: 12px; }

  .student-journey-card {
    flex-basis: calc(100% - 30px);
    border: 1px solid #cedbee;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(25, 55, 91, .1);
  }

  .student-journey-card::after {
    right: 22px;
    left: 22px;
    height: 3px;
  }

  .student-card-copy {
    padding: 25px 22px 26px;
  }

  .student-card-number {
    min-height: 28px;
    margin-bottom: 13px;
    padding: 5px 10px;
    font-size: 10px;
  }

  .student-card-copy h3 {
    font-size: clamp(23px, 6.2vw, 25px);
    line-height: 1.08;
    letter-spacing: -.03em;
  }

  .student-card-copy > p {
    margin: 13px 0 20px;
    font-size: 14.5px;
    line-height: 1.5;
  }

  .student-card-copy .button {
    min-height: 46px;
    padding: 11px 16px;
    font-size: 14px;
  }

  .student-card-actions {
    gap: 8px;
  }

  .student-card-actions .button {
    width: 100%;
  }

  .student-card-visual {
    height: 230px;
    place-items: start center;
    border-top: 1px solid #e0e8f3;
  }

  .student-card-visual::before {
    inset: 13% 10% auto;
    height: 45%;
  }

  .student-card-orbit {
    width: 300px;
    border-width: 42px;
  }

  .student-card-phone {
    width: min(54vw, 200px);
    height: 126%;
    border-width: 6px;
    border-bottom: 0;
    border-radius: 25px 25px 0 0;
    transform: translateY(16px);
  }

  .student-journey-card.is-active .student-card-phone {
    transform: translateY(12px);
  }

  .student-carousel-dots {
    width: auto;
    max-width: 190px;
    margin: 7px auto 0;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .student-carousel-dots button,
  .student-carousel-dots button.is-active {
    position: relative;
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .student-carousel-dots button::after {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #aebed2;
    content: "";
    transition: width .22s ease, background .22s ease;
  }

  .student-carousel-dots button.is-active::after {
    width: 27px;
    background: #2f6ff2;
  }

  .student-carousel-dots button i,
  .student-carousel-dots button span {
    display: none;
  }

  body[data-design="digital"] .student-carousel-shell {
    background: transparent;
  }
}

/* Homepage driver world */
.driver-world {
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 9vw, 132px) 0;
  scroll-margin-top: calc(var(--header-height, 76px) + 18px);
  background:
    radial-gradient(circle at 83% 25%, rgba(47, 111, 242, .35), transparent 32%),
    radial-gradient(circle at 12% 92%, rgba(255, 191, 31, .12), transparent 28%),
    #071a2f;
  color: #fff;
}

.driver-world::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 68px 68px;
  content: "";
  mask-image: linear-gradient(to right, transparent, #000 38%, #000);
  pointer-events: none;
}

.driver-world-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  align-items: center;
  gap: clamp(44px, 6vw, 90px);
}

.driver-world-copy h2 {
  max-width: 720px;
  margin: 12px 0 22px;
  color: #fff;
  font-size: clamp(38px, 5vw, 70px);
  line-height: .98;
  letter-spacing: -.045em;
}

.driver-world-lead {
  max-width: 720px;
  margin: 0;
  color: #bfcee0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
}

.driver-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
}

.driver-benefits article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(174, 198, 228, .18);
  border-radius: 19px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.driver-benefits article > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: rgba(47, 111, 242, .2);
  color: #86adff;
  font-size: 11px;
  font-weight: 900;
}

.driver-benefits strong {
  display: block;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
}

.driver-benefits p {
  margin: 7px 0 0;
  color: #9fb1c8;
  font-size: 13px;
  line-height: 1.48;
}

.driver-world-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
}

.driver-world-actions > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.driver-world-actions .button {
  min-height: 52px;
  padding: 14px 21px;
  color: #071a2f;
}

.driver-world-actions small {
  color: #c5d2e2;
  font-size: 12px;
  font-weight: 750;
}

.driver-club-link {
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.driver-club-link:hover { color: #ffca36; }

.driver-world-visual {
  position: relative;
  min-height: clamp(580px, 50vw, 720px);
}

.driver-history-frame {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 4%;
  width: min(72%, 390px);
  height: 91%;
  overflow: hidden;
  border: 8px solid #0a1421;
  border-radius: 38px;
  background: #eef3fa;
  box-shadow: 0 34px 74px rgba(0, 0, 0, .42);
  transform: rotate(2deg);
}

.driver-history-frame::before {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 50%;
  width: 82px;
  height: 19px;
  border-radius: 999px;
  background: #07111e;
  content: "";
  transform: translateX(-50%);
}

.driver-history-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.driver-screen-label {
  position: absolute;
  z-index: 4;
  top: 24px;
  right: 20px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(7, 26, 47, .9);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.driver-map-card {
  position: absolute;
  z-index: 4;
  bottom: 3%;
  left: 0;
  width: min(58%, 310px);
  aspect-ratio: 1.42;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 25px;
  background: #eaf1f7;
  box-shadow: 0 24px 52px rgba(0,0,0,.28);
  transform: rotate(-4deg);
}

.driver-map-grid {
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(28deg, transparent 44%, rgba(117, 145, 171, .38) 45%, rgba(117, 145, 171, .38) 47%, transparent 48%),
    linear-gradient(102deg, transparent 45%, rgba(117, 145, 171, .3) 46%, rgba(117, 145, 171, .3) 48%, transparent 49%),
    repeating-linear-gradient(12deg, transparent 0 28px, rgba(117,145,171,.21) 29px 31px),
    #e8f0f5;
}

.driver-map-route {
  position: absolute;
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #2f6ff2;
  box-shadow: 0 0 0 3px rgba(255,255,255,.8);
}

.driver-map-route.route-one { top: 42%; left: 8%; width: 63%; transform: rotate(13deg); }
.driver-map-route.route-two { top: 58%; right: -4%; width: 48%; transform: rotate(-28deg); }

.driver-map-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 5px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: #ffbf1f;
  box-shadow: 0 5px 12px rgba(20,49,80,.24);
  transform: rotate(-45deg);
}

.driver-map-pin.pin-one { top: 28%; left: 27%; }
.driver-map-pin.pin-two { right: 21%; bottom: 21%; background: #16a085; }

.driver-map-card > div:last-child {
  position: absolute;
  right: 13px;
  bottom: 13px;
  left: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.93);
  color: #0b223f;
}

.driver-map-card small { color: #6b7d93; font-size: 10px; }
.driver-map-card strong { font-size: 12px; }

.driver-car-summary {
  position: absolute;
  z-index: 5;
  top: 9%;
  left: 0;
  display: flex;
  max-width: 270px;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  background: rgba(7, 26, 47, .9);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}

.driver-car-summary > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 13px;
  background: #ffbf1f;
  color: #071a2f;
  font-size: 10px;
  font-weight: 950;
}

.driver-car-summary strong,
.driver-car-summary small { display: block; }
.driver-car-summary strong { color: #fff; font-size: 13px; }
.driver-car-summary small { margin-top: 4px; color: #aabbd0; font-size: 10px; }

@media (max-width: 980px) {
  .driver-world-layout { grid-template-columns: 1fr; }
  .driver-world-copy { max-width: 760px; }
  .driver-world-visual { width: min(100%, 660px); min-height: 650px; margin: 0 auto; }
}

@media (max-width: 620px) {
  .driver-world { padding: 62px 0 70px; }
  .driver-world::before { background-size: 46px 46px; }
  .driver-world-layout { gap: 36px; }
  .driver-world-copy h2 { margin: 9px 0 17px; font-size: clamp(34px, 10.5vw, 43px); line-height: 1.01; }
  .driver-world-lead { font-size: 15px; line-height: 1.55; }
  .driver-benefits { grid-template-columns: 1fr; gap: 8px; margin-top: 25px; }
  .driver-benefits article { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 16px; }
  .driver-benefits article > span { width: 32px; height: 32px; border-radius: 10px; }
  .driver-benefits strong { font-size: 14px; }
  .driver-benefits p { margin-top: 5px; font-size: 12.5px; }
  .driver-world-actions { align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 24px; }
  .driver-world-actions > div { width: 100%; }
  .driver-world-actions .button { width: 100%; min-height: 50px; padding: 13px 16px; font-size: 14px; }
  .driver-club-link { font-size: 13px; }
  .driver-world-visual { min-height: 468px; }
  .driver-history-frame { right: 1%; width: 72%; height: 94%; border-width: 6px; border-radius: 29px; transform: rotate(1.5deg); }
  .driver-history-frame::before { top: 7px; width: 64px; height: 16px; }
  .driver-screen-label { top: 19px; right: 13px; padding: 6px 8px; font-size: 8px; }
  .driver-map-card { bottom: 0; width: 57%; border-radius: 19px; }
  .driver-map-card > div:last-child { right: 8px; bottom: 8px; left: 8px; padding: 8px 9px; }
  .driver-map-card small { display: none; }
  .driver-map-card strong { font-size: 10px; }
  .driver-car-summary { top: 8%; max-width: 184px; gap: 8px; padding: 9px 10px; border-radius: 14px; }
  .driver-car-summary > span { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; font-size: 8px; }
  .driver-car-summary strong { font-size: 10px; line-height: 1.2; }
  .driver-car-summary small { font-size: 8px; }
}

/* Homepage automotive business */
.auto-business {
  padding: clamp(78px, 9vw, 132px) 0;
  scroll-margin-top: calc(var(--header-height, 76px) + 18px);
  overflow: hidden;
  background:
    radial-gradient(circle at 91% 16%, rgba(47, 111, 242, .12), transparent 27%),
    #f3f7fc;
}

.auto-business-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
  align-items: center;
  gap: clamp(44px, 6vw, 88px);
}

.auto-business-copy h2 {
  max-width: 760px;
  margin: 12px 0 22px;
  color: #0b223f;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.045em;
}

.auto-business-lead {
  max-width: 730px;
  margin: 0;
  color: #5f7188;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
}

.auto-business-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px;
}

.auto-business-benefits article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 15px;
  border: 1px solid #d4dfed;
  border-radius: 17px;
  background: rgba(255,255,255,.84);
}

.auto-business-benefits article:last-child {
  grid-column: 1 / -1;
}

.auto-business-benefits article > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: #e7efff;
  color: #2364e8;
  font-size: 10px;
  font-weight: 900;
}

.auto-business-benefits strong {
  display: block;
  color: #102844;
  font-size: 14px;
  line-height: 1.3;
}

.auto-business-benefits p {
  margin: 5px 0 0;
  color: #697b91;
  font-size: 12.5px;
  line-height: 1.45;
}

.auto-business-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 27px;
}

.auto-business-actions .button {
  min-height: 52px;
  padding: 14px 21px;
}

.auto-business-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.auto-business-links a {
  color: #173f70;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.auto-business-links a::after { content: " →"; }
.auto-business-links a:hover { color: #2364e8; }

.auto-business-visual {
  position: relative;
  min-height: clamp(610px, 49vw, 720px);
  isolation: isolate;
}

.auto-business-visual::before {
  position: absolute;
  z-index: -2;
  inset: 4% 0 2% 5%;
  border-radius: 44px;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(145deg, #0a213c, #10345d);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: 0 32px 70px rgba(23, 63, 112, .2);
  content: "";
}

.auto-business-screen {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: 3%;
  width: min(56%, 300px);
  height: 84%;
  overflow: hidden;
  border: 7px solid #081522;
  border-radius: 31px;
  background: #f5f7fb;
  box-shadow: 0 24px 55px rgba(0,0,0,.3);
  opacity: .78;
  transform: rotate(3deg);
}

.auto-business-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.auto-business-flow {
  position: absolute;
  z-index: 2;
  top: 12%;
  bottom: 11%;
  left: 0;
  display: flex;
  width: min(68%, 360px);
  flex-direction: column;
  justify-content: space-between;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto-business-flow::before {
  position: absolute;
  z-index: -1;
  top: 42px;
  bottom: 42px;
  left: 29px;
  width: 2px;
  background: linear-gradient(#4c84f2, #ffbf1f);
  content: "";
}

.auto-business-flow li {
  display: grid;
  grid-template-columns: 28px 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 88px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 15px 32px rgba(0,0,0,.17);
  color: #0b223f;
}

.auto-business-flow li > span {
  color: #7b8da4;
  font-size: 10px;
  font-weight: 900;
}

.business-flow-icon {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #e7efff;
}

.business-flow-icon::before,
.business-flow-icon::after {
  position: absolute;
  content: "";
}

.icon-pin::before {
  top: 10px;
  left: 14px;
  width: 13px;
  height: 13px;
  border: 3px solid #2f6ff2;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.icon-page::before {
  inset: 10px 11px;
  border: 2px solid #2f6ff2;
  border-radius: 4px;
}

.icon-page::after {
  top: 16px;
  left: 16px;
  width: 12px;
  height: 2px;
  background: #2f6ff2;
  box-shadow: 0 6px #2f6ff2, 0 12px #2f6ff2;
}

.icon-calendar::before {
  inset: 12px 10px 9px;
  border: 2px solid #2f6ff2;
  border-radius: 4px;
}

.icon-calendar::after {
  top: 9px;
  left: 15px;
  width: 3px;
  height: 8px;
  border-radius: 3px;
  background: #2f6ff2;
  box-shadow: 11px 0 #2f6ff2;
}

.icon-chart::before {
  right: 11px;
  bottom: 10px;
  left: 11px;
  height: 2px;
  background: #2f6ff2;
}

.icon-chart::after {
  bottom: 12px;
  left: 13px;
  width: 5px;
  height: 10px;
  border-radius: 2px 2px 0 0;
  background: #2f6ff2;
  box-shadow: 8px -6px #2f6ff2, 16px -14px #2f6ff2;
}

.auto-business-flow strong,
.auto-business-flow small { display: block; }
.auto-business-flow strong { font-size: 14px; }
.auto-business-flow small { margin-top: 5px; color: #6a7c92; font-size: 11px; }

.auto-business-domain {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 4%;
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid #cbd9eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(11, 34, 63, .15);
  color: #738399;
  font-size: 11px;
}

.auto-business-domain strong { color: #1e61df; }

body[data-design="digital"] .auto-business {
  background: linear-gradient(180deg, #0a1f37, #0d2948);
}
body[data-design="digital"] .auto-business-copy h2 { color: #fff; }
body[data-design="digital"] .auto-business-lead { color: #b8c8da; }
body[data-design="digital"] .auto-business-benefits article { border-color: rgba(160,190,225,.22); background: rgba(255,255,255,.06); }
body[data-design="digital"] .auto-business-benefits strong { color: #fff; }
body[data-design="digital"] .auto-business-benefits p { color: #aabbd0; }
body[data-design="digital"] .auto-business-links a { color: #9fc0ff; }

@media (max-width: 980px) {
  .auto-business-panel { grid-template-columns: 1fr; }
  .auto-business-copy { max-width: 780px; }
  .auto-business-visual { width: min(100%, 680px); min-height: 650px; margin: 0 auto; }
}

@media (max-width: 620px) {
  .auto-business { padding: 62px 0 70px; }
  .auto-business-panel { gap: 36px; }
  .auto-business-copy h2 { margin: 9px 0 17px; font-size: clamp(34px, 10vw, 42px); line-height: 1.02; }
  .auto-business-lead { font-size: 15px; line-height: 1.55; }
  .auto-business-benefits { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .auto-business-benefits article,
  .auto-business-benefits article:last-child { grid-column: auto; padding: 13px; border-radius: 15px; }
  .auto-business-benefits strong { font-size: 13.5px; }
  .auto-business-benefits p { font-size: 12px; }
  .auto-business-actions { align-items: stretch; flex-direction: column; gap: 14px; margin-top: 22px; }
  .auto-business-actions .button { width: 100%; min-height: 50px; padding: 13px 15px; text-align: center; }
  .auto-business-links { justify-content: center; gap: 10px 18px; }
  .auto-business-links a { font-size: 12px; }
  .auto-business-visual { min-height: 540px; }
  .auto-business-visual::before { inset: 2% 0; border-radius: 28px; }
  .auto-business-screen { top: 7%; right: -2%; width: 52%; height: 84%; border-width: 5px; border-radius: 24px; }
  .auto-business-flow { top: 8%; bottom: 8%; left: 4%; width: 74%; gap: 8px; }
  .auto-business-flow::before { top: 32px; bottom: 32px; left: 22px; }
  .auto-business-flow li { grid-template-columns: 21px 37px minmax(0, 1fr); gap: 7px; min-height: 76px; padding: 10px; border-radius: 15px; }
  .auto-business-flow li > span { font-size: 8px; }
  .business-flow-icon { width: 36px; height: 36px; border-radius: 11px; transform: scale(.84); }
  .auto-business-flow strong { font-size: 12px; }
  .auto-business-flow small { margin-top: 3px; font-size: 9.5px; }
  .auto-business-domain { right: 5%; bottom: 2%; padding: 8px 10px; font-size: 9px; }
}

/* Homepage final action */
.home-final-cta {
  padding: clamp(68px, 8vw, 112px) 0;
  background: #f3f7fc;
}

.home-final-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  gap: clamp(38px, 6vw, 80px);
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px);
  border-radius: clamp(30px, 4vw, 52px);
  background:
    radial-gradient(circle at 96% 0, rgba(47,111,242,.38), transparent 31%),
    linear-gradient(145deg, #071a2f, #0d2d50);
  color: #fff;
  box-shadow: 0 28px 70px rgba(19, 50, 87, .18);
}

.home-final-panel::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 54px 54px;
  content: "";
  pointer-events: none;
}

.home-final-copy,
.home-final-actions { position: relative; z-index: 1; }

.home-final-copy h2 {
  margin: 12px 0 20px;
  color: #fff;
  font-size: clamp(36px, 4.5vw, 62px);
  line-height: 1;
  letter-spacing: -.043em;
}

.home-final-copy p {
  max-width: 630px;
  margin: 0;
  color: #bdcde0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.62;
}

.home-final-actions {
  display: grid;
  gap: 11px;
}

.home-final-actions a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 92px;
  padding: 17px 18px 17px 21px;
  border: 1px solid rgba(183, 207, 237, .2);
  border-radius: 20px;
  background: rgba(255,255,255,.075);
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.home-final-actions a:hover {
  transform: translateX(4px);
  border-color: rgba(255, 202, 54, .66);
  background: rgba(255,255,255,.12);
}

.home-final-actions span,
.home-final-actions strong { display: block; }
.home-final-actions span { color: #90a7c2; font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.home-final-actions strong { margin-top: 6px; font-size: clamp(17px, 1.6vw, 21px); }
.home-final-actions b {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: #ffbf1f;
  color: #071a2f;
  font-size: 18px;
}

@media (max-width: 850px) {
  .home-final-panel { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .home-final-cta { padding: 58px 0 66px; }
  .home-final-panel { gap: 28px; padding: 30px 20px 22px; border-radius: 28px; }
  .home-final-copy h2 { margin: 9px 0 15px; font-size: clamp(32px, 9.5vw, 39px); line-height: 1.03; }
  .home-final-copy p { font-size: 14.5px; line-height: 1.54; }
  .home-final-actions { gap: 8px; }
  .home-final-actions a { min-height: 79px; padding: 14px 13px 14px 15px; border-radius: 16px; }
  .home-final-actions span { font-size: 9px; }
  .home-final-actions strong { margin-top: 4px; font-size: 16px; }
  .home-final-actions b { width: 39px; height: 39px; border-radius: 12px; }
}

/* Homepage footer */
.home-footer {
  padding: clamp(54px, 7vw, 84px) 0 24px;
  background: #06172a;
  color: #fff;
}

.home-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(145px, 1fr));
  gap: clamp(30px, 4vw, 58px);
}

.home-footer-brand { max-width: 290px; }
.brand-footer { color: #fff; }
.brand-footer .brand-mark { box-shadow: 0 9px 24px rgba(0, 0, 0, .28); }
.home-footer-brand p {
  max-width: 250px;
  margin: 22px 0 0;
  color: #9eb0c6;
  font-size: 14px;
  line-height: 1.55;
}

.home-footer-grid nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.home-footer-grid nav strong {
  min-height: 32px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.home-footer-grid nav a,
.home-footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: #9eb0c6;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  transition: color .2s ease;
}

.home-footer-grid nav a:hover,
.home-footer-bottom a:hover { color: #fff; }

.home-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(42px, 6vw, 68px);
  padding-top: 20px;
  border-top: 1px solid rgba(169, 190, 216, .16);
  color: #8094ac;
  font-size: 12px;
}

.home-footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
}

.home-footer-bottom a { min-height: 32px; font-size: 12px; }

@media (max-width: 1080px) {
  .home-footer-grid { grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(170px, 1fr)); }
}

@media (max-width: 700px) {
  .home-footer { padding-top: 50px; }
  .home-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .home-footer-brand { grid-column: 1 / -1; max-width: none; }
  .home-footer-brand p { margin-top: 16px; }
  .home-footer-grid nav strong { min-height: 26px; font-size: 11px; }
  .home-footer-grid nav a { min-height: 38px; font-size: 12.5px; }
  .home-footer-bottom { align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 42px; }
  .home-footer-bottom nav { justify-content: flex-start; gap: 2px 17px; }
}

@media (max-width: 390px) {
  .home-footer-grid { gap: 31px 17px; }
  .home-footer-grid nav a { font-size: 12px; }
}

/* Shared public-site chrome. Keep one stable header/footer across landing, PDR,
   legal, catalogue and generated marketing pages. */
.site-chrome .site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible;
  border-bottom: 1px solid rgba(207,219,234,.92);
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(15,42,73,.05);
}
.site-chrome .header-inner,
.site-chrome .site-header.compact .header-inner { min-height: 72px; gap: 18px; }
.site-chrome .header-brand { flex: 0 0 auto; gap: 10px; letter-spacing: 0; }
.site-chrome .header-brand-copy { min-width: 0; display: grid; gap: 1px; line-height: 1; }
.site-chrome .header-brand-copy strong { color: var(--navy); font-size: 18px; font-weight: 950; letter-spacing: .14em; }
.site-chrome .header-brand-copy small { color: var(--blue); font-size: 8px; font-weight: 950; letter-spacing: .18em; }
.site-chrome .site-nav { min-width: 0; gap: 8px; margin-left: auto; }
.site-chrome .nav-group { position: relative; }
.site-chrome .nav-group > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: #3e516a;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.site-chrome .nav-group > summary::-webkit-details-marker { display: none; }
.site-chrome .nav-group > summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .65; transition: transform .18s ease; }
.site-chrome .nav-group[open] > summary::after { transform: rotate(225deg) translate(-1px,-1px); }
.site-chrome .nav-group[open] > summary,
.site-chrome .nav-group.is-current > summary,
.site-chrome .nav-group > summary[aria-current="page"] { color: var(--blue); background: var(--blue-soft); }
.site-chrome .nav-dropdown {
  position: absolute;
  z-index: 1100;
  top: calc(100% + 7px);
  left: 0;
  min-width: 245px;
  display: none;
  gap: 3px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(11,27,47,.16);
}
.site-chrome .nav-group:last-child > .nav-dropdown { right: 0; left: auto; }
.site-chrome .nav-group[open] > .nav-dropdown { display: grid; }
.site-chrome .nav-dropdown a { min-height: 42px; display: flex; align-items: center; padding: 9px 11px; color: #3e516a; border-radius: 10px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.site-chrome .nav-dropdown a:hover,
.site-chrome .nav-dropdown a:focus-visible,
.site-chrome .nav-dropdown a[aria-current="page"] { color: var(--blue); background: var(--blue-soft); }
.site-chrome :is(.nav-group > summary,.nav-dropdown a,.header-cta,.menu-toggle):focus-visible { outline: 3px solid rgba(39,110,241,.28); outline-offset: 2px; }
.site-chrome .header-actions { flex: 0 0 auto; margin-left: 2px; }
.site-chrome .header-actions .header-cta { min-height: 44px; display: inline-flex; padding-inline: 16px; white-space: nowrap; }
.site-chrome .menu-toggle { position: relative; flex: 0 0 44px; cursor: pointer; }
.site-chrome .menu-toggle > span:not(.sr-only) { transition: transform .18s ease, opacity .18s ease; }
.site-chrome .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-chrome .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.site-chrome .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-chrome [id] { scroll-margin-top: 96px; }
.shared-footer-context { display: grid; gap: 7px; margin-top: 16px; color: #9eb0c6; font-size: 12px; }
.shared-footer-context a { color: #dce8f5; font-weight: 800; }

@media (max-width: 1120px) and (min-width: 921px) {
  .site-chrome .header-inner { gap: 12px; }
  .site-chrome .site-nav { gap: 2px; }
  .site-chrome .nav-group > summary { padding-inline: 7px; font-size: 12px; }
  .site-chrome .header-actions .header-cta { padding-inline: 13px; font-size: 12px; }
}

@media (max-width: 920px) {
  .site-chrome .header-inner,
  .site-chrome .site-header.compact .header-inner { min-height: 72px; gap: 9px; }
  .site-chrome .header-brand { margin-right: auto; }
  .site-chrome .header-actions { order: 2; margin-left: 0; }
  .site-chrome .header-actions .header-cta { display: inline-flex; }
  .site-chrome .menu-toggle { order: 3; display: block; margin-left: 0; }
  .site-chrome .site-nav {
    position: fixed;
    z-index: 1090;
    top: 72px;
    right: 12px;
    left: 12px;
    order: 4;
    max-height: calc(100dvh - 84px);
    display: none;
    align-content: start;
    gap: 3px;
    margin: 0;
    padding: 12px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 60px rgba(11,27,47,.2);
  }
  .site-chrome .site-nav.open { display: grid; }
  .site-chrome .nav-group { width: 100%; border-bottom: 1px solid var(--line); }
  .site-chrome .nav-group:last-child { border-bottom: 0; }
  .site-chrome .nav-group > summary { min-height: 50px; justify-content: space-between; padding: 3px 10px; font-size: 15px; }
  .site-chrome .nav-dropdown,
  .site-chrome .nav-group:last-child > .nav-dropdown { position: static; min-width: 0; padding: 2px 5px 10px 14px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .site-chrome .nav-dropdown a { min-height: 44px; padding: 8px 12px; font-size: 14px; white-space: normal; }
  .site-chrome [id] { scroll-margin-top: 88px; }
}

@media (max-width: 620px) {
  .site-chrome .header-inner,
  .site-chrome .site-header.compact .header-inner { min-height: 68px; }
  .site-chrome .header-brand-copy strong { font-size: 15px; }
  .site-chrome .header-brand-copy small { font-size: 7px; }
  .site-chrome .header-actions .header-cta { min-height: 44px; padding-inline: 12px; border-radius: 12px; }
  .site-chrome .header-cta-label { font-size: 0; }
  .site-chrome .header-cta-label::after { content: "Відкрити"; font-size: 11px; }
  .site-chrome .site-nav { top: 68px; }
  .site-chrome [id] { scroll-margin-top: 82px; }
}

@media (max-width: 390px) {
  .site-chrome .container.header-inner { width: min(100% - 20px,1220px); }
  .site-chrome .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .site-chrome .header-actions .header-cta { max-width: none; line-height: 1.05; text-align: center; }
}

.student-course-note {
  display: block;
  margin-top: 12px;
  color: #465a73;
  font-size: 13px;
  line-height: 1.4;
}

.student-course-card .student-card-copy h3 span { color: #1c59c9; white-space: nowrap; }
.student-course-card .student-card-visual {
  place-items: center;
  background: radial-gradient(ellipse at 50% 50%, #fff 0%, #eaf2ff 64%, #deebff 100%);
}
.student-course-card .student-card-visual::before { content: none; }
.student-course-art {
  display: block;
  width: min(94%, 430px);
  height: auto;
  max-height: 92%;
  object-fit: contain;
}
@media (max-width: 620px) {
  .student-course-art { width: min(82%, 200px); }
}