:root {
  --navy: #071943;
  --teal: #4EBDF7;
  --orange: #F27255;
  --orange-hover: #D95241;
  --orange-deep: #C8443A;
  --orange-text: var(--orange-deep);
  --orange-hover-ink: #001124;
  --sand: #fde0ad;
  --cream: #fff9ee;
  --card: #fffdfa;
  --shadow: 0 12px 34px rgba(63, 41, 18, .13);
  --soft-shadow: 0 7px 20px rgba(41, 30, 18, .1);
  --font: "Pally", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #fff;
}

body {
  margin: 0;
  color: var(--navy);
  background: #fff;
  font-family: var(--font);
  letter-spacing: 0;
  overflow-x: hidden;
}

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

.rn-page {
  width: 100%;
  /* junction-sand underlay: the seam crossfades blend into this instead of white */
  background: #f7d5a0;
}

.rn-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}

.rn-shot + .rn-shot {
  margin-top: 0;
}

.rn-shot::after {
  display: none;
}

.rn-goo {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Buttons */
.rn-blob {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .52em;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: var(--navy);
  background: var(--orange);
  text-decoration: none;
  font-weight: 800;
  line-height: 1;
  isolation: isolate;
  box-shadow: 0 10px 22px rgba(242, 114, 85, .22);
  transition: color .35s ease, transform .2s ease;
}

.rn-blob::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--orange-deep);
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;
}

.rn-blob span,
.rn-blob b {
  position: relative;
  z-index: 4;
}

.rn-blob b {
  font-size: 1.32em;
  line-height: 0;
}

.rn-blob .rn-goo-box {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: url("#rn-goo-filter");
  pointer-events: none;
}

.rn-blob em {
  position: absolute;
  bottom: -78%;
  width: 31%;
  height: 105%;
  border-radius: 999px;
  background: #fff;
  transform: translateY(120%) scale(1.35);
  transition: transform .46s ease;
  z-index: 1;
}

.rn-blob em:nth-of-type(1) { left: -5%; transition-delay: 0s; }
.rn-blob em:nth-of-type(2) { left: 25%; transition-delay: .07s; }
.rn-blob em:nth-of-type(3) { left: 55%; transition-delay: .14s; }
.rn-blob em:nth-of-type(4) { left: 85%; transition-delay: .21s; }

.rn-blob:hover,
.rn-blob:focus-visible {
  color: var(--orange-text);
  transform: translateY(-1px);
}

.rn-blob:hover em,
.rn-blob:focus-visible em {
  transform: translateY(-24%) scale(2.1);
}

.rn-blob:focus-visible,
.rn-nav a:focus-visible,
.rn-schedule-list a:focus-visible,
.rn-schedule-proof a:focus-visible,
.rn-launch-pill:focus-visible {
  outline: 4px solid rgba(242, 114, 85, .24);
  outline-offset: 4px;
}

/* Hero */
.rn-hero {
  /* base sky ends well above the art's dissolve zone, so the fade there
     blends into the page's warm sand underlay instead of tinting blue */
  background: linear-gradient(180deg, #4ebdf7 0%, #4ebdf7 calc(100% - 160px), rgba(78, 189, 247, 0) calc(100% - 70px));
}

.rn-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.rn-hero::before {
  content: "";
  position: absolute;
  left: -8%;
  top: 8.4%;
  width: 58%;
  height: 66%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 55%, rgba(255,255,255,.98) 0 36%, rgba(255,255,255,.68) 57%, rgba(255,255,255,0) 78%),
    linear-gradient(90deg, rgba(223,244,255,.86) 0%, rgba(223,244,255,.56) 62%, rgba(223,244,255,0) 100%);
  filter: blur(16px);
  transform: scale(1.08);
  /* radial shape, intersected with a long vertical bottom-feather so the glow
     eases out gradually over the road/plant instead of holding a flat plateau
     and then cliffing off (matches the smooth dissolve at the top) */
  -webkit-mask-image:
    radial-gradient(ellipse 84% 70% at 36% 54%, #000 0 58%, transparent 80%),
    linear-gradient(180deg, #000 0 60%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 84% 70% at 36% 54%, #000 0 58%, transparent 80%),
    linear-gradient(180deg, #000 0 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.rn-nav {
  position: absolute;
  z-index: 20;
  left: 2.1%;
  top: 2.05%;
  width: 95.8%;
  height: 11.3%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 26.5% 1fr auto;
  align-items: center;
  gap: 1.35%;
  padding: 0 1.55% 0 1.8%;
  background: rgba(255,255,255,.97);
  border-radius: 34px;
  box-shadow: 0 16px 42px rgba(6, 28, 57, .1);
}

.rn-brand {
  display: flex;
  align-items: center;
  gap: clamp(8px, .72vw, 14px);
  height: 78%;
  width: max-content;
  text-decoration: none;
}

.rn-brand img {
  width: auto;
  height: clamp(42px, 3.4vw, 58px);
  object-fit: contain;
  object-position: left center;
}

.rn-brand span {
  color: var(--navy);
  font-size: clamp(35px, 3.25vw, 56px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 #fff,
    0 0 0 #fff;
}

.rn-brand b {
  color: var(--orange);
  font-weight: 900;
}

.rn-nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.5vw, 26px);
}

.rn-nav a {
  text-decoration: none;
  font-size: clamp(16px, 1.15vw, 18px); /* was 14px-floor; Nico nav-size fix 2026-07-23 */
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.rn-nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 46px;
}

.rn-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}

.rn-nav-links a:hover::after,
.rn-nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.rn-nav-links a.is-active {
  color: var(--orange-text);
}

.rn-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 1.75vw, 32px);
}

.rn-location {
  display: grid;
  place-items: center;
  width: clamp(34px, 2.35vw, 44px);
  height: clamp(34px, 2.35vw, 44px);
}

.rn-location svg {
  width: 72%;
  height: 72%;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rn-location svg circle {
  fill: var(--navy);
  stroke: none;
}

.rn-nav-actions > i {
  width: 1px;
  height: 54px;
  background: rgba(7, 25, 67, .25);
}

.rn-nav-cta {
  width: clamp(224px, 17.55vw, 325px);
  height: clamp(58px, 5.55vw, 84px);
  font-size: clamp(17px, 1.35vw, 26px);
}

.rn-hero-copy {
  position: absolute;
  z-index: 5;
  left: 4.7%;
  top: 15.4%;
  width: 45.5%;
}

.rn-hero-copy h1,
.rn-section-copy h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: 0;
}

.rn-hero-copy h1 {
  font-size: clamp(60px, 5.0vw, 86px);
  line-height: .98;
}

.rn-hero-heart {
  position: absolute;
  width: 6.2%;
  left: 48.8%;
  top: 40.0%;
}

.rn-hero-sub {
  margin: 2.25% 0 0;
  color: var(--teal);
  font-size: clamp(25px, 2.02vw, 36px);
  line-height: 1;
  font-weight: 800;
}

.rn-trust-line {
  display: flex;
  align-items: center;
  gap: 19px;
  margin-top: 3.45%;
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 800;
}

.rn-trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.rn-trust-line img {
  width: clamp(24px, 1.95vw, 34px);
  height: clamp(24px, 1.95vw, 34px);
  object-fit: contain;
}

.rn-trust-line i {
  width: 1px;
  height: 29px;
  background: rgba(7, 25, 67, .22);
}

.rn-launch-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 1.7vw, 28px);
  height: clamp(66px, 6vw, 91px);
  margin-top: 3.7%;
  padding: 0 clamp(28px, 3.1vw, 52px) 0 0;
  border-radius: 999px;
  color: var(--navy);
  background: var(--orange);
  box-shadow: 0 12px 25px rgba(242, 114, 85, .22);
  text-decoration: none;
  font-size: clamp(22px, 1.88vw, 32px);
  font-weight: 800;
}

