/* Courier King public website (static/index.html). Brand tokens, fonts, the
   drawn checkbox and the cookie banner come from styles.css; this file lays out
   the marketing page only, under body.cks, with no Tailwind. Contract: DESIGN.md
   "Website, October 21". */

.cks {
  --s-gutter: 16px;
  --s-max: 1200px;
  --s-radius-xl: 28px;
  --s-radius-lg: 20px;
  --s-shadow-lift:
    0 1px 2px rgb(23 37 84 / 0.06), 0 12px 32px -8px rgb(23 37 84 / 0.18);
  --s-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  background: #fff;
  color: var(--ck-indigo);
  font-family: var(--ck-font-body);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}
.cks *,
.cks *::before,
.cks *::after {
  box-sizing: border-box;
}
.cks :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset) {
  margin: 0;
}
.cks :where(ul, ol) {
  padding: 0;
  list-style: none;
}
.cks img,
.cks svg {
  display: block;
  max-width: 100%;
}
.cks a {
  color: var(--ck-primary);
}
.cks :focus-visible {
  outline: 3px solid rgb(49 87 213 / 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}
html:has(body.cks) {
  scroll-behavior: smooth;
}
.cks section[id],
.cks [id="waitlist"] {
  scroll-margin-top: 88px;
}
.s-sprite {
  position: absolute;
}
.s-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.s-ic {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-ic-lg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-wrap {
  width: 100%;
  max-width: calc(var(--s-max) + 2 * var(--s-gutter));
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}
@media (min-width: 640px) {
  .cks {
    --s-gutter: 28px;
  }
}
@media (min-width: 1024px) {
  .cks {
    --s-gutter: 40px;
  }
}

.s-skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--ck-indigo);
  color: #fff !important;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.s-skip:focus {
  top: 12px;
}
#main:focus {
  outline: none;
}

