@layer reset, base, components, sections, responsive;

@property --field-highlight-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --field-highlight-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 120px;
}

@property --field-corner-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --field-glow-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.15;
}

@keyframes product-field-focus-sweep {
  0% {
    background-position: 100% 0;
    opacity: 0;
  }

  18% {
    opacity: 0.78;
  }

  100% {
    background-position: 0 0;
    opacity: 0;
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: auto;
    scroll-padding-top: 104px;
  }

  section[id] {
    scroll-margin-top: 128px;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  ul,
  ol {
    margin: 0;
  }

  ul,
  ol {
    padding: 4px;
    border-radius: 18px;
    background: color-mix(in srgb, white, transparent 54%);
  }

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

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

@layer base {
  :root {
    color-scheme: light;
    --font-body: "Satoshi", "Inter", system-ui, sans-serif;
    --font-display: "Outfit", "Satoshi", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --blue: #1e91fb;
    --blue-deep: #1766df;
    --blue-dark: #0a48a6;
    --green: #7daa89;
    --green-deep: #3e7355;
    --mint: #c0e3cb;

    --page: #f5f7fb;
    --page-deep: #eaf0f8;
    --surface: #fbfcfe;
    --surface-raised: #ffffff;
    --surface-tint: #edf5ff;
    --ink: #16283b;
    --ink-soft: #4a6175;
    --ink-muted: #5f7487;
    --line: rgba(38, 76, 111, 0.14);
    --line-strong: rgba(38, 76, 111, 0.24);
    --rule-primary: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--blue-deep), transparent 62%) 24%,
      var(--blue-deep) 50%,
      color-mix(in srgb, var(--blue-deep), transparent 62%) 76%,
      transparent 100%
    );
    --rule-primary-vertical: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--blue-deep), transparent 62%) 24%,
      var(--blue-deep) 50%,
      color-mix(in srgb, var(--blue-deep), transparent 62%) 76%,
      transparent 100%
    );
    --focus: #0f66db;
    --positive-surface: #e5f4e9;
    --night: #071b36;
    --night-raised: #0c2547;
    --night-soft: #b9c9da;
    --night-line: rgba(196, 220, 245, 0.2);
    --ink-inverse: #f4f8fd;

    --shadow-sm: 0 10px 32px rgba(24, 65, 105, 0.09);
    --shadow-md: 0 20px 54px rgba(24, 65, 105, 0.13);
    --shadow-lg: 0 32px 90px rgba(24, 65, 105, 0.17);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Shape rule: buttons are pills, fields use 14px, large surfaces use 28px. */
    --radius-field: 14px;
    --radius-media: 22px;
    --radius-surface: 28px;
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 12% 5%, rgba(30, 145, 251, 0.09), transparent 27rem),
      radial-gradient(circle at 88% 14%, rgba(125, 170, 137, 0.11), transparent 25rem),
      var(--page);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.62;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    position: fixed;
    inset: 0;
    z-index: 20;
    background-image:
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.3) 0 0.6px, transparent 0.8px),
      radial-gradient(circle at 70% 80%, rgba(16, 49, 78, 0.15) 0 0.5px, transparent 0.7px);
    background-position: 0 0, 4px 7px;
    background-size: 11px 11px, 13px 13px;
    content: "";
    opacity: 0.14;
    pointer-events: none;
  }

  ::selection {
    background: rgba(30, 145, 251, 0.25);
  }

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

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.02;
    text-wrap: balance;
  }

  h2 {
    font-size: clamp(2.45rem, 5.4vw, 5.2rem);
  }

  h3 {
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
  }

  .container {
    width: min(100% - 40px, 1180px);
    margin-inline: auto;
  }

  .section {
    position: relative;
    padding-block: clamp(112px, 13vw, 176px);
  }

  .section-heading {
    max-width: 840px;
  }

  .section-heading p,
  .ride-heading > p,
  .founder-statement > p {
    max-width: 63ch;
    margin-top: 24px;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.3vw, 1.14rem);
  }

  .section-kicker {
    margin-bottom: 18px;
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--page);
    transform: translateY(-160%);
    transition: transform 0.2s var(--ease);
  }

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

  .header-trigger {
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .motion-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

@layer components {
  .btn {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    transition:
      color 0.25s var(--ease),
      background 0.25s var(--ease),
      border-color 0.25s var(--ease),
      box-shadow 0.25s var(--ease),
      transform 0.25s var(--ease);
  }

  .btn:hover {
    transform: translateY(-2px);
  }

  .btn:active {
    transform: scale(0.98);
  }

  .btn-primary {
    background: var(--blue-deep);
    box-shadow: 0 12px 30px rgba(23, 102, 223, 0.28);
    color: #f8fbff;
  }

  .btn-primary:hover {
    background: var(--blue-dark);
    box-shadow: 0 16px 38px rgba(23, 102, 223, 0.34);
  }

  .btn-secondary {
    border-color: var(--line-strong);
    background: var(--surface-raised);
    color: var(--blue-deep);
  }

  .btn-secondary:hover {
    border-color: var(--blue);
    background: var(--surface-tint);
  }

  .btn-small {
    min-height: 42px;
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  .btn-wide {
    width: 100%;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue-deep);
    font-weight: 700;
  }

  .text-link span {
    transition: transform 0.25s var(--ease);
  }

  .text-link:hover span {
    transform: translate(3px, -3px);
  }

  .site-header {
    position: sticky;
    top: 10px;
    z-index: 100;
    height: 0;
    pointer-events: none;
  }

  .site-header::before {
    position: fixed;
    top: -12px;
    right: 0;
    left: 0;
    height: 112px;
    background: linear-gradient(var(--page) 68%, transparent);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }

  .site-header.is-scrolled::before {
    opacity: 0.34;
  }

  .header-inner {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 12px 6px 8px;
    border: 1px solid color-mix(in srgb, white, transparent 48%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--page) 58%, transparent);
    pointer-events: auto;
    transition:
      background 0.3s var(--ease),
      border-color 0.3s var(--ease),
      box-shadow 0.3s var(--ease),
      transform 0.3s var(--ease);
    backdrop-filter: blur(20px) saturate(155%);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
  }

  .site-header.is-scrolled .header-inner {
    border-color: color-mix(in srgb, var(--line-strong), white 42%);
    background: color-mix(in srgb, var(--surface-raised) 64%, transparent);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--blue-deep), transparent 86%);
  }

  .brand {
    display: inline-flex;
    width: 62px;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 18px;
    background: color-mix(in srgb, white, transparent 54%);
  }

  .brand-mark {
    display: inline-flex;
    align-items: center;
  }

  .brand-mark img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    object-position: center 46%;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .site-nav > a:not(.btn) {
    padding: 10px 13px;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition:
      color 0.2s var(--ease),
      background 0.2s var(--ease);
  }

  .site-nav > a:not(.btn):hover,
  .site-nav > a:not(.btn).is-active {
    background: rgba(30, 145, 251, 0.09);
    color: var(--ink);
  }

  .nav-cta {
    margin-left: 6px;
  }

  .menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--ink);
  }

  .menu-line {
    display: block;
    width: 20px;
    height: 2px;
    margin: 5px auto;
    background: currentColor;
    transition: transform 0.25s var(--ease);
  }

  .menu-toggle[aria-expanded="true"] .menu-line:nth-of-type(2) {
    transform: translateY(3.5px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-line:nth-of-type(3) {
    transform: translateY(-3.5px) rotate(-45deg);
  }

}

@layer sections {
  .hero {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    padding: 106px 0 32px;
    overflow: clip;
    background:
      radial-gradient(circle at 78% 42%, rgba(30, 145, 251, 0.11), transparent 30rem),
      radial-gradient(circle at 63% 72%, rgba(192, 227, 203, 0.18), transparent 24rem);
  }

  .hero::before {
    position: absolute;
    z-index: -1;
    inset: 96px 0 0 42%;
    background-image: radial-gradient(circle, rgba(23, 102, 223, 0.16) 1px, transparent 1.5px);
    background-size: 34px 34px;
    content: "";
    mask-image: linear-gradient(130deg, transparent 4%, #000 38%, transparent 88%);
    opacity: 0.32;
    pointer-events: none;
  }

  .hero-inner {
    position: relative;
    display: grid;
    min-height: calc(100dvh - 138px);
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
    align-items: stretch;
    gap: 0;
  }

  .hero-copy {
    position: relative;
    z-index: 3;
    align-self: start;
    max-width: 720px;
    padding-top: clamp(64px, 9vh, 112px);
    text-align: left;
  }

  .hero-copy h1 {
    max-width: 18.5ch;
    font-size: clamp(3.5rem, 5.35vw, 5rem);
    line-height: 0.92;
    letter-spacing: -0.052em;
    text-wrap: balance;
  }

  .hero-copy h1 > span {
    display: block;
    color: var(--ink);
  }

  .hero-copy h1 > span:last-child {
    white-space: nowrap;
  }

  .hero-copy h1 strong {
    color: var(--blue-deep);
    font: inherit;
  }

  .hero-lead {
    max-width: 56ch;
    margin: 28px 0 0;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.45vw, 1.2rem);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 30px;
  }

  .hero-media {
    position: relative;
    min-height: 260px;
    max-height: 390px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface-tint);
    box-shadow: var(--shadow-lg);
  }

  .hero-media::after {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 58%, rgba(14, 50, 82, 0.1)),
      linear-gradient(90deg, rgba(245, 247, 251, 0.28), transparent 35%);
    content: "";
    pointer-events: none;
  }

  .hero-media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    max-height: 390px;
    object-fit: cover;
    object-position: center 48%;
  }

  .character-stage {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .character-stage::before {
    position: absolute;
    z-index: -1;
    inset: 18% 14% 8%;
    border-radius: 50%;
    background:
      radial-gradient(circle at 52% 58%, rgba(192, 227, 203, 0.55), transparent 46%),
      radial-gradient(circle at 48% 46%, rgba(30, 145, 251, 0.16), transparent 70%);
    content: "";
    filter: blur(18px);
    pointer-events: none;
  }

  .hero-media.character-stage,
  .rescue-media.character-stage {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .hero-media.character-stage::after {
    display: none;
  }

  .hero-media.character-stage img,
  .rescue-media.character-stage img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 24px 28px rgba(24, 65, 105, 0.16));
    pointer-events: none;
  }

  .hero-media.character-stage {
    z-index: 1;
    align-self: end;
    justify-self: end;
    width: min(78vw, 980px);
    margin-right: clamp(-160px, -8vw, -80px);
    margin-bottom: -8px;
  }

  .toby-media-caption {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 16px;
    display: grid;
    gap: 1px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 30px rgba(25, 64, 96, 0.12);
    color: var(--ink);
    line-height: 1.1;
    backdrop-filter: blur(14px);
  }

  .toby-media-caption strong {
    font-family: var(--font-display);
    font-size: 0.86rem;
  }

  .toby-media-caption span {
    color: var(--ink-soft);
    font-size: 0.68rem;
  }

  .route-marquee {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    background-image: var(--rule-primary), var(--rule-primary);
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .route-marquee::before,
  .route-marquee::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: min(12vw, 150px);
    content: "";
    pointer-events: none;
  }

  .route-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--surface), transparent);
  }

  .route-marquee::after {
    right: 0;
    background: linear-gradient(-90deg, var(--surface), transparent);
  }

  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 34s linear infinite;
  }

  .route-marquee:hover .marquee-track,
  .route-marquee:focus-within .marquee-track {
    animation-play-state: paused;
  }

  .marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .marquee-group a,
  .marquee-group span {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    padding: 20px 28px;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    font-weight: 500;
    white-space: nowrap;
  }

  .marquee-group a::after,
  .marquee-group span::after {
    width: 8px;
    height: 8px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    content: "";
  }

  .marquee-group a:hover {
    color: var(--blue-deep);
  }

  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }

  .paths-section {
    padding-top: clamp(88px, 9vw, 128px);
    padding-bottom: clamp(88px, 9vw, 128px);
  }

  .product-surface-card {
    --surface-notch-bg: color-mix(in srgb, var(--surface-raised) 98%, var(--page));
    --surface-notch-corner: color-mix(in srgb, var(--blue-deep) 50%, var(--surface-raised));
    --surface-notch-inner: var(--surface-notch-bg);
    --surface-accent: color-mix(in srgb, var(--blue-deep), transparent 50%);
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .product-surface-card::before {
    position: absolute;
    inset: 0;
    z-index: 6;
    background:
      linear-gradient(
          90deg,
          transparent 30%,
          var(--surface-accent) 50%,
          transparent 70%
        )
        top / 100% 1px no-repeat,
      linear-gradient(
          90deg,
          transparent 0%,
          var(--surface-accent) 50%,
          transparent 100%
        )
        bottom / 100% 1px no-repeat;
    content: "";
    pointer-events: none;
  }

  .product-surface-card.has-surface-notch::before {
    background:
      linear-gradient(
          90deg,
          transparent 0%,
          var(--surface-accent) 50%,
          transparent 100%
        )
        bottom / 100% 1px no-repeat;
  }

  .product-surface-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 40px;
    height: 40px;
    background: var(--blue-deep);
    clip-path: path("M 0 40 C 0 40 0 0 40 0 L 0 0 Z");
    content: "";
    pointer-events: none;
    transform: scale(-1, -1);
  }

  .product-surface-card[data-smooth-corner="top-left"]::after {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    transform: none;
  }

  .product-surface-card[data-smooth-corner="top-right"]::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    transform: scaleX(-1);
  }

  .product-surface-card[data-smooth-corner="bottom-left"]::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
  }

  .product-surface-card[data-smooth-corner="bottom-right"]::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    transform: scale(-1, -1);
  }

  .product-surface-card > * {
    position: relative;
    z-index: 1;
  }

  .channel-strip {
    display: grid;
    width: min(100%, 760px);
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: 0;
    list-style: none;
  }

  .channel-strip li {
    display: grid;
    min-width: 0;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .channel-strip li:first-child {
    padding-left: 0;
  }

  .channel-strip li:last-child {
    padding-right: 0;
  }

  .channel-strip img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .channel-strip li > span {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .channel-strip strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .channel-strip sup {
    margin-left: 1px;
    color: var(--green-deep);
    font-size: 0.72em;
    vertical-align: super;
  }

  .channel-strip li > span > span {
    color: var(--ink-muted);
    font-size: 0.7rem;
    line-height: 1.25;
  }

  .channel-strip-compact {
    width: min(100%, 500px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
  }

  .channel-details {
    display: grid;
    width: min(100%, 760px);
    gap: 8px;
  }

  .channel-note {
    margin-top: 8px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .path-content .channel-note {
    margin-top: 10px;
  }

  .surface-notch {
    position: absolute !important;
    top: 0;
    left: 50%;
    z-index: 5 !important;
    transform: translateX(-50%);
  }

  .surface-notch-shell {
    position: relative;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .surface-notch-shell::before {
    position: absolute;
    top: 0;
    left: -48px;
    z-index: 4;
    width: calc(100% + 96px);
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0,
      var(--surface-accent) 10px,
      var(--surface-accent) calc(100% - 10px),
      transparent 100%
    );
    content: "";
    pointer-events: none;
  }

  .surface-notch-content {
    position: relative;
    display: flex;
    height: 28px;
    max-width: 340px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    background: var(--surface-notch-bg);
    color: var(--ink);
    white-space: nowrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .surface-notch-label {
    position: relative;
    z-index: 2;
    display: flex;
    max-width: 340px;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }

  .surface-notch-label > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .surface-notch-label > span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.25em;
    line-height: 1;
    text-transform: uppercase;
  }

  .surface-notch .smooth-corner {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .surface-notch-outer-left,
  .surface-notch-outer-right {
    top: 0;
    width: 18px;
    height: 15px;
    z-index: 0;
    fill: var(--surface-notch-corner);
  }

  .surface-notch-outer-left {
    right: calc(100% - 1px);
    mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 100%);
  }

  .surface-notch-outer-right {
    left: calc(100% - 1px);
    mask-image: linear-gradient(to left, #000 0%, #000 45%, transparent 100%);
  }

  .surface-notch-inner-left,
  .surface-notch-inner-right {
    bottom: 0;
    z-index: 1;
    width: 24px;
    height: 24px;
    fill: var(--surface-notch-inner);
  }

  .surface-notch-inner-left {
    left: 0;
  }

  .surface-notch-inner-right {
    right: 0;
  }

  .surface-notch-outline {
    position: absolute;
    top: 0;
    left: -18px;
    z-index: 3;
    display: block;
    overflow: visible;
    fill: none;
    pointer-events: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6px;
  }

  .surface-notch-outline stop {
    stop-color: var(--surface-notch-corner);
  }

  .path-stack {
    display: grid;
    gap: 34px;
    margin-top: clamp(52px, 6vw, 80px);
  }

  .path-card {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background:
      radial-gradient(circle at 22% 48%, rgba(30, 145, 251, 0.08), transparent 38%),
      var(--surface-raised);
    box-shadow: var(--shadow-md);
    transform-origin: top center;
  }

  .path-card:nth-child(2),
  .path-card:nth-child(4) {
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    background:
      radial-gradient(circle at 78% 48%, rgba(125, 170, 137, 0.12), transparent 38%),
      var(--surface-raised);
  }

  .path-card:nth-child(odd) .path-media {
    order: -1;
  }

  .path-card:nth-child(2) .path-media,
  .path-card:nth-child(4) .path-media {
    order: 2;
  }

  .path-card:nth-child(3) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  }

  .path-media {
    position: relative;
    z-index: 2;
    align-self: center;
    min-height: 0;
    overflow: visible;
    padding: clamp(14px, 2.5vw, 34px) clamp(6px, 1.5vw, 20px);
    background: transparent;
  }

  .path-media::before {
    position: absolute;
    z-index: -1;
    inset: 18% 9% 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 219, 255, 0.26), transparent 68%);
    content: "";
    filter: blur(16px);
    pointer-events: none;
  }

  .path-media img {
    display: block;
    width: 108%;
    max-width: none;
    height: auto;
    margin-inline: -4%;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(24, 65, 105, 0.14));
    transform-origin: center;
  }

  .path-content {
    position: relative;
    z-index: 3;
    display: flex;
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 4vw, 56px);
  }

  .path-status {
    max-width: 48ch;
    margin-bottom: 26px;
    color: var(--ink-muted);
    font-size: 0.86rem;
  }

  .path-status strong {
    color: var(--green-deep);
  }

  .ship-status {
    display: grid;
    grid-template-columns: 73px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }

  .ship-status > img {
    display: block;
    width: auto;
    height: 100px;
    object-fit: contain;
  }

  .ship-status .ship-wordmark {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.95;
  }

  .ship-status .ship-wordmark strong {
    color: var(--green-deep);
  }

  .ship-status-copy {
    display: grid;
    gap: 8px;
  }

  .ship-status-copy p {
    margin: 0;
  }

  .ship-path-media {
    align-content: center;
  }

  .path-card .ship-path-media img {
    width: 118%;
    height: auto;
    margin-left: -10%;
  }

  .path-content .ship-cta {
    margin-top: 28px;
  }

  .path-content h3 {
    max-width: 15ch;
  }

  .path-content > p:not(.path-status) {
    max-width: 48ch;
    margin-top: 20px;
    color: var(--ink-soft);
  }

  .path-content .text-link {
    margin-top: 32px;
  }

  .ride-section {
    background:
      radial-gradient(circle at 15% 12%, rgba(30, 145, 251, 0.12), transparent 24rem),
      var(--page-deep);
  }

  .ride-section.section {
    padding-block: clamp(80px, 8vw, 112px);
  }

  .ride-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    align-items: center;
    gap: clamp(36px, 5vw, 72px);
  }

  .ride-heading {
    max-width: 1050px;
  }

  .ride-heading h2 {
    max-width: 20ch;
  }

  .ride-intro .ride-heading h2 {
    max-width: none;
    font-size: clamp(2.8rem, 4.6vw, 4.8rem);
  }

  .ride-hero-device {
    margin: 0;
    text-align: center;
  }

  .ride-hero-device img {
    width: min(100%, 660px);
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 24px 30px rgba(24, 65, 105, 0.14));
  }

  .ride-story {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(32px, 5vw, 72px);
    margin-top: clamp(64px, 7vw, 96px);
  }

  .ride-sticky-copy {
    align-self: start;
    padding-top: 18px;
  }

  .ride-sticky-copy h3 {
    max-width: 12ch;
  }

  .ride-benefits {
    display: grid;
    gap: 26px;
    margin: 38px 0;
    list-style: none;
  }

  .ride-benefits li {
    display: grid;
    gap: 5px;
    padding-left: 18px;
    border-left: 2px solid var(--line-strong);
  }

  .ride-benefits strong {
    color: var(--ink);
    font-size: 0.98rem;
  }

  .ride-benefits span {
    color: var(--ink-soft);
    font-size: 0.9rem;
  }

  .ride-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 30px);
  }

  .ride-screen {
    margin: 0;
    min-width: 0;
    text-align: center;
  }

  .ride-screen img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 22px 26px rgba(24, 65, 105, 0.12));
    transition: transform 0.7s var(--ease);
  }

  .ride-screen:hover img {
    transform: scale(1.02);
  }

  .ride-screen figcaption,
  .phone-concept figcaption {
    margin-top: 13px;
    color: var(--ink-muted);
    font-size: 0.84rem;
  }

  .mobile-concepts {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 2.28fr);
    align-items: center;
    gap: clamp(28px, 5vw, 68px);
    margin-top: clamp(80px, 10vw, 128px);
    padding-top: clamp(40px, 5vw, 64px);
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .mobile-concepts-copy {
    max-width: 330px;
  }

  .mobile-concepts-copy h3 {
    max-width: 12ch;
    font-size: clamp(2rem, 3.3vw, 3.55rem);
  }

  .mobile-concepts-copy p {
    margin-top: 24px;
    color: var(--ink-soft);
  }

  .phone-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(4px, 1.4vw, 18px);
    margin-top: 0;
  }

  .phone-concept {
    min-width: 0;
    text-align: center;
  }

  .phone-concept:nth-child(2) {
    transform: translateY(24px);
  }

  .phone-concept img {
    display: block;
    width: min(100%, 330px);
    height: auto;
    margin-inline: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: transform 0.7s var(--ease);
  }

  .phone-concept:hover img {
    transform: scale(1.025);
  }

  .ride-proof {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 52px);
    margin-top: clamp(64px, 7vw, 92px);
    padding-top: 28px;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    color: var(--ink-soft);
  }

  .channel-summary {
    display: grid;
    max-width: 28ch;
    flex: 0 0 auto;
    gap: 5px;
  }

  .channel-summary strong,
  .ride-proof strong {
    color: var(--ink);
  }

  .channel-summary span {
    font-size: 0.88rem;
  }

  .pricing-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(64px, 8vw, 112px);
  }

  .price-card {
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
  }

  .price-card.has-surface-notch {
    padding-top: clamp(60px, 5vw, 72px);
  }

  .price-card-ride {
    grid-column: span 7;
    background:
      radial-gradient(circle at 90% 10%, rgba(30, 145, 251, 0.14), transparent 18rem),
      var(--surface-raised);
  }

  .price-card-rescue {
    grid-column: span 5;
  }

  .price-card-variable {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 5vw, 70px);
    background: var(--surface-tint);
  }

  .price-title p,
  .price-overline {
    margin-bottom: 10px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .price-title h3 {
    max-width: 14ch;
  }

  .price-title > span {
    display: inline-block;
    margin-top: 18px;
    color: var(--green-deep);
    font-size: 0.84rem;
    font-weight: 700;
  }

  .price-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 36px 0;
  }

  .price-figures-stacked {
    grid-template-columns: 1fr;
  }

  .price-figures > div {
    display: grid;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .price-figures strong {
    color: var(--blue-deep);
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.3vw, 2.35rem);
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .price-figures small {
    font-size: 0.52em;
    letter-spacing: 0;
  }

  .price-figures span,
  .price-note,
  .price-card-variable > p {
    color: var(--ink-soft);
    font-size: 0.91rem;
  }

  .terms-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    list-style: none;
  }

  .terms-list li {
    position: relative;
    padding-left: 18px;
    color: var(--ink-soft);
    font-size: 0.88rem;
  }

  .terms-list li::before {
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 7px;
    height: 7px;
    border: 2px solid var(--green);
    border-radius: 50%;
    content: "";
  }

  .payment-note {
    margin-top: 28px;
    color: var(--ink-muted);
    font-size: 0.88rem;
  }

  .rescue-section {
    background:
      radial-gradient(circle at 80% 20%, rgba(125, 170, 137, 0.17), transparent 23rem),
      var(--page-deep);
  }

  .rescue-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(48px, 9vw, 128px);
  }

  .rescue-media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface-tint);
    box-shadow: var(--shadow-lg);
  }

  .rescue-media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.8s var(--ease);
  }

  .rescue-media:hover img {
    filter:
      drop-shadow(0 24px 28px rgba(24, 65, 105, 0.16))
      drop-shadow(0 0 20px rgba(30, 145, 251, 0.08));
  }

  .rescue-copy > p:not(.section-kicker, .rescue-limit) {
    max-width: 56ch;
    margin-top: 22px;
    color: var(--ink-soft);
  }

  .rescue-steps {
    display: grid;
    gap: 26px;
    margin: 38px 0;
    list-style: none;
  }

  .rescue-steps li {
    display: grid;
    gap: 4px;
    padding-left: 20px;
    border-left: 2px solid var(--blue);
  }

  .rescue-steps strong {
    color: var(--ink);
  }

  .rescue-steps span,
  .rescue-limit {
    color: var(--ink-soft);
    font-size: 0.91rem;
  }

  .rescue-copy .btn {
    margin-top: 30px;
  }

  .founder-statement {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    align-items: end;
    gap: clamp(36px, 8vw, 110px);
  }

  .founder-section.section {
    padding: clamp(80px, 8vw, 112px) 0 clamp(64px, 7vw, 96px);
  }

  .founder-statement h2 {
    max-width: 15ch;
  }

  .founder-statement > p {
    margin: 0;
  }

  .founder-values {
    display: grid;
    grid-template-columns: 1.1fr 0.85fr 1.25fr;
    margin-top: clamp(70px, 9vw, 116px);
    list-style: none;
  }

  .founder-values li {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 34px clamp(22px, 3vw, 38px);
  }

  .founder-values li:first-child {
    padding-left: 0;
  }

  .founder-values li:last-child {
    padding-right: 0;
  }

  .founder-values li:not(:last-child)::after {
    position: absolute;
    top: 14%;
    right: 0;
    width: 1px;
    height: 72%;
    background: var(--rule-primary-vertical);
    content: "";
  }

  .founder-values strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.15rem;
  }

  .founder-values span {
    color: var(--ink-soft);
    font-size: 0.91rem;
  }

  .pricing-section.section {
    padding-top: clamp(88px, 8vw, 112px);
  }

  .contact-section {
    padding-top: 0;
  }

  .contact-shell {
    display: block;
  }

  .motion-ready [data-float-media] img,
  .motion-ready [data-scroll-media] img {
    will-change: transform;
  }

  .contact-body {
    display: grid;
    width: min(100%, 1080px);
    min-width: 0;
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
    align-items: end;
    gap: 24px clamp(36px, 6vw, 76px);
    margin-inline: auto;
  }

  .contact-body > h2 {
    max-width: 16ch;
    font-size: clamp(3rem, 4.1vw, 3.8rem);
  }

  .contact-body > p {
    max-width: 55ch;
    margin: 0 0 6px;
    color: var(--ink-soft);
  }

  .contact-whatsapp-cta {
    width: min(100%, 340px);
    justify-content: flex-start;
    gap: 12px;
    margin-top: 24px;
    padding: 10px 16px;
    text-align: left;
    white-space: normal;
  }

  .contact-whatsapp-cta > img {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
  }

  .contact-whatsapp-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
  }

  .contact-whatsapp-copy strong {
    font-size: 0.9rem;
  }

  .contact-whatsapp-copy small {
    color: color-mix(in srgb, #f8fbff, transparent 14%);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .contact-whatsapp-cta > span:last-child {
    flex: 0 0 auto;
    font-size: 1.15rem;
    transition: transform 0.25s var(--ease);
  }

  .contact-whatsapp-cta:hover > span:last-child {
    transform: translate(3px, -3px);
  }

  .contact-body > .product-form-card {
    grid-column: 1 / -1;
    margin-top: 20px;
  }

  .product-form-card {
    --product-card-bg: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    position: relative;
    isolation: isolate;
    margin-top: 32px;
    padding: 58px 20px 20px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-strong), transparent 8%);
    border-radius: 20px;
    background: var(--product-card-bg);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
      0 1px 1px -0.5px rgba(0, 0, 0, 0.18),
      0 3px 3px -1.5px rgba(0, 0, 0, 0.14),
      0 6px 6px -3px rgba(0, 0, 0, 0.12);
    font-family: "Inter", var(--font-body);
    backdrop-filter: blur(16px) saturate(108%);
    -webkit-backdrop-filter: blur(16px) saturate(108%);
  }

  .product-card-icon {
    position: absolute;
    right: -28px;
    bottom: -32px;
    z-index: 0;
    width: 192px;
    height: 192px;
    fill: none;
    opacity: 0.035;
    stroke: var(--ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1;
    transform: rotate(-12deg);
    pointer-events: none;
  }

  .contact-form {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 16px;
  }

  .required-fields-note {
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
  }

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

  .form-row {
    display: grid;
    min-width: 0;
    gap: 6px;
  }

  .form-row-wide {
    grid-column: 1 / -1;
  }

  .contact-method-row {
    border: 0;
    padding: 0;
  }

  .contact-method-row legend {
    padding-inline: 4px;
    color: color-mix(in srgb, var(--ink), transparent 30%);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .contact-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .contact-method-option {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-raised), transparent 12%);
    color: var(--ink-muted);
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
  }

  .contact-method-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .contact-method-option input {
    position: absolute;
    opacity: 0;
  }

  .contact-method-option:has(input:checked) {
    border-color: var(--blue-deep);
    background: color-mix(in srgb, var(--blue-deep), transparent 88%);
    color: var(--blue-deep);
  }

  .contact-method-option:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .form-row label {
    padding-inline: 4px;
    color: color-mix(in srgb, var(--ink), transparent 30%);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    transition: color 0.24s ease;
  }

  .form-row label span {
    margin-left: 2px;
    color: #dc2626;
  }

  .form-row:has(.product-field:focus-within) > label,
  .form-row:has(.product-field.is-open) > label {
    color: var(--focus);
  }

  .product-field {
    --field-glow: var(--blue-deep);
    --field-highlight-x: 0%;
    --field-highlight-radius: 120px;
    --field-corner-radius: 0px;
    --field-glow-opacity: 0.15;
    position: relative;
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    padding-left: 4px;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-raised), transparent 20%),
      color-mix(in srgb, var(--blue-deep), transparent 95%)
    );
    backdrop-filter: blur(12px);
    color: var(--ink);
    box-shadow:
      inset 0 1px 1px color-mix(in srgb, var(--ink), transparent 90%),
      inset 0 -1px 1px color-mix(in srgb, white, transparent 72%),
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .product-field::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 40px;
    border-radius: inherit;
    background: radial-gradient(
      ellipse at top left,
      color-mix(in srgb, var(--field-glow), transparent 30%) 0%,
      color-mix(in srgb, var(--field-glow), transparent 60%) 40%,
      transparent 70%
    );
    content: "";
    filter: blur(12px);
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .product-field::after {
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background:
      radial-gradient(
        var(--field-highlight-radius) circle at var(--field-highlight-x) 0%,
        white 0%,
        var(--field-glow) 15%,
        color-mix(
            in srgb,
            var(--field-glow),
            transparent calc(100% - var(--field-glow-opacity) * 100%)
          )
          40%,
        transparent 70%
      ),
      radial-gradient(
        var(--field-corner-radius) circle at 100% 100%,
        color-mix(in srgb, white, transparent 50%) 0%,
        color-mix(in srgb, var(--field-glow), transparent 50%) 12%,
        transparent 60%
      ),
      linear-gradient(transparent, transparent);
    content: "";
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--field-glow), transparent 72%));
    pointer-events: none;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition:
      --field-highlight-x 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
      --field-highlight-radius 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
      --field-corner-radius 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
      --field-glow-opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 0.3s ease;
  }

  .product-field:hover {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--page), white 5%),
      color-mix(in srgb, var(--blue-deep), transparent 91%)
    );
    box-shadow:
      inset 0 1px 1px color-mix(in srgb, var(--ink), transparent 90%),
      0 6px 8px -2px rgba(0, 0, 0, 0.18);
  }

  .product-field:focus-within,
  .product-field.is-open {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-raised), var(--blue-deep) 2%),
      color-mix(in srgb, var(--blue-deep), transparent 91%)
    );
    box-shadow:
      inset 0 2px 4px color-mix(in srgb, white, transparent 70%),
      0 0 18px -10px color-mix(in srgb, var(--focus), transparent 30%),
      0 8px 16px -4px rgba(0, 0, 0, 0.2);
    transform: translateY(-0.25px);
  }

  .product-field:hover::before,
  .product-field:focus-within::before,
  .product-field.is-open::before {
    left: 10px;
    filter: blur(13px);
  }

  .product-field:hover::after,
  .product-field:focus-within::after {
    --field-highlight-x: 12%;
    --field-highlight-radius: 132px;
    --field-glow-opacity: 0.38;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--field-glow), transparent 72%));
  }

  .product-field:focus-within::after,
  .product-field.is-open::after {
    --field-highlight-x: 18%;
    --field-highlight-radius: 138px;
    --field-corner-radius: 92px;
    --field-glow-opacity: 0.5;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--field-glow), transparent 68%));
  }

  .product-field-shimmer {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.42) 45%, transparent 60%);
    background-position: 100% 0;
    background-size: 200% 100%;
    content: "";
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      background-position 0.6s ease;
  }

  .product-field:hover .product-field-shimmer {
    background-position: 0 0;
    opacity: 1;
  }

  .product-field:focus-within .product-field-shimmer,
  .product-field.is-open .product-field-shimmer {
    animation: product-field-focus-sweep 0.68s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .field-icon,
  .select-chevron {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    pointer-events: none;
  }

  .field-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    color: var(--blue-deep);
    opacity: 0.6;
    filter: drop-shadow(0 0 15px transparent) brightness(1.2);
    transition:
      color 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .product-field:hover .field-icon,
  .product-field:focus-within .field-icon,
  .product-field.is-open .field-icon {
    color: var(--focus);
    filter: drop-shadow(0 0 15px color-mix(in srgb, var(--focus), transparent 76%)) brightness(1.2);
    opacity: 1;
  }

  .select-chevron {
    width: 16px;
    height: 16px;
    color: var(--ink-muted);
    transition: transform 0.2s ease;
  }

  .product-field input,
  .product-field textarea {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
  }

  .product-field input {
    height: 44px;
    padding: 0 12px;
  }

  .product-select-trigger {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    min-width: 0;
    height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
  }

  .product-select-value {
    overflow: hidden;
    color: var(--ink);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-select-value.is-placeholder {
    color: var(--ink-muted);
    font-weight: 400;
  }

  .product-select.is-open .select-chevron {
    color: var(--focus);
    transform: rotate(180deg);
  }

  .product-select.is-invalid {
    --field-glow: #dc2626;
    box-shadow:
      inset 0 1px 2px rgba(220, 38, 38, 0.08),
      0 0 0 2px rgba(220, 38, 38, 0.28);
  }

  .product-select-menu {
    position: fixed;
    z-index: 200050;
    max-height: min(320px, calc(100vh - 24px));
    padding: 6px;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--blue-deep), transparent 74%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-raised), transparent 10%);
    backdrop-filter: blur(24px) saturate(1.35);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.58) inset,
      0 20px 48px -18px rgba(18, 50, 80, 0.4),
      0 8px 20px -12px rgba(23, 102, 223, 0.34);
    opacity: 0;
    transform: translateY(-5px) scale(0.985);
    transform-origin: top center;
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    transition:
      opacity 0.16s ease,
      transform 0.2s var(--ease);
  }

  .product-select-menu::before,
  .product-select-menu::after {
    position: absolute;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue-deep), transparent 34%), transparent);
    content: "";
    pointer-events: none;
  }

  .product-select-menu::before {
    top: 0;
  }

  .product-select-menu::after {
    bottom: 0;
    opacity: 0.62;
  }

  .product-select-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .product-select-menu.opens-up {
    transform: translateY(5px) scale(0.985);
    transform-origin: bottom center;
  }

  .product-select-menu.opens-up.is-open {
    transform: translateY(0) scale(1);
  }

  .product-select-menu[hidden] {
    display: none;
  }

  .product-select-option {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 10px 36px 10px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    line-height: 1.3;
    text-align: left;
    transition:
      border-color 0.16s ease,
      background-color 0.16s ease,
      color 0.16s ease;
  }

  .product-select-option + .product-select-option {
    margin-top: 2px;
  }

  .product-select-option span {
    grid-column: 1;
    font-size: 0.88rem;
    font-weight: 520;
  }

  .product-select-option small {
    grid-column: 1;
    color: var(--ink-muted);
    font-size: 0.72rem;
  }

  .product-select-option svg {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    opacity: 0;
    transform: translateY(-50%) scale(0.72);
    transition:
      opacity 0.16s ease,
      transform 0.16s ease;
  }

  .product-select-option:hover,
  .product-select-option:focus-visible {
    border-color: color-mix(in srgb, var(--blue-deep), transparent 82%);
    outline: 0;
    background: color-mix(in srgb, var(--blue-deep), transparent 91%);
    color: var(--blue-dark);
  }

  .product-select-option[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--blue-deep), transparent 78%);
    background: color-mix(in srgb, var(--blue-deep), transparent 92%);
    color: var(--blue-dark);
    font-weight: 600;
  }

  .product-select-option[aria-selected="true"] svg {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .product-textarea {
    align-items: flex-start;
  }

  .product-textarea .field-icon {
    margin-top: 13px;
  }

  .product-field textarea {
    min-height: 124px;
    padding: 11px 12px 14px;
    line-height: 1.55;
    resize: vertical;
  }

  .product-field input::placeholder,
  .product-field textarea::placeholder {
    color: var(--ink-muted);
    opacity: 1;
  }

  .product-field input:focus-visible,
  .product-select-trigger:focus-visible,
  .product-field textarea:focus-visible {
    outline: 0;
  }

  .form-notice {
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--line-strong), transparent 10%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-tint), transparent 18%);
    color: var(--ink-muted);
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .product-submit {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blue-deep), color-mix(in srgb, var(--blue), var(--blue-deep) 35%));
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.18),
      inset 0 -1px 1px rgba(0, 0, 0, 0.18),
      0 2px 8px -2px color-mix(in srgb, var(--blue-deep), transparent 40%),
      0 1px 2px -1px rgba(0, 0, 0, 0.24);
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    transition:
      transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
      background 200ms ease,
      box-shadow 300ms ease;
  }

  .product-submit::after {
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from -75deg, transparent, rgba(255, 255, 255, 0.7), transparent 50%);
    content: "";
    pointer-events: none;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: transform 0.5s ease;
  }

  .product-submit > span,
  .product-submit > svg {
    position: relative;
    z-index: 2;
  }

  .product-submit > svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 0.3s ease;
  }

  .product-submit-glow {
    position: absolute !important;
    inset: 1px;
    z-index: 0 !important;
    border-radius: inherit;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, 0.25), transparent 55%);
    pointer-events: none;
  }

  .product-submit-shimmer {
    position: absolute !important;
    inset: 0;
    z-index: 1 !important;
    background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, 0.22), transparent 65%);
    background-position: 100% 0;
    background-size: 200% 100%;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      background-position 0.6s ease;
  }

  .product-submit:hover:not(:disabled) {
    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.2),
      inset 0 -1px 1px rgba(0, 0, 0, 0.2),
      0 4px 16px -4px color-mix(in srgb, var(--blue-deep), transparent 25%),
      0 0 20px -4px color-mix(in srgb, var(--blue), transparent 45%);
    transform: translateY(-1px);
  }

  .product-submit:hover:not(:disabled) .product-submit-shimmer {
    background-position: 0 0;
    opacity: 1;
  }

  .product-submit:hover:not(:disabled) > svg {
    transform: translateX(4px);
  }

  .product-submit:active:not(:disabled) {
    transform: scale(0.98);
  }

  .product-submit:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  .product-submit:disabled {
    cursor: wait;
    opacity: 0.65;
  }

  .form-status {
    padding: 12px 14px;
    border: 1px solid rgba(62, 115, 85, 0.28);
    border-radius: 8px;
    background: var(--positive-surface);
    color: var(--green-deep);
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .site-footer {
    padding: 54px 0 28px;
    background: var(--surface);
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .footer-main {
    display: grid;
    grid-template-columns: auto minmax(230px, 1fr) auto;
    align-items: center;
    gap: 32px;
  }

  .footer-main > p {
    color: var(--ink-soft);
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 20px;
    color: var(--ink-soft);
    font-size: 0.88rem;
  }

  .footer-links a:hover {
    color: var(--blue-deep);
  }

.footer-social-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
}

  .footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    transition: transform 180ms ease;
  }

  .footer-social img {
    width: 20px;
    height: 20px;
  }