.rn-launch-pill:hover,
.rn-launch-pill:focus-visible {
  color: var(--orange-hover-ink);
  background: var(--orange-hover);
}

.rn-launch-calendar-art {
  flex: 0 0 auto;
  width: clamp(64px, 5.55vw, 88px);
  height: clamp(64px, 5.55vw, 88px);
  margin-left: -1px;
  object-fit: contain;
}

.rn-rays {
  position: absolute;
  right: -7.8%;
  top: -28%;
  width: 12.5%;
  height: auto;
  aspect-ratio: 1;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 40%, var(--orange) 41% 48%, transparent 49%),
    repeating-conic-gradient(from -18deg, transparent 0 20deg, var(--orange) 20deg 28deg, transparent 28deg 56deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 33%, #000 34% 74%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 33%, #000 34% 74%, transparent 75%);
}

img.rn-rays {
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  object-fit: contain;
  right: -3.2%;
  top: -50%;
  width: 9.6%;
  transform: rotate(24deg);
  transform-origin: 30% 100%;
}

.rn-car {
  position: absolute;
  z-index: 4;
  left: 48.3%;
  top: 28.1%;
  width: 33.9%;
  height: auto;
  animation: rnCarFloat 4.6s ease-in-out infinite;
}

/* separated so the shield's cream rim never peeks from behind the backpack */
.rn-shield {
  position: absolute;
  z-index: 3;
  right: 5.4%;
  top: 36.8%;
  width: 9.7%;
}

.rn-backpack {
  position: absolute;
  z-index: 4;
  right: 8.4%;
  /* bottom-anchored above the status strip (strip top = 74.8% of hero): the
     art scales with viewport WIDTH, so a top anchor lets it grow down into
     the strip on wide windows — anchoring the bottom edge keeps clearance
     at every aspect ratio (item-4 crowding fix, Nico 2026-07-23) */
  bottom: 26.6%;
  width: 10.6%;
}

@keyframes rnCarFloat {
  0%, 100% { transform: translateY(0) rotate(.15deg); }
  50% { transform: translateY(-6px) rotate(-.15deg); }
}

.rn-hero-steps {
  position: absolute;
  z-index: 8;
  left: 10%;
  bottom: 5.6%;
  width: 80%;
  height: 19.6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.6%;
  background: rgba(255, 255, 255, .88);
  border-radius: 21px;
  box-shadow: var(--soft-shadow);
}

.rn-hero-steps article {
  display: flex;
  align-items: center;
  gap: clamp(8px, .8vw, 14px);
  flex: 0 0 auto;
  min-width: 0;
}

/* arrow flows after the text at a FIXED distance; the remaining space
   distributes equally at every boundary via space-between */
.rn-hero-steps article:not(:last-child)::after {
  content: "→";
  margin: 0 clamp(7px, 0.72vw, 13px);
  color: var(--teal);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 800;
  line-height: 1;
}

.rn-hero-steps strong {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(33px, 2.6vw, 46px);
  height: clamp(33px, 2.6vw, 46px);
  color: #fff;
  background: var(--teal);
  border-radius: 50%;
  font-size: clamp(17px, 1.2vw, 23px);
}

.rn-hero-steps img.rn-step-icon {
  width: clamp(52px, 4.4vw, 78px);
  max-height: none;
  object-fit: contain;
}

.rn-step-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(52px, 4.4vw, 78px);
  aspect-ratio: 1.18;
  color: var(--navy);
  overflow: visible;
}

img.rn-step-icon {
  display: block;
  max-height: 86%;
  object-fit: contain;
  background: none;
}

.rn-hero-steps p {
  margin: 0;
  font-size: clamp(14px, 1.15vw, 19px);
  line-height: 1.08;
  font-weight: 800;
}

/* Shared section scenery — the art lives on a ::before layer so it can
   parallax independently of the content during the seam handoff */
.rn-trust-section,
.rn-schedule-section {
  background: transparent;
}

.rn-trust-section::before,
.rn-schedule-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -80px;
  height: calc(100% + 80px);
  z-index: 0;
  pointer-events: none;
  background: #fff8ec url("/imgs/generated/rn-cream-coastal-section-bg-sq.png?v=20260721rc1") center bottom / 100% auto no-repeat;
}

.rn-sand {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: none;
}

.rn-sand-top {
  left: 0;
  top: -1px;
  width: 100%;
  opacity: .95;
}

.rn-scenery {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: none;
}

.rn-scenery-left {
  left: 0;
  bottom: 0;
  width: 9.4%;
}

.rn-scenery-right {
  right: 0;
  bottom: 0;
  width: 9.7%;
}

.rn-s3-left {
  left: 0;
  bottom: 0;
  width: 7.2%;
}

.rn-s3-right {
  right: 0;
  top: 0;
  width: 6%;
  height: 100%;
  object-fit: cover;
}

.rn-section-copy {
  position: absolute;
  z-index: 5;
}

.rn-section-copy h2 {
  position: relative;
  font-size: clamp(48px, 4.02vw, 70px);
  line-height: .96;
}

.rn-section-copy h2 > img {
  display: inline-block;
  width: .68em;
  height: auto;
  vertical-align: -.16em;
}

/* heading hearts flow inline right after the text (annotations 6 + 8) */
.rn-trust-copy h2 > img {
  margin-left: .18em;
}

.rn-section-copy p {
  margin: 3.6% 0 0;
  max-width: 620px;
  font-size: clamp(16px, 1.18vw, 20px);
  line-height: 1.38;
  font-weight: 700;
}

.rn-section-copy .rn-kicker {
  margin-top: 2.7%;
  color: var(--teal);
  font-size: clamp(20px, 1.48vw, 25px);
  line-height: 1.16;
  font-weight: 800;
}

/* Section 2 */
.rn-trust-copy {
  left: 8.95%;
  top: 8.2%;
  width: 40.8%;
}

.rn-phone-cluster {
  position: absolute;
  z-index: 4;
  left: 8.95%;
  top: 42.1%;
  width: 33.7%;
  height: 50.8%;
}

.rn-trust-phone {
  position: absolute;
  left: 0;
  top: 0;
  width: 66.55%;
  max-width: none;
  height: auto;
}

/* Match despite the ?v= cache-buster query string (a $= end-match misses it,
   which let the phone fall back to the 66.55% general width and blow far past
   the cluster — the "oversized, cut off at the bottom" break). */
.rn-trust-phone[src*="ridenest-actual-phone-mockup-cutout-v3"] {
  left: 0;
  top: 2%;
  width: 40%;
}

.rn-trust-trip-card {
  position: absolute;
  left: 45.0%;
  top: 7.0%;
  width: 43.4%;
  height: 84.0%;
  max-width: none;
  min-width: 0;
  padding: clamp(13px, 1vw, 17px);
  border: 1px solid rgba(6, 34, 67, .08);
  border-radius: 22px;
  color: var(--navy);
  background: rgba(255,255,255,.96);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.rn-trust-trip-card h3 {
  margin: 0 0 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(6, 34, 67, .12);
  font-size: clamp(13px, .92vw, 16px);
  line-height: 1;
  font-weight: 900;
}

.rn-trip-route {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.rn-trip-route::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 15px;
  border-left: 2px solid rgba(6, 34, 67, .14);
}

.rn-trip-stop {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 3px;
  align-items: start;
  font-size: clamp(10px, .76vw, 13px);
}

.rn-trip-stop > span {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #35ad39;
  box-shadow: 0 0 0 1px rgba(6, 34, 67, .12);
}

.rn-trip-stop--dropoff > span {
  background: var(--orange);
}

.rn-trip-stop b {
  font-size: clamp(10px, .78vw, 13px);
  font-weight: 900;
}

.rn-trip-stop time {
  color: #061a35;
  font-size: clamp(10px, .74vw, 12px);
  font-weight: 800;
  white-space: nowrap;
}

.rn-trip-stop strong,
.rn-trip-stop small {
  grid-column: 2 / -1;
}

.rn-trip-stop strong {
  font-size: clamp(10px, .78vw, 13px);
  line-height: 1.15;
  font-weight: 850;
}

.rn-trip-stop small {
  color: rgba(6, 26, 53, .82);
  font-size: clamp(9px, .7vw, 12px);
  font-weight: 650;
}

.rn-trip-pin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(78, 189, 247, .22);
  border-radius: 13px;
  color: #0B2D44;
  background: #e9f3f7;
}

