/* ------------------------------------------------------------------
   Page styles — home, platform, sample report, driver app
   Visual system: "the dispatch ledger"
------------------------------------------------------------------- */

.home-page {
  --ink: #0b1e38;
  --body-text: #46586d;
  --muted-text: #67788c;
  --faint-text: #8a99ab;
  --hairline: #e4eaf1;
  --hairline-strong: #ccd7e2;
  --accent: #1d4ed8;
  --route-slate: #96a4b4;
  --field: #f8fafb;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  background: #ffffff;
  color: var(--ink);
  font-family: "Instrument Sans", Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

.home-page ::selection {
  background: rgba(29, 78, 216, 0.14);
}

/* Mono label voice — indices, annotations, telemetry */
.home-kicker,
  .section-label {
  color: var(--muted-text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.section-label {
  align-items: baseline;
  display: flex;
  gap: 0.85rem;
}

.section-label span {
  border-right: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-weight: 600;
  padding-right: 0.85rem;
}

.skip-link {
  background: #ffffff;
  border: 2px solid var(--accent);
  border-radius: 0.4rem;
  color: var(--ink);
  font-weight: 700;
  left: 1rem;
  padding: 0.65rem 0.9rem;
  position: fixed;
  top: 0.75rem;
  transform: translateY(-160%);
  transition: transform 140ms ease;
  z-index: 100;
}

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

/* Navigation */
.home-page .site-bar {
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--hairline);
}

.home-page .nav-links {
  gap: 1.05rem;
}

.home-page .nav-links .button {
  flex-shrink: 0;
  min-height: 2.65rem;
  padding-inline: 1rem;
  white-space: nowrap;
}

.home-page .button {
  border-radius: 0.45rem;
  letter-spacing: 0.005em;
}

.home-hero {
  background: #0b1e38;
  color: #ffffff;
  padding: 4.75rem 0 0;
  position: relative;
}

.home-hero-photo,
.home-hero > picture {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.home-hero-photo {
  object-fit: cover;
  object-position: center;
}

.home-hero::after {
  background:
    linear-gradient(
      180deg,
      rgba(11, 30, 56, 0.16) 0%,
      rgba(11, 30, 56, 0.88) 100%
    ),
    linear-gradient(
      90deg,
      rgba(11, 30, 56, 0.98) 0%,
      rgba(11, 30, 56, 0.94) 38%,
      rgba(11, 30, 56, 0.58) 70%,
      rgba(11, 30, 56, 0.82) 100%
    );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.home-hero > :not(picture) {
  position: relative;
  z-index: 2;
}

.home-hero-grid {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.home-hero-copy {
  min-width: 0;
  padding-bottom: 4rem;
}

.home-hero h1 {
  color: #ffffff;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-top: 1.4rem;
  max-width: 17ch;
}

.home-hero-lede {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.7;
  margin-top: 1.5rem;
  max-width: 36rem;
}

.home-hero-lede strong {
  color: #ffffff;
  font-weight: 600;
}

.lead-capture {
  margin-top: 1.75rem;
  max-width: 28.5rem;
}

.lead-modal-backdrop {
  backdrop-filter: blur(10px) saturate(1.1);
  background: rgba(7, 17, 31, 0.55);
  inset: 0;
  position: fixed;
  z-index: 1000;
}

.lead-modal-close {
  display: none;
}

.lead-capture.is-active {
  animation: lead-modal-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
  background: #ffffff;
  border: 0;
  border-radius: 1.25rem;
  box-shadow:
    0 1px 1px rgba(7, 17, 31, 0.04),
    0 24px 64px rgba(7, 17, 31, 0.28);
  color: #07111f;
  display: flex;
  flex-direction: column;
  left: 50%;
  margin: 0;
  max-height: calc(100dvh - 2rem);
  max-width: none;
  overflow-y: auto;
  padding: 1rem 1.5rem 1.4rem;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(40rem, calc(100% - 1.5rem));
  z-index: 1001;
}

.lead-capture.is-active .lead-modal-close {
  align-items: center;
  align-self: flex-end;
  background: #f1f5f9;
  border: 0;
  border-radius: 999px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.35rem;
  height: 2rem;
  justify-content: center;
  line-height: 1;
  margin-bottom: 0.65rem;
  width: 2rem;
}

.lead-capture.is-active .lead-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

body.lead-modal-open {
  overflow: hidden;
}

@keyframes lead-modal-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 16px)) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.lead-form-label {
  color: rgba(255, 255, 255, 0.92);
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
}

.lead-form-row {
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(7, 17, 31, 0.18);
  display: flex;
  gap: 0.25rem;
  padding: 0.28rem 0.28rem 0.28rem 1rem;
}

.lead-form-row input,
.lead-field input,
.lead-field select,
.lead-field textarea {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0.75rem;
  color: #07111f;
  font: inherit;
  width: 100%;
}

.lead-form-row input {
  flex: 1 1 auto;
  min-height: 2.5rem;
  min-width: 0;
  padding: 0;
}

.lead-form-row input:focus,
.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
  outline: none;
}

.lead-form-row input::placeholder,
.lead-field input::placeholder,
.lead-field textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.lead-form-row .button {
  border-radius: 999px;
  flex: 0 0 auto;
  min-height: 2.6rem;
  padding-inline: 1.15rem;
  white-space: nowrap;
}

.lead-form-status {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.8rem;
  line-height: 1.45;
  min-height: 0;
}

.lead-form-status:not(:empty) {
  margin-top: 0.65rem;
}

.lead-form-status[data-state="error"] {
  color: #fecaca;
}

.lead-botcheck {
  display: none;
}

.lead-details {
  margin: 0;
}

.lead-details-fields {
  display: grid;
  gap: 0.85rem 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lead-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.lead-field-wide {
  grid-column: 1 / -1;
}

.lead-field > span {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.lead-field > span em {
  color: #94a3b8;
  font-style: normal;
  font-weight: 500;
}

.lead-field input,
.lead-field select,
.lead-field textarea {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  min-height: 2.85rem;
  padding: 0.65rem 0.85rem;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.lead-field input:hover,
.lead-field select:hover,
.lead-field textarea:hover {
  border-color: #cbd5e1;
}

.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.lead-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.8rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  cursor: pointer;
  padding-right: 2.2rem;
}

.lead-field textarea {
  min-height: 5.25rem;
  resize: vertical;
}

.lead-field input[type="number"] {
  appearance: textfield;
}

.lead-field input[type="number"]::-webkit-inner-spin-button,
.lead-field input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.lead-details-actions {
  margin-top: 1.15rem;
}

.lead-details-actions .button {
  border-radius: 0.85rem;
  min-height: 2.9rem;
  width: 100%;
}

.lead-phone,
.lead-field .iti {
  width: 100%;
}

.lead-phone .iti__tel-input {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  min-height: 2.85rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.lead-phone .iti__tel-input:hover {
  border-color: #cbd5e1;
}

.lead-phone .iti__tel-input:focus {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.iti--container,
.ss-content {
  z-index: 1100 !important;
}

.lead-field .ss-main {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  color: #07111f;
  cursor: pointer;
  font: inherit;
  min-height: 2.85rem;
  padding: 0.2rem 0.55rem;
}

.lead-field .ss-main:hover {
  border-color: #cbd5e1;
}

.lead-field .ss-main:focus,
.lead-field .ss-main.ss-open-below,
.lead-field .ss-main.ss-open-above {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.lead-field .ss-values {
  min-height: 2.2rem;
}

.lead-field .ss-placeholder,
.lead-field .ss-single {
  color: #07111f;
  font-size: 1rem;
  padding: 0.35rem 0.2rem;
}

.lead-field .ss-placeholder {
  color: #94a3b8;
}

.ss-content {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  box-shadow: 0 16px 40px rgba(7, 17, 31, 0.14);
  overflow: hidden;
}

.ss-content .ss-list .ss-option {
  border-radius: 0.5rem;
  color: #0f172a;
  padding: 0.55rem 0.7rem;
}

.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted {
  background: #eff6ff;
  color: #1d4ed8;
}

.ss-content .ss-list .ss-option.ss-selected {
  background: #dbeafe;
  color: #1e40af;
}

.lead-complete {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.9rem;
  color: #14532d;
  font-weight: 500;
  margin-top: 0.4rem;
  padding: 0.95rem 1rem;
}

.lead-capture.is-active .lead-form-label {
  color: #0f172a;
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
}

.lead-capture.is-active .lead-form-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

.lead-capture.is-active .lead-form-status {
  color: #64748b;
}

.lead-capture.is-active .lead-form-status[data-state="error"] {
  color: #b91c1c;
}

.home-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.home-hero-booking {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  margin-top: 1rem;
}

.home-hero-booking a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.home-hero-booking a:hover {
  color: #dde6f0;
}

.home-hero-assurance {
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  font-weight: 500;
  gap: 0.4rem 0;
  line-height: 1.6;
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
}

.home-hero-assurance li {
  align-items: center;
  display: inline-flex;
}

.home-hero-assurance li::before {
  background: #60a5fa;
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 5px;
  margin-right: 0.5rem;
  width: 5px;
}

.home-hero-assurance li:not(:last-child) {
  margin-right: 1.15rem;
}

/* Hero instrument — the live plan */
.planner-preview {
  background: #0b1e38;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.9rem;
  box-shadow:
    0 1px 2px rgba(11, 30, 56, 0.04),
    0 24px 48px -32px rgba(11, 30, 56, 0.25);
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.planner-laptop {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  position: relative;
}

.console-stage {
  position: relative;
}

.laptop-device {
  margin: 0 auto;
  max-width: 50rem;
  padding: 0 2.5% 0.8rem;
  position: relative;
}

.laptop-screen-shell {
  background: #07111f;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1rem 1rem 0.65rem 0.65rem;
  box-shadow:
    0 2rem 4rem -2.5rem rgba(0, 0, 0, 0.9),
    0 0 0 0.35rem rgba(7, 17, 31, 0.48);
  padding: 0.48rem 0.48rem 0.4rem;
  position: relative;
}

.laptop-camera {
  background: #26384d;
  border: 2px solid #07111f;
  border-radius: 50%;
  height: 0.42rem;
  left: 50%;
  position: absolute;
  top: 0.18rem;
  transform: translateX(-50%);
  width: 0.42rem;
  z-index: 2;
}

.laptop-screen {
  background: #f8fafb;
  border-radius: 0.55rem 0.55rem 0.35rem 0.35rem;
  min-width: 0;
  overflow: hidden;
}

.laptop-browser-bar {
  align-items: center;
  background: #e9eef4;
  border-bottom: 1px solid #d6e0ea;
  display: flex;
  gap: 0.32rem;
  height: 1.7rem;
  padding: 0 0.65rem;
}

.laptop-browser-dot {
  background: #b8c5d3;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 0.36rem;
  width: 0.36rem;
}

.laptop-browser-address {
  background: #f8fafb;
  border: 1px solid #d6e0ea;
  border-radius: 0.25rem;
  color: #8392a4;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.04em;
  margin-left: 0.45rem;
  overflow: hidden;
  padding: 0.16rem 0.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.laptop-app-shell {
  display: flex;
  min-height: 0;
}

.laptop-sidebar {
  background: #ffffff;
  border-right: 1px solid #d8e1ee;
  color: #0b1220;
  display: flex;
  flex: 0 0 8.2rem;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.7rem 0.45rem;
}

.laptop-sidebar-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.55rem;
  min-height: 1.55rem;
  padding: 0 0.2rem;
}

.laptop-sidebar-brand {
  min-width: 0;
}

.laptop-sidebar-logo {
  display: block;
  height: auto;
  max-width: 4.2rem;
  object-fit: contain;
  object-position: left center;
  width: 4.2rem;
}

.laptop-sidebar-brand > span {
  color: #5d6b82;
  display: block;
  font-size: 0.38rem;
  margin-top: 0.08rem;
  white-space: nowrap;
}

.laptop-sidebar-collapse {
  align-items: center;
  background: transparent;
  border: 0;
  color: #5d6b82;
  display: inline-flex;
  height: 1.35rem;
  justify-content: center;
  padding: 0;
  width: 1.35rem;
}

.laptop-sidebar-collapse svg {
  fill: none;
  height: 0.8rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 0.8rem;
}

.laptop-sidebar-label {
  color: #5d6b82;
  font-family: var(--font-mono);
  font-size: 0.43rem;
  letter-spacing: 0.08em;
  margin: 0.35rem 0.25rem 0.12rem;
  text-transform: uppercase;
}

.laptop-sidebar-item {
  align-items: center;
  border-radius: 0.25rem;
  display: flex;
  font-size: 0.55rem;
  gap: 0.38rem;
  line-height: 1.2;
  padding: 0.34rem 0.4rem;
  white-space: nowrap;
}

.laptop-sidebar-item svg {
  fill: none;
  flex: 0 0 auto;
  height: 0.78rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 0.78rem;
}

.laptop-sidebar-item-active {
  background: #ecf2ff;
  color: #2563eb;
  font-weight: 600;
}

.laptop-app-main {
  background: #f5f7fb;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.75rem 0.55rem;
}

.laptop-console-topbar {
  align-items: center;
  display: flex;
  gap: 0.28rem;
  justify-content: flex-end;
  min-height: 1.5rem;
}

.laptop-console-topbar button,
  .laptop-account {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8e1ee;
  border-radius: 0.28rem;
  color: #5d6b82;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 0.42rem;
  gap: 0.22rem;
  height: 1.35rem;
  justify-content: center;
  padding: 0 0.42rem;
  white-space: nowrap;
}

.laptop-console-topbar button {
  width: 1.35rem;
}

.laptop-console-topbar .laptop-notification-button {
  width: auto;
}

.laptop-console-topbar svg {
  fill: none;
  height: 0.68rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 0.68rem;
}

.laptop-account b {
  align-items: center;
  background: #ecf2ff;
  border-radius: 50%;
  color: #2563eb;
  display: inline-flex;
  font-size: 0.4rem;
  height: 0.85rem;
  justify-content: center;
  width: 0.85rem;
}

.laptop-console-tabs {
  border-bottom: 1px solid #d8e1ee;
  display: flex;
  gap: 0.1rem;
  margin: 0.35rem 0 0.55rem;
  overflow: hidden;
}

.laptop-console-tab {
  border-bottom: 2px solid transparent;
  color: #5d6b82;
  font-size: 0.5rem;
  font-weight: 500;
  padding: 0.38rem 0.45rem 0.34rem;
  white-space: nowrap;
}

.laptop-console-tab-active {
  border-bottom-color: #2563eb;
  color: #0b1220;
}

.laptop-trips-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
}

.laptop-mini-label {
  color: #7f8fa2;
  font-family: var(--font-mono);
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  margin: 0 0 0.22rem;
  text-transform: uppercase;
}

.laptop-trips-header strong {
  color: #0b1e38;
  display: block;
  font-size: 0.75rem;
  letter-spacing: -0.02em;
}

.planner-map.laptop-plan-map {
  aspect-ratio: 720 / 260;
  border: 1px solid #c8d5e2;
  border-radius: 0.35rem;
  margin-top: 0.7rem;
}

.planner-map-controls {
  background: #ffffff;
  border: 1px solid #d5dce6;
  border-radius: 0.22rem;
  bottom: 0.35rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  right: 0.35rem;
  z-index: 1;
}

.planner-map-controls span {
  align-items: center;
  color: #3d4a5c;
  display: flex;
  font-size: 0.58rem;
  font-weight: 600;
  height: 0.82rem;
  justify-content: center;
  line-height: 1;
  width: 0.82rem;
}

.planner-map-controls span + span {
  border-top: 1px solid #e4eaf1;
}

.laptop-trips-header > span {
  color: #2563eb;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.laptop-trips-list {
  border-top: 1px solid #dce5ee;
  display: grid;
  gap: 0.25rem;
  margin-top: 0.35rem;
  padding-top: 0.3rem;
}

.laptop-trip-row {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e0e7ef;
  border-radius: 0.3rem;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
  padding: 0.22rem 0.45rem;
}

.laptop-trip-row-active {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: inset 2px 0 0 #2563eb;
}

.laptop-trip-row strong,
  .laptop-trip-row span {
  display: block;
}

.laptop-trip-row strong {
  color: #0b1e38;
  font-size: 0.55rem;
}

.laptop-trip-row div > span {
  color: #8796a8;
  font-size: 0.46rem;
  margin-top: 0.1rem;
}

.laptop-trip-status {
  color: #64748b;
  font-family: var(--font-mono);
  font-size: 0.42rem;
  white-space: nowrap;
}

.laptop-trip-status-live {
  color: #087653;
}

.laptop-trip-status-pending {
  color: #b26a00;
}

.laptop-base {
  background: linear-gradient(180deg, #8190a0, #526174);
  border-radius: 0 0 0.8rem 0.8rem;
  box-shadow: 0 1rem 1.5rem -1rem rgba(0, 0, 0, 0.75);
  height: 0.65rem;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.laptop-base::after {
  background: #405065;
  border-radius: 0 0 0.65rem 0.65rem;
  bottom: -0.24rem;
  content: "";
  height: 0.3rem;
  left: 12%;
  position: absolute;
  width: 76%;
}

.laptop-base span {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 0 0 0.25rem 0.25rem;
  display: block;
  height: 0.16rem;
  margin: 0 auto;
  width: 18%;
}

.laptop-caption {
  color: rgba(255, 255, 255, 0.52);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.09em;
  margin-top: 0.7rem;
  text-align: center;
  text-transform: uppercase;
}

.iphone-device {
  bottom: 1.15rem;
  position: absolute;
  right: -0.65rem;
  width: clamp(9rem, 28%, 13.5rem);
  z-index: 3;
}

.iphone-device .iphone-frame {
  width: 100%;
}

.iphone-frame {
  background: #080b12;
  border: 1px solid #303846;
  border-radius: 1.55rem;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 0.2rem rgba(8, 11, 18, 0.18),
    0 1.25rem 1.3rem rgba(7, 17, 31, 0.34);
  padding: 0.32rem;
  position: relative;
}

.iphone-frame img {
  border-radius: 1.28rem;
  display: block;
  height: auto;
  width: 100%;
}

.iphone-home-indicator {
  background: #10141b;
  border-radius: 999px;
  bottom: 0.5rem;
  height: 0.16rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 28%;
}

.planner-map {
  aspect-ratio: 720 / 520;
  background: #fafaf5;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.planner-map > svg {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.planner-map-land {
  fill: #fafaf5;
}

.planner-map-water {
  fill: #c5dae8;
}

.planner-map-park {
  fill: #d4e5c2;
}

.planner-map-tree {
  fill: #b9cfa4;
}

.planner-map-building {
  fill: #ecece6;
  stroke: #d8d8d0;
  stroke-width: 0.6;
}

.planner-map-road-casing {
  fill: none;
  stroke: #d8d8d0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.planner-map-road {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.planner-map-arterial-casing {
  fill: none;
  stroke: #e2e0d4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 10;
}

.planner-map-arterial {
  fill: none;
  stroke: #f6f5ee;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
}

.planner-map-place {
  fill: #8a8476;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Route cartography */
.planner-route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.planner-route-halo {
  stroke: #ffffff;
  stroke-width: 7;
}

.planner-route-one:not(.planner-route-halo) {
  stroke: #c48a1a;
  stroke-width: 3.75;
}

.planner-route-two:not(.planner-route-halo) {
  stroke: #2a8f6a;
  stroke-width: 3.75;
}

.planner-route-three:not(.planner-route-halo) {
  stroke: #2563eb;
  stroke-width: 4;
}

.planner-route-inserted {
  fill: none;
  stroke: #2563eb;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.75;
}

.planner-stops circle {
  fill: #ffffff;
  stroke-width: 2.25;
}

.planner-stops .stop-slate circle {
  stroke: #c48a1a;
}

.planner-stops .stop-teal circle {
  stroke: #2a8f6a;
}

.planner-stops .stop-blue circle {
  stroke: #2563eb;
}

.planner-depot {
  fill: #0b1e38;
  stroke: #ffffff;
  stroke-width: 2;
}

.planner-incoming-dot {
  fill: #2563eb;
  stroke: #ffffff;
  stroke-width: 2.5;
}

.planner-incoming-ring {
  fill: none;
  opacity: 0.35;
  stroke: #2563eb;
  stroke-width: 1.5;
}

.planner-map-tags text {
  fill: #3d4f63;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  paint-order: stroke;
  stroke: #fafaf5;
  stroke-width: 4px;
}

/* Measured result */
.savings-statement {
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(11rem, 0.42fr) minmax(11rem, 0.42fr) minmax(0, 1.16fr);
  padding: 2.25rem 0 2.5rem;
}

.savings-figure {
  margin: 0;
}

.savings-figure strong {
  color: #ffffff;
  display: block;
  font-size: clamp(2.3rem, 3.2vw, 3rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.savings-figure span {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 0.55rem;
  max-width: 15rem;
}

.savings-copy {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.85rem;
  line-height: 1.75;
  max-width: 34rem;
}

.savings-copy p {
  margin: 0;
}

.savings-copy .savings-example {
  border-left: 2px solid #60a5fa;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1rem;
  padding-left: 1rem;
}

/* Audience strip */
.audience-strip-wrap {
  padding-bottom: 2.4rem;
}

.audience-strip {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 1.3rem 0 0;
}

.audience-strip li {
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.audience-strip li:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.3);
  content: "/";
  margin-left: 1.1rem;
}

.audience-strip .audience-label {
  color: #ffffff;
  font-weight: 600;
}

.home-section {
  border-top: 1px solid var(--hairline);
  padding: clamp(5rem, 8.5vw, 8rem) 0;
}

.home-section-compact {
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
}

#orders {
  background:
    linear-gradient(180deg, rgba(11, 30, 56, 0.03), transparent 42%),
    #ffffff;
}

#orders .section-intro h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin-top: 0.7rem;
}

#orders .section-intro > p:not(.section-label) {
  font-size: 0.9rem;
  margin-top: 0.7rem;
}

.orders-layout {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 22rem);
}

.order-preview {
  background: #ffffff;
  border: 1px solid var(--hairline-strong);
  border-radius: 0.85rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 16px 36px -28px rgba(11, 30, 56, 0.5);
  margin: 0;
  overflow: hidden;
}

.order-preview-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 0.95rem 0.7rem;
}

.order-preview-head strong {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.03em;
  margin-top: 0.08rem;
}

.order-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0 0.95rem 0.75rem;
}

.order-preview-chips li {
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.28rem 0.55rem;
}

.order-preview-chips span {
  color: var(--muted-text);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-right: 0.3rem;
  text-transform: uppercase;
}

.order-preview-stops {
  display: grid;
  gap: 0.65rem;
  padding: 0 0.95rem 0.85rem;
  position: relative;
}

.order-preview-stops::before {
  background: linear-gradient(#0f766e, #1d4ed8);
  content: "";
  left: 1.55rem;
  position: absolute;
  top: 1.15rem;
  bottom: 1.35rem;
  width: 1px;
}

.order-stop {
  align-items: start;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  position: relative;
}

.order-stop-index {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--ink);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 600;
  height: 1.25rem;
  justify-content: center;
  margin-top: 0.1rem;
  width: 1.25rem;
  z-index: 1;
}

.order-stop-pickup .order-stop-index {
  background: #ecfdf5;
  border-color: #99d4c0;
  color: #0f766e;
}

.order-stop-dropoff .order-stop-index {
  background: #eef3ff;
  border-color: #b7c7f0;
  color: #1d4ed8;
}

.order-stop > div {
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: 0.65rem;
  padding: 0.6rem 0.7rem 0.65rem;
}

.order-stop-pickup > div {
  background: #f3fbf8;
  border-color: #c9e8dc;
}

.order-stop-dropoff > div {
  background: #f4f7ff;
  border-color: #d4def8;
}

.order-stop-kicker {
  color: var(--muted-text);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.order-stop h3 {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0.22rem 0 0.5rem;
}

.order-stop dl {
  display: grid;
  gap: 0.28rem;
  margin: 0;
}

.order-stop dl div {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 4.4rem minmax(0, 1fr);
}

.order-stop dt {
  color: var(--muted-text);
  font-size: 0.7rem;
}

.order-stop dd {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
  margin: 0;
}

.order-preview-note {
  background: #f8fafc;
  border-top: 1px solid var(--hairline);
  color: #54657a;
  font-size: 0.76rem;
  margin: 0;
  padding: 0.6rem 0.95rem 0.7rem;
}

.order-preview-note span {
  color: var(--muted-text);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-right: 0.4rem;
  text-transform: uppercase;
}

#planning .section-intro h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin-top: 0.7rem;
}

#planning .section-intro > p:not(.section-label) {
  font-size: 0.9rem;
  margin-top: 0.7rem;
}

#planning .orders-layout {
  grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 34rem);
}

.route-map {
  background: #ffffff;
  border: 10px solid #ffffff;
  border-radius: 1.1rem;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.55);
  margin: 0;
  overflow: hidden;
}

.route-map img {
  display: block;
  height: auto;
  margin-inline: auto;
  width: 100%;
}

@media (max-width: 900px) {
  .orders-layout,
  #planning .orders-layout {
    grid-template-columns: 1fr;
  }

  .order-preview,
  .route-map {
    max-width: 34rem;
  }
}