.s-deleted {
  padding-top: 16px;
}
.s-deleted p {
  background: var(--ck-success-tint);
  border: 1px solid #bfe3cb;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 15px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  border: 0;
  font: 600 16px/1.2 var(--ck-font-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.16s var(--s-ease),
    box-shadow 0.16s var(--s-ease),
    background-color 0.16s;
}
.s-btn:active {
  transform: translateY(2px);
}
.s-btn-sm {
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
}
.s-btn-block {
  width: 100%;
}
.s-btn-primary {
  background: var(--ck-primary);
  color: #fff !important;
  box-shadow: inset 0 -3px 0 rgb(23 37 84 / 0.35);
}
.s-btn-primary:hover {
  background: var(--ck-primary-hover);
}
.s-btn-primary:active {
  box-shadow: inset 0 -1px 0 rgb(23 37 84 / 0.35);
}
.s-btn-primary:disabled {
  opacity: 0.7;
  cursor: progress;
}
.s-btn-gold {
  background: var(--ck-accent);
  color: var(--ck-indigo) !important;
  box-shadow: inset 0 -3px 0 var(--ck-accent-ink);
}
.s-btn-gold:hover {
  background: #f8c552;
}
.s-btn-gold:active {
  box-shadow: inset 0 -1px 0 var(--ck-accent-ink);
}
.s-btn-ghost-dark {
  color: #fff !important;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.32);
}
.s-btn-ghost-dark:hover {
  background: rgb(255 255 255 / 0.08);
}
.s-btn .s-ic {
  transition: transform 0.16s var(--s-ease);
}
.s-btn:hover .s-ic {
  transform: translateX(3px);
}
.s-hero :focus-visible,
.s-drivers :focus-visible,
.s-close :focus-visible {
  outline-color: var(--ck-accent);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.s-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.s-nav.is-scrolled {
  border-bottom-color: var(--ck-line);
}
.s-nav-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
}
.s-logo {
  flex: none;
  display: block;
  border-radius: 8px;
}
.s-logo img {
  height: 44px;
  width: auto;
}
.s-nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.s-nav-links a {
  color: var(--ck-indigo);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 9px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.s-nav-links a:hover {
  background: var(--ck-surface-2);
}
.s-nav-end {
  display: flex;
  align-items: center;
  gap: 8px;
}
.s-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ck-line-strong);
  background: #fff;
  color: var(--ck-indigo);
  border-radius: 11px;
  cursor: pointer;
}
.s-short {
  display: none;
}
@media (max-width: 859px) {
  .s-nav-end {
    margin-left: auto;
  }
  .s-nav-links {
    display: none;
  }
  .s-js .s-menu-btn:not([hidden]) {
    display: inline-flex;
  }
  .s-nav-links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 8px var(--s-gutter) 16px;
    background: #fff;
    border-bottom: 1px solid var(--ck-line);
    box-shadow: 0 16px 24px -16px rgb(23 37 84 / 0.25);
  }
  .s-nav-links.is-open a {
    font-size: 17px;
    min-height: 52px;
    border-bottom: 1px solid var(--ck-line);
    border-radius: 0;
    padding-inline: 4px;
  }
  .s-nav-links.is-open a:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 479px) {
  .s-logo img {
    height: 38px;
  }
  .s-long {
    display: none;
  }
  .s-short {
    display: inline;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.s-hero-wrap {
  padding: 8px 8px 0;
}
@media (min-width: 640px) {
  .s-hero-wrap {
    padding: 12px 16px 0;
  }
}
.s-hero {
  position: relative;
  overflow: hidden;
  max-width: 1440px;
  margin-inline: auto;
  border-radius: 22px;
  background:
    radial-gradient(900px 520px at 88% 0%, #22357a 0%, transparent 62%),
    radial-gradient(700px 500px at 0% 100%, #1b2c66 0%, transparent 60%),
    var(--ck-band);
  color: #fff;
  display: grid;
  gap: 36px;
  padding: 40px 20px 20px;
}
@media (min-width: 640px) {
  .s-hero {
    border-radius: var(--s-radius-xl);
    padding: 56px 40px 32px;
  }
}
@media (min-width: 1024px) {
  .s-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 56px;
    padding: 64px 48px 48px 64px;
    min-height: min(760px, calc(100vh - 96px));
  }
}

/* The logo's three speed lines, used as fills. */
.s-hero-lines {
  position: absolute;
  top: 34px;
  right: 0;
  display: grid;
  gap: 9px;
  justify-items: end;
  pointer-events: none;
}
.s-hero-lines span {
  display: block;
  height: 7px;
  border-radius: 7px 0 0 7px;
  background: var(--ck-accent);
}
.s-hero-lines span:nth-child(1) {
  width: 120px;
}
.s-hero-lines span:nth-child(2) {
  width: 84px;
  opacity: 0.75;
}
.s-hero-lines span:nth-child(3) {
  width: 48px;
  opacity: 0.5;
}
@media (min-width: 1024px) {
  .s-hero > .s-hero-lines {
    display: none;
  }
}
.s-hero-copy {
  position: relative;
}
.s-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  padding: 7px 14px 7px 10px;
  border-radius: 99px;
}
.s-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ck-accent);
  box-shadow: 0 0 0 4px rgb(245 184 46 / 0.22);
}
.s-h1 {
  font-family: var(--ck-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.85rem, 1.6rem + 4.7vw, 5.9rem);
  line-height: 0.94;
  letter-spacing: -0.012em;
  margin-top: 26px;
  text-wrap: balance;
}
.s-h1 span {
  color: var(--ck-accent);
}
.s-lede {
  margin-top: 24px;
  max-width: 34rem;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--ck-band-muted);
}
.s-price-lockup {
  display: flex;
  align-items: center;
  gap: 18px 22px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--ck-band-line);
  max-width: 34rem;
}
.s-price-big {
  font-family: var(--ck-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(3.4rem, 2.4rem + 3vw, 4.9rem);
  line-height: 0.85;
  color: var(--ck-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.s-price-note {
  flex: 1 1 14rem;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ck-band-muted);
}
.s-price-note strong {
  display: block;
  color: #fff;
  font-weight: 600;
}
.s-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.s-hero-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--ck-band-muted);
}
.s-hero-foot .s-ic {
  width: 18px;
  height: 18px;
  color: var(--ck-accent);
}
@media (max-width: 479px) {
  .s-hero-cta .s-btn {
    flex: 1 1 100%;
  }
  .s-hero-foot {
    align-items: flex-start;
  }
}

/* The map: the client's own Tampa basemap (static-map.ts), inverted to sit on
   the band. Same 768x1024 coordinate space, so pins are projected points. */