.rn-trip-pin i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--teal);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.rn-trip-pin span,
.rn-trip-child span {
  display: grid;
  min-width: 0;
}

.rn-trip-pin b {
  font-size: clamp(11px, .82vw, 14px);
  line-height: 1.05;
  font-weight: 900;
}

.rn-trip-pin small {
  color: var(--navy);
  font-size: clamp(10px, .74vw, 12px);
  font-weight: 900;
  letter-spacing: .08em;
}

.rn-trip-child {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--navy);
}

.rn-trip-child i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  border: 3px solid #ffc33d;
  color: #fff;
  background: linear-gradient(135deg, #F27255, #ffc33d);
  font-size: 17px;
  font-style: normal;
  font-weight: 900;
}

.rn-trip-child small,
.rn-trip-child em {
  color: rgba(6, 26, 53, .74);
  font-size: clamp(9px, .68vw, 11px);
  font-style: normal;
  font-weight: 700;
}

.rn-trip-child b {
  margin-top: 2px;
  font-size: clamp(13px, .9vw, 16px);
  line-height: 1.05;
  font-weight: 900;
}

.rn-phone {
  position: absolute;
  left: 0;
  top: 0;
  width: 62%;
  height: 100%;
  padding: 3.8% 3.8% 4%;
  border: 13px solid #0c2035;
  border-radius: 12% / 8%;
  background: #fff;
  box-shadow: 0 16px 26px rgba(6, 28, 57, .24);
  overflow: hidden;
}

.rn-phone::before {
  content: "";
  position: absolute;
  left: 32%;
  top: 0;
  width: 34%;
  height: 5.8%;
  border-radius: 0 0 18px 18px;
  background: #0c2035;
  z-index: 2;
}

.rn-phone-top {
  height: 7%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3%;
  font-weight: 800;
  font-size: clamp(9px, .76vw, 13px);
}

.rn-phone-top i {
  width: 22%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--navy) 0 25%, transparent 25% 42%, var(--navy) 42% 58%, transparent 58% 73%, var(--navy) 73%);
  opacity: .88;
}

.rn-app-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--navy);
  font-weight: 800;
}

.rn-app-logo img {
  width: 38px;
  height: 32px;
  object-fit: contain;
}

.rn-app-logo span {
  color: var(--orange);
}

.rn-ride-card,
.rn-driver-card,
.rn-pin-box {
  background: #fff;
  border: 1px solid rgba(7,25,67,.08);
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(6, 28, 57, .08);
}

.rn-ride-card {
  position: relative;
  margin-top: 6.5%;
  min-height: 17.2%;
  padding: 4% 38% 4% 5%;
}

.rn-ride-card small,
.rn-ride-card strong,
.rn-ride-card span {
  display: block;
}

.rn-ride-card small {
  color: var(--teal);
  font-weight: 800;
}

.rn-ride-card strong {
  margin-top: 4px;
  font-size: clamp(10px, .88vw, 15px);
}

.rn-ride-card span {
  margin-top: 5px;
  font-size: clamp(9px, .75vw, 13px);
}

.rn-ride-card img {
  position: absolute;
  right: 4%;
  top: 22%;
  width: 32%;
}

.rn-map {
  position: relative;
  margin-top: 5.5%;
  height: 35%;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(78,189,247,.9) 0 31%, transparent 31%),
    linear-gradient(30deg, rgba(162,201,120,.5), rgba(255,250,235,.7)),
    repeating-linear-gradient(90deg, rgba(7,25,67,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(7,25,67,.045) 0 1px, transparent 1px 42px);
  border: 1px solid rgba(7,25,67,.08);
}

.rn-map svg {
  position: absolute;
  inset: 8% 6%;
  width: 88%;
  height: 76%;
}

.rn-map img {
  position: absolute;
  left: 42%;
  top: 44%;
  width: 19%;
}

.rn-map b {
  position: absolute;
  right: 5%;
  bottom: 10%;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: var(--soft-shadow);
  font-size: clamp(10px, .8vw, 14px);
}

.rn-driver-card {
  display: grid;
  grid-template-columns: 24% 1fr 19%;
  align-items: center;
  gap: 4%;
  margin-top: 5.7%;
  min-height: 18%;
  padding: 3.7%;
}

.rn-driver-card p,
.rn-driver-card strong,
.rn-driver-card span,
.rn-driver-card small {
  display: block;
  margin: 0;
}

.rn-driver-card strong {
  font-size: clamp(12px, .95vw, 17px);
}

.rn-driver-card span {
  color: #ffb629;
  font-weight: 800;
  font-size: clamp(10px, .8vw, 14px);
}

.rn-driver-card small {
  color: var(--teal);
  font-weight: 800;
  font-size: clamp(9px, .72vw, 12px);
}

.rn-driver-card button {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  color: #fff;
  background: var(--teal);
  font-size: clamp(18px, 1.35vw, 24px);
  cursor: pointer;
}

.rn-trip-details {
  position: absolute;
  right: 0;
  top: 10.8%;
  width: 38%;
  min-height: 73%;
  padding: 4.5% 5.3%;
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--soft-shadow);
}

.rn-trip-details h3 {
  margin: 0 0 7%;
  font-size: clamp(12px, .95vw, 17px);
}

.rn-trip-details dl {
  margin: 0;
  display: grid;
  gap: 18px;
}

.rn-trip-details dl > div {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
}

.rn-trip-details dl > div::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: #48b335;
}

.rn-trip-details dl > div:nth-child(2)::before {
  background: var(--orange);
}

.rn-trip-details dt {
  position: absolute;
  left: 24px;
  top: 0;
  font-weight: 800;
  font-size: clamp(10px, .82vw, 14px);
}

.rn-trip-details dd {
  grid-column: 2;
  margin: 0;
  padding-top: 22px;
  font-size: clamp(9px, .76vw, 13px);
}

.rn-trip-details dd b {
  position: absolute;
  right: 0;
  top: 0;
}

.rn-pin-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 11%;
  padding: 4.8%;
  color: var(--teal);
  font-weight: 800;
  background: #e7f1f5;
}

.rn-child {
  margin-top: 9%;
  display: grid;
  gap: 3px;
  font-size: clamp(10px, .8vw, 14px);
}

.rn-child strong {
  font-size: clamp(14px, 1.05vw, 18px);
}

.rn-trust-grid {
  position: absolute;
  z-index: 5;
  left: 50.0%;
  top: 7.7%;
  width: 41.4%;
  height: 73.5%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.6% 3.3%;
}

.rn-trust-grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-width: 0;
  padding: 5.2% 8%;
  background: rgba(255,255,255,.96);
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
}

.rn-trust-grid img {
  width: 61%;
  height: 37%;
  object-fit: contain;
}

.rn-card-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: min(64%, 158px);
  height: 38%;
  min-height: 108px;
  color: var(--navy);
  overflow: visible;
}

img.rn-card-icon {
  display: block;
  width: min(67%, 168px);
  height: 39%;
  min-height: 0;
  object-fit: contain;
  background: none;
}

.rn-trust-grid h3 {
  margin: 3.5% 0 0;
  font-size: clamp(21px, 1.6vw, 28px);
  line-height: .98;
  font-weight: 800;
}

.rn-trust-grid p {
  margin: 5% 0 0;
  font-size: clamp(14px, 1.08vw, 19px);
  line-height: 1.18;
  font-weight: 500;
}