.band-field {
  background:
    linear-gradient(180deg, rgba(11, 30, 56, 0.028), transparent 22%),
    var(--field);
  border-top: 0;
}

.band-ink,
  .pricing-section,
  .final-cta {
  background-color: var(--ink);
  background-image: radial-gradient(
    980px 520px at 84% -12%,
    rgba(37, 99, 235, 0.2),
    transparent 56%
  );
}

.band-ink {
  border-top: 0;
}

.band-field + .home-section,
  .band-ink + .home-section,
  .constraints-section + .home-section,
  .pricing-section + .home-section {
  border-top: 0;
}

.band-ink .section-label {
  color: #7f95b5;
}

.band-ink .section-intro h2 {
  color: #ffffff;
}

.band-ink .section-intro > p:not(.section-label) {
  color: #b6c4d8;
}

.band-ink .platform-copy p,
  .band-ink .platform-copy li,
  .band-ink .lifecycle-aside-label,
  .band-ink .plan-preview-note {
  color: #b6c4d8;
}

.band-ink .plan-preview {
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 28px 56px -24px rgba(0, 0, 0, 0.55);
}

.home-page .access-showcase {
  gap: 2rem;
  margin-top: 2.75rem;
}

.band-field .platform-facts,
  .band-field .platform-pair,
  .platform-facts-lift,
  .platform-pair-lift {
  gap: 0.85rem;
}