.footer-social:hover {
  transform: translateY(-1px);
}

.footer-social:last-child {
  margin-left: -2px;
}

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;
    padding-top: 24px;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    color: var(--ink-muted);
    font-size: 0.78rem;
  }
}

@layer responsive {
  @media (max-width: 1100px) {
    .container {
      width: min(100% - 32px, 920px);
    }

    .hero {
      min-height: auto;
      padding-bottom: 24px;
    }

    .hero::before {
      left: 26%;
    }

    .hero-inner {
      min-height: 0;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    }

    .hero-copy {
      max-width: 780px;
      padding-top: clamp(52px, 8vh, 84px);
    }

    .hero-copy h1 {
      max-width: 16ch;
      font-size: clamp(3.4rem, 7vw, 4.5rem);
    }

    .hero-media.character-stage {
      width: min(112%, 900px);
      margin: -24px -56px 0 auto;
    }

    .site-nav > a:not(.btn) {
      padding-inline: 10px;
    }

    .path-card,
    .path-card:nth-child(2),
    .path-card:nth-child(3),
    .path-card:nth-child(4) {
      min-height: auto;
      grid-template-columns: 1fr;
    }

    .path-content {
      order: 0;
    }

    .path-card:nth-child(odd) .path-media,
    .path-card:nth-child(2) .path-media,
    .path-card:nth-child(4) .path-media {
      order: 1;
    }

    .path-media {
      min-height: 0;
      border-top: 0;
    }

    .path-media img {
      height: auto;
    }

    .ride-story {
      grid-template-columns: 1fr;
    }

    .ride-intro {
      grid-template-columns: 1fr;
      gap: 42px;
    }

    .ride-sticky-copy {
      max-width: 640px;
    }

    .ride-benefits {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ride-benefits li {
      padding: 18px 0 0;
      border-top: 0;
      border-left: 0;
      background-image: var(--rule-primary);
      background-position: center top;
      background-repeat: no-repeat;
      background-size: 100% 1px;
    }

    .ride-gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .price-card-ride,
    .price-card-rescue {
      grid-column: 1 / -1;
    }

    .price-card-variable {
      grid-template-columns: 1fr 1fr;
    }

    .price-card-variable > div {
      grid-column: 1 / -1;
    }

    .contact-shell {
      display: block;
    }

    .contact-body {
      width: min(100%, 820px);
      margin-inline: auto;
    }

    .footer-main {
      grid-template-columns: auto 1fr;
    }

    .footer-links {
      grid-column: 1 / -1;
      justify-content: flex-start;
    }
  }

  @media (max-width: 767px) {
    html {
      scroll-padding-top: 88px;
    }

    .container {
      width: min(100% - 24px, 660px);
    }

    .section {
      padding-block: 96px;
    }

    h2 {
      font-size: clamp(2.3rem, 9vw, 3.5rem);
    }

    .site-header {
      top: 8px;
    }

    .header-inner {
      min-height: 62px;
      padding: 5px 7px 5px 6px;
    }

    .brand {
      width: 54px;
      min-height: 50px;
      padding: 3px;
      border-radius: 15px;
    }

    .brand-mark img {
      width: 43px;
      height: 43px;
    }

    .menu-toggle {
      display: block;
    }

    .site-nav {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      left: 0;
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-media);
      background: var(--surface-raised);
      box-shadow: var(--shadow-md);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-10px) scale(0.98);
      transform-origin: top;
      transition:
        opacity 0.25s var(--ease),
        transform 0.25s var(--ease);
    }

    .site-nav.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .site-nav > a:not(.btn) {
      padding: 12px 14px;
    }

    .nav-cta {
      margin: 4px 0 0;
    }

    .hero {
      min-height: auto;
      padding: 94px 0 24px;
    }

    .hero-inner {
      min-height: 0;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      align-items: start;
      gap: 14px;
    }

    .hero-copy {
      max-width: none;
      padding-top: 30px;
      text-align: left;
    }

    .hero-copy h1 {
      max-width: 100%;
      font-size: clamp(2.2rem, 9vw, 2.45rem);
      line-height: 0.94;
      letter-spacing: -0.048em;
      text-wrap: pretty;
    }

    .hero-copy h1 > span {
      display: inline;
      white-space: normal;
    }

    .hero-lead {
      max-width: 36ch;
      margin: 22px 0 0;
      font-size: 1rem;
      line-height: 1.5;
    }

    .hero-actions {
      display: grid;
      gap: 10px;
      margin-top: 22px;
    }

    .hero-actions .btn {
      width: 100%;
    }

    .hero-media {
      min-height: 0;
      max-height: none;
      aspect-ratio: 1717 / 916;
      border-radius: var(--radius-media);
    }

    .hero-media.character-stage {
      width: calc(100% + 72px);
      max-width: none;
      aspect-ratio: auto;
      margin: -4px -36px -2px;
      border-radius: 0;
    }

    .hero-media img {
      display: block;
      min-height: 0;
      max-height: none;
      object-position: center;
    }

    .marquee-group a,
    .marquee-group span {
      padding: 16px 22px;
    }

    .path-stack {
      gap: 18px;
      margin-top: 40px;
    }

    .path-card,
    .path-card:nth-child(2),
    .path-card:nth-child(3),
    .path-card:nth-child(4) {
      min-height: auto;
      grid-template-columns: 1fr;
    }

    .path-media {
      min-height: 0;
      max-height: none;
      padding: 2px 8px 18px;
    }

    .path-media img {
      width: 104%;
      height: auto;
      margin-inline: -2%;
    }

    .path-card .ship-path-media img {
      width: 116%;
      margin-inline: -8%;
    }

    .paths-section.section {
      padding-top: 72px;
      padding-bottom: 64px;
    }

    .path-content {
      padding: 26px 22px 28px;
    }

    .path-status {
      margin-bottom: 20px;
    }

    .path-content h3 {
      max-width: 17ch;
    }

    .ride-heading h2 {
      max-width: 14ch;
    }

    .ride-section.section {
      padding-block: 64px;
    }

    .ride-story {
      gap: 56px;
      margin-top: 64px;
    }

    .ride-benefits {
      grid-template-columns: 1fr;
    }

    .ride-gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      margin: 0;
      padding: 0;
      overflow: visible;
    }

    .ride-screen {
      width: 100%;
    }

    .mobile-concepts {
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 72px;
      padding-top: 40px;
    }

    .mobile-concepts-copy {
      max-width: 620px;
    }

    .mobile-concepts-copy,
    .founder-statement {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 22px;
    }

    .phone-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px 10px;
      margin-right: 0;
      margin-left: 0;
      padding: 0;
      overflow: visible;
      margin-top: 36px;
    }

    .phone-concept {
      width: auto;
      min-width: 0;
    }

    .phone-concept:nth-child(2) {
      transform: none;
    }

    .phone-concept:last-child {
      width: calc((100% - 10px) / 2);
      grid-column: 1 / -1;
      justify-self: center;
    }

    .ride-proof {
      align-items: flex-start;
      flex-direction: column;
      margin-top: 56px;
    }

    .pricing-grid {
      margin-top: 56px;
    }

    .price-card {
      grid-column: 1 / -1;
      padding: 26px 22px;
    }

    .price-card.has-surface-notch {
      padding-top: 58px;
    }

    .price-figures,
    .terms-list,
    .price-card-variable {
      grid-template-columns: 1fr;
    }

    .price-card-variable > div {
      grid-column: auto;
    }

    .rescue-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .rescue-media {
      max-height: none;
    }

    .rescue-media.character-stage {
      width: min(52vw, 210px);
      min-height: 0;
      margin-inline: auto;
    }

    .rescue-media img {
      height: auto;
      object-position: initial;
    }

    .founder-values {
      grid-template-columns: 1fr;
      margin-top: 40px;
    }

    .founder-values li,
    .founder-values li:first-child,
    .founder-values li:last-child {
      padding: 24px 0;
      border-right: 0;
      border-bottom: 0;
    }

    .founder-values li:not(:last-child)::after {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--rule-primary);
    }

    .founder-section.section {
      padding: 72px 0 56px;
    }

    .pricing-section.section {
      padding-top: 64px;
    }

    .contact-shell {
      display: block;
    }

    .contact-body {
      display: block;
      width: 100%;
    }

    .contact-body > h2 {
      max-width: 13ch;
      font-size: clamp(1.8rem, 7.6vw, 2.35rem);
    }

    .contact-body > p {
      margin: 16px 0 0;
    }

    .product-form-card {
      margin-top: 32px;
      padding: 54px 16px 16px;
    }

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

    .form-row-wide {
      grid-column: auto;
    }

    .footer-main {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .footer-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .footer-social-group {
      grid-column: 1 / -1;
    }

    .footer-bottom {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (max-width: 430px) {
    .hero-copy h1 {
      font-size: clamp(2.15rem, 9vw, 2.4rem);
    }

    .hero-media {
      min-height: 0;
    }

    .hero-media img {
      min-height: 0;
    }

    .toby-media-caption {
      right: 10px;
      bottom: 10px;
      padding: 8px 10px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }

    .motion-ready .reveal {
      opacity: 1;
      transform: none;
    }
  }
}

@layer sections {
  /* Radio is a continuation of Ride: the UI stays on the map and inside Driver. */
  .ride-section {
    padding-bottom: clamp(62px, 7vw, 92px);
  }

  .radio-section {
    padding-top: 0;
    overflow: clip;
    background:
      radial-gradient(circle at 76% 42%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 34rem),
      var(--page-deep);
  }

  .radio-integrated-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    align-items: end;
    gap: clamp(42px, 7vw, 104px);
    padding-top: clamp(78px, 9vw, 120px);
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .radio-integrated-heading h2 {
    max-width: 12ch;
    font-size: clamp(3rem, 5.25vw, 5.35rem);
  }

  .radio-integrated-summary > p:first-child {
    max-width: 53ch;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
  }

  .radio-integrated-summary .capability-status {
    margin-top: 26px;
  }

  .radio-integrated-demo {
    position: relative;
    min-height: 700px;
    margin-top: clamp(54px, 7vw, 86px);
  }

  .radio-integrated-demo::before {
    position: absolute;
    inset: 8% 1% 12%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--blue) 17%, transparent), transparent 68%);
    content: "";
    filter: blur(28px);
  }

  .radio-ride-workspace {
    position: absolute;
    top: 0;
    right: 0;
    width: 92%;
    height: 620px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-surface);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }

  .radio-ride-workspace > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    transform: scale(1.24);
    opacity: 0.93;
  }

  .radio-communications-panel {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    width: min(41%, 372px);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-media);
    background: color-mix(in srgb, var(--surface-raised) 97%, transparent);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .radio-communications-head {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
  }

  .radio-communications-head > span {
    display: grid;
    gap: 2px;
  }

  .radio-communications-head strong {
    font-size: 0.84rem;
  }

  .radio-communications-head small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
    font-size: 0.6rem;
  }

  .radio-communications-head small i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent);
  }

  .radio-communications-head > b {
    padding: 7px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    color: var(--ink-soft);
    font-size: 0.58rem;
    font-weight: 600;
  }

  .radio-communications-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.68rem;
    text-align: center;
  }

  .radio-communications-tabs span,
  .radio-communications-tabs strong {
    padding: 12px 8px 10px;
    border-bottom: 2px solid transparent;
  }

  .radio-communications-tabs strong {
    border-color: var(--blue-deep);
    color: var(--blue-deep);
  }

  .radio-channel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 18px;
  }

  .radio-channel-icon {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--blue) 44%, var(--line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--blue) 10%, var(--surface-raised));
  }

  .radio-channel-icon::before,
  .radio-channel-icon::after {
    position: absolute;
    top: 9px;
    width: 7px;
    height: 14px;
    border: 1.5px solid var(--blue-deep);
    content: "";
  }

  .radio-channel-icon::before {
    left: 8px;
    border-right: 0;
    border-radius: 8px 0 0 8px;
  }

  .radio-channel-icon::after {
    right: 8px;
    border-left: 0;
    border-radius: 0 8px 8px 0;
  }

  .radio-channel-head > span:nth-child(2) {
    display: grid;
    gap: 3px;
  }

  .radio-channel-head strong {
    font-size: 0.82rem;
  }

  .radio-channel-head small {
    color: var(--ink-muted);
    font-size: 0.61rem;
  }

  .driver-radio-control span > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent);
  }

  .radio-live-state {
    display: grid;
    margin: 0 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue-deep) 30%, var(--line));
    border-radius: var(--radius-field);
    background: color-mix(in srgb, var(--blue) 8%, var(--surface-raised));
  }

  .radio-live-speaker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px;
  }

  .radio-speaker-id {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-deep);
    color: var(--ink-inverse);
    font-family: var(--font-mono);
    font-size: 0.58rem;
  }

  .radio-live-speaker > span:nth-child(2) {
    display: grid;
    gap: 2px;
  }

  .radio-live-speaker strong {
    font-size: 0.72rem;
  }

  .radio-live-speaker small {
    color: var(--ink-muted);
    font-size: 0.54rem;
  }

  .radio-live-speaker time {
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.49rem;
  }

  .radio-live-wave {
    display: flex;
    height: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 0 13px 12px 60px;
  }

  .radio-live-wave i {
    width: 2px;
    height: 6px;
    border-radius: 999px;
    background: var(--blue-deep);
  }

  .radio-live-wave i:nth-child(2n) {
    height: 15px;
  }

  .radio-live-wave i:nth-child(3n) {
    height: 10px;
  }

  .radio-live-wave i:nth-child(5) {
    height: 20px;
  }

  .radio-ptt-waiting {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin: 10px 18px 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--surface-tint);
    color: var(--ink-muted);
  }

  .radio-ptt-waiting > span:last-child {
    display: grid;
    gap: 2px;
  }

  .radio-mini-mic {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    grid-row: 1 / span 2;
    border-radius: 50%;
    background: var(--line-strong);
  }

  .radio-mini-mic::before {
    position: absolute;
    top: 9px;
    left: 14px;
    width: 10px;
    height: 15px;
    border: 1.5px solid var(--ink-inverse);
    border-radius: 7px;
    content: "";
  }

  .radio-mini-mic::after {
    position: absolute;
    top: 21px;
    left: 11px;
    width: 16px;
    height: 9px;
    border-right: 1.5px solid var(--ink-inverse);
    border-bottom: 1.5px solid var(--ink-inverse);
    border-left: 1.5px solid var(--ink-inverse);
    border-radius: 0 0 9px 9px;
    content: "";
  }

  .radio-mini-mic i {
    position: absolute;
    top: 29px;
    left: 18px;
    width: 1.5px;
    height: 4px;
    background: var(--ink-inverse);
  }

  .radio-ptt-waiting strong {
    font-size: 0.7rem;
  }

  .radio-ptt-waiting small {
    font-size: 0.54rem;
  }

  .radio-participant-summary {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
  }

  .radio-participant-summary > span:first-child {
    display: grid;
    gap: 3px;
  }

  .radio-participant-summary strong {
    font-size: 0.72rem;
  }

  .radio-participant-summary small {
    color: var(--ink-muted);
    font-size: 0.59rem;
  }

  .radio-participant-dots {
    display: flex;
  }

  .radio-participant-dots i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    margin-left: -7px;
    border: 2px solid var(--surface-raised);
    border-radius: 50%;
    background: var(--surface-tint);
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-style: normal;
  }

  .radio-participant-dots i:nth-child(2) {
    background: var(--positive-surface);
    color: var(--green-deep);
  }

  .driver-map-phone {
    position: absolute;
    bottom: 12px;
    left: 0;
    z-index: 4;
    width: 228px;
    height: 458px;
    overflow: hidden;
    border: 7px solid var(--night);
    border-radius: 34px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }

  .driver-map-phone > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #1976d2;
  }

  .driver-phone-top {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 54px;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 13px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
    font-size: 0.52rem;
  }

  .driver-phone-top strong {
    font-size: 0.68rem;
  }

  .driver-phone-top span:last-child {
    justify-self: end;
  }

  .driver-map-surface {
    position: absolute;
    inset: 54px 0 0;
    overflow: hidden;
    background:
      linear-gradient(34deg, transparent 48%, color-mix(in srgb, var(--line-strong) 70%, transparent) 49% 51%, transparent 52%),
      linear-gradient(132deg, transparent 48%, color-mix(in srgb, var(--line-strong) 54%, transparent) 49% 51%, transparent 52%),
      radial-gradient(circle at 66% 24%, color-mix(in srgb, var(--green) 24%, transparent), transparent 7rem),
      var(--surface-tint);
    background-size: 80px 80px, 96px 96px, auto, auto;
  }

  .driver-route {
    position: absolute;
    display: block;
    height: 5px;
    border-radius: 999px;
    background: var(--blue-deep);
    box-shadow: 0 0 0 2px var(--surface-raised);
    transform-origin: left center;
  }

  .driver-route-one {
    top: 226px;
    left: 42px;
    width: 128px;
    transform: rotate(-57deg);
  }

  .driver-route-two {
    top: 113px;
    left: 111px;
    width: 92px;
    transform: rotate(24deg);
  }

  .driver-location {
    position: absolute;
    z-index: 1;
    width: 15px;
    height: 15px;
    border: 3px solid var(--surface-raised);
    border-radius: 50%;
    background: var(--blue-deep);
    box-shadow: 0 0 0 1px var(--blue-deep);
  }

  .driver-location-start {
    top: 218px;
    left: 35px;
  }

  .driver-location-end {
    top: 140px;
    right: 17px;
    background: var(--green);
    box-shadow: 0 0 0 1px var(--green-deep);
  }

  .driver-radio-control {
    position: absolute;
    top: 74px;
    left: 10px;
    z-index: 3;
    display: grid;
    width: 184px;
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 11px;
    border: 1px solid var(--night-line);
    border-radius: var(--radius-field);
    background: color-mix(in srgb, var(--night) 88%, transparent);
    box-shadow: var(--shadow-sm);
    color: var(--ink-inverse);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .driver-radio-control > span {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 7px;
  }

  .driver-radio-control span > i {
    grid-row: 1 / span 2;
  }

  .driver-radio-control strong {
    font-size: 0.61rem;
  }

  .driver-radio-control small {
    color: var(--night-soft);
    font-size: 0.43rem;
  }

  .driver-radio-control > b {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.52rem;
  }

  .radio-integrated-demo figcaption {
    position: absolute;
    right: 0;
    bottom: -22px;
    color: var(--ink-muted);
    max-width: 54ch;
    font-size: 0.68rem;
    text-align: right;
  }

  .radio-integrated-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(24px, 4vw, 58px);
  }

  .radio-integrated-proof p {
    display: grid;
    gap: 7px;
  }

  .radio-integrated-proof strong {
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .radio-integrated-proof p > span {
    color: var(--ink-soft);
    font-size: 0.84rem;
  }


  /* Agents use the same visual world as the products they extend. */
  .agents-section {
    background:
      radial-gradient(circle at 14% 25%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 30rem),
      radial-gradient(circle at 86% 72%, color-mix(in srgb, var(--green) 10%, transparent), transparent 27rem),
      var(--page);
    color: var(--ink);
  }

  .agents-connected-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
    align-items: end;
    gap: clamp(42px, 7vw, 104px);
  }

  .agents-connected-heading h2 {
    max-width: 13ch;
    font-size: clamp(3rem, 5.5vw, 5.65rem);
  }

  .agents-connected-summary > p:first-child {
    max-width: 54ch;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
  }

  .agents-connected-summary > strong {
    display: block;
    max-width: 48ch;
    margin-top: 24px;
    color: var(--blue-deep);
    font-size: 1rem;
  }

  .agents-connected-summary .capability-status {
    margin-top: 26px;
  }

  .agent-process {
    position: relative;
    display: grid;
    grid-template-columns:
      minmax(170px, 1fr) 34px
      minmax(170px, 1fr) 34px
      minmax(210px, 1.15fr) 34px
      minmax(170px, 1fr);
    align-items: stretch;
    margin-top: clamp(58px, 7vw, 86px);
    padding: 44px 28px 70px;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 76%, transparent), transparent);
  }

  .agent-process-step {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0 18px;
  }

  .agent-process-step:not(.agent-process-origin) {
    border-left: 1px solid var(--line);
  }

  .agent-step-label {
    display: block;
    margin-bottom: 22px;
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .agent-process-step > strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.18rem, 1.7vw, 1.55rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
  }

  .agent-process-step > p {
    margin-top: 13px;
    color: var(--ink-soft);
    font-size: 0.8rem;
  }

  .agent-process-origin ul {
    display: grid;
    gap: 11px;
    margin-top: 18px;
    list-style: none;
  }

  .agent-process-origin li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-soft);
    font-size: 0.77rem;
  }

  .agent-process-origin li i {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    background: var(--surface-tint);
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-style: normal;
  }

  .agent-process-work::before {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--blue) 38%, var(--line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--blue) 9%, var(--surface-raised));
    color: var(--blue-deep);
    content: "IA";
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
  }

  .agent-process-check {
    background: linear-gradient(140deg, color-mix(in srgb, var(--positive-surface) 58%, transparent), transparent);
  }

  .agent-process-check > p {
    display: grid;
    gap: 9px;
  }

  .agent-process-check > p span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
  }

  .agent-process-check > p i {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 1px solid var(--green-deep);
    border-radius: 50%;
  }

  .agent-process-check > p i::after {
    position: absolute;
    top: 3px;
    left: 5px;
    width: 5px;
    height: 8px;
    border-right: 1.5px solid var(--green-deep);
    border-bottom: 1.5px solid var(--green-deep);
    content: "";
    transform: rotate(45deg);
  }

  .agent-process-check > b {
    display: inline-block;
    margin-top: 16px;
    color: var(--green-deep);
    font-size: 0.72rem;
  }

  .agent-process-arrow {
    position: relative;
    align-self: center;
    width: 100%;
    height: 1px;
    background: color-mix(in srgb, var(--blue-deep) 52%, var(--line));
  }

  .agent-process-arrow::after {
    position: absolute;
    top: -4px;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--blue-deep);
    border-right: 1px solid var(--blue-deep);
    content: "";
    transform: rotate(45deg);
  }

  .agent-process-loop {
    position: absolute;
    right: 28px;
    bottom: 22px;
    left: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 0.59rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .agent-process-loop i {
    width: 24px;
    height: 1px;
    background: var(--line-strong);
  }

  .agents-connected-cta {
    margin-top: 34px;
  }
}