.rn-mini-proof {
  position: absolute;
  z-index: 5;
  left: 36.7%;
  bottom: 3.6%;
  width: 34.2%;
  min-height: 7.9%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: .6% 1.1%;
  background: rgba(255,255,255,.97);
  border-radius: 18px;
  box-shadow: var(--soft-shadow);
}

.rn-mini-proof span {
  display: grid;
  grid-template-columns: clamp(34px, 2.65vw, 46px) 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-right: 1px dashed rgba(7,25,67,.3);
  font-size: clamp(12px, .95vw, 16px);
  line-height: 1.05;
  font-weight: 800;
}

.rn-mini-proof span:last-child {
  border-right: 0;
}

.rn-mini-proof img {
  width: clamp(34px, 2.65vw, 46px);
}

.rn-proof-icon,
.rn-list-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(34px, 2.65vw, 46px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background: var(--teal);
  overflow: visible;
}

img.rn-proof-icon {
  display: block;
  width: clamp(38px, 3vw, 52px);
  height: clamp(38px, 3vw, 52px);
  object-fit: contain;
  background: none;
  border-radius: 0;
}

.rn-section-waitlist {
  position: absolute;
  right: 11.1%;
  bottom: 4.9%;
  width: 14.8%;
  height: 6.65%;
  font-size: clamp(17px, 1.33vw, 23px);
}

.rn-section-rays {
  display: none;
}

/* Section 3 */
.rn-schedule-copy {
  left: 6.2%;
  top: 7.25%;
  width: 29.4%;
}

.rn-section-pill {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.2vw, 52px);
  height: clamp(36px, 3vw, 48px);
  padding: 0;
  margin-bottom: 2.8%;
  border: 0;
  background: transparent;
}

.rn-section-pill img {
  position: static;
  flex: 0 0 auto;
  width: clamp(28px, 2.15vw, 38px);
  transform: translateY(-5px);
}

.rn-schedule-copy h2 {
  position: relative;
  font-size: clamp(46px, 3.48vw, 60px);
  line-height: .98;
}

.rn-schedule-copy h2 img,
.rn-heading-heart {
  position: static;
  display: inline-block;
  width: .68em;
  height: auto;
  aspect-ratio: 1;
  margin-left: .18em;
  vertical-align: -.16em;
  object-fit: contain;
}

.rn-schedule-copy p {
  max-width: 470px;
  font-size: clamp(15px, 1.04vw, 18px);
}

.rn-schedule-copy .rn-kicker {
  max-width: 465px;
  font-size: clamp(18px, 1.36vw, 23px);
}

.rn-schedule-list {
  position: absolute;
  z-index: 6;
  left: 5.8%;
  top: 49.2%;
  width: 24.2%;
  display: grid;
  gap: 12px;
}

.rn-schedule-list a {
  display: grid;
  grid-template-columns: clamp(54px, 4vw, 68px) 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: clamp(72px, 8.4vh, 88px);
  padding: 10px 20px;
  color: var(--navy);
  text-decoration: none;
  background: rgba(255,255,255,.97);
  border-radius: 18px;
  box-shadow: var(--soft-shadow);
}

.rn-schedule-list img {
  width: 100%;
}

.rn-list-icon {
  width: clamp(54px, 4vw, 68px);
  background: var(--teal);
  flex: 0 0 auto;
}

img.rn-list-icon {
  display: block;
  width: clamp(52px, 3.85vw, 66px);
  height: clamp(52px, 3.85vw, 66px);
  object-fit: contain;
  background: none;
  border-radius: 0;
}

.rn-schedule-list b,
.rn-schedule-list small {
  display: block;
}

.rn-schedule-list b {
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.08;
}

.rn-schedule-list small {
  margin-top: 5px;
  font-size: clamp(12px, .88vw, 15px);
  line-height: 1.08;
  font-weight: 700;
}

.rn-schedule-list i {
  font-style: normal;
  font-size: clamp(27px, 1.9vw, 34px);
  font-weight: 700;
}

.rn-schedule-dashboard {
  position: absolute;
  z-index: 4;
  left: 37.2%;
  top: 3.4%;
  width: 61%;
  max-width: none;
  height: auto;
  border-radius: clamp(16px, 1.8vw, 26px);
  box-shadow: 0 0 0 1px rgba(6, 34, 67, .12), 0 16px 42px rgba(6, 28, 57, .12);
}

.rn-schedule-tabs {
  position: absolute;
  z-index: 7;
  left: 84.2%;
  top: 25.4%;
  width: 15.6%;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.25vw, 20px);
  pointer-events: none;
}

.rn-schedule-tab {
  min-height: clamp(86px, 6.75vw, 113px);
  display: grid;
  grid-template-columns: clamp(42px, 3.7vw, 62px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, .75vw, 13px);
  padding: clamp(11px, .95vw, 16px);
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(7, 25, 67, .06);
  border-radius: clamp(15px, 1.35vw, 22px);
  box-shadow: 0 12px 28px rgba(7, 25, 67, .13);
}

.rn-schedule-tab img {
  width: clamp(42px, 3.7vw, 62px);
  height: clamp(42px, 3.7vw, 62px);
  object-fit: contain;
  display: block;
}

.rn-schedule-tab:nth-child(2) img {
  width: clamp(48px, 4.2vw, 72px);
  margin-left: -6px;
}

.rn-schedule-tab b,
.rn-schedule-tab small,
.rn-schedule-tab em,
.rn-schedule-tab strong {
  display: block;
}

.rn-schedule-tab b {
  font-size: clamp(11px, .95vw, 16px);
  line-height: 1.08;
  font-weight: 900;
}

.rn-schedule-tab small {
  margin-top: 4px;
  font-size: clamp(8px, .7vw, 12px);
  line-height: 1.15;
  font-weight: 800;
}

.rn-schedule-tab em,
.rn-schedule-tab strong {
  margin-top: 8px;
  color: var(--teal);
  font-size: clamp(8px, .72vw, 12px);
  line-height: 1.1;
  font-style: normal;
  font-weight: 900;
}

.rn-schedule-tab em {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rn-schedule-tab em i {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #18a957;
}

.rn-schedule-tab em i::before {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.rn-schedule-tab__bell {
  width: clamp(42px, 3.7vw, 62px);
  height: clamp(42px, 3.7vw, 62px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--teal);
  background: #f4fcff;
  box-shadow: inset 0 0 0 2px rgba(78, 189, 247, .12);
}

.rn-schedule-tab__bell svg {
  width: 62%;
  height: 62%;
}

.rn-planner {
  position: absolute;
  z-index: 4;
  left: 36.0%;
  top: 6.2%;
  width: 58.9%;
  height: 72.2%;
  padding: 1.6% 1.8% 1.3%;
  border: clamp(5px, .45vw, 8px) solid #0b3046;
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 28px rgba(6, 28, 57, .14);
  overflow: visible;
}

.rn-planner header {
  display: grid;
  grid-template-columns: 25% 1fr auto;
  align-items: center;
  height: 11%;
  border-bottom: 1px solid rgba(7,25,67,.08);
  gap: 2%;
}

.rn-planner .rn-app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rn-planner .rn-app-logo img {
  width: 40px;
}

.rn-planner .rn-app-logo b {
  font-size: clamp(18px, 1.6vw, 29px);
  line-height: 1;
  white-space: nowrap;
}

.rn-planner .rn-app-logo span {
  color: var(--orange);
}

.rn-planner nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.1vw, 38px);
  font-size: clamp(8px, .68vw, 12px);
  font-weight: 800;
}

.rn-planner nav span {
  position: relative;
}

.rn-planner nav .active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 3px;
  border-radius: 999px;
  background: var(--orange);
}

.rn-planner button {
  border: 0;
  border-radius: 9px;
  padding: 12px 22px;
  color: #fff;
  background: var(--teal);
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(11px, .9vw, 15px);
}

.rn-planner-title {
  display: grid;
  gap: 4px;
  margin-top: 1.8%;
}

