.about-how { padding: 88px 0 64px; background:#ecf0f1; }
.about-how-container { max-width: 1360px; margin: 0 auto; padding: 0 16px; text-align: center; }
/* Responsive auto-fit so cards keep healthy width */
.how-flip-grid { margin-top: 24px; display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.how-card { perspective: 1000px; }
.how-card-inner { position:relative; width:100%; aspect-ratio: 16 / 9; height:auto; transform-style: preserve-3d; transition: transform .6s; }
.how-card:hover .how-card-inner { transform: rotateY(180deg); }
.how-card-front, .how-card-back { position:absolute; inset:0; backface-visibility: hidden; border-radius:16px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,0.06); border:1px solid #f0f0f0; background:#ffffff; }
.how-card-front img { width:100%; height:100%; object-fit: contain; background:#ffffff; display:block; }
.how-card-back { transform: rotateY(180deg); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:16px; }
.how-card-back strong { display:block; margin-bottom:6px; text-transform: uppercase; font-size:14px; }
.how-card-back p { margin:0; color:#2c3e50; }
@media (max-width:980px){ .how-flip-grid { grid-template-columns:1fr; } }
a:visited {
  color: rgba(12, 11, 49, 1);
}

.list-style {
  list-style: none;
}

.page-wide-section {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/*_________________________________HEADER_________________________________*/

header {
  height: 80px;
  border-bottom: 1px solid #10103030;
}

.navlinks-header a {
    text-decoration: none;
    color: black;
    padding-left: 24px;
    padding-right: 24px;
    border-left: 1px solid #10103030;
}

.navbar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.navbar a:hover {
  color: #27AE60;
	text-shadow: 0 0 50px #27AE60;}

.rs-logo {
  padding-left: 24px;
  display: flex;
  align-items: center;
}

.navbar .navlinks-header {
  display: flex;
  flex-direction: row;
}

.navbar .navlinks-header li {
  font-weight: 700;
  display: flex;
}

.navbar .navlinks-header li a {
  display: flex;
  align-items: center;
}

/* Active nav link underline */
.navbar .navlinks-header li a.active {
  color: #27AE60;
  position: relative;
  box-shadow: inset 0 -3px 0 #27AE60;
}
.navbar .navlinks-header li a.active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 3px;
  background: #27AE60;
  border-radius: 2px;
}

.navbar .searchbox {
  margin-left: auto;
  margin-top: 1em;
  margin-right: 2em;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 0.5px solid #101030;
  border-radius: 6px;
  height: 48px;
  padding: 16px;
  width: 320px;
}

.header-actions {
  display: flex;
  align-items: center;
  margin-left: 2em;
}

.login-btn {
  background-color: #27AE60;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid #219653;
  box-shadow: 0 6px 18px rgba(39, 174, 96, 0.25);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform .05s ease, border-color .2s ease, background .2s ease;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0) 40%);
}

.login-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0) 40%), #219653;
  color: #ffffff;
  border-color: #1e8a4d;
  box-shadow: 0 10px 28px rgba(39, 174, 96, 0.32);
  transform: translateY(-1px);
}

.login-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(39, 174, 96, 0.25);
}

.searchicon {
  position: absolute;
  margin-left: 0px;
}

.search-dot {
  position: absolute;
  margin-right: 10px;
}

.search-dot-2 {
  position: absolute;
  left: 16px;
}

.nav-location-label {
    position: absolute;
    pointer-events: none;
    transform-origin: 0px 0px;
    transition: transform 100ms cubic-bezier(0.45, 0, 0.15, 1) 0s;
    color: #424242;
    font-size: 16px;
    margin-left: 26px;
}

input:valid ~ .nav-location-label,
input:focus ~ .nav-location-label {
  transform: scale(0.9) translateY(-10px);
  margin-bottom: 2px;
}

/* Google Maps Autocomplete Styling */
.pac-container {
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  font-family: inherit;
  margin-top: 4px;
}

/* Hide "Powered by Google" branding */
.pac-container::after {
  display: none !important;
}

.pac-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pac-item:hover {
  background-color: #f8fafc;
}

.pac-item-selected {
  background-color: #27AE60 !important;
  color: white !important;
}

.pac-item-selected:hover {
  background-color: #229954 !important;
}