.s-hero-map {
  position: relative;
  border-radius: var(--s-radius-lg);
  overflow: hidden;
  background: #14225a;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 30px 60px -30px rgb(0 0 0 / 0.6);
  aspect-ratio: 5 / 5.6;
  min-height: 400px;
}
@media (max-width: 639px) {
  .s-hero-map {
    aspect-ratio: auto;
    height: 440px;
    min-height: 0;
  }
}
.s-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.s-map-img {
  filter: invert(1) hue-rotate(180deg) brightness(1.05) contrast(1.1);
  mix-blend-mode: luminosity;
  opacity: 0.8;
}
.s-zone {
  fill: rgb(245 184 46 / 0.06);
  stroke: rgb(245 184 46 / 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 6 7;
  vector-effect: non-scaling-stroke;
}
.s-zone-center {
  fill: rgb(245 184 46 / 0.8);
}
.s-route-shadow {
  fill: none;
  stroke: rgb(6 10 30 / 0.55);
  stroke-width: 8;
  stroke-linecap: round;
}
.s-route {
  fill: none;
  stroke: var(--ck-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.s-pin circle:first-child {
  stroke: var(--ck-band);
  stroke-width: 2.5;
}
.s-pin-a circle:first-child {
  fill: var(--ck-accent);
}
.s-pin-b circle:first-child {
  fill: #fff;
}
.s-pin-a .s-pin-core {
  fill: var(--ck-band);
}
.s-pin-b .s-pin-core {
  fill: var(--ck-primary);
}
.s-float {
  position: absolute;
  background: #fff;
  color: var(--ck-indigo);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.45);
  padding: 12px 14px;
}
.s-float small {
  display: block;
  font-size: 13px;
  color: var(--ck-muted);
}
.s-float-a {
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 18px;
}
.s-float-a strong {
  display: block;
  font-size: 15px;
}
.s-float-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--ck-success-tint);
  color: var(--ck-success-ink);
  display: grid;
  place-items: center;
}
.s-float-b {
  right: 18px;
  bottom: 64px;
  min-width: 200px;
  padding: 14px 18px 16px;
}
.s-float-price {
  display: block;
  font-family: var(--ck-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.s-float-row {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ck-line);
  font-size: 13px;
  color: var(--ck-muted);
}
.s-float-row span:first-child {
  color: var(--ck-indigo);
  font-weight: 600;
}
.s-map-legend {
  position: absolute;
  left: 16px;
  bottom: 30px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
.s-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: rgb(10 16 44 / 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 99px;
}
.s-key {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.s-key-a {
  background: var(--ck-accent);
}
.s-key-b {
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--ck-primary);
}
.s-key-zone {
  border: 1.5px dashed var(--ck-accent);
}
.s-map-credit {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 11px;
  color: rgb(255 255 255 / 0.66);
}
@media (min-width: 1024px) {
  .s-map-legend {
    bottom: 32px;
  }
  .s-map-legend span:nth-child(3) {
    display: inline-flex;
  }
}
@media (max-width: 639px) {
  /* Narrow maps crop the sides, so one card sits clear of the route. */
  .s-float-b {
    top: 12px;
    bottom: auto;
    right: 12px;
    min-width: 0;
  }
  .s-float-a {
    display: none;
  }
  .s-float-price {
    font-size: 34px;
  }
  .s-map-legend {
    left: 12px;
    right: 12px;
  }
}

/* ── Promises ─────────────────────────────────────────────────────────── */
.s-promises {
  display: grid;
  gap: 28px 32px;
  padding-block: 56px 24px;
}
@media (min-width: 640px) {
  .s-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .s-promises {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: 72px 24px;
  }
}
.s-promise {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
}
.s-promise .s-ic-lg {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: 14px;
  background: var(--ck-surface-2);
  color: var(--ck-primary);
}
.s-promise h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  padding-top: 2px;
}
.s-promise p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ck-muted);
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.s-section {
  padding-block: clamp(64px, 5rem + 3vw, 128px);
}
.s-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-primary);
}
.s-eyebrow::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: var(--ck-accent);
}
.s-eyebrow-dark {
  color: var(--ck-band-muted);
}
.s-h2 {
  margin-top: 14px;
  font-family: var(--ck-font-display);
  font-weight: 800;
  font-size: clamp(2.15rem, 1.5rem + 2.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 19ch;
  text-wrap: balance;
}
.s-body {
  margin-top: 20px;
  max-width: 34rem;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ck-muted);
}