.rn-planner-title strong {
  font-size: clamp(19px, 1.65vw, 30px);
}

.rn-planner-title span {
  font-size: clamp(11px, .9vw, 15px);
  font-weight: 700;
}

.rn-calendar {
  position: relative;
  margin-top: 1.5%;
  height: 73.5%;
  border: 1px solid rgba(7,25,67,.11);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  overflow: hidden;
}

.rn-kids {
  position: absolute;
  left: 0;
  top: 17%;
  width: 14%;
  height: 67%;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  padding-left: 2.5%;
  font-size: clamp(9px, .76vw, 13px);
  font-weight: 800;
}

.rn-kids small {
  font-weight: 700;
}

.rn-days {
  position: absolute;
  left: 14%;
  top: 0;
  width: 86%;
  height: 17%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid rgba(7,25,67,.09);
}

.rn-days b {
  display: grid;
  place-items: center;
  text-align: center;
  border-left: 1px solid rgba(7,25,67,.08);
  font-size: clamp(8px, .7vw, 12px);
}

.rn-days small {
  margin-top: 4px;
  font-size: .95em;
}

.rn-events {
  position: absolute;
  left: 14%;
  top: 17%;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), rgba(7,25,67,.08) calc(100% / 7 - 1px) calc(100% / 7));
}

.rn-events .event {
  position: absolute;
  display: block;
  width: 12.7%;
  min-height: 24%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(7,25,67,.09);
  font-size: clamp(7px, .58vw, 10px);
  line-height: 1.45;
  font-weight: 800;
}

.rn-events small {
  font-weight: 700;
}