@layer responsive {
  @media (max-width: 1100px) {
    .radio-section {
      padding-bottom: 72px;
    }

    .radio-integrated-heading,
    .agents-connected-heading {
      grid-template-columns: 1fr;
      gap: 28px;
    }

    .radio-integrated-summary,
    .agents-connected-summary {
      max-width: 700px;
    }

    .radio-integrated-demo {
      min-height: 660px;
    }

    .radio-ride-workspace {
      width: 94%;
      height: 560px;
    }

    .radio-communications-panel {
      width: min(48%, 340px);
    }

    .driver-map-phone {
      width: 206px;
      height: 420px;
    }

    .driver-radio-control {
      width: 164px;
      grid-template-columns: minmax(0, 1fr) 40px;
    }

    .agent-process {
      grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
      gap: 28px 0;
    }

    .agent-process-origin {
      grid-column: 1;
      grid-row: 1;
    }

    .agent-process > .agent-process-arrow:nth-of-type(1) {
      grid-column: 2;
      grid-row: 1;
    }

    .agent-process-work {
      grid-column: 3;
      grid-row: 1;
    }

    .agent-process > .agent-process-arrow:nth-of-type(2) {
      display: none;
    }

    .agent-process-check {
      grid-column: 1;
      grid-row: 2;
    }

    .agent-process > .agent-process-arrow:nth-of-type(3) {
      grid-column: 2;
      grid-row: 2;
    }

    .agent-process-return {
      grid-column: 3;
      grid-row: 2;
    }

    .agent-process-step {
      padding-block: 8px 18px;
    }
  }

  @media (max-width: 767px) {
    .ride-section {
      padding-bottom: 52px;
    }

    .radio-section {
      padding-block: 0 96px;
    }

    .radio-integrated-heading {
      padding-top: 72px;
    }

    .radio-integrated-heading h2,
    .agents-connected-heading h2 {
      max-width: 11ch;
      font-size: clamp(2.55rem, 12vw, 3.65rem);
    }

    .radio-integrated-demo {
      min-height: 730px;
      margin-top: 48px;
    }

    .radio-ride-workspace {
      right: auto;
      left: 0;
      width: 100%;
      height: 500px;
    }

    .radio-ride-workspace > img {
      object-position: center 42%;
      transform: scale(1.14);
    }

    .radio-communications-panel {
      top: 18px;
      right: 12px;
      width: calc(100% - 24px);
    }

    .radio-communications-head {
      min-height: 54px;
    }

    .radio-channel-head {
      padding: 14px;
    }

    .radio-live-state,
    .radio-ptt-waiting {
      margin-inline: 14px;
    }

    .radio-participant-summary {
      min-height: 66px;
      margin-top: 14px;
      padding-inline: 14px;
    }

    .driver-map-phone {
      bottom: 20px;
      left: 18px;
      width: 176px;
      height: 352px;
      border-width: 6px;
      border-radius: 29px;
    }

    .driver-phone-top {
      min-height: 48px;
      padding-inline: 10px;
    }

    .driver-map-surface {
      inset: 48px 0 0;
    }

    .driver-radio-control {
      top: 64px;
      left: 8px;
      width: 150px;
      min-height: 44px;
      grid-template-columns: minmax(0, 1fr) 36px;
      padding-left: 9px;
    }

    .driver-radio-control > b {
      width: 34px;
      height: 34px;
    }

    .radio-integrated-demo figcaption {
      right: 0;
      bottom: 0;
      max-width: 20ch;
      text-align: right;
    }

    .radio-integrated-proof {
      grid-template-columns: 1fr;
      gap: 24px;
      margin-top: 36px;
    }

    .radio-integrated-proof .text-link {
      margin-top: 8px;
    }

    .agents-section {
      padding-block: 100px;
    }

    .agent-process {
      grid-template-columns: 1fr;
      gap: 0;
      padding: 38px 0 96px;
    }

    .agent-process-origin,
    .agent-process-work,
    .agent-process-check,
    .agent-process-return {
      grid-column: 1;
      grid-row: auto;
    }

    .agent-process-step,
    .agent-process-step:not(.agent-process-origin) {
      padding: 24px 16px;
      border-top: 1px solid var(--line);
      border-left: 0;
    }

    .agent-process-origin {
      border-top: 0;
    }

    .agent-process > .agent-process-arrow:nth-of-type(1),
    .agent-process > .agent-process-arrow:nth-of-type(2),
    .agent-process > .agent-process-arrow:nth-of-type(3) {
      display: block;
      width: 1px;
      height: 30px;
      grid-column: 1;
      grid-row: auto;
      justify-self: center;
    }

    .agent-process-arrow::after {
      top: auto;
      right: -4px;
      bottom: 0;
      transform: rotate(135deg);
    }

    .agent-process-loop {
      right: 16px;
      bottom: 24px;
      left: 16px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .agent-process-loop i {
      width: 15px;
    }

    .agents-connected-cta {
      width: 100%;
      white-space: normal;
    }
  }
}

@layer components {
  .capability-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--green-deep);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .capability-status > span {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 18%, transparent);
  }

  .capability-status-inverse {
    color: var(--night-soft);
  }

  .capability-status-inverse > span {
    background: var(--mint);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mint) 18%, transparent);
  }

  .btn-inverse {
    border-color: var(--night-line);
    background: transparent;
    color: var(--ink-inverse);
  }

  .btn-inverse:hover {
    border-color: color-mix(in srgb, var(--blue) 70%, var(--night-line));
    background: color-mix(in srgb, var(--blue) 13%, transparent);
  }
}