/* What we move */
.s-split {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .s-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: center;
  }
}
.s-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) {
  .s-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .s-items {
    gap: 8px;
  }
  .s-items li {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    font-size: 14.5px;
  }
  .s-items svg {
    width: 36px;
    height: 36px;
  }
}
.s-items li {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: 20px 18px 18px;
  border-radius: 16px;
  background: var(--ck-bg);
  border: 1px solid var(--ck-line);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.s-items svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--ck-indigo);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-bounds {
  display: grid;
  gap: 16px;
  margin-top: 56px;
}
@media (min-width: 900px) {
  .s-bounds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 72px;
  }
}
.s-bound {
  border: 1px solid var(--ck-line);
  border-radius: var(--s-radius-lg);
  padding: 26px 26px 24px;
}
.s-bound h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
}
.s-bound h3 .s-ic {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 50%;
  background: var(--ck-success-tint);
  color: var(--ck-success-ink);
}
.s-bound:nth-child(2) h3 .s-ic {
  background: var(--ck-surface-2);
  color: var(--ck-primary);
}
.s-bound-no h3 .s-ic {
  background: var(--ck-danger-tint);
  color: var(--ck-danger-ink);
}
.s-bound ul {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.s-bound li {
  position: relative;
  padding-left: 18px;
  font-size: 15.5px;
  line-height: 1.45;
}
.s-bound li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--ck-line-strong);
}
.s-bound p {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ck-line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ck-muted);
}

/* How it works */
.s-band-soft {
  background: var(--ck-bg);
  border-block: 1px solid var(--ck-line);
}
.s-steps {
  position: relative;
  display: grid;
  gap: 36px;
  margin-top: 48px;
}
.s-steps::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 28px;
  bottom: 28px;
  border-left: 2px dashed var(--ck-line-strong);
}
@media (min-width: 900px) {
  .s-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin-top: 64px;
  }
  .s-steps::before {
    left: 52px;
    right: calc((100% - 96px) / 4 - 24px);
    top: 50px;
    bottom: auto;
    border-left: 0;
    border-top: 2px dashed var(--ck-line-strong);
  }
}
.s-steps li {
  position: relative;
  padding-left: 76px;
}
@media (min-width: 900px) {
  .s-steps li {
    padding: 24px 24px 28px;
    background: #fff;
    border: 1px solid var(--ck-line);
    border-radius: var(--s-radius-lg);
  }
}
.s-step-n {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ck-band);
  color: var(--ck-accent);
  font-family: var(--ck-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 26px;
  box-shadow: 0 0 0 6px var(--ck-bg);
}
@media (min-width: 900px) {
  .s-step-n {
    position: relative;
    margin-bottom: 22px;
    box-shadow: 0 0 0 6px #fff;
  }
}
.s-steps h3 {
  font-family: var(--ck-font-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.15;
  padding-top: 2px;
}
.s-steps p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ck-muted);
  max-width: 30ch;
}
.s-steps-note {
  margin-top: 48px;
  font-size: 15px;
  color: var(--ck-muted);
  max-width: 44rem;
}

