/* Landing page — requires stylesheets/shared.css first */

    /* ── Nav (landing extensions) ────────────────────────── */
    .nav__wordmark {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.25rem;
      color: var(--white);
      letter-spacing: -0.01em;
    }

    /*
      Header SVG wordmark (~4.7:1 aspect). A max-width on the *container* in vw
      (old: 15vw) made portrait phones ~54px wide — the SVG height collapsed to
      ~12px and vanished. Tie size to height + cap width vs remaining header space.
    */
    .nav .nav__logo .nav__wordmark {
      display: flex;
      align-items: center;
      line-height: 0;
      flex-shrink: 1;
      min-width: 0;
    }

    .nav .nav__logo .nav__wordmark img {
      /* Wide viewports: noticeably larger (~+80%); capped so the bar stays balanced. */
      height: clamp(33px, 8.55vw, 51px);
      width: auto;
      max-height: 51px;
      max-width: min(267px, calc(100vw - 13rem));
      object-fit: contain;
      object-position: left center;
    }

    .nav__wordmark span {
      color: var(--gold);
      font-style: italic;
    }

    .nav__links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(0.75rem, 1.5vw, 1.75rem);
      list-style: none;
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      padding: 0;
      flex-wrap: nowrap;
    }

    .nav__links a {
      font-size: clamp(0.78rem, 0.85vw, 0.88rem);
      font-weight: 400;
      white-space: nowrap;
      color: var(--navlink-text);
      transition: color 0.2s;
    }

    .nav__links a:hover {
      font-weight: 900;
    }

    .nav__cta {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-shrink: 0;
    }

    .nav__cta a.btn--ghost {
      color: var(--navlink-text);
    }

    .nav__cta a.btn--ghost:hover {
      font-weight: 900;
    }

    .nav__mobile-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: none;
      border-radius: 12px;
      background: rgba(13, 46, 92, 0.07);
      color: var(--navlink-text);
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s ease, transform 0.15s ease;
    }

    .nav__mobile-toggle:hover {
      background: rgba(13, 46, 92, 0.12);
    }

    .nav__mobile-toggle:active {
      transform: scale(0.96);
    }

    /* Long translations: hide inline links, show menu (set by site-nav-offset.js) */
    @media (min-width: 901px) {
      .nav.nav--compact .nav__links {
        display: none;
      }

      .nav.nav--compact .nav__menu-anchor {
        display: flex;
      }

      .nav.nav--compact .nav__mobile-toggle {
        display: flex;
      }

      .nav.nav--compact .nav__cta > .btn.btn--ghost {
        display: none;
      }
    }

    .nav__menu-anchor {
      position: relative;
      display: none;
      align-items: center;
    }

    .nav-menu-panel {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: calc(100% + 0.55rem);
      z-index: 220;
      min-width: 15.5rem;
      max-width: min(22rem, 85vw);
      background: var(--white);
      border: 1px solid rgba(13, 46, 92, 0.1);
      border-radius: var(--radius-md);
      box-shadow: 0 16px 40px rgba(13, 46, 92, 0.16), 0 2px 8px rgba(13, 46, 92, 0.06);
      padding: 0.45rem 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px) scale(0.98);
      transform-origin: top right;
      transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    }

    .nav-menu-panel::before {
      content: '';
      position: absolute;
      inset-block-start: -5px;
      inset-inline-end: 0.85rem;
      width: 10px;
      height: 10px;
      background: var(--white);
      border-inline-start: 1px solid rgba(13, 46, 92, 0.1);
      border-block-start: 1px solid rgba(13, 46, 92, 0.1);
      transform: rotate(45deg);
    }

    [dir="rtl"] .nav-menu-panel {
      transform-origin: top left;
    }

    .nav-menu-panel.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .nav-menu-panel__list {
      list-style: none;
      margin: 0;
      padding: 0.15rem 0;
    }

    .nav-menu-panel__list a {
      display: block;
      padding: 0.62rem 1.15rem;
      font-family: var(--font-body);
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--navy);
      text-decoration: none;
      line-height: 1.35;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .nav-menu-panel__list a:hover,
    .nav-menu-panel__list a:focus-visible {
      background: rgba(45, 125, 210, 0.08);
      color: var(--blue);
      outline: none;
    }

    .nav-menu-panel__footer {
      border-block-start: 1px solid rgba(13, 46, 92, 0.08);
      margin-block-start: 0.25rem;
      padding: 0.65rem 1rem 0.55rem;
    }

    .nav-menu-panel__footer .btn {
      width: 100%;
      justify-content: center;
      font-size: 0.82rem;
      padding: 0.45rem 0.85rem;
    }

    /* ── Hero ──────────────────────────────────────────── */
    .hero {
      position: relative;
      overflow: hidden;
      background: var(--navy);
      padding-block-start: calc(var(--site-nav-offset) + var(--site-nav-gap));
      min-height: 100svh;
      display: flex;
      align-items: center;
    }

    /* Road texture overlay */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(180deg,
          transparent 0, transparent 48px,
          rgba(255, 255, 255, 0.03) 48px, rgba(255, 255, 255, 0.03) 50px),
        linear-gradient(160deg, #0D2E5C 0%, #0a1f3d 50%, #080f1e 100%);
      pointer-events: none;
    }

    /* Glow */
    .hero::after {
      content: '';
      position: absolute;
      inset-block-start: -20%;
      inset-inline-start: 50%;
      width: 80vw;
      height: 80vw;
      max-width: 900px;
      max-height: 900px;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(45, 125, 210, 0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero__inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      padding-block: 4rem;
    }

    .hero__eyebrow {
      margin-block-end: 1.25rem;
    }

    .hero__title {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 5vw, 3.8rem);
      font-weight: 900;
      line-height: 1.08;
      color: var(--white);
      margin-block-end: 1.25rem;
    }

    .hero__title em {
      font-style: italic;
      color: var(--gold);
      display: block;
    }

    .hero__subtitle {
      font-size: clamp(1rem, 2vw, 1.15rem);
      color: rgba(255, 255, 255, 0.72);
      line-height: 1.7;
      max-width: 480px;
      margin-block-end: 2rem;
    }

    .hero__actions {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .hero__store-badges {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-block-start: 1.75rem;
    }

    .store-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius-md);
      padding: 0.55rem 1rem;
      color: var(--white);
      font-size: 0.82rem;
      font-weight: 400;
      transition: all 0.2s;
    }

    .store-badge strong {
      font-weight: 500;
      display: block;
      font-size: 0.92rem;
    }

    .store-badge:hover {
      background: rgba(255, 255, 255, 0.14);
      transform: translateY(-1px);
    }

    .store-badge svg {
      flex-shrink: 0;
    }

    /* Phone mockup */
    .hero__visual {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .phone-frame {
      width: min(300px, 80vw);
      border-radius: 40px;
      background: var(--asphalt);
      border: 6px solid rgba(255, 255, 255, 0.12);
      box-shadow: var(--shadow-hero), 0 0 0 1px rgba(255, 255, 255, 0.06);
      overflow: hidden;
      /* Continuous transform keeps the fake phone on its own compositor layer. */
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      animation: float 5s ease-in-out infinite;
    }

    /*
      translate3d (not translateY) plus layer hints avoids subpixel jitter / bitmap
      "shimmer" in nested images while the chassis moves (Blink/WebKit artifact).
    */
    @keyframes float {

      0%,
      100% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(0, -14px, 0);
      }
    }

    .phone-screen {
      --ps-text-primary: var(--text-dark);
      --ps-text-muted: #5b6775;
      --ps-text-subtle: #6b7580;

      background: linear-gradient(160deg, #eef6fb 0%, #e8f1f3 100%);
      color: var(--ps-text-primary);
      padding: 1.5rem 1.25rem;
      min-height: 520px;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .ps-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.45rem 0.6rem;
      margin-block-start: -0.15rem;
      margin-inline: -0.4rem;
      margin-block-end: 0.15rem;
      border-radius: 12px;
      background: #eef6fb;
      border: 1px solid var(--blue);
      box-shadow: 0 2px 8px rgba(13, 46, 92, 0.08);
    }

    .ps-logo {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.95rem;
      flex-shrink: 0;
      min-width: 0;
      max-width: clamp(104px, 10.4vw, 195px);
      background-color: transparent;
    }

    .ps-logo span {
      color: var(--gold);
    }

    /*
      Raster inside the marketing SVG otherwise re-snaps height/width fractionally each
      repaint while the ancestor transform interpolates → visible flicker/jump.
    */
    .ps-logo img {
      display: block;
      width: 100%;
      height: clamp(17px, 4.42vw, 26px);
      max-height: 26px;
      object-fit: contain;
      object-position: left center;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translateZ(0);
    }

    .ps-bell {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(45, 125, 210, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue);
    }

    .ps-bell svg {
      width: 15px;
      height: 15px;
      display: block;
    }

    .ps-welcome {
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--ps-text-primary);
      margin-block-end: 0.1rem;
    }

    .ps-welcome small {
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ps-text-subtle);
      display: block;
      margin-block-end: 4px;
    }

    .ps-card {
      background: #fff;
      border-radius: 14px;
      padding: 0.85rem 1rem;
      border: 1px solid rgba(13, 46, 92, 0.1);
      box-shadow: 0 2px 8px rgba(13, 46, 92, 0.04);
    }

    .ps-card-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-block-end: 6px;
    }

    .ps-card-row:last-child {
      margin: 0;
    }

    .ps-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(45, 125, 210, 0.12);
      border: 1px solid rgba(45, 125, 210, 0.22);
      color: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .ps-icon svg {
      width: 15px;
      height: 15px;
      display: block;
    }

    .ps-card-label {
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--ps-text-primary);
    }

    .ps-card-sub {
      font-size: 0.67rem;
      color: var(--ps-text-muted);
    }

    .ps-divider {
      height: 1px;
      background: rgba(13, 46, 92, 0.1);
    }

    .ps-card-kicker {
      margin-block-end: 4px;
      font-size: 0.65rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--ps-text-muted);
    }

    .ps-card--compact {
      padding: 0.6rem 0.75rem;
    }

    .ps-card-label--md {
      font-size: 0.8rem;
    }

    .ps-recall {
      background: rgba(232, 184, 75, 0.16);
      border: 1px solid rgba(200, 150, 48, 0.35);
      border-radius: 14px;
      padding: 0.85rem 1rem;
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .ps-recall-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--gold);
      flex-shrink: 0;
      margin-block-start: 3px;
    }

    .ps-recall-text {
      font-size: 0.75rem;
      color: var(--ps-text-primary);
      line-height: 1.4;
    }

    .ps-recall-text strong {
      color: #9a7318;
      font-weight: 600;
      display: block;
      margin-block-end: 2px;
    }

    .ps-tabs {
      display: flex;
      justify-content: space-around;
      margin-block-start: auto;
      padding-block-start: 0.5rem;
      border-block-start: 1px solid rgba(13, 46, 92, 0.12);
    }

    .ps-tab {
      font-size: 0.6rem;
      font-weight: 500;
      color: var(--ps-text-muted);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .ps-tab.active {
      color: var(--text-dark);
    }

    .ps-tab-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .ps-tab .ps-tab-icon {
      color: #94a3b8;
    }

    .ps-tab.active .ps-tab-icon {
      color: var(--blue);
    }

    /* ── Section shared ────────────────────────────────── */
    .section {
      padding-block: var(--section-gap);
      scroll-margin-top: calc(var(--site-nav-offset) + 0.75rem);
    }

    .section__header {
      text-align: center;
      max-width: 640px;
      margin-inline: auto;
      margin-block-end: 4rem;
    }

    .section__title {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 4vw, 2.8rem);
      font-weight: 700;
      line-height: 1.15;
      margin-block: 0.75rem 1rem;
      color: var(--text-dark);
    }

    .section__title em {
      color: var(--blue);
      font-style: italic;
    }

    .section__body {
      font-size: 1.05rem;
      color: var(--text-mid);
      line-height: 1.75;
    }

    /* ── Story / Why Carspel ───────────────────────────── */
    .story {
      background: var(--cream);
    }

    .story__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

    .story__quote {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      font-weight: 700;
      font-style: italic;
      line-height: 1.3;
      color: var(--navy);
      border-inline-start: 4px solid var(--gold);
      padding-inline-start: 1.5rem;
      margin-block: 2rem;
    }

    .story__text {
      font-size: 1rem;
      color: var(--text-mid);
      line-height: 1.8;
    }

    .story__text+.story__text {
      margin-block-start: 1rem;
    }

    .story__founder {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-block-start: 1.75rem;
      padding-block-start: 1.75rem;
      border-block-start: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Circular crop: square source image fills the circle; overflow clips corners. */
    .founder-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: rgba(0, 0, 0, 0.06);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

    .founder-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      display: block;
    }

    .founder-info strong {
      font-size: 0.9rem;
      font-weight: 500;
      display: block;
      color: var(--text-dark);
    }

    .founder-info span {
      font-size: 0.8rem;
      color: var(--text-light);
    }

    /* Journey visual (screenshot / artwork) */
    .story__visual {
      position: relative;
      min-width: 0;
      max-width: 340px;
    }

    /* Image variant: hides synthetic “road spine” styling from the prior HTML timeline. */
    .road-visual--image {
      margin: 0;
      padding: 0;
      background: transparent;
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-hero);
    }

    .road-visual--image img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      vertical-align: top;
    }

    /* ── Features ──────────────────────────────────────── */
    .features {
      background: var(--white);
    }

    .features__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .features__guide-link {
      display: inline-block;
      margin-block-start: 0.35rem;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--accent-blue);
      text-decoration: none;
    }

    .features__guide-link:hover {
      text-decoration: underline;
    }

    .ps-icon--charge {
      background: rgba(232, 184, 75, 0.18);
      color: var(--gold);
    }

    .feature-card {
      background: var(--cream);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
      border: 1px solid rgba(0, 0, 0, 0.06);
      transition: transform 0.22s, box-shadow 0.22s;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-card);
    }

    .feature-card--wide {
      grid-column: span 2;
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-block-end: 1.1rem;
    }

    .fi-blue {
      background: rgba(45, 125, 210, 0.12);
    }

    .fi-gold {
      background: rgba(232, 184, 75, 0.15);
    }

    .fi-green {
      background: rgba(74, 222, 128, 0.12);
    }

    .fi-red {
      background: rgba(248, 113, 113, 0.12);
    }

    .fi-navy {
      background: rgba(13, 46, 92, 0.10);
    }

    .fi-teal {
      background: rgba(20, 184, 166, 0.12);
    }

    .feature-card h3 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      margin-block-end: 0.5rem;
      color: var(--text-dark);
    }

    .feature-card p {
      font-size: 0.9rem;
      color: var(--text-mid);
      line-height: 1.7;
    }

    .feature-card .feature-highlight {
      display: inline-block;
      margin-block-start: 0.75rem;
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--blue);
      background: rgba(45, 125, 210, 0.08);
      border-radius: 100px;
      padding: 3px 10px;
    }

    /* Business / gig driver wide card */
    .feature-card--business {
      background: linear-gradient(135deg, var(--cream) 0%, rgba(13, 46, 92, 0.04) 100%);
      border-color: rgba(13, 46, 92, 0.1);
    }

    .feature-business__inner {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
      gap: 1.75rem;
      align-items: start;
    }

    .feature-business__copy .feature-icon {
      margin-block-end: 1rem;
    }

    .feature-business__panel {
      background: var(--navy);
      color: rgba(255, 255, 255, 0.9);
      border-radius: var(--radius-md);
      padding: 1.25rem 1.35rem;
      box-shadow: 0 12px 32px rgba(13, 46, 92, 0.18);
    }

    /* Override .feature-card p { color: text-mid } for text on navy panel */
    .feature-card--business .feature-business__panel p {
      color: rgba(255, 255, 255, 0.82);
    }

    .feature-business__panel-title {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--gold-light);
      margin: 0 0 1rem;
      line-height: 1.35;
    }

    .feature-card--business .feature-business__panel-title {
      color: var(--gold-light);
    }

    .feature-business__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .feature-business__list li {
      display: grid;
      gap: 0.35rem;
    }

    .feature-business__label {
      font-size: 0.82rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.88);
    }

    .feature-business__bar {
      display: block;
      height: 7px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.12);
      overflow: hidden;
    }

    .feature-business__fill {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--gold), #f5d078);
    }

    .feature-business__fill--trips {
      width: 72%;
    }

    .feature-business__fill--fuel {
      width: 88%;
    }

    .feature-business__fill--service {
      width: 46%;
    }

    .feature-business__note {
      margin: 1rem 0 0;
      font-size: 0.76rem;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.82);
      border-block-start: 1px solid rgba(255, 255, 255, 0.16);
      padding-block-start: 0.85rem;
    }

    .feature-business__callout {
      margin-block-start: 1rem;
      padding: 0.75rem 0.85rem;
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.14);
      font-size: 0.82rem;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.92);
    }

    .feature-fuel__inner {
      display: grid;
      grid-template-columns: 1fr minmax(220px, 280px);
      gap: 1.5rem;
      align-items: start;
    }

    .energy-entry-mock {
      background: var(--white);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--radius-md);
      padding: 1rem 1.1rem;
      box-shadow: var(--shadow-soft);
    }

    .energy-entry-mock__date {
      font-weight: 600;
      font-size: 0.92rem;
      color: var(--navy);
      margin-block-end: 0.35rem;
    }

    .energy-entry-mock__line1 {
      font-size: 0.84rem;
      color: var(--text-mid);
      margin-block-end: 0.45rem;
    }

    .energy-entry-mock__location {
      font-size: 0.8rem;
      color: var(--text-mid);
      margin-block-end: 0.65rem;
    }

    .energy-entry-mock__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .energy-entry-mock__chip {
      font-size: 0.72rem;
      font-weight: 500;
      padding: 0.22rem 0.55rem;
      border-radius: 999px;
      background: rgba(45, 125, 210, 0.1);
      color: var(--navy);
    }

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

    /* ── Resale spotlight ──────────────────────────────── */
    .resale {
      background: linear-gradient(135deg, var(--navy) 0%, #0a1f3d 100%);
      position: relative;
      overflow: hidden;
    }

    .resale::before {
      content: '';
      position: absolute;
      inset-block-end: -30%;
      inset-inline-end: -10%;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 184, 75, 0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    .resale__inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

    .resale__text {
      color: var(--white);
    }

    .resale__text .section__title {
      color: var(--white);
    }

    .resale__text .section__title em {
      color: var(--gold);
    }

    .resale__text .section__body {
      color: rgba(255, 255, 255, 0.7);
    }

    .resale__steps {
      margin-block-start: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .resale-step {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .resale-step-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--gold);
      color: var(--navy);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.82rem;
      font-weight: 700;
    }

    .resale-step-text strong {
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--white);
      display: block;
      margin-block-end: 2px;
    }

    .resale-step-text span {
      font-size: 0.83rem;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.5;
    }

    /* Report card visual */
    .report-card-visual {
      background: var(--white);
      border-radius: var(--radius-xl);
      padding: 1.75rem;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    }

    .rcv-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-block-end: 1.25rem;
    }

    .rcv-brand {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.95rem;
      max-width: clamp(100px, 10vw, 150px);
      background-color: transparent;
    }

    .rcv-brand span {
      color: var(--gold);
    }

    .rcv-badge {
      font-size: 0.72rem;
      font-weight: 500;
      background: #DCFCE7;
      color: #15803D;
      padding: 3px 10px;
      border-radius: 100px;
    }

    .rcv-vehicle {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-block-end: 0.25rem;
    }

    .rcv-sub {
      font-size: 0.8rem;
      color: var(--text-light);
      margin-block-end: 1.25rem;
    }

    .rcv-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem;
      margin-block-end: 1.25rem;
    }

    .rcv-stat {
      background: var(--cream);
      border-radius: 10px;
      padding: 0.75rem;
      text-align: center;
    }

    .rcv-stat-num {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--navy);
      font-family: var(--font-display);
    }

    .rcv-stat-lbl {
      font-size: 0.65rem;
      color: var(--text-light);
      margin-block-start: 2px;
    }

    .rcv-rows {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .rcv-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      padding: 0.5rem 0;
      border-block-end: 1px solid rgba(0, 0, 0, 0.05);
    }

    .rcv-row:last-child {
      border: none;
    }

    .rcv-row span {
      color: var(--text-mid);
    }

    .rcv-row strong {
      color: var(--text-dark);
      font-weight: 500;
    }

    /* ── Pricing ───────────────────────────────────────── */
    .pricing {
      background: var(--cream);
    }

    .pricing__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      align-items: start;
    }

    .plan-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1.5px solid rgba(0, 0, 0, 0.07);
      padding: 2rem 1.75rem;
      transition: transform 0.22s, box-shadow 0.22s;
    }

    .plan-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-card);
    }

    .plan-card--featured {
      background: var(--navy);
      border-color: var(--navy);
      position: relative;
      padding-block-start: 2.5rem;
    }

    .plan-popular {
      position: absolute;
      inset-block-start: -13px;
      inset-inline-start: 50%;
      transform: translateX(-50%);
      background: var(--gold);
      color: var(--navy);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 100px;
      white-space: nowrap;
    }

    .plan-name {
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-light);
      margin-block-end: 0.4rem;
    }

    .plan-card--featured .plan-name {
      color: rgba(255, 255, 255, 0.55);
    }

    .plan-price {
      font-family: var(--font-display);
      font-size: 2.4rem;
      font-weight: 900;
      line-height: 1;
      color: var(--text-dark);
      margin-block-end: 0.25rem;
    }

    .plan-card--featured .plan-price {
      color: var(--white);
    }

    .plan-price sup {
      font-size: 1.1rem;
      font-weight: 400;
      vertical-align: super;
    }

    .plan-price sub {
      font-size: 0.85rem;
      font-weight: 400;
      color: var(--text-light);
      vertical-align: baseline;
    }

    .plan-card--featured .plan-price sub {
      color: rgba(255, 255, 255, 0.55);
    }

    .plan-annual {
      font-size: 0.8rem;
      color: var(--text-light);
      margin-block-end: 1.25rem;
    }

    .plan-card--featured .plan-annual {
      color: rgba(255, 255, 255, 0.55);
    }

    .plan-desc {
      font-size: 0.85rem;
      color: var(--text-mid);
      line-height: 1.6;
      margin-block-end: 1.5rem;
      padding-block-end: 1.5rem;
      border-block-end: 1px solid rgba(0, 0, 0, 0.07);
    }

    .plan-card--featured .plan-desc {
      color: rgba(255, 255, 255, 0.65);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .plan-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      margin-block-end: 2rem;
    }

    .plan-features li {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-size: 0.85rem;
      color: var(--text-mid);
      line-height: 1.4;
    }

    .plan-card--featured .plan-features li {
      color: rgba(255, 255, 255, 0.75);
    }

    .plan-features li::before {
      content: '✓';
      color: var(--blue);
      font-weight: 700;
      flex-shrink: 0;
    }

    .plan-card--featured .plan-features li::before {
      color: var(--gold);
    }

    .plan-cta {
      display: block;
      text-align: center;
    }

    /* ── Testimonials / social proof ───────────────────── */
    .proof {
      background: var(--white);
    }

    .proof__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
    }

    .proof-card {
      background: var(--cream);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .proof-stars {
      color: var(--gold);
      font-size: 0.85rem;
      margin-block-end: 0.75rem;
      letter-spacing: 2px;
    }

    .proof-text {
      font-size: 0.9rem;
      color: var(--text-mid);
      line-height: 1.7;
      font-style: italic;
      margin-block-end: 1.1rem;
    }

    .proof-author {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-dark);
    }

    .proof-author span {
      font-weight: 400;
      color: var(--text-light);
    }

    /* ── FAQ ───────────────────────────────────────────── */
    .faq {
      background: var(--cream);
    }

    .faq__list {
      max-width: 720px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    details {
      border-block-end: 1px solid rgba(0, 0, 0, 0.08);
    }

    details:first-child {
      border-block-start: 1px solid rgba(0, 0, 0, 0.08);
    }

    summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.2rem 0;
      font-size: 0.97rem;
      font-weight: 500;
      color: var(--text-dark);
      user-select: none;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    .summary-icon {
      transition: transform 0.22s;
      font-size: 1.1rem;
      color: var(--text-light);
    }

    details[open] .summary-icon {
      transform: rotate(45deg);
    }

    .faq-answer {
      font-size: 0.9rem;
      color: var(--text-mid);
      line-height: 1.8;
      padding-block-end: 1.2rem;
    }

    /* ── CTA Banner ────────────────────────────────────── */
    .cta-banner {
      background: linear-gradient(130deg, var(--blue) 0%, var(--navy) 100%);
      text-align: center;
      padding-block: 6rem;
      position: relative;
      overflow: hidden;
    }

    .cta-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(-45deg,
          transparent 0, transparent 20px,
          rgba(255, 255, 255, 0.02) 20px, rgba(255, 255, 255, 0.02) 21px);
    }

    .cta-banner__inner {
      position: relative;
      z-index: 1;
    }

    .cta-banner__title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 900;
      color: var(--white);
      margin-block: 1rem 1.25rem;
      line-height: 1.15;
    }

    .cta-banner__title em {
      color: var(--gold);
      font-style: italic;
    }

    .cta-banner__sub {
      font-size: 1.05rem;
      color: rgba(255, 255, 255, 0.72);
      max-width: 480px;
      margin-inline: auto;
      margin-block-end: 2.5rem;
    }

    .cta-banner__actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ── Footer ────────────────────────────────────────── */
    .footer {
      background: var(--road);
      color: rgba(255, 255, 255, 0.55);
      padding-block: 3.5rem 2rem;
    }

    .footer__grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 3rem;
      margin-block-end: 3rem;
    }

    .footer__brand p {
      font-size: 0.85rem;
      line-height: 1.7;
      margin-block-start: 0.75rem;
      max-width: 260px;
    }

    .brand__wordmark {
      max-width: clamp(100px, 10vw, 150px);
    }

    .footer__col h4 {
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--white);
      margin-block-end: 1rem;
    }

    .footer__col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .brand__logo {
      display: inline-flex;
      align-items: center;
      color: inherit;
      opacity: 0.95;
    }

    .brand__logo:hover {
      opacity: 1;
    }

    .footer .brand__wordmark img {
      display: block;
      height: 36px;
      width: auto;
    }

    .footer__col a,
    .footer__legal a {
      font-size: 0.85rem;
      transition: color 0.2s;
      color: rgba(255, 255, 255, 0.72);
    }

    .footer__col a:hover,
    .footer__legal a:hover {
      color: var(--white);
    }

    /* Language selector */
    .lang-select {
      background: rgba(255, 255, 255, 0.8);
      background: rgba(0, 0, 0, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--radius-sm);
      color: rgba(255, 255, 255, 0.75);
      /* color: var(--navy); */
      font-family: var(--font-body);
      font-size: 0.8rem;
      padding: 0.4rem 0.75rem;
      cursor: pointer;
      margin-block-start: 1rem;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-inline-end: 28px;
    }

    .lang-select:focus {
      outline: 2px solid var(--blue);
    }

    .footer__bottom {
      border-block-start: 1px solid rgba(255, 255, 255, 0.07);
      padding-block-start: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 1rem 2rem;
      font-size: 0.78rem;
    }

    .footer__meta {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      min-width: min(100%, 20rem);
    }

    .footer__meta-line {
      display: block;
      color: rgba(255, 255, 255, 0.5);
      line-height: 1.45;
    }

    .footer__meta-line--strong {
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
    }

    .footer__legal {
      display: flex;
      gap: 1.25rem 1.5rem;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-inline-start: auto;
    }

    /* ── Scroll animations ─────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .reveal-delay-1 {
      transition-delay: 0.1s;
    }

    .reveal-delay-2 {
      transition-delay: 0.2s;
    }

    .reveal-delay-3 {
      transition-delay: 0.3s;
    }

    .reveal-delay-4 {
      transition-delay: 0.4s;
    }

    /* ── Responsive ────────────────────────────────────── */
    @media (max-width: 900px) {
      :root {
        --section-gap: 4.5rem;
      }

      .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .hero__subtitle {
        margin-inline: auto;
      }

      .hero__actions {
        justify-content: center;
      }

      .hero__store-badges {
        justify-content: center;
      }

      .hero__visual {
        order: -1;
      }

      .phone-frame {
        width: min(240px, 65vw);
      }

      .story__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }

      .resale__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

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

      .feature-card--wide {
        grid-column: span 2;
      }

      .feature-business__inner {
        grid-template-columns: 1fr;
      }

      .pricing__grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
      }

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

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

      .footer__brand {
        grid-column: 1 / -1;
      }

      .footer__brand p {
        max-width: 40rem;
      }

      .lang-select {
        margin-inline-start: 0;
      }

      .nav__links {
        display: none;
      }

      .nav-menu-panel {
        display: none !important;
      }

      /*
        Mobile navbar: row 1 = logo + wordmark + hamburger only.
        Row 2 (bottom of bar) = compact “See plans” + “Download free” so CTAs never overlap branding.
      */
      .nav {
        padding-block: 0.55rem;
      }

      .nav__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.55rem;
      }

      .nav__logo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        max-width: 100%;
      }

      .nav__cta {
        display: contents;
      }

      .nav__cta>.btn.btn--ghost {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        align-self: center;
      }

      .nav__cta>.btn.btn--gold {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        align-self: center;
      }

      .nav__menu-anchor {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        margin-inline-start: auto;
        display: flex;
      }

      .nav__mobile-toggle {
        display: flex;
      }

      .nav .nav__cta .btn {
        padding: 0.35rem 0.75rem;
        font-size: 0.74rem;
        font-weight: 600;
      }

      .hero {
        padding-block-start: calc(var(--site-nav-offset) + 2rem);
      }

      /* Slightly smaller mark; row 1 only competes with the menu icon now */
      .nav__logo-mark {
        width: 44px;
        height: 44px;
      }

      /* Narrow / hamburger layout: modest bump (~+10%) vs former defaults. */
      .nav .nav__logo .nav__wordmark img {
        height: clamp(20px, 5.23vw, 31px);
        max-height: 31px;
        max-width: min(176px, calc(100vw - 8rem));
      }

      .rcv-stats {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 600px) {
      .features__grid {
        grid-template-columns: 1fr;
      }

      .feature-card--wide {
        grid-column: span 1;
      }

      .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .footer__legal {
        margin-inline-start: 0;
        justify-content: center;
      }

      .footer__meta {
        align-items: center;
        text-align: center;
      }

      .hero__title {
        font-size: 2.2rem;
      }

      .nav .nav__logo .nav__wordmark img {
        max-width: min(146px, calc(100vw - 8.5rem));
      }

      .plan-card--featured {
        padding-block-start: 2.5rem;
      }
    }

    /* Portrait phones/tablets: larger wordmark (~+10% vs prior sizing). */
    @media (max-width: 900px) and (orientation: portrait) {
      .nav .nav__logo .nav__wordmark img {
        height: clamp(30px, 7.84vw, 46px);
        max-height: 46px;
        max-width: min(264px, calc(100vw - 8rem));
      }
    }

    @media (max-width: 600px) and (orientation: portrait) {
      .nav .nav__logo .nav__wordmark img {
        max-width: min(218px, calc(100vw - 8.5rem));
      }
    }

    /* ── Mobile nav drawer ─────────────────────────────── */
    .mobile-nav {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      padding: calc(var(--site-nav-offset) + 1rem) 1.25rem 2rem;
      background:
        linear-gradient(165deg, rgba(13, 46, 92, 0.98) 0%, rgba(26, 74, 138, 0.96) 55%, rgba(13, 46, 92, 0.99) 100%);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transform: translateX(100%);
      transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
      overflow-y: auto;
    }

    [dir="rtl"] .mobile-nav {
      transform: translateX(-100%);
    }

    .mobile-nav.open {
      transform: none;
    }

    .mobile-nav a:not(.btn) {
      font-family: var(--font-body);
      font-size: 1.05rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: rgba(255, 255, 255, 0.94);
      text-decoration: none;
      padding: 0.95rem 1.05rem;
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.08);
      line-height: 1.35;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
    }

    .mobile-nav a:not(.btn):hover,
    .mobile-nav a:not(.btn):focus-visible {
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.16);
      outline: none;
    }

    .mobile-nav a:not(.btn):active {
      transform: scale(0.99);
      background: rgba(255, 255, 255, 0.16);
    }

    .mobile-nav .btn {
      margin-block-start: 1rem;
      width: 100%;
      justify-content: center;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 1rem;
      border-radius: var(--radius-md);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }

    .mobile-close {
      position: fixed;
      inset-block-start: 1rem;
      inset-inline-end: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      color: var(--white);
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
      transition: background 0.18s ease, transform 0.15s ease;
    }

    .mobile-close:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .mobile-close:active {
      transform: scale(0.96);
    }