.e1 { left: 1.6%; top: 3.5%; background: #d7f1fe; }
.e2 { left: 1.6%; top: 54%; background: #e9f4de; }
.e3 { left: 17.5%; top: 27%; background: #fff0cb; }
.e4 { left: 34%; top: 3.5%; background: #d7f1fe; }
.e5 { left: 50%; top: 27%; background: #e9f4de; }
.e6 { left: 66%; top: 25%; background: #d7f1fe; }
.e7 { left: 82.5%; top: 54%; background: #eee8ff; }

.rn-events svg {
  position: absolute;
  left: 24%;
  top: 21%;
  width: 74%;
  height: 61%;
}

.rn-events > img {
  position: absolute;
  left: 43%;
  top: 62%;
  width: 12%;
}

.rn-planner footer {
  display: grid;
  grid-template-columns: 22% 15% 1fr 22% 44px;
  align-items: center;
  gap: 1%;
  height: 12%;
  margin-top: 1.2%;
  padding: 0 1.5%;
  border: 1px solid rgba(7,25,67,.08);
  border-radius: 10px;
  font-size: clamp(9px, .78vw, 13px);
  font-weight: 800;
}

.rn-planner footer b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: var(--teal);
}

.rn-floating-proof {
  display: grid;
  position: absolute;
  z-index: 8;
  right: 2.7%;
  top: 31.9%;
  width: 11.8%;
  gap: 13px;
}

.rn-floating-proof article {
  display: grid;
  grid-template-columns: 30% 1fr;
  align-items: center;
  gap: 9px;
  min-height: 90px;
  padding: 11px 12px;
  border-radius: 15px;
  background: rgba(255,255,255,.97);
  box-shadow: var(--soft-shadow);
}

.rn-floating-proof span {
  font-size: clamp(29px, 2.45vw, 42px);
}

.rn-floating-proof img {
  width: 100%;
}

.rn-floating-proof b,
.rn-floating-proof small,
.rn-floating-proof a {
  display: block;
  grid-column: 2;
}

.rn-floating-proof b {
  font-size: clamp(9px, .76vw, 13px);
  line-height: 1.08;
}

.rn-floating-proof small,
.rn-floating-proof a {
  margin-top: 4px;
  font-size: clamp(7px, .56vw, 10px);
  font-weight: 700;
}

.rn-floating-proof a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 800;
}

.rn-schedule-proof {
  position: absolute;
  z-index: 8;
  left: 4%;
  bottom: 2.6%;
  width: 91.7%;
  height: 15.5%;
  display: grid;
  /* was 5 cols (quote 35% + 3 proofs + CTA); the unsourced quote was removed
     for launch, so the 3 real proof cards + CTA now split the row evenly */
  grid-template-columns: 1fr 1fr 1fr 0.9fr;
  align-items: center;
  background: rgba(255,255,255,.97);
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
  overflow: visible;
}

.rn-schedule-proof > div {
  min-width: 0;
  padding: 10px 18px;
}

.rn-quote {
  display: grid;
  grid-template-columns: clamp(70px, 6vw, 104px) 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 18px;
  height: 100%;
  border-right: 1px dashed rgba(7,25,67,.28);
}

.rn-quote img {
  grid-row: 1 / 4;
  width: 100%;
}

.rn-quote img[src$="s3-avatar-jessica-circle-pad.png"] {
  transform: scale(1.2222);
  transform-origin: center;
}

.rn-quote blockquote {
  position: relative;
  margin: 0;
  font-size: clamp(11px, .83vw, 14px);
  line-height: 1.25;
  font-weight: 800;
}

.rn-quote blockquote::before {
  content: "“";
  position: absolute;
  left: -34px;
  top: -11px;
  color: var(--orange);
  font-size: 44px;
}

.rn-quote cite {
  margin-top: 4px;
  color: var(--teal);
  font-size: clamp(11px, .82vw, 14px);
  font-style: normal;
  font-weight: 800;
}

.rn-quote span {
  color: #ffbd25;
  font-weight: 800;
  font-size: clamp(12px, .9vw, 15px);
}

.rn-quote span b {
  color: var(--navy);
  margin-left: 10px;
  font-size: .9em;
}

.rn-schedule-proof > div:not(.rn-quote) {
  display: grid;
  grid-template-columns: clamp(36px, 3vw, 50px) 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 12px;
}

.rn-schedule-proof > div:not(.rn-quote) img {
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.rn-schedule-proof > div:not(.rn-quote) b,
.rn-schedule-proof > div:not(.rn-quote) small {
  display: block;
}

.rn-schedule-proof > div:not(.rn-quote) b {
  font-size: clamp(11px, .86vw, 14px);
  line-height: 1.08;
}

.rn-schedule-proof > div:not(.rn-quote) small {
  font-size: clamp(9px, .68vw, 12px);
  line-height: 1.18;
  font-weight: 700;
}

.rn-schedule-proof > a {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78%;
  height: 54%;
  border-radius: 18px;
  color: var(--navy);
  background: var(--orange);
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(11px, .86vw, 15px);
  line-height: 1.12;
}

.rn-schedule-proof > a:hover,
.rn-schedule-proof > a:focus-visible {
  color: var(--orange-hover-ink);
  background: var(--orange-hover);
}

@media (max-width: 1100px) {
  .rn-shot {
    aspect-ratio: auto;
    min-height: 880px;
  }

  /* sections are taller than the art's natural aspect here — stretch the art
     layer and pin it; the seam handoff lag is a desktop refinement */
  .rn-trust-section::before,
  .rn-schedule-section::before {
    top: 0;
    height: 100%;
    background-size: 100% 100%;
    transform: none !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px);
    mask-image: linear-gradient(180deg, transparent 0, #000 64px);
  }

  .rn-nav {
    grid-template-columns: 1fr auto;
    height: 78px;
    min-height: 78px;
  }

  .rn-nav-links,
  .rn-location,
  .rn-nav-actions > i {
    display: none;
  }

  .rn-nav-cta {
    width: 180px;
    height: 52px;
    font-size: 16px;
  }

  .rn-hero-copy {
    top: 130px;
    width: 58%;
  }

  .rn-car {
    left: 43%;
    top: 37%;
    width: 50%;
  }

  .rn-shield { display: none; }
  .rn-backpack { right: 5%; top: auto; bottom: 25%; width: 17%; }

  .rn-hero-steps {
    left: 4%;
    width: 92%;
    bottom: 28px;
  }

  .rn-trust-section,
  .rn-schedule-section {
    min-height: 1180px;
  }

  .rn-trust-section {
    min-height: 1520px;
  }

  .rn-trust-copy,
  .rn-schedule-copy {
    left: 7%;
    top: 70px;
    width: 86%;
  }

  .rn-phone-cluster {
    left: 7%;
    top: 350px;
    width: 54%;
    height: 520px;
  }

  .rn-trust-grid {
    left: 7%;
    top: 900px;
    width: 86%;
    height: 520px;
  }

  .rn-mini-proof,
  .rn-section-waitlist,
  .rn-section-rays {
    display: none;
  }

  .rn-schedule-list {
    left: 7%;
    top: 390px;
    width: 38%;
  }

  .rn-planner,
  .rn-schedule-dashboard {
    left: 48%;
    top: 345px;
    width: 52%;
  }

  .rn-schedule-tabs {
    left: 82.2%;
    top: 535px;
    width: 16.2%;
    gap: 10px;
  }

  .rn-schedule-tab {
    min-height: 78px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    padding: 9px;
    border-radius: 14px;
  }

  .rn-schedule-tab img,
  .rn-schedule-tab__bell {
    width: 34px;
    height: 34px;
  }

  .rn-schedule-tab:nth-child(2) img {
    width: 40px;
  }

  .rn-schedule-tab b {
    font-size: 10px;
  }

  .rn-schedule-tab small,
  .rn-schedule-tab em,
  .rn-schedule-tab strong {
    font-size: 8px;
  }

  .rn-planner {
    height: 560px;
  }

  .rn-floating-proof {
    display: none;
  }

  .rn-schedule-proof {
    left: 4%;
    width: 92%;
    bottom: 32px;
    height: 160px;
  }
}

@media (max-width: 760px) {
  .rn-shot {
    min-height: auto;
    padding: 0;
    overflow: hidden;
  }

  .rn-hero {
    min-height: 860px;
    /* the 4-step strip straddles the hero->trust seam at phone width: let it
       overhang vertically (x stays clipped) and paint above the trust art */
    overflow-x: clip;
    overflow-y: visible;
    z-index: 2;
  }

  .rn-brand img { width: 46px; }
  .rn-brand span { font-size: 32px; }
  .rn-nav { left: 4%; width: 92%; border-radius: 26px; padding-left: 16px; padding-right: 12px; }
  /* .rn-nav a (0,1,1) beats .rn-nav-cta (0,1,0) on font-size — at 15px the
     label+arrow run wider than the 132px pill and drift out of it. Match the
     specificity so the mobile size actually applies. */
  .rn-nav a.rn-nav-cta { width: 132px; height: 48px; font-size: 12px; }

  .rn-hero-copy {
    left: 6%;
    top: 126px;
    width: 88%;
  }

  /* Mobile: the desktop scrim only covers the left ~half, so the right end of
     the subhead + trust lines spill onto the beach photo and the bright-blue
     subhead vanishes against the sky. Extend the white fade rightward to cover
     the full text column, still feathered (soft fade, not a hard box) so it
     reads like the hero glow. Desktop scrim is untouched. (Nico 2026-07-13) */
  .rn-hero::before {
    left: -6%;
    top: 7%;
    width: 108%;
    height: 55%;
    transform: none;
    filter: blur(22px);
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.96) 70%,
        rgba(255,255,255,.9) 90%,
        rgba(255,255,255,0) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  .rn-hero-copy h1 { font-size: clamp(48px, 13vw, 68px); }
  /* the heart accent is %-positioned for the desktop headline metrics; at
     phone width it lands on the copy — hide it (h2 hearts keep the motif) */
  .rn-hero-heart { display: none; }
  .rn-hero-sub { font-size: 26px; }
  .rn-trust-line { flex-wrap: wrap; gap: 12px; }
  .rn-trust-line i { display: none; }
  .rn-launch-pill { font-size: 18px; height: 64px; }

  .rn-car { left: 18%; top: 55%; width: 72%; }
  .rn-backpack { display: none; }

  /* strip rides the section seam: bottom edge pinned to the hero's end, then
     shifted down half its own height so its center sits dead on the page
     break — half over the hero art, half in the sand section (Nico 2026-07-10) */
  .rn-hero-steps {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 8px;
    bottom: 0;
    transform: translateY(50%);
  }

  .rn-hero-steps article {
    min-height: 88px;
    justify-content: flex-start;
    padding: 0 10px;
  }

  .rn-hero-steps article::after { display: none; }

  .rn-trust-section,
  .rn-schedule-section {
    min-height: 1500px;
  }

  .rn-trust-section {
    min-height: 2400px;
  }

  /* Owner-picked mobile art (1024x1536 portrait pieces with component-safe
     cream centers): dawn-gradient piece anchored top, coastal-cove piece
     anchored bottom, calm cream between. Each piece renders 100vw x 150vw at
     its natural aspect — zero stretching. The underlay gradient pins the
     exact sampled edge cream at each image seam (top piece bottom edge
     #fdf6e9, bottom piece top edge #fff6e7) and drifts the 2-unit difference
     across the long flat middle, so both piece-to-cream seams are invisible. */
  .rn-trust-section::before,
  .rn-schedule-section::before {
    background:
      url("/imgs/generated/rn-mobile-bg-top.webp?v=20260721rc1") center top / 100% auto no-repeat,
      url("/imgs/generated/rn-mobile-bg-bottom.webp?v=20260721rc1") center bottom / 100% auto no-repeat,
      linear-gradient(180deg, #fdf6e9 0, #fdf6e9 150vw, #fff6e7 calc(100% - 150vw), #fff6e7 100%) #fef6e8;
  }

  .rn-launch-pill > .rn-rays {
    display: none;
  }

  .rn-section-copy h2 {
    font-size: 47px;
  }

  /* clear the seam-straddling steps strip above (strip bottom ~956 abs) and
     give the heading breathing room off the section top (Nico 2026-07-10) */
  .rn-trust-copy {
    top: 150px;
  }

  /* Lift the "Built for real family schedules" heading up into the sandy
     dawn transition at the top of the section (was 70px down on flat cream),
     so the dark heading lands on the beige/sand backdrop and the blue kicker
     leads the light content right below it — Nico mobile #10 + #11.
     (section overflow:hidden clips anything above top:0, so the section top
     is as high as the heading can sit.) */
  .rn-schedule-copy {
    top: 18px;
  }

  /* phone + trip card stack vertically at phone width — the desktop
     side-by-side absolute placement piles the card onto the phone screen
     and runs the phone under the feature grid */
  .rn-phone-cluster {
    top: 470px;
    left: 7%;
    width: 86%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .rn-phone-cluster .rn-trust-phone {
    position: static;
    width: min(260px, 72%);
    height: auto;
  }

  .rn-trust-trip-card {
    position: static;
    width: min(330px, 100%);
    height: auto;
  }

  .rn-trust-grid {
    top: 1380px;
    grid-template-columns: 1fr;
    height: auto;
  }

  .rn-trust-grid article {
    min-height: 220px;
  }

  /* height:37% inflates single-column rows to ~283px, leaving a blank white
     slab hanging over the section seam — fix the icon height instead */
  .rn-trust-grid article img {
    height: 100px;
  }

  .rn-schedule-list {
    top: 410px;
    width: 86%;
  }

  /* center the planner: equal 2.5% gutters instead of 5% left / 0 right
     (which read as "stuck to the right side") — Nico mobile #12 */
  .rn-planner,
  .rn-schedule-dashboard {
    left: 2.5%;
    top: 710px;
    width: 95%;
  }

  .rn-schedule-tabs {
    display: none;
  }

  .rn-planner {
    height: 600px;
  }

  /* pull the reviews card up under the planner: the shared 1500px height left
     a ~260px dead gap between the calendar bottom and the reviews card, and
     stranded the card near the footer — Nico mobile #13 */
  .rn-schedule-section {
    min-height: 1290px;
  }

  .rn-planner nav,
  .rn-planner button,
  .rn-kids {
    display: none;
  }

  .rn-planner header {
    grid-template-columns: 1fr;
  }

  .rn-days,
  .rn-events {
    left: 0;
    width: 100%;
  }

  /* At phone width this strip previously showed ONLY the testimonial quote
     (the other cells were hidden). That quote was removed for launch (it was
     unsourced), so the strip has no mobile content left — hide the whole strip
     rather than render an empty card. The trust proofs live elsewhere on
     mobile (rn-mini-proof + trust grid). */
  .rn-schedule-proof {
    display: none;
  }
}

/* ==========================================================================
   Scroll-reveal + animated separators   (added 2026-07-08)
   All "hidden" base states are gated behind html.rn-anim (set inline in
   <head>) AND prefers-reduced-motion:no-preference, so the page is fully
   visible when JS is off or the user asked for reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- Grouped text/card reveals: container gets .is-visible, children stagger --- */
  html.rn-anim .rn-rg > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
  }
  html.rn-anim .rn-rg.is-visible > * {
    opacity: 1;
    transform: none;
  }
  html.rn-anim .rn-rg.is-visible > *:nth-child(1) { transition-delay: 0s; }
  html.rn-anim .rn-rg.is-visible > *:nth-child(2) { transition-delay: .07s; }
  html.rn-anim .rn-rg.is-visible > *:nth-child(3) { transition-delay: .14s; }
  html.rn-anim .rn-rg.is-visible > *:nth-child(4) { transition-delay: .21s; }
  html.rn-anim .rn-rg.is-visible > *:nth-child(5) { transition-delay: .28s; }
  html.rn-anim .rn-rg.is-visible > *:nth-child(6) { transition-delay: .35s; }
  html.rn-anim .rn-rg.is-visible > *:nth-child(n+7) { transition-delay: .42s; }

  /* --- Art layers: opacity-only fade so we never fight existing transforms
         (car float, pad-scale, positioning) --- */
  html.rn-anim .rn-car,
  html.rn-anim .rn-shield,
  html.rn-anim .rn-backpack,
  html.rn-anim .rn-trust-phone,
  html.rn-anim .rn-schedule-dashboard {
    opacity: 0;
    transition: opacity .9s ease;
  }
  html.rn-anim .rn-car.is-visible,
  html.rn-anim .rn-shield.is-visible,
  html.rn-anim .rn-backpack.is-visible,
  html.rn-anim .rn-trust-phone.is-visible,
  html.rn-anim .rn-schedule-dashboard.is-visible {
    opacity: 1;
  }

  /* --- Trip card slides in from the right of the phone --- */
  html.rn-anim .rn-trust-trip-card {
    opacity: 0;
    transform: translateX(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  }
  html.rn-anim .rn-trust-trip-card.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --- Hover polish (independent of reveal; safe under reduced-motion) --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rn-trust-grid article,
  .rn-schedule-list a,
  .rn-schedule-tab {
    transition: transform .28s ease, box-shadow .28s ease;
  }
  .rn-trust-grid article:hover,
  .rn-schedule-list a:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(7, 25, 67, .17);
  }
  .rn-schedule-tab:hover {
    transform: translateY(-3px);
  }
}

/* ==========================================================================
   Animated wave separator (hero -> trust section)
   ========================================================================== */
/* Seams: no synthesized band. Adjacent sections overlap and BOTH edges fade —
   the outgoing art dissolves out exactly where the incoming art dissolves in,
   so the two illustrations interleave grain-for-grain. The incoming art layer
   also lags on scroll (parallax handoff) so the artwork does the morphing. */
/* Softer, longer crossfades at the section seams so the illustrations melt
   into each other rather than handing off over a short band (Nico #4). */
.rn-hero-bg {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 76px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 76px), transparent 100%);
}

.rn-trust-section::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 64px, #000 calc(64px + clamp(72px, 5.2vw, 96px)), #000 calc(100% - 52px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 64px, #000 calc(64px + clamp(72px, 5.2vw, 96px)), #000 calc(100% - 52px), transparent 100%);
}

.rn-schedule-section::before {
  /* the schedule art is the LAST section before the footer — it needs a bottom
     feather (like .rn-trust-section) so the sand dissolves into the footer cream
     instead of ending in a hard horizontal line at the seam (Nico 2026-07-13). */
  -webkit-mask-image: linear-gradient(180deg, transparent 64px, #000 calc(64px + clamp(72px, 5.2vw, 96px)), #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 64px, #000 calc(64px + clamp(72px, 5.2vw, 96px)), #000 calc(100% - 96px), transparent 100%);
}

.rn-trust-section,
.rn-schedule-section {
  margin-top: clamp(-40px, -2.4vw, -26px);
}

@media (prefers-reduced-motion: no-preference) {
  /* entry parallax: section content drifts up into place at staggered depths.
     --pe (0..1) set by the same loop; containers only — never fights the
     child-level reveal transitions or the fade-only art layers. */
  html.rn-anim .rn-trust-section .rn-trust-copy,
  html.rn-anim .rn-schedule-section .rn-schedule-copy {
    transform: translateY(calc((1 - var(--pe, 1)) * 44px));
    will-change: transform;
  }
  html.rn-anim .rn-trust-section .rn-phone-cluster,
  html.rn-anim .rn-schedule-section .rn-schedule-list {
    transform: translateY(calc((1 - var(--pe, 1)) * 62px));
    will-change: transform;
  }
  html.rn-anim .rn-trust-section .rn-trust-grid,
  html.rn-anim .rn-schedule-section .rn-schedule-dashboard {
    transform: translateY(calc((1 - var(--pe, 1)) * 80px));
    will-change: transform;
  }
  html.rn-anim .rn-schedule-section .rn-schedule-tabs {
    transform: translateY(calc((1 - var(--pe, 1)) * 96px));
    will-change: transform;
  }
}

/* ==========================================================================
   RideNest app-screen handoff slots — 2026-07-21
   This block is intentionally isolated under rn-s2c-phone-* names. The slots
   reserve final phone geometry without inventing or duplicating app screens;
   approved Welcome and ID-verification artwork can replace data-rn-phone-media
   contents without changing the section layout.
   ========================================================================== */
.rn-s2c-phone-section .rn-s2c-phone-stage {
  position: absolute;
  z-index: 5;
  left: 38%;
  top: 7%;
  width: 58%;
  height: 82%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 3vw, 54px);
  padding: clamp(24px, 2.5vw, 42px);
  border: 1px dashed rgba(7, 25, 67, .22);
  border-radius: clamp(24px, 2.2vw, 38px);
  background: rgba(255, 250, 241, .7);
  box-shadow: 0 18px 48px rgba(7, 25, 67, .1);
}

.rn-s2c-phone-section .rn-s2c-phone-card {
  width: min(32%, 248px);
  margin: 0;
  display: grid;
  gap: clamp(12px, 1.1vw, 18px);
  color: var(--navy);
  text-align: center;
}

.rn-s2c-phone-section .rn-s2c-phone-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.4;
  padding: clamp(7px, .7vw, 11px);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: clamp(27px, 2.5vw, 42px);
  background: #071943;
  box-shadow: 0 20px 38px rgba(7, 25, 67, .2);
}

.rn-s2c-phone-section .rn-s2c-phone-speaker {
  position: absolute;
  z-index: 2;
  top: clamp(13px, 1.25vw, 20px);
  left: 50%;
  width: 31%;
  height: clamp(4px, .35vw, 6px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .36);
  transform: translateX(-50%);
}

.rn-s2c-phone-section .rn-s2c-phone-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18%;
  border: 2px dashed rgba(7, 25, 67, .2);
  border-radius: clamp(20px, 1.9vw, 32px);
  background:
    radial-gradient(circle at 50% 30%, rgba(78, 189, 247, .14), transparent 34%),
    #fffaf1;
}

.rn-s2c-phone-section .rn-s2c-phone-screen > img,
.rn-s2c-phone-section .rn-s2c-phone-screen > picture,
.rn-s2c-phone-section .rn-s2c-phone-screen > picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.rn-s2c-phone-section .rn-s2c-phone-slot-label {
  max-width: 11ch;
  color: rgba(7, 25, 67, .66);
  font-size: clamp(11px, .85vw, 14px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rn-s2c-phone-section .rn-s2c-phone-card figcaption {
  display: grid;
  gap: 4px;
  line-height: 1.2;
}

.rn-s2c-phone-section .rn-s2c-phone-card figcaption strong {
  font-size: clamp(15px, 1.05vw, 18px);
}

.rn-s2c-phone-section .rn-s2c-phone-card figcaption span {
  color: rgba(7, 25, 67, .68);
  font-size: clamp(12px, .82vw, 14px);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .rn-s2c-phone-section .rn-s2c-phone-stage {
    left: 7%;
    top: 360px;
    width: 86%;
    height: 720px;
    gap: clamp(28px, 6vw, 64px);
  }

  .rn-s2c-phone-section .rn-s2c-phone-card {
    width: min(29%, 230px);
  }
}

@media (max-width: 760px) {
  .rn-s2c-phone-section.rn-schedule-section {
    min-height: 1040px;
  }

  .rn-s2c-phone-section .rn-s2c-phone-stage {
    left: 3%;
    top: 390px;
    width: 94%;
    height: 540px;
    gap: clamp(12px, 4vw, 24px);
    padding: clamp(14px, 4vw, 24px);
    border-radius: 26px;
  }

  .rn-s2c-phone-section .rn-s2c-phone-card {
    width: min(44%, 188px);
    gap: 10px;
  }

  .rn-s2c-phone-section .rn-s2c-phone-shell {
    padding: 7px;
    border-radius: 28px;
  }

  .rn-s2c-phone-section .rn-s2c-phone-screen {
    padding: 14%;
    border-radius: 21px;
  }
}

@media (max-width: 420px) {
  .rn-s2c-phone-section .rn-s2c-phone-stage {
    top: 370px;
    height: 500px;
    gap: 10px;
    padding: 14px 10px;
  }

  .rn-s2c-phone-section .rn-s2c-phone-card {
    width: 46%;
  }

  .rn-s2c-phone-section .rn-s2c-phone-card figcaption strong {
    font-size: 14px;
  }

  .rn-s2c-phone-section .rn-s2c-phone-card figcaption span {
    font-size: 11px;
  }
}

/* At phone width, keep the photographic hero art out of the copy region.
   The same source image moves to a masked hero layer below the text instead
   of spanning the headline as an absolutely positioned image. */
@media (max-width: 480px) {
  /* Mobile hero = beach BEHIND the headline (Nico 2026-07-23), matching the
     desktop / 480-760 cover treatment. Was a stacked "art-below-copy" layout
     (object-fit:contain + inset:624px) that read as a block below the text on
     true phones (<=480). The <=760 white scrim (.rn-hero::before) keeps the
     navy h1 legible over the beach. Own-rail mobile fix, not v7. */
  body.rn-home .rn-hero {
    min-height: 680px;
  }

  body.rn-home .rn-hero-bg {
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 76px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 76px), transparent 100%);
  }

  /* extend the white legibility veil to cover the whole copy column (h1 +
     teal sub + trust line) over the beach */
  body.rn-home .rn-hero::before {
    top: 3%;
    height: 66%;
  }

  /* On a narrow phone hero the copy column (4-line h1 + 3-line sub + trust
     chips + launch pill) leaves no clean band for the floating layered car
     without it overlapping the copy — so hide it here (as .rn-backpack
     already is) and let the beach-scene bg carry the hero. Brand-car trade-
     off flagged for f4/rick; if Nico wants the car back it needs a taller
     hero or a re-composition (his call). */
  body.rn-home .rn-car { display: none; }

}

/* === homepage gallery (Nico component vanilla port, 2026-07-23) ===
   1:1 dims from the supplied component: max-w-6xl grid-cols-2 gap-8 px-8
   py-12; grid rows 50/150/50/150/50 gap-4; cells rounded-xl shadow-xl
   object-cover; reveal = opacity+blur stagger 0.2s/idx (spring-feel ease). */
.rn-gal-section { position: relative; z-index: 6; margin: 0 auto; display: grid; width: 100%; max-width: 72rem; grid-template-columns: 1fr; align-items: center; gap: 32px; padding: 48px 32px; }
@media (min-width: 768px) { .rn-gal-section { grid-template-columns: repeat(2, 1fr); } }
.rn-gal-copy { display: flex; flex-direction: column; align-items: flex-start; }
.rn-gal-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--coral, #F27255); }
@media (min-width: 768px) { .rn-gal-eyebrow { font-size: 14px; } }
.rn-gal-copy h2 { margin: 10px 0 0; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.rn-gal-body { margin: 16px 0 0; font-size: 1.05rem; line-height: 1.55; max-width: 42ch; }
.rn-gal-cta { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; background: var(--coral, #F27255); color: #fff; font-weight: 700; text-decoration: none; box-shadow: var(--soft-shadow, 0 10px 24px rgba(7,25,67,.18)); }
.rn-gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 50px 150px 50px 150px 50px; gap: 16px; }
.rn-gal-cell { position: relative; overflow: hidden; border-radius: 12px; margin: 0; box-shadow: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10); }
.rn-gal-cell img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.rn-gal-c0 { grid-column: 2 / 3; grid-row: 1 / 3; }
.rn-gal-c1 { grid-column: 1 / 2; grid-row: 2 / 4; }
.rn-gal-c2 { grid-column: 1 / 2; grid-row: 4 / 6; }
.rn-gal-c3 { grid-column: 2 / 3; grid-row: 3 / 5; }
/* reveal: hidden until .rn-gal-in lands via IntersectionObserver */
.rn-gal-copy > * { opacity: 0; filter: blur(10px); }
.rn-gal-cell { opacity: 0; }
.rn-gal-in .rn-gal-copy > *, .rn-gal-copy.rn-gal-in > * { opacity: 1; filter: blur(0); transition: opacity .55s cubic-bezier(.22,1,.36,1), filter .55s cubic-bezier(.22,1,.36,1); }
.rn-gal-in .rn-gal-cell { opacity: 1; transition: opacity .55s cubic-bezier(.22,1,.36,1); }
.rn-gal-in [data-gal-i="0"] { transition-delay: .2s; }
.rn-gal-in [data-gal-i="1"] { transition-delay: .4s; }
.rn-gal-in [data-gal-i="2"] { transition-delay: .6s; }
.rn-gal-in [data-gal-i="3"] { transition-delay: .8s; }
@media (prefers-reduced-motion: reduce) {
  .rn-gal-copy > *, .rn-gal-cell { opacity: 1; filter: none; transition: none; }
}

/* === strip containment (Nico escape fix, 2026-07-23) === */
.rn-hero-steps article { flex: 0 1 auto; }
.rn-hero-steps p { white-space: normal; }
@media (min-width: 1101px) and (max-width: 1340px) {
  .rn-hero-steps { padding: 0 1.6%; }
  .rn-hero-steps article { gap: 6px; }
  .rn-hero-steps strong { width: 30px; height: 30px; font-size: 15px; }
  .rn-hero-steps img.rn-step-icon, .rn-hero-steps .rn-step-icon { width: 44px; }
  .rn-hero-steps p { font-size: 12.5px; }
  .rn-hero-steps article:not(:last-child)::after { margin: 0 5px; font-size: 20px; }
}
@media (max-width: 760px) {
  /* new copy is 1ch longer than the litany it replaces; 2.3px cell poke at 390 */
  .rn-hero-steps article { padding: 0 8px; gap: 7px; }
}