/* Pricing */
.s-pricing {
  display: grid;
  gap: 20px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .s-pricing {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    margin-top: 56px;
  }
}
.s-sign {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ck-band);
  color: #fff;
  border-radius: 22px;
  padding: 10px 26px;
  box-shadow: inset 0 0 0 1px var(--ck-band-line);
}
@media (min-width: 640px) {
  .s-sign {
    padding: 14px 36px;
  }
}
.s-sign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ck-band-line);
  font-size: 17px;
  font-weight: 600;
}
.s-sign-row:last-child {
  border-bottom: 0;
}
.s-sign-row small {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ck-band-muted);
}
.s-sign-row strong {
  flex: none;
  font-family: var(--ck-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--ck-accent);
  font-variant-numeric: tabular-nums;
}
.s-sign-lead strong {
  font-size: clamp(44px, 2rem + 2vw, 60px);
}
.s-sign-lead {
  padding-block: 26px;
}
.s-calc {
  border-radius: 22px;
  border: 1px solid var(--ck-line);
  background: #fff;
  box-shadow: var(--s-shadow-lift);
  padding: 26px;
}
@media (min-width: 640px) {
  .s-calc {
    padding: 34px 36px;
  }
}
.s-calc-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ck-muted);
}
.s-calc-miles {
  margin-top: 4px;
  font-family: var(--ck-font-display);
  font-weight: 700;
  font-size: 22px;
}
.s-calc-miles output {
  font-style: italic;
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.s-range {
  --fill: 33%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 10px 0 0;
  background: transparent;
  cursor: pointer;
}
.s-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(
    to right,
    var(--ck-primary) var(--fill),
    var(--ck-line) var(--fill)
  );
}
.s-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ck-primary);
  box-shadow: 0 4px 10px rgb(23 37 84 / 0.25);
}
.s-range::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: var(--ck-line);
}
.s-range::-moz-range-progress {
  height: 8px;
  border-radius: 8px;
  background: var(--ck-primary);
}
.s-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ck-primary);
  box-shadow: 0 4px 10px rgb(23 37 84 / 0.25);
}
.s-range:focus-visible {
  outline: none;
}
.s-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 5px rgb(49 87 213 / 0.3),
    0 4px 10px rgb(23 37 84 / 0.25);
}
.s-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgb(49 87 213 / 0.3);
}
.s-range-scale {
  position: relative;
  height: 20px;
  font-size: 12.5px;
  color: var(--ck-muted);
}
.s-range-scale span {
  position: absolute;
  top: 0;
}
.s-range-scale span:first-child {
  left: 0;
}
.s-range-scale span:last-child {
  right: 0;
}
/* 10 of 1–40 miles: (10 − 1) / 39 of the track. */
.s-range-included {
  left: 23.08%;
  transform: translateX(-12px);
  font-weight: 600;
  color: var(--ck-indigo);
}
.s-range-included::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -20px;
  width: 2px;
  height: 10px;
  background: var(--ck-accent);
}
.s-calc-lines {
  margin-top: 22px;
}
.s-calc-lines div,
.s-earn-lines div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ck-line);
  font-size: 15.5px;
}
.s-calc-lines dd,
.s-earn-lines dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.s-calc-lines dt {
  color: var(--ck-muted);
}
.s-calc-total {
  border-bottom: 0 !important;
  align-items: baseline;
  padding-top: 18px !important;
}
.s-calc-total dt {
  color: var(--ck-indigo) !important;
  font-weight: 700;
  font-size: 17px;
}
.s-calc-total dd {
  font-family: var(--ck-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
}
.s-calc-help {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ck-muted);
}
.s-fine {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
@media (min-width: 900px) {
  .s-fine {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
.s-fine li {
  padding-left: 16px;
  border-left: 3px solid var(--ck-accent);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ck-muted);
}
.s-fine strong {
  color: var(--ck-indigo);
}

/* Drivers */
.s-drivers {
  background:
    radial-gradient(900px 600px at 100% 0%, #22357a 0%, transparent 60%),
    var(--ck-band);
  color: #fff;
}
.s-drivers .s-h2 {
  color: #fff;
}
.s-drivers .s-body {
  color: var(--ck-band-muted);
}
.s-drivers-grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 1024px) {
  .s-drivers-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 64px;
    align-items: start;
  }
}
.s-earn {
  margin-top: 36px;
  padding: 24px;
  border-radius: var(--s-radius-lg);
  background: var(--ck-band-2);
  box-shadow: inset 0 0 0 1px var(--ck-band-line);
  max-width: 36rem;
}
@media (min-width: 640px) {
  .s-earn {
    padding: 28px 32px;
  }
}
.s-earn label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ck-band-muted);
}
.s-earn label output {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.s-earn-total {
  margin-top: 4px;
  font-family: var(--ck-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(52px, 2.6rem + 2vw, 68px);
  line-height: 1;
  color: var(--ck-accent);
  font-variant-numeric: tabular-nums;
}
.s-range-dark::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--ck-accent) var(--fill),
    var(--ck-band-line) var(--fill)
  );
}
.s-range-dark::-webkit-slider-thumb {
  background: var(--ck-band);
  border-color: var(--ck-accent);
}
.s-range-dark::-moz-range-track {
  background: var(--ck-band-line);
}
.s-range-dark::-moz-range-progress {
  background: var(--ck-accent);
}
.s-range-dark::-moz-range-thumb {
  background: var(--ck-band);
  border-color: var(--ck-accent);
}
.s-range-dark:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgb(245 184 46 / 0.35);
}
.s-earn-lines {
  margin-top: 10px;
}
.s-earn-lines div {
  border-bottom-color: var(--ck-band-line);
}
.s-earn-lines div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.s-earn-lines dt {
  color: var(--ck-band-muted);
}
.s-perks {
  display: grid;
  gap: 14px;
  margin-top: 36px;
  max-width: 36rem;
}
.s-perks li {
  display: flex;
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ck-band-muted);
}
.s-perks strong {
  color: #fff;
}
.s-perks .s-ic {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: var(--ck-accent);
  color: var(--ck-indigo);
  stroke-width: 3;
  margin-top: 1px;
}
.s-reqs {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--ck-band-line);
  max-width: 36rem;
}
.s-reqs h3 {
  font-size: 18px;
  font-weight: 700;
}
.s-reqs ul {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.s-reqs li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ck-band-muted);
}
.s-reqs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 3px;
  border-radius: 3px;
  background: var(--ck-accent);
}
.s-path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
  max-width: 40rem;
}
.s-path li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px var(--ck-band-line);
  font-size: 14px;
  font-weight: 600;
}
.s-path span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ck-accent);
  color: var(--ck-indigo);
  font-size: 12px;
  font-weight: 800;
}