@layer sections {
  .radio-section {
    overflow: clip;
    background:
      radial-gradient(circle at 72% 46%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 31rem),
      var(--page);
  }

  .radio-layout {
    display: grid;
    grid-template-columns: minmax(330px, 0.76fr) minmax(560px, 1.24fr);
    align-items: center;
    gap: clamp(48px, 6vw, 92px);
  }

  .radio-copy h2 {
    max-width: 10.5ch;
    font-size: clamp(2.8rem, 4.7vw, 5rem);
  }

  .radio-copy > p:not(.section-kicker, .capability-status) {
    max-width: 54ch;
    margin-top: 28px;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.25vw, 1.12rem);
  }

  .radio-copy .capability-status {
    margin-top: 28px;
  }

  .radio-facts {
    display: grid;
    gap: 0;
    margin: 34px 0 36px;
    list-style: none;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .radio-facts li {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    background-image: var(--rule-primary);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .radio-facts strong {
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }

  .radio-facts span {
    color: var(--ink);
    font-size: 0.94rem;
    font-weight: 600;
  }

  .radio-stage {
    position: relative;
    min-height: 620px;
    margin: 0;
  }

  .radio-stage::before {
    position: absolute;
    inset: 11% 5% 8% 7%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--blue) 22%, transparent), transparent 68%);
    content: "";
    filter: blur(30px);
  }

  .radio-console {
    position: absolute;
    top: 48px;
    right: 54px;
    left: 0;
    min-height: 468px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-surface);
    background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
    box-shadow: var(--shadow-lg);
  }

  .radio-console-bar {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    border-bottom: 1px solid var(--line);
    font-size: 0.84rem;
    font-weight: 700;
  }

  .radio-listening {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-deep);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .radio-listening i,
  .radio-driver-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent);
  }

  .radio-console-body {
    display: grid;
    min-height: 406px;
    grid-template-columns: 174px minmax(0, 1fr);
  }

  .radio-roster {
    padding: 26px 22px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-tint) 60%, transparent);
  }

  .radio-roster > p {
    margin-bottom: 9px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 0.61rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .radio-roster > strong {
    display: block;
    margin-bottom: 34px;
    color: var(--ink);
    font-size: 0.92rem;
  }

  .radio-roster > strong span {
    color: var(--blue);
  }

  .radio-roster ul {
    display: grid;
    gap: 17px;
    list-style: none;
  }

  .radio-roster li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 600;
  }

  .avatar {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--surface-raised);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-style: normal;
  }

  .avatar-blue {
    background: var(--blue-deep);
  }

  .avatar-green {
    background: var(--green-deep);
  }

  .avatar-sky {
    background: var(--blue);
  }

  .radio-transmission {
    position: relative;
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 34px 24px;
    text-align: center;
  }

  .radio-speaker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
  }

  .radio-mic-symbol {
    position: relative;
    display: block;
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    border: 1px solid color-mix(in srgb, var(--blue) 48%, var(--line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--blue) 12%, var(--surface-raised));
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--blue) 7%, transparent);
  }

  .radio-mic-symbol::before {
    position: absolute;
    top: 18px;
    left: 28px;
    width: 14px;
    height: 24px;
    border: 2px solid var(--blue-deep);
    border-radius: 9px;
    content: "";
  }

  .radio-mic-symbol::after {
    position: absolute;
    top: 37px;
    left: 24px;
    width: 22px;
    height: 13px;
    border-right: 2px solid var(--blue-deep);
    border-bottom: 2px solid var(--blue-deep);
    border-left: 2px solid var(--blue-deep);
    border-radius: 0 0 13px 13px;
    content: "";
  }

  .radio-mic-symbol i {
    position: absolute;
    top: 49px;
    left: 34px;
    width: 2px;
    height: 8px;
    background: var(--blue-deep);
  }

  .radio-speaker strong {
    color: var(--ink);
    font-size: 1rem;
  }

  .radio-speaker small {
    max-width: 25ch;
    margin-top: 8px;
    color: var(--ink-muted);
    font-size: 0.7rem;
  }

  .radio-wave {
    position: absolute;
    top: 48%;
    left: 7%;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.6;
  }

  .radio-wave-reverse {
    right: 7%;
    left: auto;
    transform: scaleX(-1);
  }

  .radio-wave i {
    width: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 76%, transparent);
  }

  .radio-wave i:nth-child(1),
  .radio-wave i:nth-child(7) {
    height: 12px;
  }

  .radio-wave i:nth-child(2),
  .radio-wave i:nth-child(6) {
    height: 24px;
  }

  .radio-wave i:nth-child(3),
  .radio-wave i:nth-child(5) {
    height: 38px;
  }

  .radio-wave i:nth-child(4) {
    height: 54px;
  }

  .radio-phone {
    position: absolute;
    right: 0;
    bottom: 34px;
    z-index: 2;
    display: flex;
    width: 188px;
    min-height: 382px;
    align-items: center;
    padding: 16px 18px 24px;
    border: 6px solid var(--night);
    border-radius: 32px;
    background:
      radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 9rem),
      var(--surface-raised);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
  }

  .radio-phone-status {
    display: flex;
    width: 100%;
    justify-content: space-between;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.5rem;
  }

  .radio-phone > p {
    margin-top: 24px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .radio-phone > strong {
    margin-top: 4px;
    font-size: 1.05rem;
  }

  .radio-driver-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    color: var(--green-deep);
    font-size: 0.6rem;
  }

  .radio-phone-control {
    display: grid;
    flex: 1;
    place-items: center;
  }

  .radio-mic-symbol-large {
    width: 82px;
    height: 82px;
    margin: 0;
  }

  .radio-mic-symbol-large::before {
    top: 23px;
    left: 33px;
  }

  .radio-mic-symbol-large::after {
    top: 42px;
    left: 29px;
  }

  .radio-mic-symbol-large i {
    top: 54px;
    left: 39px;
  }

  .radio-phone > small {
    color: var(--ink-muted);
    font-size: 0.56rem;
  }

  .radio-stage figcaption,
  .brand-web-stage figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--ink-muted);
    font-size: 0.7rem;
  }

  .brand-web-section {
    overflow: clip;
    background:
      radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 28rem),
      var(--page-deep);
  }

  .brand-web-layout {
    display: grid;
    grid-template-columns: minmax(580px, 1.18fr) minmax(360px, 0.82fr);
    grid-template-rows: 1fr auto;
    align-items: end;
    column-gap: clamp(58px, 6vw, 96px);
    row-gap: 0;
  }

  .brand-web-stage {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 830px;
    margin: 0;
  }

  .brand-web-stage::before {
    position: absolute;
    inset: 3% 6% 14% -7%;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--blue-deep) 16%, transparent) 1px, transparent 1px);
    background-size: 18px 18px;
    content: "";
    opacity: 0.42;
    -webkit-mask-image: linear-gradient(105deg, #000, transparent 82%);
    mask-image: linear-gradient(105deg, #000, transparent 82%);
  }

  .website-preview {
    position: absolute;
    top: 18px;
    right: 34px;
    left: 0;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-media);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }

  .mock-browser-bar {
    display: grid;
    min-height: 56px;
    grid-template-columns: 1fr minmax(180px, 1.25fr) 1fr;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 0.62rem;
  }

  .mock-browser-address {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--page);
    text-align: center;
  }

  .mock-browser-address i {
    position: relative;
    width: 8px;
    height: 7px;
    border: 1.5px solid var(--ink-muted);
    border-radius: 2px;
  }

  .mock-browser-address i::before {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 5px;
    height: 5px;
    border: 1.5px solid var(--ink-muted);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    content: "";
    transform: translateX(-50%);
  }

  .mock-browser-bar small {
    justify-self: end;
    color: var(--green-deep);
    font-weight: 700;
  }

  .mock-browser-dots {
    display: flex;
    gap: 5px;
  }

  .mock-browser-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line-strong);
  }

  .mock-landing {
    position: relative;
    min-height: 464px;
    padding: 0 clamp(26px, 4vw, 48px) 28px;
    overflow: hidden;
    background: var(--surface-raised);
  }

  .mock-landing-hero {
    position: relative;
    min-height: 340px;
    margin-inline: clamp(-48px, -4vw, -26px);
    padding: 30px clamp(26px, 4vw, 48px) 76px;
    overflow: hidden;
    background-image: url("assets/marketing/presencia-digital-transporte.webp");
    background-position: 58% center;
    background-size: cover;
  }

  .mock-landing-hero::before {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(8, 27, 49, 0.96) 0%, rgba(8, 27, 49, 0.86) 33%, rgba(8, 27, 49, 0.2) 69%, rgba(8, 27, 49, 0.06) 100%),
      linear-gradient(0deg, rgba(8, 27, 49, 0.22), transparent 42%);
    content: "";
  }

  .mock-site-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--ink-inverse);
  }

  .mock-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 700;
  }

  .mock-brand i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: var(--surface-raised);
    color: var(--night);
    font-style: normal;
  }

  .mock-site-links {
    display: flex;
    align-items: center;
    gap: 18px;
    color: color-mix(in srgb, var(--ink-inverse) 84%, transparent);
    font-size: 0.58rem;
  }

  .mock-site-links strong {
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--blue-deep);
    color: var(--ink-inverse);
    font-weight: 700;
  }

  .mock-landing-copy {
    position: relative;
    z-index: 1;
    max-width: 310px;
    margin-top: 66px;
  }

  .mock-landing-copy > small {
    color: var(--mint);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mock-landing-copy > p {
    max-width: 9ch;
    margin-top: 10px;
    color: var(--ink-inverse);
    font-family: var(--font-display);
    font-size: clamp(2.05rem, 3vw, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.03;
  }

  .mock-landing-copy > span {
    display: block;
    max-width: 31ch;
    margin-top: 12px;
    color: color-mix(in srgb, var(--ink-inverse) 82%, transparent);
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .mock-booking-shell {
    position: relative;
    z-index: 2;
    max-width: 540px;
    margin: -42px auto 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
  }

  .mock-booking {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: stretch;
    gap: 1px;
    background: var(--line);
  }

  .mock-booking > span {
    display: grid;
    gap: 3px;
    padding: 13px 15px;
    background: var(--surface-raised);
  }

  .mock-booking small {
    color: var(--ink-muted);
    font-size: 0.56rem;
  }

  .mock-booking strong {
    font-size: 0.68rem;
    font-weight: 600;
  }

  .mock-booking b {
    display: grid;
    place-items: center;
    padding: 0 18px;
    background: var(--blue-deep);
    color: var(--ink-inverse);
    font-size: 0.65rem;
  }

  .mock-channel-row {
    display: flex;
    gap: 16px;
    padding: 12px 15px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 0.54rem;
  }

  .mock-channel-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .mock-channel-row span::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    content: "";
  }

  .website-editor {
    position: absolute;
    right: 0;
    bottom: 34px;
    z-index: 2;
    width: min(69%, 420px);
    min-height: 268px;
    padding: 22px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }

  .website-editor::before {
    position: absolute;
    top: -1px;
    left: -116px;
    width: 116px;
    height: 1px;
    background: var(--blue-deep);
    content: "";
  }

  .website-editor::after {
    position: absolute;
    top: -4px;
    left: -120px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue-deep);
    content: "";
  }

  .website-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 0.74rem;
    font-weight: 700;
  }

  .website-editor-head small {
    color: var(--green-deep);
    font-size: 0.6rem;
  }

  .website-editor-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 17px;
    background: linear-gradient(var(--line-strong), var(--line-strong)) center 11px / 70% 1px no-repeat;
  }

  .website-editor-track span {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 0.56rem;
  }

  .website-editor-track i {
    display: grid;
    z-index: 1;
    width: 23px;
    height: 23px;
    place-items: center;
    border: 1px solid var(--blue-deep);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.48rem;
    font-style: normal;
  }

  .website-editor-track span:last-child i {
    border-color: var(--green-deep);
    background: var(--green-deep);
    color: var(--ink-inverse);
  }

  .website-review {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 12px;
    margin-top: 16px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-tint);
  }

  .website-review > span {
    display: grid;
    gap: 4px;
  }

  .website-review small {
    color: var(--ink-muted);
    font-size: 0.5rem;
  }

  .website-review strong {
    font-size: 0.66rem;
  }

  .website-review p {
    align-self: center;
    padding-left: 12px;
    border-left: 1px solid var(--line-strong);
    color: var(--ink-soft);
    font-size: 0.56rem;
    line-height: 1.45;
  }

  .website-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.6rem;
    text-align: center;
  }

  .website-editor-actions span,
  .website-editor-actions strong {
    display: grid;
    min-height: 36px;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
  }

  .website-editor-actions strong {
    border-color: var(--blue-deep);
    background: var(--blue-deep);
    color: var(--ink-inverse);
  }

  .brand-web-copy h2 {
    max-width: 11.5ch;
    font-size: clamp(2.65rem, 4.35vw, 4.55rem);
  }

  .brand-web-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .brand-web-copy > p:not(.section-kicker, .capability-status) {
    max-width: 52ch;
    margin-top: 28px;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.25vw, 1.12rem);
  }

  .brand-web-copy .capability-status {
    margin-top: 28px;
  }

  .brand-web-process {
    display: grid;
    gap: 0;
    margin: 34px 0 0;
    list-style: none;
    counter-reset: none;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .brand-web-process li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 15px 0;
    background-image: var(--rule-primary);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .brand-web-process li > span {
    padding-top: 2px;
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
  }

  .brand-web-process li > div {
    display: grid;
    gap: 4px;
  }

  .brand-web-process strong {
    font-size: 0.93rem;
  }

  .brand-web-process small {
    color: var(--ink-soft);
    font-size: 0.82rem;
  }

  .brand-web-cta {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 30px;
  }

  .agents-section {
    overflow: clip;
    background:
      radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 29rem),
      radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--green) 10%, transparent), transparent 28rem),
      var(--night);
    color: var(--ink-inverse);
  }

  .agents-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 26px 40px;
  }

  .agents-index {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    color: transparent;
    font-family: var(--font-display);
    font-size: clamp(8rem, 19vw, 16rem);
    font-weight: 600;
    letter-spacing: -0.1em;
    line-height: 0.7;
    -webkit-text-stroke: 1px var(--night-line);
  }

  .agents-intro {
    grid-column: 1;
    grid-row: 1;
    max-width: 780px;
  }

  .agents-intro .section-kicker {
    color: color-mix(in srgb, var(--blue) 80%, var(--ink-inverse));
  }

  .agents-intro h2 {
    max-width: 13ch;
    font-size: clamp(3rem, 5.8vw, 6rem);
  }

  .agents-intro > p:not(.section-kicker, .capability-status) {
    max-width: 62ch;
    margin-top: 30px;
    color: var(--night-soft);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
  }

  .agents-intro .capability-status {
    margin-top: 28px;
  }

  .agent-cycle {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 70px;
    list-style: none;
  }

  .agent-cycle::before {
    position: absolute;
    top: 18px;
    right: 12.5%;
    left: 12.5%;
    height: 1px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    content: "";
    opacity: 0.55;
  }

  .agent-cycle li {
    position: relative;
    display: grid;
    justify-items: start;
    padding: 0 clamp(18px, 2.5vw, 36px);
    border-left: 1px solid var(--night-line);
  }

  .agent-cycle li:last-child {
    border-right: 1px solid var(--night-line);
  }

  .agent-cycle li > span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--blue) 65%, var(--night-line));
    border-radius: 50%;
    background: var(--night);
    color: color-mix(in srgb, var(--blue) 76%, var(--ink-inverse));
    font-family: var(--font-mono);
    font-size: 0.62rem;
  }

  .agent-cycle li:nth-child(3) > span,
  .agent-cycle li:nth-child(4) > span {
    border-color: color-mix(in srgb, var(--green) 65%, var(--night-line));
    color: var(--mint);
  }

  .agent-cycle strong {
    margin-top: 28px;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    letter-spacing: -0.025em;
  }

  .agent-cycle p {
    max-width: 25ch;
    margin-top: 10px;
    color: var(--night-soft);
    font-size: 0.86rem;
  }

  .agents-loop {
    display: flex;
    grid-column: 1;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    color: var(--night-soft);
    font-family: var(--font-mono);
    font-size: 0.67rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .agents-loop i {
    width: clamp(34px, 5vw, 78px);
    height: 1px;
    background: var(--night-line);
  }

  .agents-cta {
    grid-column: 2;
    margin-top: 36px;
  }
}