.band-field .platform-facts article,
  .band-field .platform-pair article,
  .platform-facts-lift article,
  .platform-pair-lift article {
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  box-shadow: 0 14px 32px -28px rgba(11, 30, 56, 0.4);
  padding: 1.35rem 1.4rem 1.45rem;
}

.band-field .platform-facts article,
  .band-field .platform-pair article {
  background: #ffffff;
}

.platform-facts-lift article,
  .platform-pair-lift article {
  background: var(--field);
  border-top-color: var(--hairline);
}

.band-field .home-phone-frame {
  box-shadow:
    0 1px 2px rgba(11, 30, 56, 0.05),
    0 28px 50px -30px rgba(11, 30, 56, 0.45);
}

.section-intro {
  max-width: 38rem;
}

.section-intro h2 {
  color: var(--ink);
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin-top: 1.1rem;
}

.section-intro > p:not(.section-label) {
  color: #54657a;
  font-size: 0.98rem;
  line-height: 1.75;
  margin-top: 1.15rem;
}

.section-intro-wide {
  max-width: 48rem;
}

/* 03 — Planning rails */
.planning-layout {
  align-items: start;
  display: grid;
  gap: clamp(3rem, 7vw, 6.5rem);
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
}

.contrast-row + .contrast-row {
  border-top: 1px solid var(--hairline);
  margin-top: 2.75rem;
  padding-top: 2.75rem;
}