.s-form-card {
  background: #fff;
  color: var(--ck-indigo);
  border-radius: 22px;
  padding: 26px 20px;
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.5);
}
@media (min-width: 640px) {
  .s-form-card {
    padding: 34px 32px;
  }
}
@media (min-width: 1024px) {
  .s-form-card {
    position: sticky;
    top: 96px;
  }
}
.s-form-title {
  font-family: var(--ck-font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
}
.s-form-sub {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ck-muted);
}
.s-form {
  margin-top: 26px;
}
.s-form fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}
.s-form legend {
  padding: 0;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ck-muted);
}
.s-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.s-field label {
  font-size: 14px;
  font-weight: 600;
}
.s-opt {
  font-weight: 400;
  color: var(--ck-muted);
}
.s-row-2,
.s-row-3 {
  display: grid;
  gap: 14px;
}
@media (min-width: 480px) {
  .s-row-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.s-row-3 {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.cks .s-input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 1.5px solid var(--ck-line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--ck-indigo);
  font: 400 16px/1.2 var(--ck-font-body);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.cks .s-input::placeholder {
  color: var(--ck-faint);
}
.cks .s-input:hover {
  border-color: #8f9dc4;
}
.cks .s-input:focus {
  outline: none;
  border-color: var(--ck-primary);
  box-shadow: var(--ck-focus);
}
.cks .s-input:user-invalid {
  border-color: var(--ck-danger);
}
.s-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}
.s-check input {
  margin-top: 0 !important;
}
.s-check-quiet {
  font-size: 13.5px;
  color: var(--ck-muted);
  margin-bottom: 20px;
}
.s-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ck-muted);
}
.s-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.s-msg {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
}

/* lib/ck.ts toast(), whose Tailwind classes do not exist on this page. */
#ck-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  transform: translateX(-50%);
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ck-indigo);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.4);
}
#ck-toast.ck-note-bad {
  background: var(--ck-danger-ink);
}

/* Questions */
.s-faq {
  display: grid;
  gap: 40px;
  margin-top: 48px;
}
@media (min-width: 900px) {
  .s-faq {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}
.s-faq-group {
  font-family: var(--ck-font-display);
  font-weight: 700;
  font-size: 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ck-indigo);
}
.s-faq details {
  border-bottom: 1px solid var(--ck-line);
}
.s-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.s-faq summary::-webkit-details-marker {
  display: none;
}
.s-faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--ck-indigo), var(--ck-indigo)) center / 12px 2px
      no-repeat,
    linear-gradient(var(--ck-indigo), var(--ck-indigo)) center / 2px 12px
      no-repeat,
    var(--ck-surface-2);
  transition: transform 0.2s var(--s-ease);
}
.s-faq details[open] summary::after {
  transform: rotate(45deg);
}
.s-faq summary:hover {
  color: var(--ck-primary);
}
.s-faq details p {
  padding: 0 44px 22px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ck-muted);
}
.s-faq-more {
  margin-top: 36px;
  font-size: 16px;
  color: var(--ck-muted);
}
.s-faq-more a {
  font-weight: 600;
}