.pac-item-query {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

.pac-item-query:focus {
  outline: none;
}

.pac-matched {
  font-weight: 600;
  color: #27AE60;
}

.pac-item-selected .pac-matched {
  color: #ffffff;
}

.nav-input-style {
  outline: none;
  min-width: 80px;
  font-size: 18px;
  width: 100%;
  padding: 10px 8px 0px;
}

/*_________________________________HERO SECTION_________________________________*/

.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 320px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 24px;
  gap: 60px;
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, #27AE60, #229954);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.hero-main-title {
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0C0B31;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.hero-highlight {
  background: linear-gradient(135deg, #27AE60, #229954);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-rotating-text {
  display: inline-block;
  position: relative;
  height: 3.9rem;
  overflow: hidden;
  margin: 0 6px 0 2px;
  min-width: 8.5ch;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #666;
}

.rotating-words {
  position: relative;
  height: 100%;
  display: inline-block;
}

.word {
  display: block;
  font-size: 3.6rem;
  font-weight: 800;
  color: #27AE60;
  animation: rotateWords 9s 1 forwards;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  white-space: nowrap;
  line-height: 1.1;
  opacity: 0;
}

.word:nth-child(1) { animation-delay: 0s; }
.word:nth-child(2) { animation-delay: 2.25s; }
.word:nth-child(3) { animation-delay: 4.5s; }
.word:nth-child(4) { animation-delay: 6.75s; animation-name: rotateWordsLast; }

@keyframes rotateWords {
  0%   { transform: translateY(100%); opacity: 0; }
  8%   { transform: translateY(0);    opacity: 1; }
  28%  { transform: translateY(0);    opacity: 1; }
  36%  { transform: translateY(-100%);opacity: 0; }
  100% { transform: translateY(-100%);opacity: 0; }
}

@keyframes rotateWordsLast {
  0%   { transform: translateY(100%); opacity: 0; }
  8%   { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

.hero-description {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 40px;
  max-width: 500px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 48px;
  justify-content: flex-start;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: #27AE60;
  display: block;
}

.stat-label {
  font-size: 0.875rem;
  color: #666;
  font-weight: 500;
}

.hero-cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  transform: translateX(-8px);
}

.cta-primary {
  background: linear-gradient(135deg, #27AE60, #229954);
  color: white;
  padding: 16px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.125rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
  color: white;
}

/* black variant for hero primary CTA */
/* variant: green background with black text */
.cta-text-black {
  color: #0C0B31 !important;
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  color: #27AE60;
  padding: 16px 32px;
  border: 2px solid #27AE60;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.3s ease;
}

/* smaller CTAs for driver section */
.cta-small { padding: 12px 24px !important; font-size: 1rem !important; }

/* Mobile button consistency: use Section 1 style slightly smaller */
@media (max-width:640px){
  .cta-primary { padding: 14px 24px; font-size: 1rem; border-radius: 999px; }
  .cta-secondary { padding: 12px 22px; font-size: 0.95rem; border-radius: 999px; }
}

.cta-secondary:hover {
  background: #27AE60;
  color: white;
  transform: translateY(-2px);
}

.hero-visual {
  flex: 0 0 48%;
  max-width: 520px;
  position: relative;
}

.hero-visual-mobile { display:none; }
.hero-main-image-mobile { width:100%; height:auto; border-radius: 16px; box-shadow: 0 20px 44px rgba(0,0,0,0.12); margin: 8px 0 4px; }

.hero-image-container {
  position: relative;
  width: 100%;
}

.hero-main-image {
  width: 100%;
  height: 632px;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12);
}

/* overlay image removed */

.hero-floating-card {
  position: absolute;
  bottom: -12px;
  right: -12px;
  background: white;
  padding: 15px 17px;
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  animation: float 3s ease-in-out infinite;
}

/* Desktop-to-tablet hero image height tuning */
@media (max-width: 1200px) {
  .hero-main-image { height: 528px; }
}

@media (max-width: 992px) {
  .hero-main-image { height: 484px; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.card-icon {
  font-size: 1.5rem;
}

.card-text {
  display: flex;
  flex-direction: column;
}

.card-text strong {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0C0B31;
}

.card-text span {
  font-size: 0.75rem;
  color: #666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    text-align: left;
    gap: 24px;
    padding-top: 40px;
  }
  
  .hero-main-title {
    font-size: 2.5rem;
    line-height: 1.15;
    gap: 4px;
  }
  
  .hero-stats {
    justify-content: flex-start;
  }
  
  .hero-cta-buttons {
    justify-content: center;
    transform: none;
  }
  
  .hero-visual {
    max-width: 100%;
  }
  /* Show mobile-first image directly below headline */
  .hero-visual-mobile { display:block; }
  /* Hide desktop-side visual on phones */
  .hero-section > .hero-visual { display:none; }
}

/*_________________________________DRIVER SECTION_________________________________*/

.driver-section {
    background-color: #ecf0f1;
    margin-top: 80px;
    margin-bottom: 80px;
    padding-bottom: 56px;
}

.driver-section-container {
  display: flex;
  flex-wrap: wrap;
  min-width: 320px;
  width: 100%;
  max-width: 1280px;
  margin: 0px auto;
  padding-right: 8px;
  padding-left: 16px;
}

.driver-2 {
  width: 100%;
  height: auto;
  margin-top: 50px;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.driver-section-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
  margin-top: auto;
  margin-bottom: auto;
}

.drive-with-rs {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.set-your-own-hours {
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  margin-bottom: 16px;
}

.reason-to-drive {
  margin-bottom: 24px;
}

.driver-pay-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  margin-right: 8px;
  margin-left: 24px;
}

.how-drive-pay-works-button:hover {
  text-decoration: underline;
}

a.get-the-app-driver-section {
  font-size: 16px;
  font-weight: 700;
  line-height: 15px;
  color: #ffffff;
  background-color: #27AE60;
  border-radius: 56px;
  box-sizing: border-box;
  padding: 1em;
  cursor: pointer;
}

/*_________________________________DRIVER REVIEW SECTION_________________________________*/

.driver-review-section {
    background-color: #ecf0f1;
    margin-top: 80px;
    margin-bottom: 80px;
}

.driver-review-container {
  display: flex;
  flex-direction: row;
  min-width: 320px;
  width: 100%;
  max-width: 1280px;
  margin: 0px auto;
  padding-right: 32px;
  padding-left: 16px;
}

.driver-img-harold {
  max-width: 80px;
  margin: 0px auto;
}

.driver-img-mary-christine {
  max-width: 80px;
  margin: 0px auto;
  transform: scale(0.6);
  opacity: 0.6;
}

.driver-review-harold {
    color: #424242;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    margin-top: 32px;
    margin-bottom: 32px;
}

.driver-review-mary-christine {
    color: #424242;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    margin-top: 32px;
    margin-bottom: 32px;
}

.driver-name-harold {
    color: black;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

.driver-name-mary-christine {
    color: black;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

.driver-yoe-harold {
    color: #424242;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    margin-bottom: 24px;
}

.driver-yoe-mary-christine {
    color: #424242;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    margin-bottom: 24px;
}

.driver-review-individual {
  text-align: center;
  padding: 0px 32px;
  position: relative;
  height: 100%;
  width: 33.3333%;
}

.driver-review-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.driver-review-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0px 24px;
    width: 32px;
    height: 32px;
    border: 1px solid black;
    border-radius: 56px;
    border-color: rgba(12, 11, 49, 0.45);
    background-color: #ecf0f1;
}

.driver-review-nav-current {
  height: 8px;
  width: 8px;
  border: 1px solid rgba(12, 11, 49, 1);
  border-radius: 50%;
  background-color: black;
  padding: 0px;
  position: relative;
}

.driver-review-nav-other {
  height: 8px;
  width: 8px;
  border: 1px solid rgba(12, 11, 49, 1);
  border-radius: 50%;
  background-color: white;
  margin-left: 8px;
  padding: 0px;
}

/*_________________________________RIDE SECTION_________________________________*/

.ride-section1 {
    background-color: #ecf0f1;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
}

.ride-section1-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 96px; /* space reserved for features row */
  min-height: 420px;
}

.ride-section1-part1, .ride-section1-part3 { display: none; }
.ride-section1-part2 { width: 100%; order: 2; }

.ride-with-rs {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-top: 8px;
}

.ready-set-go { font-size: 36px; line-height: 44px; font-weight: 600; margin: 8px 0 12px; }

.get-a-reliable-ride {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 24px;
    padding: 21px 21px;
    background-color: #ecf0f1;
    border-radius: 999px;
    border: 1px solid rgb(139, 55, 255);
    box-shadow: rgb(0 0 0 / 12%) 0px 0px 1px 0px, rgb(0 0 0 / 16%) 0px 3px 6px 0px;
    height: 40px;
}

.get-a-reliable-ride-content {
  line-height: 18px;
  font-weight: 700;
  font-size: 13px;
  padding-left: 8px;
}
.get-a-reliable-ride-content:hover {
  text-decoration: underline;
}

.know-that-your-driver {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 21px 21px 8px;
}

.know-that-your-driver-content {
  line-height: 18px;
  font-weight: 700;
  font-size: 13px;
  font-family: sans-serif;
  padding-left: 8px;
}
.know-that-your-driver-content:hover {
  text-decoration: underline;
}

.schedule-your-ride {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 21px 21px 8px;
}

.schedule-your-ride-content {
  line-height: 18px;
  font-weight: 700;
  font-size: 13px;
  font-family: sans-serif;
  padding-left: 8px;
}
.schedule-your-ride-content:hover {
  text-decoration: underline;
}

.get-a-ride-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #27AE60;
    border: 1px solid transparent;
    border-radius: 999px;
    min-height: 48px;
    max-width: 125px;
    padding: 8px 24px;
}
.get-a-ride-button a {
  font-size: 16px;
  font-weight: 700;
  color: white;
}


.we-got-options {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  padding-top: 8px;
}

.ride-options-arrows {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px auto 50px auto;
}

.ride-options-left-arrow {
  fill: grey;
}

.ride-options-right-arrow {
    background-color: #27AE60;
    border-radius: 56px;
    margin: 0px 24px;
    border: 1px solid transparent;
    fill: white;
    padding: 12px;
}

.ride-options-container {
  display: flex;
  flex-direction: row;
}

.ride-options-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  border-radius: 16px;
  width: 480px;
  height: 480px;
  margin: 4px;
  padding: 32px 16px;
  box-shadow: 0px 2px 3px 0px rgb(0 0 0 / 16%);
}

.ride-options-header {
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  padding-bottom: 16px;
}

.ride-options-image {
  width: 50%;
  margin-top: 10px;
  margin-bottom: 20px;
}

.ride-options-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: grey;
  gap: 10px;
  margin:  10px; 
}

.ride-options-body span {
  padding-left: 3px;
}

.availability {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-top: 50px;
  margin-bottom: 80px;
  
}

.ride-section3 {
    margin-bottom: 80px;
    order: 3;
  
}

.ride-section3-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  width: 100%;
  max-width: 1280px;
  margin: 0px auto;
  padding: 36px 8px 36px 24px;
  text-align: center;
}