.planning-section .contrast-row {
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  box-shadow: 0 14px 32px -28px rgba(11, 30, 56, 0.4);
  padding: 1.2rem 1.4rem 1.4rem;
}

.planning-section .contrast-row + .contrast-row {
  border-top: 1px solid var(--hairline);
  margin-top: 0.75rem;
  padding-top: 1.2rem;
}

.contrast-label {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.contrast-label span {
  color: var(--muted-text);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contrast-label strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.contrast-route-optima .contrast-label span,
  .contrast-route-optima .contrast-label strong {
  color: var(--accent);
}

.contrast-row ol {
  display: flex;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.contrast-row li {
  color: #54657a;
  flex: 1 1 0;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  min-width: 0;
  padding: 1.05rem 0.85rem 0 0;
  position: relative;
}

.contrast-row li:last-child {
  padding-right: 0;
}

/* node dots on the rail */
.contrast-row li::before {
  background: #ffffff;
  border: 1.5px solid var(--route-slate);
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  height: 9px;
  left: 0;
  position: absolute;
  top: -4px;
  width: 9px;
  z-index: 1;
}

/* fragmented rail — every step is a separate action */
.contrast-old li:not(:last-child)::after {
  border-top: 1.5px dashed #c6d0dc;
  content: "";
  left: 16px;
  position: absolute;
  right: 8px;
  top: 0;
}

/* continuous rail — one system carries the change through */
.contrast-route-optima li::before {
  background: var(--accent);
  border: 2px solid #ffffff;
  height: 11px;
  top: -5px;
  width: 11px;
}

.contrast-route-optima li:not(:last-child)::after {
  background: var(--accent);
  border-radius: 2px;
  content: "";
  height: 2.5px;
  left: 5px;
  position: absolute;
  right: -6px;
  top: -1px;
}

/* 04 — Constraints (same canvas as the hero) */
.constraints-section {
  color: var(--ink);
}

.constraints-section .section-label {
  color: var(--muted-text);
}

.constraints-section .section-label span {
  border-color: var(--hairline-strong);
  color: var(--ink);
}

.constraints-section .section-intro h2 {
  color: var(--ink);
}

.constraints-section .section-intro > p:not(.section-label) {
  color: #54657a;
}

.constraints-layout {
  align-items: end;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.95fr);
}

.constraints-layout .section-intro {
  max-width: none;
}

.constraint-strip {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.constraint-strip li {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--hairline-strong);
  border-radius: 0.65rem;
  color: var(--ink);
  display: flex;
  font-size: 0.86rem;
  font-weight: 600;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.75rem 0.9rem;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.constraint-strip li::before {
  align-items: center;
  background: #e8efff;
  border-radius: 50%;
  color: var(--accent);
  content: "✓";
  display: inline-flex;
  flex: 0 0 1.4rem;
  font-size: 0.72rem;
  height: 1.4rem;
  justify-content: center;
}

.constraint-strip li:hover {
  background: var(--field);
  border-color: var(--accent);
}

/* 05 — Proof */
.proof-section {
  border-top: 0;
}

.proof-intro {
  align-items: end;
  display: grid;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.62fr);
  max-width: none;
}

.proof-intro > p {
  margin-bottom: 0.25rem;
}

.busy-day-process {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3.25rem;
}

.busy-day-process > ol {
  border-bottom: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 1.1rem 0;
}

.busy-day-process > ol li {
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0 0 1.25rem;
}

.busy-day-process > ol li:first-child {
  border-left: 0;
  padding-left: 0;
}

.busy-day-process > ol li > span {
  color: var(--faint-text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding-top: 0;
}

.busy-day-process h3 {
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.busy-day-process li p {
  color: var(--muted-text);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0;
}

.proof-section .busy-day-process .comparison-figure {
  align-self: center;
  margin-top: 0;
  width: min(1360px, calc(100vw - 2rem));
}

.proof-section > .container > .comparison-figure {
  margin-top: 2.5rem;
}

/* Comparison instrument */
.comparison-figure {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  box-shadow:
    0 1px 2px rgba(11, 30, 56, 0.04),
    0 18px 40px -30px rgba(11, 30, 56, 0.22);
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.comparison-chrome {
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  color: #6d7d92;
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  justify-content: space-between;
  letter-spacing: 0.11em;
  min-height: 2.5rem;
  padding: 0 1.15rem;
  text-transform: uppercase;
}

.comparison-chrome span + span {
  color: var(--faint-text);
}

.comparison-maps {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.65rem;
  position: relative;
}

.comparison-maps > div + div {
  border-left: 0;
}

.comparison-map {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 0.65rem;
  box-shadow: 0 6px 16px -14px rgba(11, 30, 56, 0.35);
  overflow: hidden;
  position: relative;
}

.comparison-map img {
  aspect-ratio: 720 / 440;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.comparison-map p {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  height: 2.35rem;
  justify-content: space-between;
  letter-spacing: 0.14em;
  margin: 0;
  padding: 0 0.9rem;
  text-transform: uppercase;
}

.comparison-maps::after {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--accent);
  content: "→";
  display: flex;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  height: 2rem;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  z-index: 2;
}

.comparison-result {
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 3rem;
  padding: 1.1rem 1.25rem;
}

.comparison-result > div {
  align-items: baseline;
  display: flex;
  gap: 0.75rem;
}

.comparison-result span {
  color: var(--faint-text);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.comparison-result strong {
  color: var(--ink);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.comparison-result em {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
}

.comparison-link {
  align-items: center;
  color: var(--accent);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 600;
  gap: 0.4rem;
  margin-left: auto;
}

.comparison-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.data-note {
  color: var(--muted-text);
  font-size: 0.8rem;
  line-height: 1.6;
  margin-top: 1rem;
}

.proof-cta {
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding: 1.5rem 0;
}

.proof-cta strong {
  color: var(--ink);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.proof-cta p {
  color: var(--muted-text);
  font-size: 0.82rem;
  line-height: 1.6;
  margin-top: 0.3rem;
}

.proof-cta .button {
  flex: 0 0 auto;
}

.planning-driver {
  align-items: center;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
  margin-top: 3.25rem;
  padding-top: 2.75rem;
}

.planning-driver p {
  color: #54657a;
  font-size: 0.98rem;
  line-height: 1.75;
  margin: 0;
  max-width: 36rem;
}

.planning-driver h3 {
  color: var(--ink);
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin: 0 0 1.1rem;
}

.planning-driver .text-link {
  margin-top: 0.85rem;
}

.planning-driver .driver-product {
  margin: 0;
  max-width: none;
}

.planning-driver .home-phone-frame {
  width: min(100%, 16.25rem);
}

.text-link {
  color: var(--accent);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 600;
  gap: 0.4rem;
  margin-top: 1rem;
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.driver-product {
  margin: 0 auto;
  max-width: 21rem;
  position: relative;
  width: 100%;
}

.home-phone-frame {
  background: var(--ink);
  border: 1px solid #22344d;
  border-radius: 2.2rem;
  margin-inline: auto;
  overflow: hidden;
  padding: 0.45rem;
  width: min(100%, 16.25rem);
}

.home-phone-frame img {
  border-radius: 1.8rem;
  display: block;
  height: auto;
  width: 100%;
}

.driver-product figcaption {
  color: var(--faint-text);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  margin-top: 0.85rem;
  text-align: center;
  text-transform: uppercase;
}

/* 07 — Onboarding */
.onboarding-layout {
  display: grid;
  gap: clamp(3rem, 7vw, 6.5rem);
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.onboarding-steps {
  border-top: 1px solid var(--hairline);
  list-style: none;
  margin: 0;
  padding: 0;
}

.onboarding-steps li {
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 0.35rem 1.75rem;
  grid-template-columns: 3.5rem minmax(11rem, 15rem) minmax(0, 1fr);
  padding: 1.5rem 0;
}

.onboarding-steps span {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding-top: 0.2rem;
}

.onboarding-steps strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.onboarding-steps p {
  color: var(--muted-text);
  font-size: 0.85rem;
  line-height: 1.65;
}

/* 08 — Pricing */
.pricing-section {
  border-top: 0;
}

.pricing-section .section-label {
  color: #7f95b5;
}

.pricing-section .section-intro h2 {
  color: #ffffff;
}

.pricing-section .pricing-intro > p {
  color: #b6c4d8;
}

.pricing-intro {
  align-items: end;
  display: grid;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.55fr);
  max-width: none;
}

.pricing-intro > p {
  margin-bottom: 0.25rem;
}

.pricing-launch-offer {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #e8eef6;
  display: inline-flex;
  font-size: 0.84rem;
  gap: 0.65rem;
  line-height: 1.45;
  margin: 1.5rem 0 0;
  max-width: 100%;
  padding-block: 0.4rem;
  padding-inline: 0.4rem 0.85rem;
}

.pricing-launch-offer strong {
  background: #ffffff;
  border-radius: 999px;
  color: var(--accent);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.28rem 0.55rem;
  text-transform: uppercase;
}

.pricing-launch-offer span {
  min-width: 0;
}

.pricing-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2rem;
}

.price-card {
  background: #1b3658;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.95rem;
  padding: 1.4rem 1.35rem 1.45rem;
}

.price-name {
  align-items: center;
  color: #c5d4e6;
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  gap: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.price-tag {
  background: #ffffff;
  border-radius: 0.3rem;
  color: var(--accent);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.14rem 0.4rem;
}

.price {
  color: #ffffff;
  font-size: 2.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 1.5rem;
}

.price > span {
  color: #b7c7d9;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 0.1rem;
  vertical-align: 0.55em;
}

.price small {
  color: #c5d4e6;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
}

.price-fit {
  color: #e8eef6;
  font-size: 0.82rem;
  font-weight: 500;
  margin-top: 1.15rem;
}

.price-card-featured {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 16px 36px -18px rgba(37, 99, 235, 0.9);
}

.price-card-featured .price-name,
  .price-card-featured .price,
  .price-card-featured .price-fit,
  .price-card-featured .price > span,
  .price-card-featured .price small {
  color: #ffffff;
}

.price-card-featured .price > span,
  .price-card-featured .price small,
  .price-card-featured .price-fit {
  color: rgba(255, 255, 255, 0.88);
}

.pricing-compare {
  margin-top: 2.25rem;
}

.pricing-compare-header {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.9rem;
}

.pricing-compare-wrap {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.95rem;
  box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.55);
  overflow-x: auto;
}

.pricing-compare-table {
  border-collapse: collapse;
  min-width: 42rem;
  table-layout: fixed;
  width: 100%;
}

.pricing-compare-table th,
.pricing-compare-table td {
  padding: 0.78rem 0.9rem;
  text-align: left;
  vertical-align: middle;
}

.pricing-compare-table thead th {
  background: #f4f7fb;
  color: #5f7186;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pricing-compare-table thead th strong {
  color: var(--ink);
  display: block;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-top: 0.22rem;
}

.pricing-compare-table thead th span {
  color: #7a8ca0;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 0.22rem;
}

.pricing-compare-table thead th.pricing-ours {
  background: #e8eefc;
  box-shadow: inset 1px 0 0 #c5d4f5, inset -1px 0 0 #c5d4f5;
  color: var(--accent);
}

.pricing-compare-table thead th.pricing-ours strong {
  color: var(--accent);
}

.pricing-compare-table td.pricing-ours {
  background: #eef3ff;
  box-shadow: inset 1px 0 0 #c5d4f5, inset -1px 0 0 #c5d4f5;
}

.pricing-compare-table tbody th {
  border-top: 1px solid #e6edf5;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  width: 14.5rem;
}

.pricing-compare-table td {
  border-top: 1px solid #e6edf5;
  text-align: center;
}

.pricing-compare-table thead th:not(:first-child) {
  text-align: center;
}

.pricing-compare-table tbody tr:nth-child(even) th,
.pricing-compare-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.pricing-compare-table tbody tr:nth-child(even) td.pricing-ours {
  background: #e8eefc;
}

.pricing-yes,
.pricing-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  height: 1.45rem;
  line-height: 1;
  width: 1.45rem;
}

.pricing-yes {
  background: rgba(29, 78, 216, 0.12);
  color: #1d4ed8;
}

.pricing-compare-table td.pricing-ours .pricing-yes {
  background: #1d4ed8;
  color: #ffffff;
}

.pricing-no {
  background: #e8edf3;
  color: #5b6b7c;
}

.pricing-compare-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin: 0.85rem 0 0;
}

.pricing-compare-links a {
  color: #d7e2ef;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 0.22rem;
}

.commercial-terms {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
}

.commercial-terms span {
  color: #b7c7d9;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.commercial-terms strong {
  color: #ffffff;
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin-top: 0.35rem;
}

.pricing-section .button-primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ink);
}

.pricing-section .button-primary:hover {
  background: #dde6f0;
  border-color: #dde6f0;
}

.pricing-booking {
  color: #a9b9cd;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.pricing-booking a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.pricing-booking a:hover {
  color: #dde6f0;
}

/* 09 — FAQ */
.faq-layout {
  align-items: start;
  display: grid;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
}

.home-faq {
  border-top: 1px solid var(--hairline);
}

.home-faq details {
  border-bottom: 1px solid var(--hairline);
}

.home-faq summary {
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 0.98rem;
  font-weight: 600;
  gap: 1.5rem;
  justify-content: space-between;
  letter-spacing: -0.01em;
  list-style: none;
  padding: 1.3rem 0;
  transition: color 140ms ease;
}

.home-faq summary::-webkit-details-marker {
  display: none;
}

.home-faq summary::after {
  color: var(--faint-text);
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
}

.home-faq details[open] summary::after {
  content: "−";
}

.home-faq summary:hover {
  color: var(--accent);
}

.home-faq summary:focus-visible {
  border-radius: 0.35rem;
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 4px;
}

.home-faq details p {
  color: #54657a;
  font-size: 0.88rem;
  line-height: 1.75;
  max-width: 44rem;
  padding: 0 3rem 1.4rem 0;
}

/* Final CTA (dark band) */
.final-cta {
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}

.final-cta .section-label {
  color: #7f95b5;
}

.final-cta-inner {
  align-items: center;
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.final-cta h2 {
  color: #ffffff;
  font-size: clamp(1.7rem, 2.9vw, 2.45rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-top: 1.1rem;
  max-width: 24ch;
}

.final-cta p:not(.section-label) {
  color: #a9b9cd;
  font-size: 0.92rem;
  line-height: 1.65;
  margin-top: 1rem;
}

.final-cta .button-primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ink);
}

.final-cta .button-primary:hover {
  background: #dde6f0;
  border-color: #dde6f0;
}

.final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  text-align: center;
}

.final-cta .button-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.38);
  color: #ffffff;
}

.final-cta .button-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}