/* Closing */
.s-close {
  padding-bottom: clamp(56px, 4rem + 2vw, 96px);
}
.s-close-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--s-radius-xl);
  background:
    radial-gradient(700px 400px at 100% 100%, #22357a 0%, transparent 60%),
    var(--ck-band);
  color: #fff;
  padding: 48px 24px;
}
@media (min-width: 640px) {
  .s-close-card {
    padding: 64px 56px;
  }
}
.s-close-card {
  display: grid;
  gap: 36px;
}
@media (min-width: 900px) {
  .s-close-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 56px;
  }
}
.s-close-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 12px 36px;
  position: relative;
}
.s-close-facts div {
  display: grid;
  gap: 4px;
}
.s-close-facts dt {
  order: 2;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ck-band-muted);
  max-width: 12ch;
}
.s-close-facts dd {
  font-family: var(--ck-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(34px, 1.6rem + 1.6vw, 52px);
  line-height: 1;
  color: var(--ck-accent);
}
@media (max-width: 479px) {
  .s-close-facts {
    gap: 12px 20px;
  }
}
.s-close-card h2 {
  font-family: var(--ck-font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  line-height: 1;
  max-width: 16ch;
}
.s-close-card p {
  margin-top: 14px;
  font-size: 18px;
  color: var(--ck-band-muted);
}
.s-close-card .s-btn {
  margin-top: 28px;
}
.s-close-card .s-hero-lines {
  top: auto;
  bottom: 48px;
}

/* Footer */
.s-footer {
  border-top: 1px solid var(--ck-line);
  padding: 56px 0 36px;
}
.s-footer-top {
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .s-footer-top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
  }
}
.s-footer-brand img {
  height: 44px;
  width: auto;
}
.s-footer-brand p {
  margin-top: 16px;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ck-muted);
}
.s-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
@media (min-width: 640px) {
  .s-footer-cols {
    grid-template-columns: repeat(3, minmax(140px, auto));
    gap: 56px;
  }
}
.s-footer-cols h2 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ck-muted);
  margin-bottom: 8px;
}
.s-footer-cols a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ck-indigo);
  text-decoration: none;
}
.s-footer-cols a:hover {
  color: var(--ck-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.s-footer-base {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ck-line);
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ck-muted);
}

/* ── Motion: the hero arrives once. No loops. ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .s-hero-copy > * {
    animation: s-rise 0.6s var(--s-ease) both;
  }
  .s-hero-copy > :nth-child(2) {
    animation-delay: 0.06s;
  }
  .s-hero-copy > :nth-child(3) {
    animation-delay: 0.12s;
  }
  .s-hero-copy > :nth-child(4) {
    animation-delay: 0.18s;
  }
  .s-hero-copy > :nth-child(n + 5) {
    animation-delay: 0.24s;
  }
  .s-hero-map {
    animation: s-fade 0.8s ease 0.1s both;
  }
  .s-route {
    stroke-dashoffset: 1;
    animation: s-draw 1.5s var(--s-ease) 0.7s forwards;
  }
  .s-pin {
    animation: s-fade 0.3s ease both;
  }
  .s-pin-a {
    animation-delay: 0.55s;
  }
  .s-pin-b {
    animation-delay: 2.05s;
  }
  .s-float-a {
    animation: s-rise 0.5s var(--s-ease) 1s both;
  }
  .s-float-b {
    animation: s-rise 0.5s var(--s-ease) 2.15s both;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.cks) {
    scroll-behavior: auto;
  }
  .cks *,
  .cks *::before,
  .cks *::after {
    transition-duration: 0s !important;
  }
}
@keyframes s-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes s-fade {
  from {
    opacity: 0;
  }
}
@keyframes s-draw {
  to {
    stroke-dashoffset: 0;
  }
}