.ready-to-roll {
  font-size: 24px;
  font-weight: 700;
  margin-right: 8px;
}

.ride-section3-searchbox-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
}

.location-label {
  position: absolute;
  pointer-events: none;
  transform-origin: 0px 0px;
  transition: transform 100ms cubic-bezier(0.45, 0, 0.15, 1) 0s;
  color: grey;
  font-size: 16px;
  margin-left: 42px;
}

input:valid ~ .location-label,
input:focus ~ .location-label {
  transform: scale(0.9) translateY(-10px);
  margin-bottom: 2px;
}

.input-style {
  outline: none;
  min-width: 80px;
  font-size: 18px;
  width: 100%;
  height: 60px;
  padding: 16px 26px 0px;
  margin-left: 16px;
  margin-right: -16px;
}

.ride-section3-searchbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
}

/* Improve estimate button */
.ride-section3-get-estimate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #27AE60;
  color: #ffffff;
  font-weight: 700;
  border-radius: 999px;
  padding: 22px 28px;
  height: 60px;
  line-height: 24px;
  margin-top: 12px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(39,174,96,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ride-section3-get-estimate:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(39,174,96,.36); }

.ride-section3-container { text-align: center; }

/* Mobile stacking for ride inputs and smaller features */
@media (max-width: 640px) {
  .ride-section3-container { flex-direction: column; align-items: stretch; padding: 24px 16px; }
  .ride-section3-searchbox-container { width: 100%; margin: 8px 0; }
  .ride-section3-searchbox { width: 100%; }
  .input-style { margin-left: 0; margin-right: 0; height: 56px; font-size: 16px; padding: 14px 16px 0; }
  .ride-section3-get-estimate { width: 100%; height: 62px; padding: 18px 20px; margin-left: 0; transform: none; }
  .ride-features-row { position: static; transform: none; gap: 10px; justify-content: space-between; flex-wrap: nowrap; margin-top: 14px; }
  .ride-feature { font-size: 13px; gap: 6px; white-space: nowrap; }
  .ride-feature svg { width: 16px; height: 16px; }
}