@layer responsive {
  @media (max-width: 1100px) {
    .radio-layout,
    .brand-web-layout {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: 0;
    }

    .radio-copy,
    .brand-web-copy {
      max-width: 760px;
    }

    .radio-copy h2,
    .brand-web-copy h2 {
      max-width: 12ch;
    }

    .radio-stage,
    .brand-web-stage {
      width: min(100%, 760px);
      justify-self: center;
    }

    .brand-web-stage {
      grid-column: 1;
      grid-row: 2;
      margin-top: 48px;
    }

    .brand-web-copy {
      grid-column: 1;
      grid-row: 1;
    }

    .brand-web-cta {
      grid-column: 1;
      grid-row: 3;
      margin-top: 32px;
    }

    .agents-layout {
      grid-template-columns: 1fr;
    }

    .agents-intro,
    .agents-index,
    .agent-cycle,
    .agents-loop,
    .agents-cta {
      grid-column: 1;
    }

    .agents-index,
    .agents-intro {
      grid-row: 1;
    }

    .agents-index {
      justify-self: end;
      opacity: 0.72;
    }

    .agent-cycle {
      grid-row: 2;
    }

    .agents-loop {
      grid-row: 3;
    }

    .agents-cta {
      grid-row: 4;
      justify-self: start;
    }
  }

  @media (max-width: 767px) {
    .radio-section,
    .brand-web-section,
    .agents-section {
      padding-block: 96px;
    }

    .radio-copy h2,
    .brand-web-copy h2,
    .agents-intro h2 {
      max-width: 11.5ch;
      font-size: clamp(2.45rem, 11vw, 3.55rem);
    }

    .radio-copy .btn {
      width: 100%;
      white-space: normal;
    }

    .radio-stage {
      min-height: 650px;
    }

    .radio-console {
      top: 20px;
      right: 0;
      min-height: 430px;
    }

    .radio-console-body {
      min-height: 368px;
      grid-template-columns: 112px minmax(0, 1fr);
    }

    .radio-roster {
      padding: 22px 13px;
    }

    .radio-roster > strong {
      margin-bottom: 28px;
      font-size: 0.76rem;
    }

    .radio-roster li {
      gap: 7px;
      font-size: 0.61rem;
    }

    .avatar {
      width: 25px;
      height: 25px;
      font-size: 0.5rem;
    }

    .radio-transmission {
      padding: 26px 10px;
    }

    .radio-wave {
      display: none;
    }

    .radio-speaker strong {
      max-width: 14ch;
      font-size: 0.82rem;
    }

    .radio-speaker small {
      max-width: 18ch;
      font-size: 0.62rem;
    }

    .radio-phone {
      right: 12px;
      bottom: 32px;
      width: 164px;
      min-height: 340px;
    }

    .radio-stage figcaption,
    .brand-web-stage figcaption {
      right: auto;
      left: 0;
      max-width: 28ch;
      font-size: 0.62rem;
    }

    .brand-web-stage figcaption {
      max-width: 48ch;
    }

    .brand-web-stage {
      display: grid;
      min-height: 0;
      margin-top: 36px;
    }

    .website-preview {
      position: relative;
      top: auto;
      right: auto;
      left: auto;
      min-height: 400px;
    }

    .mock-browser-bar {
      grid-template-columns: auto 1fr auto;
      gap: 8px;
      padding: 0 12px;
    }

    .mock-browser-address {
      padding: 6px 10px;
    }

    .mock-landing {
      min-height: 378px;
      padding: 0 20px 22px;
    }

    .mock-landing-hero {
      min-height: 390px;
      margin-inline: -20px;
      padding: 26px 20px 72px;
      background-position: 61% center;
    }

    .mock-landing-hero::before {
      background:
        linear-gradient(90deg, rgba(8, 27, 49, 0.96) 0%, rgba(8, 27, 49, 0.78) 54%, rgba(8, 27, 49, 0.22) 100%),
        linear-gradient(0deg, rgba(8, 27, 49, 0.34), transparent 48%);
    }

    .mock-site-links span {
      display: none;
    }

    .mock-landing-copy {
      max-width: 245px;
      margin-top: 72px;
    }

    .mock-landing-copy > p {
      max-width: 8ch;
      font-size: 2.35rem;
    }

    .mock-booking-shell {
      margin-top: -44px;
    }

    .mock-booking {
      grid-template-columns: 1fr;
    }

    .mock-booking > span:nth-child(2) {
      display: none;
    }

    .mock-booking b {
      min-height: 38px;
    }

    .website-editor {
      position: relative;
      right: auto;
      bottom: auto;
      justify-self: end;
      width: min(88%, 320px);
      min-height: 260px;
      margin-top: -18px;
      padding: 18px;
    }

    .website-editor::before,
    .website-editor::after {
      display: none;
    }

    .website-review {
      grid-template-columns: 1fr;
    }

    .website-review p {
      padding-top: 9px;
      padding-left: 0;
      border-top: 1px solid var(--line-strong);
      border-left: 0;
    }

    .website-editor-actions {
      grid-template-columns: 1fr;
    }

    .website-editor-actions span {
      display: none;
    }

    .brand-web-stage figcaption {
      position: relative;
      right: auto;
      bottom: auto;
      left: auto;
      margin-top: 24px;
    }

    .brand-web-cta {
      width: 100%;
      min-height: 52px;
      justify-content: center;
      margin-top: 24px;
      border-radius: var(--radius-field);
      background: var(--blue-deep);
      color: var(--ink-inverse);
    }

    .agents-index {
      margin-top: 10px;
      font-size: 8rem;
      opacity: 0.45;
    }

    .agents-intro {
      position: relative;
      z-index: 1;
    }

    .agent-cycle {
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 54px;
    }

    .agent-cycle::before {
      top: 18px;
      bottom: 18px;
      left: 18px;
      width: 1px;
      height: auto;
      background: linear-gradient(180deg, var(--blue), var(--green));
    }

    .agent-cycle li,
    .agent-cycle li:last-child {
      min-height: 132px;
      padding: 0 0 34px 64px;
      border: 0;
    }

    .agent-cycle li > span {
      position: absolute;
      top: 0;
      left: 0;
    }

    .agent-cycle strong {
      margin-top: 4px;
    }

    .agents-loop {
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 4px;
    }

    .agents-loop i {
      width: 24px;
    }

    .agents-cta {
      width: 100%;
      margin-top: 28px;
      white-space: normal;
    }
  }
}