.final-cta-alt {
  color: #a9b9cd;
  font-size: 0.85rem;
  margin: 0.15rem 0 0;
}

.final-cta-alt a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.final-cta-alt a:hover {
  color: #dde6f0;
}

/* Footer */
.home-page .site-footer {
  border-top: 1px solid var(--hairline);
}

.home-page .footer-meta {
  color: var(--faint-text);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  /* routes draw once on load: the plan being computed */
  .planner-route {
    animation: route-draw 1s cubic-bezier(0.6, 0, 0.2, 1) forwards;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .planner-route-one {
    animation-delay: 0.1s;
  }

  .planner-route-two {
    animation-delay: 0.25s;
  }

  .planner-route-three {
    animation-delay: 0.45s;
  }

  /* the insertion appears after the plan exists */
  .planner-route-inserted,
  .planner-incoming-stop {
    animation: planner-fade 0.45s ease-out 1.2s forwards;
    opacity: 0;
  }

  .planner-incoming-ring {
    animation: ring-pulse 2.8s ease-out 1.8s infinite;
  }

  .home-phone-frame {
    animation: phone-idle 8s ease-in-out infinite;
  }

  .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.55s ease,
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

@keyframes route-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes planner-fade {
  to {
    opacity: 1;
  }
}

@keyframes ring-pulse {
  0% {
    opacity: 0.55;
    r: 9;
  }
  65%,
  100% {
    opacity: 0;
    r: 20;
  }
}

@keyframes phone-idle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .home-phone-frame {
    animation: none;
  }
}

@media (max-width: 1080px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
  }

  .home-hero-copy {
    max-width: 52rem;
    padding-bottom: 0;
  }

  .home-hero h1 {
    max-width: 18ch;
  }

  .planner-preview {
    margin-inline: auto;
    max-width: 56rem;
    width: 100%;
  }

  .laptop-device {
    max-width: 48rem;
  }

  .savings-statement {
    margin-top: 3.25rem;
  }
}