/*_________________________________SAFETY FIRST SECTION_________________________________*/

.safety-first-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 80px;
  margin-bottom: 0;
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
  background: #f7fbf8;
  border-radius: 24px;
  padding-top: 8px;    /* less space above */
  padding-bottom: 40px; /* more space below to visually center */
  box-shadow: 0 14px 36px rgba(0,0,0,0.05);
}

.safety-first-section1 {
  width: 8.3333%;
}

.safety-first-section2 {
  width: 40.6667%;
}

.safety-first-header {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.how-to-show {
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 16px;
}

.safety-list {
  margin: 8px 0 12px;
  padding-left: 0;
  list-style: none;
}
.safety-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.safety-list li::before {
  content: "✓";
  color: #27AE60;
  font-weight: 700;
}

.learn-about-safety {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #27AE60;
    border-radius: 50px;
    min-height: 48px;
    min-width: 100px;
    padding: 8px 24px;
    margin-right: 26px;
}

.learn-about-safety a {
  font-weight: 700;
  color: white;
  font-size: 16px;
}

.buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}

.community-guidlines {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
}
.community-guidlines:hover {
  text-decoration: underline;
}

.safety-first-section3 {
  width: 8.3333%;
}

.safety-first-section4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.3333%;
}

/* Safety section mobile layout */
/* Safety section mobile layout */
@media (max-width: 640px) {
  .safety-first-container { flex-direction: column; padding: 8px 16px 56px; gap: 8px; }
  .safety-first-section1, .safety-first-section3 { display: none; }
  .safety-first-section2, .safety-first-section4 { width: 100%; }
  /* Move image between paragraphs and bullets: place image block before list */
  .safety-first-section2 .safety-list { margin-top: 12px; }
  .safety-image-mobile { display: block; margin-top: 12px; }
  .safety-first-section4 { display: none; }
  /* Button cleanup for mobile */
  .buttons-container { flex-direction: column; align-items: center; margin-top: 18px; }
  .learn-about-safety { width: auto; margin-right: 0; padding: 12px 20px; border-radius: 999px; border: 2px solid #27AE60; background-color: #27AE60; }
  .learn-about-safety a { display: inline-block; text-align: center; font-size: 1rem; }
}

/* Ensure the mobile-only safety image never shows on desktop */
@media (min-width: 641px) {
  .safety-image-mobile { display: none !important; }
}

.getting-the-vaccine {
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 20px;
}
/*_________________________________Ride Splits BUSINESS SECTION_________________________________*/

.rs-business-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 90px 8.3333% 80px 8.3333%;
  text-align: center;
  padding-left: 16px;
  padding-right: 8px;
  min-width: 320px;
  max-width: 1280px;
}

.rs-business-logo {
  margin: 0px auto;
  height: 100%;
  max-width: auto;
}

.we-help-you {
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  margin-top: 20px;
}

.rs-business-container p {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-bottom: 40px;
}

.ride-section-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}
.ride-section-button:hover {
  text-decoration: underline;
}