@layer sections {
  .ride-evidence {
    position: relative;
    min-width: 0;
  }

  .ride-evidence-track {
    --ride-progress: 1;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(360px, 0.92fr) 48px minmax(450px, 1.08fr);
    align-items: end;
  }

  .ride-operation-group,
  .ride-passenger-group {
    min-width: 0;
  }

  .ride-lane-label {
    display: grid;
    gap: 3px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    background-image: var(--rule-primary);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .ride-lane-label strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
  }

  .ride-lane-label span {
    color: var(--ink-muted);
    font-size: 0.72rem;
  }

  .ride-operation-screens,
  .ride-passenger-screens {
    position: relative;
    display: grid;
    align-items: end;
  }

  .ride-operation-screens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ride-passenger-screens {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 18px);
  }

  .ride-operation-screens::before,
  .ride-passenger-screens::before {
    position: absolute;
    right: 5%;
    bottom: 82px;
    left: 5%;
    z-index: 0;
    height: 1px;
    background: var(--rule-primary);
    content: "";
    transform: scaleX(var(--ride-progress));
    transform-origin: left center;
  }

  .ride-handoff {
    position: relative;
    align-self: end;
    height: 148px;
  }

  .ride-handoff::before {
    position: absolute;
    top: 34px;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--rule-primary);
    content: "";
    transform: scaleX(var(--ride-progress));
    transform-origin: left center;
  }

  .ride-handoff span {
    position: absolute;
    top: 29px;
    left: 50%;
    width: 11px;
    height: 11px;
    border: 2px solid var(--page-deep);
    border-radius: 50%;
    background: color-mix(in srgb, var(--blue) 52%, var(--green));
    box-shadow: 0 0 0 1px rgba(23, 102, 223, 0.28);
    transform: translateX(-50%) scale(calc(0.55 + var(--ride-progress) * 0.45));
  }

  .ride-evidence-item {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    grid-template-rows: 248px auto;
    align-items: end;
    margin: 0;
  }

  .ride-evidence-item::before {
    position: absolute;
    bottom: 77px;
    left: 50%;
    z-index: 0;
    width: 11px;
    height: 11px;
    border: 2px solid var(--page-deep);
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 1px rgba(23, 102, 223, 0.34);
    content: "";
    transform: translateX(-50%) scale(calc(0.55 + var(--ride-progress) * 0.45));
  }

  .ride-evidence-item:nth-child(n + 3)::before {
    background: var(--green);
    box-shadow: 0 0 0 1px rgba(62, 115, 85, 0.34);
  }

  .ride-evidence-item img {
    position: relative;
    z-index: 1;
    align-self: end;
    display: block;
    object-fit: contain;
  }

  .ride-evidence-item.ride-screen img {
    width: 128%;
    max-width: none;
    margin-left: -14%;
    filter: drop-shadow(0 18px 22px rgba(24, 65, 105, 0.14));
  }

  .ride-operation-screens .ride-evidence-item:nth-child(1) {
    transform: translateY(10px);
  }

  .ride-operation-screens .ride-evidence-item:nth-child(2) {
    z-index: 2;
    transform: translate(-8px, 34px);
  }

  .ride-evidence-item.phone-concept img {
    width: auto;
    max-width: 100%;
    height: 248px;
    filter: drop-shadow(0 18px 22px rgba(24, 65, 105, 0.12));
  }

  .ride-evidence-item figcaption {
    display: grid;
    gap: 2px;
    margin-top: 18px;
    text-align: center;
  }

  .ride-evidence-item figcaption strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.84rem;
  }

  .ride-evidence-item figcaption span {
    color: var(--ink-muted);
    font-size: 0.7rem;
  }

  .ride-passenger-screens .ride-evidence-item:nth-child(2) {
    transform: translateY(18px);
  }
}