@media (max-width: 900px) {
  .savings-statement {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .savings-statement .savings-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .planning-layout,
  .planning-driver,
  .constraints-layout,
  .onboarding-layout,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .constraints-layout {
    gap: 2rem;
  }

  .constraint-strip {
    border-top: 1px solid var(--hairline);
    margin-top: 0.25rem;
    padding-top: 1.35rem;
  }

  .proof-intro,
  .pricing-intro {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .busy-day-process {
    grid-template-columns: 1fr;
  }

  .onboarding-steps li {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .onboarding-steps p {
    grid-column: 2;
  }

  .driver-product {
    margin-inline: auto;
    margin-top: 1rem;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-card {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 1200px) {
  .home-page .nav-links {
    gap: 0.35rem;
  }
}

@media (max-width: 760px) {

  .planner-preview.planner-laptop {
    container-type: inline-size;
    max-width: none;
    overflow: hidden;
    width: 100%;
  }

  .console-stage {
    --console-design: 51rem;
    --console-native-h: 34.75rem;
    --console-scale: calc(100cqi / var(--console-design));
    height: var(--console-native-h);
    margin-bottom: calc(var(--console-native-h) * var(--console-scale) - var(--console-native-h));
    transform: scale(var(--console-scale));
    transform-origin: top left;
    width: var(--console-design);
  }

  .console-stage .laptop-device {
    max-width: 50rem;
    padding: 0 2.5% 0.8rem;
    width: 50rem;
  }

  .home-hero {
    padding-top: 3.5rem;
  }

  .home-hero h1 {
    font-size: clamp(2.15rem, 9.5vw, 2.9rem);
  }

  .home-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-hero-actions .button {
    width: 100%;
  }

  .lead-form-row {
    border-radius: 1rem;
    padding: 0.22rem 0.22rem 0.22rem 0.85rem;
  }

  .lead-form-row .button {
    border-radius: 0.8rem;
    min-height: 2.45rem;
    padding-inline: 0.95rem;
  }

  .lead-capture.is-active {
    padding: 0.85rem 1.1rem 1.15rem;
  }

  .lead-details-fields {
    grid-template-columns: 1fr;
  }

  .savings-statement {
    gap: 1.75rem;
    grid-template-columns: 1fr;
  }

  .home-hero-assurance {
    font-size: 0.8rem;
  }

  .home-section {
    padding-block: 4.5rem;
  }

  /* rails become vertical */
  .contrast-row ol {
    display: block;
    margin-top: 1.25rem;
  }

  .contrast-row li {
    padding: 0 0 1.15rem 1.6rem;
  }

  .contrast-row li:last-child {
    padding-bottom: 0;
  }

  .contrast-row li::before {
    left: 0;
    top: 3px;
  }

  .contrast-old li:not(:last-child)::after {
    border-left: 1.5px dashed #c6d0dc;
    border-top: 0;
    bottom: 2px;
    left: 4px;
    right: auto;
    top: 16px;
    width: 0;
  }

  .contrast-route-optima li::before {
    top: 2px;
  }

  .contrast-route-optima li:not(:last-child)::after {
    bottom: -6px;
    height: auto;
    left: 4.25px;
    right: auto;
    top: 8px;
    width: 2.5px;
  }

  .busy-day-process > ol {
    gap: 0;
    grid-template-columns: 1fr;
    padding: 0;
  }

  .busy-day-process > ol li {
    border-bottom: 1px solid var(--hairline);
    border-left: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    padding: 1.15rem 0;
  }

  .busy-day-process > ol li:last-child {
    border-bottom: 0;
  }

  .comparison-maps {
    grid-template-columns: 1fr;
  }

  .comparison-maps > div + div {
    border-left: 0;
    border-top: 0;
  }

  .comparison-maps::after {
    content: "↓";
  }

  .comparison-result {
    gap: 0.75rem 1.75rem;
  }

  .comparison-link {
    flex-basis: 100%;
    margin-left: 0;
  }

  .proof-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .proof-cta .button {
    width: 100%;
  }

  .final-cta-inner {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .final-cta .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .home-hero {
    padding-top: 2.75rem;
  }

  .constraint-strip {
    grid-template-columns: 1fr;
  }

  .home-kicker,
  .section-label {
    font-size: 0.62rem;
  }

  .onboarding-steps li {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .pricing-launch-offer {
    align-items: center;
    border-radius: 1.1rem;
    display: inline-flex;
    gap: 0.7rem;
    max-width: 100%;
    padding: 0.7rem 0.85rem;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .commercial-terms {
    grid-template-columns: 1fr;
  }

  .commercial-terms .button {
    width: 100%;
  }

  .home-faq details p {
    padding-right: 0;
  }

  .comparison-chrome span + span {
    display: none;
  }
}

.platform-toc {
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.35rem;
  list-style: none;
  margin: 0;
  max-width: 52rem;
  padding: 1.15rem 0 3.25rem;
}

.home-page section[id] {
  scroll-margin-top: 5rem;
}

.platform-toc a {
  color: var(--muted-text);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.platform-toc a:hover {
  color: var(--ink);
}

.platform-facts {
  display: grid;
  gap: 0 3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.75rem;
}

.platform-facts article {
  border-top: 1px solid var(--hairline);
  padding: 1.35rem 0 1.5rem;
}

.platform-facts h3 {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.platform-facts h3::before {
  background: var(--accent);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.4rem;
  margin-right: 0.55rem;
  vertical-align: 0.12rem;
  width: 0.4rem;
}

.platform-facts p {
  color: #54657a;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 0.45rem;
}

#clients .access-showcase {
  margin-top: 2.5rem;
}

.platform-split {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(14rem, 0.7fr);
  margin-top: 2.75rem;
}

.platform-copy p {
  color: #54657a;
  font-size: 0.98rem;
  line-height: 1.75;
}

.platform-copy p + p {
  margin-top: 1rem;
}

.platform-copy ul {
  color: #54657a;
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 1.15rem 0 0;
  padding-left: 1.15rem;
}

.platform-copy li + li {
  margin-top: 0.45rem;
}

.platform-pair {
  display: grid;
  gap: 0 3.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.5rem;
}

.platform-pair article {
  border-top: 1px solid var(--hairline);
  padding-top: 1.35rem;
}

.platform-pair h3 {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.platform-pair h3::before {
  background: var(--accent);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.4rem;
  margin-right: 0.55rem;
  vertical-align: 0.12rem;
  width: 0.4rem;
}

.platform-pair p {
  color: #54657a;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 0.55rem;
}

.platform-facts-lift,
  .platform-pair-lift {
  gap: 0.85rem;
}

.platform-facts-lift article,
  .platform-pair-lift article {
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  box-shadow: 0 14px 32px -28px rgba(11, 30, 56, 0.4);
  padding: 1.35rem 1.4rem 1.45rem;
}

.platform-split .driver-product {
  justify-self: end;
  margin: 0;
  max-width: 16.25rem;
}

@media (max-width: 900px) {
  .platform-facts,
  .platform-split,
  .platform-pair {
    grid-template-columns: 1fr;
  }

  .platform-facts {
    gap: 0;
  }

  .band-field .platform-facts,
  .band-field .platform-pair,
  .platform-facts-lift,
  .platform-pair-lift {
    gap: 0.85rem;
  }

  .platform-split .driver-product {
    justify-self: center;
  }

}

.platform-hero {
  padding: 4.25rem 0 0;
}

.platform-hero h1 {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-top: 1.2rem;
  max-width: 24ch;
}

.platform-hero .home-hero-lede {
  max-width: 44rem;
  padding-bottom: 1.35rem;
}

.console-wrap {
  margin: 2.75rem auto 0;
  max-width: 62rem;
}

.platform-console-preview .laptop-caption {
  color: var(--faint-text);
}

.lifecycle-layout {
  align-items: start;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  margin-top: 0;
}

.lifecycle-layout .section-intro {
  max-width: none;
}

.lifecycle-layout .platform-copy {
  margin-top: 1.35rem;
}

.lifecycle-aside-label {
  color: var(--muted-text);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-bottom: 0.9rem;
  text-transform: uppercase;
}

.band-ink .lifecycle-aside-label {
  color: #8aa0bb;
}

.band-ink .plan-preview {
  background: #ffffff;
}

.whitelabel-note {
  border-left: 2px solid var(--accent);
  color: var(--body-text);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 2.5rem auto 0;
  max-width: 46rem;
  padding-left: 1rem;
}

.whitelabel-note strong {
  color: var(--ink);
}

.faq-homepage-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

@media (max-width: 900px) {
  .lifecycle-layout {
    grid-template-columns: 1fr;
  }
}

.home-page .page-hero {
  background: #ffffff;
  border-bottom: 1px solid var(--hairline);
}

.home-page .page-hero h1 {
  letter-spacing: -0.03em;
  margin-top: 1.2rem;
  max-width: 18ch;
}

.home-page .cta-band {
  background: var(--ink);
  border: 0;
  color: #ffffff;
}

.home-page .cta-band h2,
  .home-page .cta-band p {
  color: #ffffff;
}

.home-page .cta-band p {
  color: #a9b9cd;
}

.home-page .cta-band .button-primary {
  background: #ffffff;
  color: var(--ink);
}

.home-page .cta-band .button-primary:hover {
  background: #dde6f0;
}

.report-hero {
  padding: 4.25rem 0 3rem;
}

.report-hero h1 {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-top: 1.2rem;
  max-width: 22ch;
}

.report-hero .home-hero-lede {
  color: var(--muted-text);
  max-width: 42rem;
}

.report-hero .home-hero-lede strong {
  color: var(--ink);
}

.report-section {
  border-top: 1px solid var(--hairline);
  padding: 3.5rem 0;
}

.report-table-wrap {
  margin-top: 2.5rem;
  overflow-x: auto;
}

.report-table {
  border-collapse: collapse;
  min-width: 44rem;
  width: 100%;
}

.report-table th {
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--muted-text);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  padding: 0.7rem 1rem 0.7rem 0;
  text-align: left;
  text-transform: uppercase;
}

.report-table td {
  border-bottom: 1px solid var(--hairline);
  color: var(--body-text);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  padding: 0.85rem 1rem 0.85rem 0;
}

.report-table td:first-child {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.report-table tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-weight: 600;
}

.report-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.report-chips li {
  border: 1px solid var(--hairline-strong);
  border-radius: 2rem;
  color: var(--body-text);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
}

.report-notes {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 36rem);
}

.report-notes h3 {
  color: var(--ink);
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}

.report-notes ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.report-notes li {
  border-top: 1px solid var(--hairline);
  color: var(--body-text);
  font-size: 0.88rem;
  line-height: 1.65;
  padding: 0.85rem 0;
}

.sample-flag {
  background: rgba(29, 78, 216, 0.07);
  border: 1px solid rgba(29, 78, 216, 0.22);
  border-radius: 0.55rem;
  color: var(--body-text);
  font-size: 0.85rem;
  line-height: 1.65;
  margin-top: 2rem;
  max-width: 46rem;
  padding: 0.85rem 1.1rem;
}

.sample-flag strong {
  color: var(--ink);
}

@media (max-width: 760px) {
  .report-notes {
    grid-template-columns: 1fr;
  }
}