/*_________________________________ABOUT Page_________________________________*/
.about-hero { background: #ecf0f1; padding: 32px 0; }
.about-hero-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: start; }
.about-hero-video iframe { width: 100%; height: 315px; border-radius: 16px; box-shadow: 0 14px 36px rgba(0,0,0,0.08); }
.about-support-card { background: #ffffff; border: 1px solid #f0f0f0; border-radius: 16px; padding: 16px; box-shadow: 0 12px 28px rgba(0,0,0,0.06); }
.about-support-card h2 { margin: 0 0 6px; font-size: 20px; }
.about-support-card p { margin: 0 0 12px; color: #424242; }
.about-mini-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.about-mini-links a { color: #27AE60; font-weight: 600; text-decoration: none; }
.about-mini-links a:hover { text-decoration: underline; }
.about-mini-links-center { justify-content: center; }

@media (max-width: 980px){ .about-hero-container { grid-template-columns: 1fr; } }

.about-intro { padding: 28px 0; }
.about-intro-container { max-width: 880px; margin: 0 auto; padding: 0 16px; text-align: center; }
.about-title { font-size: 28px; margin: 0 0 8px; }
.about-intro-container p { color: #2c3e50; }

.about-how { padding: 88px 0 64px; }
.about-how-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; text-align: center; }
.how-steps-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how-step-card { background: #ffffff; border: 1px solid #f0f0f0; border-radius: 16px; box-shadow: 0 12px 28px rgba(0,0,0,0.06); overflow: hidden; }
.how-step-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.how-step-text { padding: 12px; }
.how-step-text strong { display: block; font-size: 14px; text-transform: uppercase; margin-bottom: 4px; }
.how-step-text p { margin: 0; color: #424242; }

@media (max-width: 980px){ .how-steps-grid { grid-template-columns: 1fr; } .how-step-card img { height: 180px; } }

/* About: Why / Where */
.about-why, .about-where { padding: 28px 0; background: #ffffff; }
.about-why-container, .about-where-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.about-why h2, .about-where h2 { text-align: center; margin: 0 0 12px; }
.about-bullets { max-width: 880px; margin: 0 auto; padding-left: 18px; }
.about-bullets li { margin: 6px 0; color: #424242; }

/* About: Differentiators */
.about-diff { padding: 40px 0; background: #f7fbf8; }
.about-diff-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.about-diff-container .about-eyebrow { display:block; text-align:center; margin-bottom:6px; }
.about-diff h2 { text-align: center; margin: 0 0 16px; }
.about-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.about-diff-card { position:relative; background: #ffffff; border: 1px solid #eef2f3; border-radius: 18px; padding: 18px; box-shadow: 0 12px 28px rgba(0,0,0,0.06); transition: transform .18s ease, box-shadow .18s ease; height:100%; min-height: 220px; display:flex; flex-direction:column; justify-content:flex-start; }
.about-diff-card:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(0,0,0,0.08); }
.about-diff-card strong { display:block; margin-bottom: 6px; }
/* Use the same green check bullets for consistency */
@media (max-width: 1200px){ .about-diff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px){ .about-diff-grid { grid-template-columns: 1fr; } }

/* About: Pricing (redesigned) */
.about-pricing { padding: 48px 0; background: #ffffff; }
.about-pricing-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; text-align: center; }
.about-pricing .about-heading { margin-bottom: 8px; }
.pricing-intro { max-width: 920px; margin: 0 auto 14px; color: #2c3e50; }
.pricing-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pricing-card { position: relative; background: #ffffff; border: 1px solid #e9f2ec; border-radius: 20px; padding: 22px; text-align: left; box-shadow: 0 16px 40px rgba(0,0,0,0.06); transition: transform .18s ease, box-shadow .18s ease; }
.pricing-card:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(0,0,0,0.08); }
.pricing-kicker { font-weight: 700; color: #27AE60; text-transform: uppercase; margin-bottom: 8px; }
.pricing-price { font-size: clamp(28px, 4.4vw, 40px); font-weight: 800; line-height: 1.1; margin-bottom: 6px; }
.pricing-price .currency { font-size: .65em; vertical-align: super; }
.pricing-price .per { font-size: .5em; color: #6b7280; font-weight: 700; margin-left: 4px; }
.pricing-sub { margin: 0 0 10px; color: #2c3e50; }
.pricing-list { margin: 0 0 8px 0; padding: 0; list-style: none; }
.pricing-list li { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; color: #2c3e50; }
.pricing-list li::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2327AE60'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.5 14l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/></svg>"); }
.pricing-note { font-size: 12px; color: #6b7280; }
/* Small badge for special notes */
.pricing-badge { position: absolute; top: 12px; right: 12px; background: #e8f6ee; color: #27AE60; border: 1px solid #d6efe2; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
@media (max-width: 980px){ .pricing-grid { grid-template-columns: 1fr; } }

/* About: fineprint */
.about-fineprint { padding: 20px 0 36px; background: #ffffff; }
.about-fineprint-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; text-align: center; color: #6b7280; }
.about-fineprint-container small { font-size: 15px; }
.about-fineprint a { color: #27AE60; text-decoration: none; }
.about-fineprint a:hover { text-decoration: underline; }

/*_________________________________APP Page_________________________________*/

.app-section {
  background-color: #ecf0f1;
  margin-top: 80px;
  margin-bottom: 80px;
}

.app-section-container {
display: flex;
flex-wrap: wrap;
min-width: 320px;
width: 100%;
max-width: 1280px;
margin: 0px auto;
padding-right: 8px;
padding-left: 16px;
}

.app-header {
  font-size: 50px;
  margin-bottom: 24px;
}

.app-text {
  font-size: 25px;
  margin-bottom: 25px;
}

.ridesplits-app-download-img {
  display: flex;
  justify-content: center;
}
.ridesplits-app-download-img img{
  display: block;
  border-radius: 10px;
  margin-bottom: 50px;
}
/*_________________________________SOCIALS Page_________________________________*/

.social-media-icons {
	padding: 10px;
	display: flex;
	justify-content: center;
}

.social-media-icons a {
	margin: 10px;
	font-size: 2rem;
	text-align: center;
	display: inline-block;
	color: var(--main-fonts-color);
}

.social-media-icons a i{
	cursor: pointer;
}

.social-media-icons a:hover, .footer-social-media-icons  a:hover {
	color: #27AE60;
	text-shadow: 0 0 50px #27AE60;
}

.socials-section {
  background-color: #ecf0f1;
  margin-top: 80px;
  margin-bottom: 80px;
}

.socials-section-container {
display: flex;
flex-wrap: wrap;
min-width: 320px;
width: 100%;
max-width: 1280px;
margin: 0px auto;
padding-right: 8px;
padding-left: 16px;
}

.socials-header {
  font-size: 50px;
  margin-bottom: 24px;
}

.socials-text {
  font-size: 25px;
  margin-bottom: 25px;
}


/*_________________________________Team Page_________________________________*/

#team{
	margin-top:100px;
    height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
	text-align:center;
	color: var(--main-fonts-color);
}
#team h3{
    padding-top: 70px;
}
#team p{
	font-family: var(--main-font-family);
	font-size:1.2rem;
	padding: 10px;
}

.team-header {
  font-size: 50px;
  margin-bottom: 24px;
}

.team-text {
  font-size: 25px;
  margin-bottom: 25px;
}

.work{
	display: flex; 
	flex: 1;
    flex-wrap: wrap;
    justify-content:center;
	align-items: center;
	padding: 20px;
}

.card{
	display: flex;
	flex-direction: column;
	margin: 30px;
	width: 200px;
	height:250px;
	border-radius:30px;
    background:var(--main-decor-color);
}

.card img{
	width: 100%;
	height:90%;
	border-radius:10px 10px 0px 0px;
}

.card .work-content{
	text-align: center;
	padding: 5px 5px;
	font-size: 1rem;
	/*(color: var(--main-fonts-color); */
	font-family: var(--main-font-family);
	cursor: pointer;
}

.card a{
	text-decoration: none;
}

.card .work-content:hover{
    color:#202020;
}

	.card:hover {
		box-shadow: 0 0 1.5rem gray;
		max-width: 240px;
		max-height: 270px;
	}

  .team-section {
    background-color: #ecf0f1;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  
  .team-section-container {
  display: flex;
  flex-wrap: wrap;
  min-width: 320px;
  width: 100%;
  max-width: 1280px;
  margin: 0px auto;
  padding-right: 8px;
  padding-left: 16px;
  }
  
  .team-text {
    margin-bottom: 24px;
  }

/*_________________________________FOOTER_________________________________*/

.navlinks-footer-links a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  color: rgba(12, 11, 49, 1);
  border: 1px solid rgba(12, 11, 49, 0.45);
  border-radius: 56px;
  position: relative;
  padding: 8px 24px;
  min-height: 48px;
  min-width: 100px;
  width: 100%;
  cursor: pointer;
  margin-bottom: 8px;
}
.sitemap-li {
  list-style: none;
  margin-bottom: 8px;
  padding-bottom: 10px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}
.sitemap-li li {
  padding-bottom: 10px;
}

.sitemap {
  display: flex;
  justify-content: space-between;
  padding-left: 24px;
  padding-right: 24px;
}

.footer {
  background: linear-gradient(
    rgb(231, 231, 239) 0%,
    rgb(244, 244, 250) 5%,
    rgb(255, 255, 255) 10%
  );
  font-size: 12px;
  padding: 46px 0px;
  margin-top: 0;
}
.footer-social-media-icons {
  display: flex;
  list-style: none;
  align-items: flex-start;
  gap: 10px;
  
}

.footer-social-media-icons a {
  text-decoration: none;
  color: rgba(12, 11, 49, 1);
  
}

.footer-icons-right-group {
  display: flex;
  gap: 10px;
}

.footer-ride-splits-link a:hover{
  text-decoration: underline;
}

.footnote {
  display: flex;
  flex-direction: row;
 
}

.footnote .list-style {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.footnote .list-style * + * {
  margin-left: 1em;
  margin-right: 1em;
}

/* Footer: mobile layout cleanup */
@media (max-width: 640px) {
  .footnote .list-style { flex-direction: column; align-items: center; gap: 14px; }
  .footer-social-media-icons { gap: 22px; justify-content: center; }
  .footer-icons-right-group { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
  .footer-icons-right-group li { text-align: center; }
  .page-section { max-width: 92%; }
  .footer { padding: 40px 0 54px; }
}

.page-section {
  max-width: 83.333%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
}

/*_________________________________LEGAL PAGES_________________________________*/

.page-content-section {
  padding: 40px 0;
  min-height: 60vh;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0C0B31;
  margin-bottom: 20px;
  text-align: center;
}

.legal-content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  color: #333;
}

/* Mobile spacing for legal pages */
@media (max-width: 480px) {
  .legal-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.legal-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0C0B31;
  margin-top: 30px;
  margin-bottom: 15px;
}

.legal-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0C0B31;
  margin-top: 25px;
  margin-bottom: 10px;
}

.legal-content p {
  margin-bottom: 15px;
}

.legal-content ul, .legal-content ol {
  margin-bottom: 15px;
  padding-left: 20px;
}

.legal-content li {
  margin-bottom: 8px;
}

.legal-content ul {
  list-style-type: disc;
  padding-left: 20px;
}

.legal-content ol {
  list-style-type: decimal;
  padding-left: 20px;
}

.legal-content li::marker {
  color: #27AE60;
  font-weight: bold;
}

.effective-date {
  background-color: #f8f9fa;
  border-left: 4px solid #27AE60;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 4px;
}

.important-notice {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 30px;
}

.important-notice p {
  margin-bottom: 10px;
  color: #856404;
}

.closing-statement {
  background-color: #f8f9fa;
  border-top: 2px solid #27AE60;
  padding: 20px;
  margin-top: 30px;
  border-radius: 4px;
}

.closing-statement p {
  margin-bottom: 10px;
  text-align: center;
}

.legal-content h2 {
  color: #0C0B31;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 10px;
  margin-top: 40px;
  margin-bottom: 20px;
}

.legal-content h2:first-of-type {
  margin-top: 30px;
}

/* FAQ Section Styles */
.faq-section {
  background-color: #f8f9fa;
  padding: 80px 0;
  margin-top: 60px;
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.faq-container h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #0C0B31;
  margin-bottom: 50px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.faq-item {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.faq-item h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0C0B31;
  margin-bottom: 15px;
}

.faq-item p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.faq-cta {
  text-align: center;
}

.faq-learn-more {
  display: inline-block;
  background-color: #27AE60;
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

.faq-learn-more:hover {
  background-color: #229954;
  color: white;
}

/* FAQ Page Styles */
.faq-page-section {
  background-color: #f8f9fa;
  padding: 80px 0;
  margin-top: 0;
}

/* Support section (white block above FAQ) */
.support-section { background:#ffffff; padding: 48px 0 48px; }
.support-container { max-width: 1120px; margin:0 auto; padding:0 16px; display:grid; grid-template-columns: 0.9fr 1.1fr; gap:20px; align-items:start; }
.support-card { background:#ffffff; border:1px solid #eef2f3; border-radius:20px; padding:18px; box-shadow:0 16px 40px rgba(0,0,0,0.06); }
.support-row { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.support-row label { font-weight:700; color:#0C0B31; }
.support-input { width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; outline:none; font-size:16px; }
.support-input:focus { border-color:#27AE60; box-shadow:0 0 0 3px rgba(39,174,96,0.12); }
.support-actions { display:flex; gap:12px; align-items:center; margin-top:8px; }
.support-status { color:#2c3e50; }
.support-lede { color:#2c3e50; margin: 6px 0 8px; }
.support-fallback { margin-top:8px; color:#6b7280; font-size:13px; }
@media (max-width:980px){ .support-container { grid-template-columns:1fr; } }

.faq-page-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.faq-page-container h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #0C0B31;
  margin-bottom: 20px;
}

.faq-page-container h1::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  background: #27AE60;
  border-radius: 999px;
  margin: 10px auto 0;
}

.faq-page-container > p {
  font-size: 1.25rem;
  color: #666;
  margin-bottom: 40px;
}

.placeholder-content {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* FAQ refined layout */
.faq-list { text-align:left; display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.faq-item { background:#ffffff; border:1px solid #eef2f3; border-left:4px solid #27AE60; border-radius:16px; padding:16px; box-shadow:0 8px 20px rgba(0,0,0,0.06); transition: transform .16s ease, box-shadow .16s ease; }
.faq-item:hover { transform: translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,0.08); }
.faq-q { margin:0 0 6px; font-weight:800; color:#0C0B31; }
.faq-a { margin:0; color:#2c3e50; }
.faq-a a { color:#27AE60; text-decoration:none; }
.faq-a a:hover { text-decoration:underline; }
@media (max-width: 980px){ .faq-list { grid-template-columns: 1fr; } }
.faq-note { margin-top: 18px; color:#2c3e50; text-align:left; }
.faq-login-link { color:#27AE60; font-weight:700; text-decoration:none; }
.faq-login-link:hover { text-decoration:underline; }

.placeholder-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0C0B31;
  margin-bottom: 20px;
}

.placeholder-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.placeholder-content ul {
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
}

.placeholder-content li {
  color: #666;
  line-height: 1.6;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.placeholder-content li::before {
  content: "•";
  color: #27AE60;
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* Ride section features row anchored to bottom */
.ride-features-row { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display:flex; justify-content:center; gap:28px; align-items:center; flex-wrap:wrap; }
.ride-feature { display:flex; align-items:center; gap:8px; color:#2c3e50; font-weight:600; }
.ride-feature svg { fill:#6b7280; }

/* Button offset for better centering relative to inputs */
.ride-section3-get-estimate { margin-left: 16px; transform: translate(8px, -4px); }
.ride-section3-get-estimate:hover { transform: translate(8px, -6px); }

/* About: lead and highlights */
.about-lede { max-width: 880px; margin: 0 auto 12px; color:#2c3e50; text-align:center; }
.about-highlights { margin-top: 16px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.about-highlight { background:#ffffff; border:1px solid #f0f0f0; border-radius:12px; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,0.05); text-align:left; }
.about-highlight strong { display:block; margin-bottom:4px; }
@media (max-width:980px){ .about-highlights { grid-template-columns: 1fr; } }

/* About: framed hero video similar to index hero image */
.about-hero-framed { background:#ecf0f1; padding: 40px 0 36px; }
.about-hero-container-narrow { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.about-hero-title-outside { text-align:center; font-size: clamp(28px, 4.5vw, 52px); line-height:1.1; margin: 0 0 12px; font-weight:700; }
.about-hero-frame { position: relative; border-radius: 24px; box-shadow: 0 18px 40px rgba(0,0,0,0.12); overflow: hidden; background:#000; height: min(85vh, 56.25vw); }
.about-hero-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* About: support section under hero */
.about-support { background:#ffffff; padding: 24px 0 16px; }
.about-support-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; display:flex; justify-content:center; }

/* Get Ride WIP card */
.getride-section { padding: 40px 0; background:#ffffff; }
.getride-hero { max-width: 1120px; margin: 0 auto 16px; padding: 0 16px; }
.getride-hero-img { width:100%; height:auto; border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,0.08); }
.getride-container { max-width: 1120px; margin: -24px auto 0; padding: 0 16px; display:flex; justify-content:center; }
.estimate-wip { display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:#ffffff; border:1px solid #eef2f3; border-radius:16px; padding:18px; box-shadow:0 12px 28px rgba(0,0,0,0.06); max-width:680px; }
.estimate-status { display:flex; align-items:center; gap:10px; }
.status-dot { width:12px; height:12px; border-radius:50%; background:#27AE60; box-shadow:0 0 0 3px #e8f6ee; }
.estimate-wip h2 { font-size: clamp(18px, 3.2vw, 22px); margin:0; }
.estimate-wip p { margin:0; color:#2c3e50; }
.estimate-actions { margin-top:6px; }

/* About: panel to echo Safety First look */
.about-intro-panel { background:transparent; border-radius:0; box-shadow:none; padding:0 0 36px; max-width:1120px; margin:0 auto; }
.about-intro-grid { display:grid; grid-template-columns: 0.95fr 1.05fr; gap:32px; align-items:center; padding-top: 36px; }
.about-gfm-card { background:#ffffff; border:1px solid #f0f0f0; border-radius:24px; box-shadow:0 18px 40px rgba(0,0,0,0.12); padding:14px; }
.about-eyebrow { display:inline-block; font-size:16px; line-height:20px; font-weight:700; text-transform:uppercase; margin-bottom:8px; }
.about-heading { font-size: clamp(28px, 4.6vw, 44px); line-height:1.2; margin: 0 0 12px; font-weight:700; }
.about-body { color:#2c3e50; margin:0 0 12px; }
.about-checks li { position:relative; padding-left:28px; margin:10px 0; color:#2c3e50; }
.about-checks li::before { content:""; position:absolute; left:0; top:8px; width:16px; height:16px; border-radius:50%; background:#27AE60; box-shadow: inset 0 0 0 3px #ffffff; }
@media (max-width:980px){ .about-intro-panel { border-radius:16px; } .about-intro-grid { grid-template-columns:1fr; } }

/* About: mobile order and padding for intro copy */
@media (max-width:640px){
  .about-intro-left { order: 2; }
  .about-intro-right { order: 1; padding-left: 16px; padding-right: 16px; }
}

/* About: icon list under intro (clean list style) */
.about-icons { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.about-icon-item { display:flex; gap:10px; align-items:flex-start; background:transparent; border:none; border-radius:0; padding:0; box-shadow:none; }
.about-icon-item svg { flex:0 0 auto; margin-top:2px; }
.about-icon-item p { margin:0; color:#2c3e50; font-size:16px; line-height:24px; }
.about-icon-item p strong { font-weight:700; }
@media (max-width:980px){ .about-icons { gap:12px; } }

/*_________________________________MOBILE ENHANCEMENTS (phone-only)_________________________________*/
html { -webkit-text-size-adjust: 100%; }

@media (max-width: 640px) {
  header { height: auto; }
  .navbar { flex-wrap: wrap; padding: 8px 0; }
  .rs-logo { padding-left: 12px; }
  .rs-logo img, .rs-business-logo { max-height: 56px; height: auto; width: auto; }
  .navbar .navlinks-header { order: 2; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around; margin-top: 8px; }
  .navbar .navlinks-header li { padding: 6px 0; }
  .navbar .navlinks-header a { padding-left: 12px; padding-right: 12px; padding-top: 10px; padding-bottom: 10px; border-left: none; }
  .navbar .searchbox { order: 3; width: calc(100% - 32px); margin: 8px 16px 0; height: 44px; }
  .header-actions { order: 1; margin-left: auto; margin-right: 12px; }
  .login-btn { min-height: 44px; padding: 10px 16px; }
  .cta-primary, .cta-secondary, .cta-small { min-height: 44px; }
  .ride-section3-get-estimate { height: 48px; padding: 14px 22px; }

  /* Home hero headline tightening for small phones */
  .hero-main-title { font-size: 2.2rem; line-height: 1.15; }
  .hero-rotating-text { height: 2.5rem; min-width: 9.5ch; margin: 0 4px 0 0; }
  .after-rotating { white-space: nowrap; }
  .word { font-size: 2.3rem; line-height: 1.1; }
  /* Reduce bottom whitespace of section 1 */
  .hero-section { padding-bottom: 32px; }
  .hero-description { text-align: center; margin-top: 10px; }
  .hero-visual-mobile { margin-bottom: 6px; }

  /* Driver section: single-column, padded layout */
  .driver-section { margin-top: 56px; margin-bottom: 56px; padding-top: 28px; padding-bottom: 60px; }
  .driver-section-container { padding: 0 16px; }
  /* Reorder blocks for mobile: title/copy first, then image, hide spacer columns */
  .driver-section-container > div[style*="order: 4"] { order: 1 !important; width: 100% !important; padding-right: 0 !important; padding-top: 0 !important; }
  .driver-section-container > div[style*="order: 2"] { order: 2 !important; width: 100% !important; padding-right: 0 !important; }
  .driver-section-container > div[style*="order: 1"],
  .driver-section-container > div[style*="order: 3"] { display: none !important; }
  .driver-2 { margin-top: 8px; border-radius: 16px; }
  .driver-section-info { padding: 16px 0 8px; }
  .set-your-own-hours { font-size: 28px; line-height: 34px; }
  .reason-to-drive { font-size: 16px; line-height: 24px; }
  /* Place CTAs under bullets for mobile and center them */
  .driver-cta-row { display:none !important; }
  .driver-cta-row-mobile { display:flex !important; flex-direction: column; gap:12px; margin: 20px 0 0; }
  .driver-section-container .cta-primary.cta-small,
  .driver-section-container .cta-secondary.cta-small { width: 100%; text-align: center; justify-content:center; }
}

@media (hover: none) and (pointer: coarse) {
  a, button { min-height: 44px; }
}