@layer responsive {
  @media (min-width: 1101px) {
    .ride-section .container {
      width: min(100% - 64px, 1340px);
    }

    .ride-intro {
      grid-template-columns: minmax(390px, 0.7fr) minmax(700px, 1.3fr);
      gap: 22px;
    }

    .ride-hero-device img {
      width: min(100%, 820px);
      margin-left: 0;
    }

    .ride-story {
      grid-template-columns: minmax(300px, 0.54fr) minmax(850px, 1.46fr);
      gap: 36px;
      margin-top: 12px;
      padding-top: 26px;
    }
  }

  @media (max-width: 1100px) {
    .ride-evidence {
      margin-top: 18px;
    }

    .ride-evidence-track {
      grid-template-columns: minmax(300px, 0.9fr) 34px minmax(370px, 1.1fr);
    }

    .ride-evidence-item {
      grid-template-rows: 220px auto;
    }

    .ride-evidence-item.phone-concept img {
      height: 220px;
    }
  }

  @media (max-width: 767px) {
    .ride-evidence-track {
      grid-template-columns: 1fr;
      gap: 28px;
      padding-left: 30px;
    }

    .ride-evidence-track::before {
      position: absolute;
      top: 48px;
      bottom: 40px;
      left: 10px;
      width: 1px;
      background: var(--rule-primary-vertical);
      content: "";
      transform: scaleY(var(--ride-progress));
      transform-origin: center top;
    }

    .ride-lane-label {
      margin-bottom: 8px;
      padding-bottom: 10px;
    }

    .ride-operation-screens {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .ride-passenger-screens {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .ride-passenger-screens .phone-concept,
    .ride-passenger-screens .phone-concept:last-child {
      width: auto;
      grid-column: auto;
      justify-self: stretch;
    }

    .ride-evidence-item {
      min-height: 0;
      grid-template-rows: auto auto;
    }

    .ride-evidence-item::before,
    .ride-evidence-item:nth-child(n + 3)::before {
      top: 50%;
      bottom: auto;
      left: -20px;
      transform: translate(-50%, -50%)
        scale(calc(0.55 + var(--ride-progress) * 0.45));
    }

    .ride-passenger-screens .ride-evidence-item::before {
      background: var(--green);
      box-shadow: 0 0 0 1px rgba(62, 115, 85, 0.34);
    }

    .ride-evidence-item.ride-screen img {
      width: 116%;
      margin-left: -8%;
    }

    .ride-operation-screens .ride-evidence-item:nth-child(1),
    .ride-operation-screens .ride-evidence-item:nth-child(2) {
      transform: none;
    }

    .ride-operation-screens::before,
    .ride-passenger-screens::before,
    .ride-handoff {
      display: none;
    }

    .ride-evidence-item.phone-concept img {
      width: auto;
      max-width: 100%;
      height: min(52vw, 203px);
    }

    .ride-evidence-item figcaption {
      margin-top: 12px;
      text-align: center;
    }

    .ride-passenger-screens .ride-evidence-item:nth-child(2) {
      transform: translateY(18px);
    }
  }
}

@layer sections {
  .price-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 38px 0 26px;
  }

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

  .pricing-grid {
    align-items: start;
  }

  .price-flow > div {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 24px clamp(14px, 2vw, 26px);
  }

  .price-flow > div:first-child {
    padding-left: 0;
  }

  .price-flow > div:last-child {
    padding-right: 0;
  }

  .price-flow > div:not(:last-child)::after {
    position: absolute;
    top: 12%;
    right: 0;
    z-index: 1;
    width: 1px;
    height: 76%;
    background: var(--rule-primary-vertical);
    content: "";
  }

  .price-flow span {
    color: var(--green-deep);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .price-flow strong {
    color: var(--blue-deep);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.8vw, 3.15rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1;
  }

  .price-flow small {
    font-size: 0.48em;
    letter-spacing: 0;
  }

  .price-flow p {
    color: var(--ink-soft);
    font-size: 0.82rem;
  }

  .price-channel-strip {
    width: 100%;
    margin: 6px 0 12px;
  }

  .price-milestone {
    max-width: 72ch;
    margin-bottom: 22px;
    color: var(--ink-soft);
    font-size: 0.82rem;
  }

  .price-details {
    margin-top: 10px;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .price-details summary {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--blue-deep);
    cursor: pointer;
    font-weight: 700;
    list-style: none;
  }

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

  .price-details summary::after {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s var(--ease);
  }

  .price-details[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .price-details .terms-list {
    padding: 12px 0 6px;
  }

  .price-options {
    display: grid;
    gap: 0;
    margin-top: 26px;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .price-details-secondary {
    margin-top: 24px;
  }

  .price-details-secondary .price-options {
    margin-top: 0;
    padding-bottom: 4px;
    border-top: 0;
  }

  .price-options p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
  }

  .price-options p:not(:last-child) {
    background-image: var(--rule-primary);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .price-options span {
    color: var(--ink-soft);
    font-size: 0.82rem;
  }

  .price-options strong {
    color: var(--ink);
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .rescue-media.character-stage {
    width: min(132%, 760px);
    margin: -2% 0 -4% -15%;
  }

  .rescue-media.character-stage::before {
    inset: 24% 3% 12%;
  }
}

@layer responsive {
  @media (min-width: 1101px) {
    .paths-section .container {
      width: min(100% - 64px, 1380px);
      grid-template-columns: minmax(320px, 0.7fr) minmax(760px, 1.6fr);
      gap: clamp(64px, 7vw, 112px);
    }

    .path-stack {
      gap: 18px;
    }

    .path-card,
    .path-card:nth-child(2),
    .path-card:nth-child(3),
    .path-card:nth-child(4) {
      min-height: 260px;
      grid-template-columns: minmax(300px, 0.78fr) minmax(390px, 1.22fr);
    }

    .path-card:nth-child(2) {
      width: calc(100% - 34px);
      margin-left: 34px;
    }

    .path-card:nth-child(3) {
      width: calc(100% - 14px);
      margin-left: 14px;
    }

    .path-card:nth-child(4) {
      width: calc(100% - 48px);
      margin-left: 48px;
    }

    .path-card .path-content {
      order: 1;
      padding: 32px 18px 32px 38px;
    }

    .path-card .path-media {
      order: 2;
      padding: 4px 4px 4px 0;
    }

    .path-card .path-media img {
      width: 112%;
      margin-left: -8%;
    }

    .path-card .ship-path-media img {
      width: 126%;
      margin-left: -16%;
    }

    .path-status {
      margin-bottom: 16px;
      padding-bottom: 12px;
    }

    .path-content h3 {
      max-width: 18ch;
      font-size: clamp(1.7rem, 2vw, 2.25rem);
    }

    .path-content > p:not(.path-status) {
      margin-top: 14px;
      font-size: 0.9rem;
    }

    .path-content .text-link {
      margin-top: 20px;
    }

    .ride-section .container {
      width: min(100% - 64px, 1280px);
    }

    .ride-intro {
      grid-template-columns: minmax(340px, 0.72fr) minmax(620px, 1.28fr);
      gap: 36px;
    }

    .ride-hero-device img {
      width: min(125%, 850px);
      margin-left: -9%;
    }

    .ride-story {
      grid-template-columns: minmax(290px, 0.62fr) minmax(650px, 1.38fr);
      gap: 44px;
      margin-top: 38px;
      padding-top: 38px;
    }

    .mobile-concepts {
      grid-template-columns: minmax(250px, 0.55fr) minmax(0, 2.45fr);
      gap: 32px;
      margin-top: 58px;
      padding-top: 34px;
    }

    .ride-proof {
      margin-top: 52px;
    }

    .rescue-grid {
      grid-template-columns: minmax(600px, 1.15fr) minmax(420px, 0.85fr);
      gap: 24px;
    }

    .rescue-media.character-stage {
      width: min(138%, 860px);
      margin: -4% 0 -5% -18%;
    }
  }

  @media (max-width: 1100px) {
    .path-card,
    .path-card:nth-child(2),
    .path-card:nth-child(3),
    .path-card:nth-child(4) {
      width: 100%;
      margin-left: 0;
    }

    .rescue-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .rescue-media.character-stage {
      width: min(108%, 820px);
      margin: -5% -4% -6%;
    }
  }

  @media (max-width: 767px) {
    .price-flow {
      grid-template-columns: 1fr;
    }

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

    .channel-strip li:nth-child(odd) {
      padding-left: 0;
    }

    .channel-strip li:nth-child(even) {
      padding-right: 0;
    }

    .price-flow > div,
    .price-flow > div:first-child,
    .price-flow > div:last-child {
      padding: 18px 0;
      border-right: 0;
      border-bottom: 0;
    }

    .price-flow > div:not(:last-child)::after {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--rule-primary);
    }

    .price-details .terms-list {
      grid-template-columns: 1fr;
    }

    .price-options p {
      align-items: flex-start;
      flex-direction: column;
      gap: 3px;
    }

    .rescue-media.character-stage {
      width: calc(100% + 34px);
      margin: -10px -17px -24px;
    }
  }
}

@layer sections {
  /* Premium section direction: each block has one visual job and one reading path. */
  .paths-section {
    position: relative;
    background: var(--page);
  }

  .paths-section .section-heading h2 {
    max-width: 10.5ch;
  }

  .paths-section .section-heading p {
    max-width: 42ch;
  }

  .path-card {
    background:
      radial-gradient(circle at 22% 48%, rgba(30, 145, 251, 0.1), transparent 38%),
      color-mix(in srgb, var(--surface-raised) 95%, transparent);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.82) inset,
      0 28px 70px rgba(24, 65, 105, 0.09);
  }

  .path-card:nth-child(2),
  .path-card:nth-child(4) {
    background:
      radial-gradient(circle at 78% 48%, rgba(125, 170, 137, 0.14), transparent 38%),
      color-mix(in srgb, var(--surface-raised) 95%, transparent);
  }

  .path-status {
    padding-bottom: 18px;
    background-image: var(--rule-primary);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .path-content h3 q {
    quotes: "“" "”";
  }

  .ride-section {
    position: relative;
    overflow: clip;
    background:
      radial-gradient(circle at 68% 14%, rgba(30, 145, 251, 0.12), transparent 28rem),
      var(--page-deep);
  }

  .ride-heading h2 {
    max-width: 10.5ch;
    letter-spacing: -0.045em;
  }

  .ride-hero-device {
    position: relative;
  }

  .ride-hero-device::before {
    position: absolute;
    z-index: -1;
    inset: 20% 8% 5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 219, 255, 0.34), transparent 68%);
    content: "";
    filter: blur(18px);
  }

  .ride-hero-device img {
    width: min(112%, 760px);
    max-width: none;
    margin-left: -3%;
  }

  .ride-story {
    position: relative;
    padding-top: clamp(42px, 5vw, 70px);
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .ride-sticky-copy {
    position: sticky;
    top: 120px;
  }

  .ride-benefits {
    counter-reset: ride-benefit;
  }

  .ride-benefits li {
    position: relative;
    padding-left: 42px;
    border-left: 0;
    counter-increment: ride-benefit;
  }

  .ride-benefits li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid var(--blue);
    border-radius: 50%;
    color: var(--blue-deep);
    content: counter(ride-benefit, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 0.62rem;
  }

  .ride-gallery {
    position: relative;
    align-items: end;
    padding-bottom: 24px;
  }

  .ride-gallery::after {
    position: absolute;
    right: 4%;
    bottom: 0;
    left: 4%;
    height: 1px;
    background: var(--rule-primary);
    content: "";
  }

  .ride-screen:nth-child(2) {
    transform: translateY(34px);
  }

  .mobile-concepts {
    position: relative;
    grid-template-columns: minmax(230px, 0.62fr) minmax(0, 2.38fr);
  }

  .phone-grid {
    position: relative;
  }

  .phone-grid::before {
    position: absolute;
    top: 52%;
    right: 8%;
    left: 8%;
    z-index: 0;
    height: 1px;
    background: var(--rule-primary);
    content: "";
  }

  .phone-concept {
    position: relative;
    z-index: 1;
  }

  .founder-section {
    position: relative;
    overflow: clip;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.66), transparent 58%),
      var(--page);
  }

  .founder-statement {
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    align-items: center;
  }

  .founder-copy h2 {
    max-width: 12ch;
    font-size: clamp(2.8rem, 4.4vw, 4.55rem);
  }

  .founder-copy > p:first-of-type {
    max-width: 57ch;
    margin-top: 28px;
    color: var(--ink-soft);
  }

  .founder-copy .founder-proof-lead {
    max-width: 34ch;
    margin-top: 34px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.2vw, 2.05rem);
    line-height: 1.03;
    letter-spacing: -0.04em;
  }

  .founder-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 34rem;
    margin-top: 28px;
    border-top: 1px solid var(--rule-primary);
  }

  .founder-stats div {
    display: grid;
    gap: 5px;
    padding: 16px 18px 15px 0;
    border-bottom: 1px solid var(--rule-primary);
  }

  .founder-stats div:nth-child(odd) {
    border-right: 1px solid var(--rule-primary-vertical);
  }

  .founder-stats div:nth-child(even) {
    padding-left: 18px;
  }

  .founder-stats dt {
    color: var(--blue-deep);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    line-height: 0.9;
    letter-spacing: -0.06em;
  }

  .founder-stats dd {
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .founder-proof-note {
    max-width: 58ch;
    margin-top: 16px;
    color: var(--ink-muted);
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .founder-evidence {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(300px, 1fr) minmax(150px, 0.42fr);
    align-items: end;
    gap: clamp(8px, 1vw, 18px);
  }

  .founder-visual {
    min-width: 0;
    margin: 0;
  }

  .founder-visual img {
    display: block;
    width: 92%;
    height: auto;
    max-width: none;
    filter: drop-shadow(0 20px 24px rgba(24, 65, 105, 0.1));
  }

  .founder-metric {
    display: grid;
    justify-self: end;
    color: var(--blue-deep);
    line-height: 0.78;
  }

  .founder-metric::after {
    width: 74%;
    height: 3px;
    margin-top: 28px;
    margin-left: auto;
    background: var(--rule-primary);
    content: "";
  }

  .founder-metric span {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 3.6rem);
    letter-spacing: -0.045em;
  }

  .founder-metric span:last-of-type {
    justify-self: end;
    color: var(--ink);
  }

  .founder-metric strong {
    font-family: var(--font-display);
    font-size: clamp(6rem, 9vw, 9rem);
    font-weight: 500;
    letter-spacing: -0.095em;
  }

  .founder-values {
    counter-reset: founder-value;
  }

  .founder-values li {
    position: relative;
    padding-top: 58px;
    counter-increment: founder-value;
  }

  .founder-values li::before {
    position: absolute;
    top: 25px;
    color: var(--green-deep);
    content: "0" counter(founder-value) " /";
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }

  .pricing-section {
    position: relative;
    background:
      radial-gradient(circle at 84% 18%, rgba(125, 170, 137, 0.11), transparent 25rem),
      var(--page-deep);
  }

  .pricing-section .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    align-items: end;
    gap: 48px;
  }

  .pricing-section .section-heading h2 {
    max-width: 15ch;
  }

  .pricing-section .section-heading p {
    margin: 0 0 8px;
  }

  .price-card {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.86) inset,
      0 24px 70px rgba(24, 65, 105, 0.08);
  }

  .price-card-ride {
    grid-column: span 8;
  }

  .price-card-rescue {
    grid-column: span 4;
  }

  .price-figures > div {
    padding: 22px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .price-figures strong {
    font-size: clamp(2rem, 3.25vw, 3.65rem);
    font-weight: 500;
  }

  .price-card-rescue .price-figures > div + div {
    border-top: 0;
  }

  .price-card-variable {
    align-items: center;
    padding-block: 34px;
  }

  .rescue-section {
    position: relative;
    padding-top: clamp(82px, 8vw, 112px);
    overflow: clip;
    background:
      radial-gradient(circle at 30% 45%, rgba(30, 145, 251, 0.14), transparent 27rem),
      var(--page-deep);
  }

  .rescue-grid {
    grid-template-columns: minmax(380px, 0.92fr) minmax(0, 1.08fr);
  }

  .rescue-media.character-stage {
    width: min(115%, 610px);
    margin: -4% 0 -7% -8%;
  }

  .rescue-steps {
    position: relative;
    gap: 0;
    counter-reset: rescue-step;
  }

  .rescue-steps::before {
    position: absolute;
    top: 17px;
    bottom: 17px;
    left: 16px;
    width: 1px;
    background: var(--rule-primary-vertical);
    content: "";
  }

  .rescue-steps li {
    position: relative;
    min-height: 74px;
    padding: 0 0 26px 56px;
    border-left: 0;
    counter-increment: rescue-step;
  }

  .rescue-steps li::before {
    position: absolute;
    top: -4px;
    left: 0;
    z-index: 1;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--blue);
    border-radius: 50%;
    background: var(--page-deep);
    color: var(--blue-deep);
    content: counter(rescue-step);
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .contact-section {
    position: relative;
    padding-top: clamp(90px, 9vw, 132px);
    overflow: clip;
    background:
      radial-gradient(circle at 70% 45%, rgba(30, 145, 251, 0.09), transparent 30rem),
      var(--page);
  }

  .contact-section::before {
    position: absolute;
    top: 74px;
    left: 2%;
    width: 150px;
    height: 96px;
    background-image: radial-gradient(circle, rgba(23, 102, 223, 0.28) 1px, transparent 1.5px);
    background-size: 22px 22px;
    content: "";
    opacity: 0.36;
  }

  .contact-body {
    width: 100%;
    grid-template-columns: minmax(280px, 0.74fr) minmax(480px, 1.26fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 28px clamp(44px, 7vw, 104px);
  }

  .contact-heading h2 {
    max-width: 11ch;
    font-size: clamp(3rem, 4.8vw, 4.8rem);
  }

  .contact-body > p {
    grid-column: 1;
    grid-row: 2;
    padding-top: 24px;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 2px;
  }

  .contact-body > .product-form-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .product-form-card {
    border-color: color-mix(in srgb, var(--blue-deep) 30%, var(--line));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.88) inset,
      0 30px 90px rgba(24, 65, 105, 0.11);
  }
}

@layer responsive {
  @media (min-width: 1101px) {
    .paths-section .container {
      display: grid;
      grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
      align-items: start;
      gap: clamp(56px, 7vw, 112px);
    }

    .paths-section .section-heading {
      position: sticky;
      top: 130px;
    }

    .path-stack {
      margin-top: 0;
    }
  }

  @media (max-width: 1100px) {
    .paths-section {
      background: var(--page);
    }

    .ride-sticky-copy {
      position: static;
    }

    .founder-statement {
      grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
    }

    .founder-evidence {
      grid-template-columns: minmax(240px, 1fr) minmax(120px, 0.42fr);
    }

    .pricing-section .section-heading {
      grid-template-columns: 1fr;
      gap: 22px;
    }

    .contact-body {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }

    .contact-heading,
    .contact-body > p,
    .contact-body > .product-form-card {
      grid-column: 1;
      grid-row: auto;
    }

    .contact-body > .product-form-card {
      margin-top: 18px;
    }
  }

  @media (max-width: 767px) {
    .paths-section .section-heading h2 {
      max-width: 11ch;
    }

    .ride-hero-device img {
      width: 108%;
      margin-left: -4%;
    }

    .ride-screen:nth-child(2) {
      transform: none;
    }

    .ride-gallery {
      padding-bottom: 0;
    }

    .ride-gallery::after,
    .phone-grid::before {
      display: none;
    }

    .mobile-concepts {
      grid-template-columns: 1fr;
    }

    .founder-statement {
      display: flex;
      align-items: stretch;
      flex-direction: column;
    }

    .founder-evidence {
      display: flex;
      align-items: stretch;
      flex-direction: column;
      margin-top: 12px;
    }

    .founder-visual {
      order: 2;
      width: calc(100% + 34px);
      margin: 4px -17px -6px;
    }

    .founder-visual img {
      width: 100%;
    }

    .founder-copy h2 {
      max-width: 12ch;
      font-size: clamp(2.45rem, 10vw, 3.4rem);
    }

    .founder-metric {
      order: 1;
      align-self: end;
      margin-top: 18px;
    }

    .founder-metric strong {
      font-size: clamp(7.5rem, 39vw, 10rem);
    }

    .founder-metric span {
      font-size: clamp(1.55rem, 7vw, 2.2rem);
    }

    .founder-values li,
    .founder-values li:first-child,
    .founder-values li:last-child {
      padding-top: 48px;
    }

    .founder-values li::before {
      top: 20px;
    }

    .price-card-ride,
    .price-card-rescue {
      grid-column: 1 / -1;
    }

    .price-figures strong {
      font-size: clamp(2.1rem, 10vw, 3rem);
    }

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

    .rescue-media.character-stage {
      width: min(92vw, 390px);
      margin: -8px auto -34px;
    }

    .rescue-copy h2 {
      max-width: 12ch;
    }

    .rescue-section {
      padding-top: 72px;
    }

    .contact-section {
      padding-top: 88px;
    }

    .contact-section::before {
      display: none;
    }

    .contact-heading h2 {
      max-width: 12ch;
      font-size: clamp(2.3rem, 10vw, 3.25rem);
    }

    .contact-body > p {
      margin-top: 22px;
    }
  }
}

@layer sections {
  body .ride-section {
    padding-bottom: clamp(62px, 7vw, 92px);
  }

  body .radio-section {
    padding-top: 0;
    background:
      radial-gradient(circle at 76% 42%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 34rem),
      var(--page-deep);
  }

  body .agents-section {
    background:
      radial-gradient(circle at 14% 25%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 30rem),
      radial-gradient(circle at 86% 72%, color-mix(in srgb, var(--green) 10%, transparent), transparent 27rem),
      var(--page);
    color: var(--ink);
  }
}

@layer responsive {
  @media (max-width: 767px) {
    body .ride-section {
      padding-bottom: 52px;
    }

    body .radio-section {
      padding-block: 0 96px;
    }

    body .agents-section {
      padding-block: 100px;
    }
  }
}

@layer sections {
  /* Ride reads as one route before the product evidence begins. */
  .ride-story {
    display: block;
    margin-top: clamp(64px, 8vw, 112px);
    padding-top: 0;
    background-image: none;
  }

  .ride-sticky-copy {
    position: static;
    max-width: none;
    padding-top: 0;
  }

  .ride-sticky-copy h3 {
    max-width: 18ch;
    font-size: clamp(2.8rem, 5vw, 5rem);
    letter-spacing: -0.05em;
    line-height: 0.98;
    text-wrap: balance;
  }

  .ride-journey {
    position: relative;
    margin-top: clamp(34px, 4vw, 54px);
    padding-top: 20px;
  }

  .ride-journey-coordinate {
    position: absolute;
    top: -34px;
    right: 0;
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .ride-journey-route {
    position: absolute;
    top: 0;
    left: -2%;
    width: 104%;
    height: 190px;
    overflow: visible;
  }

  .ride-journey-route path {
    fill: none;
    stroke: var(--blue-deep);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
    vector-effect: non-scaling-stroke;
  }

  .ride-journey-stops {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ride-journey-stops li {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 112px clamp(18px, 2.4vw, 38px) 0;
  }

  .ride-journey-stops li:nth-child(2) {
    padding-top: 184px;
  }

  .ride-journey-stops li:nth-child(3) {
    padding-top: 124px;
  }

  .ride-stop-node {
    position: absolute;
    top: 48px;
    left: 50%;
    width: 24px;
    height: 24px;
    border: 5px solid var(--page-deep);
    border-radius: 50%;
    background: var(--blue-deep);
    box-shadow:
      0 0 0 1px var(--blue-deep),
      0 0 0 7px color-mix(in srgb, var(--page-deep) 88%, transparent);
    transform: translateX(-50%);
  }

  .ride-journey-stops li:nth-child(2) .ride-stop-node {
    top: 120px;
  }

  .ride-journey-stops li:nth-child(3) .ride-stop-node {
    top: 60px;
  }

  .ride-stop-label {
    color: var(--blue-deep);
    font-size: 0.88rem;
    font-weight: 600;
  }

  .ride-journey-stops strong {
    max-width: 16ch;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.1vw, 2.2rem);
    letter-spacing: -0.035em;
    line-height: 1.04;
  }

  .ride-journey-stops li > span:last-child {
    max-width: 31ch;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .ride-journey-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 30px;
    color: var(--green-deep);
    font-size: 0.78rem;
    font-weight: 600;
  }

  .ride-journey-status i,
  .radio-signal-note i {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
  }

  .ride-sticky-copy > .text-link {
    margin-top: 18px;
  }

  .ride-evidence {
    margin-top: clamp(74px, 8vw, 112px);
  }

  /* Radio closes with concrete evidence from the real product flow. */
  .radio-signal-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 30px 48px;
    margin-top: clamp(64px, 7vw, 96px);
    padding-top: 34px;
    background-image: var(--rule-primary);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }

  .radio-signal-story .radio-integrated-proof {
    grid-column: 1 / -1;
  }

  .radio-signal-note {
    display: flex;
    max-width: 62ch;
    align-items: center;
    gap: 10px;
    color: var(--ink-soft);
    font-size: 0.8rem;
  }

  .radio-cta {
    justify-self: end;
    margin: 0;
  }
}

@layer responsive {
  @media (max-width: 1100px) {
    .ride-story {
      margin-top: 76px;
    }

    .radio-signal-story {
      grid-template-columns: 1fr;
    }

    .radio-cta {
      justify-self: start;
    }
  }

  @media (max-width: 767px) {
    .ride-story {
      margin-top: 66px;
    }

    .ride-sticky-copy h3 {
      max-width: 12ch;
      font-size: clamp(2.45rem, 11vw, 3.4rem);
    }

    .ride-journey {
      margin-top: 44px;
      padding-top: 0;
    }

    .ride-journey-coordinate,
    .ride-journey-route {
      display: none;
    }

    .ride-journey-stops {
      grid-template-columns: 1fr;
      gap: 42px;
    }

    .ride-journey-stops::before {
      position: absolute;
      top: 10px;
      bottom: 22px;
      left: 20px;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(var(--blue-deep), color-mix(in srgb, var(--blue-deep) 62%, var(--green)));
      content: "";
    }

    .ride-journey-stops li,
    .ride-journey-stops li:nth-child(2),
    .ride-journey-stops li:nth-child(3) {
      gap: 6px;
      min-height: 110px;
      padding: 0 0 0 62px;
    }

    .ride-stop-node,
    .ride-journey-stops li:nth-child(2) .ride-stop-node,
    .ride-journey-stops li:nth-child(3) .ride-stop-node {
      top: 5px;
      left: 20px;
      width: 22px;
      height: 22px;
      border-width: 5px;
    }

    .ride-journey-stops li:nth-child(3) .ride-stop-node {
      background: var(--green);
      box-shadow:
        0 0 0 1px var(--green-deep),
        0 0 0 7px color-mix(in srgb, var(--page-deep) 88%, transparent);
    }

    .ride-journey-stops strong {
      max-width: 18ch;
      font-size: clamp(1.45rem, 7vw, 1.9rem);
    }

    .ride-journey-stops li > span:last-child {
      max-width: 35ch;
      font-size: 0.88rem;
    }

    .ride-journey-status {
      justify-content: flex-start;
      margin: 32px 0 0 62px;
    }

    .ride-sticky-copy > .text-link {
      margin-top: 30px;
    }

    .ride-evidence {
      margin-top: 72px;
    }

    .radio-signal-story {
      gap: 26px;
      margin-top: 58px;
      padding-top: 28px;
    }

    .radio-signal-note {
      align-items: flex-start;
    }

    .radio-cta {
      display: flex;
      width: 100%;
      min-height: 52px;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border-radius: var(--radius-field);
      background: var(--blue-deep);
      color: var(--ink-inverse);
    }
  }
}