/* Grid utility */
.grid-3{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}

/* How it works grid - used on contact, about, and advertisers pages */
.how-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  margin-top: 2rem;
  align-items: stretch; /* Ensure cards have equal heights */
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .how-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .how-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.how-grid .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* Needed for gradient border */
}

.how-grid .card > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.how-grid .card > div > div:last-child {
  margin-top: auto; /* Push buttons/links to bottom */
}

/* Gradient border for cards in how-grid (contact and about pages only, NOT "How it works" section) */
body:not(.page-advertisers) .how-grid .card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #005AED, #8D29FF, #E300FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  filter: blur(0.5px);
  z-index: 1;
}

/* Card */
.card {
  padding: 1.5rem; /* Reduced on mobile */
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: all var(--motion-fade) var(--ease-out);
}

/* Full padding on desktop */
@media (min-width: 768px) {
  .card {
    padding: 2.5rem;
  }
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  border-color: rgba(255, 255, 255, .12);
}

/* Disable hover effects on touch devices */
@media (hover: none) {
  .card:hover {
    transform: none;
  }
  
  .card:active {
    transform: scale(0.98);
    opacity: 0.95;
  }
}

/* removed features carousel */

/* ---------- INTRO SPLIT (Introduction + About Us) ---------- */
.intro-split{
  display:grid;
  grid-template-columns:35% 65%;
  grid-template-rows:auto auto;
  grid-template-areas:
    "header text"
    "image  about";
  gap:3rem;
  max-width:1200px;
  margin:96px auto 32px;
  padding:0 1rem;
}

/* if two intro-split sections follow back-to-back, reduce gap */
.intro-split + .intro-split{margin-top:-16px}

/* extra breathing room before the QubiTab app section */
.intro-split + .qubitab-app{margin-top:130px}

.intro-header{grid-area:header;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.intro-text{grid-area:text}
.about-image{grid-area:image}
.about-content{grid-area:about;display:flex;flex-direction:column;gap:1.5rem}

/* tighten gap between stacked heading lines inside about-content */
.about-content .stack-kicker{margin-bottom:-1rem}

/* hide underline + arrow in about section */
.about-content .intro-main::after,
.about-content .intro-main::before{display:none}

/* stacked heading (re-usable) */
.stack-kicker,.intro-kicker{font:700 1.8rem/1 'Poppins',sans-serif;letter-spacing:.02em;color:var(--c-text-hi);display:block}
/* base of second line with optional underline */
.stack-main,.intro-main{
  font:400 1.125rem/1 'Poppins',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-text-med);
  display:inline-flex;      /* keep text and bar on same baseline */
  align-items:center;       /* vertically center bar */
  gap:1rem;                /* tighter space between text and bar */
}

/* 2 px gradient bar (flex item order 1) */
.intro-main::after{
  order:1;
  content:"";
  width:100px;
  height:2px;
  background:linear-gradient(90deg,var(--c-grad-a),var(--c-grad-b));
}

/* remove legacy ::before arrow if cached */
.intro-main::before{content:none}

.about-image img{max-width:600px;aspect-ratio:16/9;}
.about-content .btn{margin-top:1.5rem;align-self:flex-start}

/* Consolidate intro-split responsive styles - use consistent breakpoint */
@media(max-width: 767px){
  .intro-split{
    grid-template-columns: 1fr;
    grid-template-areas: "text" "header" "about" "image";
    text-align: center;
    margin: 3rem auto 2rem; /* Use consistent spacing */
    gap: 1.5rem;
  }
  .intro-header,.about-content{align-items:center}
  .intro-main::after,.intro-main::before{display:none}
}

/* Contact page map and form responsive */
@media(max-width: 960px){
  .contact-map-form {
    grid-template-columns: 1fr !important;
  }
  .contact-map-form > div:first-child {
    order: 2;
  }
  .contact-map-form > div:last-child {
    order: 1;
  }
}

/* ---------- HOW IT WORKS TIMELINE ---------- */
.timeline-rail{
  display:flex;
  gap:3rem;
  counter-reset:step;
  margin:4rem 0;
  padding:0;
}

.timeline-rail li{
  list-style:none;
  flex:1 1 0;
  text-align:center;
  position:relative;
  padding-top:2rem;
}

/* connector line */
.timeline-rail li:not(:last-child)::after{
  content:"";
  position:absolute;
  top:60px; /* lower for better alignment */
  left:60%;
  right:-55%;
  height:3px;
  background:rgba(255, 255, 255, 0.555);
}

/* dot */
.timeline-rail .dot{
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg, #005AED, #8D29FF, #E300FF);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
  box-shadow:0 4px 12px rgba(0, 90, 237, .25);
}
.timeline-rail .dot svg{
  width:32px;
  height:32px;
  fill:#fff;
  stroke:#fff;
}

.timeline-rail .dot i{
  font-size: 1.6rem;
}

.timeline-rail h3{
  font-size:1.125rem;
  margin-bottom:.5rem;
}

.timeline-rail p{
  font-size:.875rem;
  color:var(--c-text-med);
}

/* Consolidate timeline-rail - use consistent breakpoint */
@media(max-width: 767px){
  .timeline-rail{
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
  }
  .timeline-rail li{
    max-width: 320px;
    padding-top: 0.75rem;
    position: relative;
    width: 100%;
  }
  /* Use top borders for separation instead of absolute lines to avoid overlap */
  .timeline-rail li:not(:first-child){
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 1rem;
    margin-top: 0.75rem;
  }
  .timeline-rail li::after{
    display: none !important;
  }
  .timeline-rail .dot{
    margin-bottom: 0.35rem;
  }
}

/* universal section title */
.section-title{
  font:700 2rem/1 'Poppins',sans-serif;
  letter-spacing:.02em;
  color:var(--c-text-hi);
  text-transform:uppercase;
  margin-bottom:2rem;
  text-align:center;
}

.qubitab-grid{display:grid;grid-template-columns:38% 62%;align-items:center;gap:2.25rem}
.qubitab-copy{display:flex;flex-direction:column;gap:1rem;max-width:560px}
@media(max-width:899px){
  .qubitab-copy{
    gap:0.5rem;
  }
}
.qubitab-ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.qubitab-visual img{max-width:640px}
@media(max-width:899px){
  .qubitab-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:0;
  }
  .qubitab-visual{
    order:1;
    margin-top:-0.5rem;
  }
  .qubitab-copy{
    order:0;
    margin-bottom:0;
    padding-bottom:0;
  }
  .qubitab-copy p:last-of-type{
    margin-bottom:0;
  }
  .qubitab-copy .lead{
    margin-bottom:0;
  }
  .qubitab-ctas{
    display:none;
  }
}

/* Desktop: Hide ghost button, keep primary gradient button */
@media (min-width: 1024px) {
  .tablet-actions {
    display: none;
  }
}
.qubitab-title{font:700 3.2rem 'Poppins',sans-serif;color:var(--c-text-hi)}
.qubitab-title .grad-text{background:linear-gradient(90deg,var(--c-grad-a),var(--c-grad-b));-webkit-background-clip:text;color:transparent}
.qubitab-title .mini-kicker{color:#ffffff}
.toggle-field{display:flex;gap:2rem;margin:1rem 0;font-weight:600;border:0;padding:0}
.toggle-field label{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.toggle-field input{margin:0;accent-color:var(--c-grad-a)}
.qubitab-form{display:flex;gap:1rem;margin-bottom:1.25rem}
.qubitab-form input{flex:1 1 0;padding:.75rem 1rem;border-radius:.5rem;border:1px solid var(--c-text-low);background:rgba(255,255,255,.05);color:var(--c-text-hi)}
.qubitab-form input::placeholder{color:var(--c-text-med)}

/* ================================================
   Form Styles - Responsive
   ================================================ */

/* Base form input styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  min-height: var(--touch-target-min); /* Touch target minimum */
  padding: 0.75rem 1rem;
  font-size: 1rem; /* Prevent zoom on iOS */
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-glass);
  background: rgba(255, 255, 255, .04);
  color: var(--c-text-hi);
  font-family: inherit;
  transition: border-color var(--motion-fade) var(--ease-out),
              box-shadow var(--motion-fade) var(--ease-out);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--c-grad-a);
  box-shadow: 0 0 0 3px rgba(35, 107, 255, 0.1);
}

input::placeholder,
textarea::placeholder {
  color: var(--c-text-med);
  opacity: 0.7;
}

/* Form grid - stacks on mobile */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Full-width fields */
.form-grid .full-width {
  grid-column: 1 / -1;
}

/* Fleet driver fields and fleet platform fields - needs grid layout on desktop */
@media (min-width: 768px) {

  .form-grid > .fleet-driver-fields,
  .form-grid > .fleet-platform-fields {
    grid-column: 1 / -1;
  }
  
  /* Then apply grid layout to fleet-driver-fields and fleet-platform-fields themselves */
  .fleet-driver-fields,
  .fleet-platform-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* Full-width fields span both columns */
  .fleet-driver-fields .full-width,
  .fleet-platform-fields .full-width {
    grid-column: 1 / -1;
  }
}

/* Form group */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-group label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--c-text-hi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Form actions */
.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-border-glass);
}

@media (max-width: 767px) {
  .form-actions {
    background: transparent;
    border-radius: var(--radius-card);
    gap: 1rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }
  
  .form-actions .btn {
    width: 80%;
  }
}

/* Error states */
input.error,
textarea.error,
select.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Success states */
.form-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.form-success h2 {
  color: var(--c-success);
  margin-bottom: 0.5rem;
}
.qubitab-sub{display:block;margin-bottom:.5rem;color:var(--c-text-med);font-weight:600}

/* bullet list under app intro */
.app-benefits{margin:-1rem 0 1.25rem;padding-left:1.25rem;list-style:disc;color:var(--c-text-med);line-height:1.5}
.app-benefits li{margin:.35rem 0}
.lead{margin-bottom:.5rem}

/* ---------- DRIVERS SECTION ---------- */
.drivers-section{margin:96px 0 112px}
.drivers-grid{display:grid;grid-template-columns:50% 50%;gap:3rem;align-items:center}
.drivers-copy{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.drivers-title{font:700 4rem 'Poppins',sans-serif;color:var(--c-text-hi);margin-bottom:1rem}
.drivers-sub{font-size:1.125rem;color:var(--c-text-med);margin-bottom:1.25rem}
.driver-benefits{display:flex;gap:1.5rem;margin:1.5rem 0}
.benefit-card{flex:1 1 0;display:flex;align-items:center;gap:.75rem;padding:.5rem 1.25rem;border:none;border-radius:var(--radius-card);background:rgba(255, 255, 255, 0.158);backdrop-filter:blur(14px) saturate(160%)}
.benefit-card span{font-weight:600}
.benefit-icon{font-size:1.75rem;line-height:1}
.drivers-cta{margin:1rem 0;display:inline-block}
.link-more{color:var(--c-text-med);font-size:.875rem}
.drivers-image{order:1}
.drivers-copy{order:2}

/* Consolidate drivers-grid - use consistent breakpoint */
@media(max-width: 767px){
  .drivers-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .drivers-copy{
    order: 1;
    align-items: center;
    text-align: center;
  }
  .drivers-image{
    order: 2;
  }
  .driver-benefits{
    justify-content: center;
    flex-wrap: wrap;
  }
  .benefit-card{min-width:140px;margin-bottom:.75rem}
  .drivers-title{font-size:2rem;text-align:center}
  .drivers-sub{text-align:center}
}

/* Requirements card - single card with grid inside */
.requirements-card {
  margin-top: 2rem;
}

/* Values card - single card with separators */
.values-card {
  margin-top: 2rem;
  position: relative;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.values-grid .value-item {
  position: relative;
  padding: 1rem 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.values-grid .value-item:not(:nth-child(3n))::after {
  content: '';
  position: absolute;
  right: 0;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.values-grid .value-item:nth-child(n+4)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

@media(max-width: 767px){
  .values-grid {
    grid-template-columns: 1fr;
  }
  .values-grid .value-item::after {
    display: none;
  }
  .values-grid .value-item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
  }
}

.values-card::before,
.contact-cards-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  padding: 2px;
  background: linear-gradient(90deg, #005AED, #8D29FF, #E300FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  filter: blur(0.5px);
}

.driver-requirements .requirements-grid{
  display:grid;
  gap:0;
  grid-template-columns:repeat(3,1fr);
  margin:0;
  padding:0;
}

/* Dividers between items */
.requirements-grid .requirement-item {
  position: relative;
  padding: 1.5rem;
  display:flex;
  gap:1rem;
  align-items:flex-start;
}

/* Vertical dividers between columns */
.requirements-grid .requirement-item:not(:nth-child(3n))::after {
  content: '';
  position: absolute;
  right: 0;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Horizontal dividers between rows */
.requirements-grid .requirement-item:nth-child(n+4)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile: single column */
@media(max-width: 767px){
  .driver-requirements .requirements-grid{
    grid-template-columns: 1fr;
  }
  
  /* Remove vertical dividers on mobile */
  .requirements-grid .requirement-item::after {
    display: none;
  }
  
  /* Keep horizontal dividers on mobile */
  .requirements-grid .requirement-item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
  }
}

.requirement-item p{
  margin:0;
  color:var(--c-text-med);
}
.requirement-icon{
  flex:0 0 38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--c-grad-a),var(--c-grad-b));
  color:#0b0f1a;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  box-shadow:0 6px 18px rgba(12,18,32,.45);
}
.driver-contact .contact-panel,
.adv-contact .contact-panel{
  max-width:780px !important; /* narrower card */
  margin:0 auto;
  padding: 2.5rem !important; /* reduce internal padding too */
}

/* Contact cards - single card with separators */
.contact-cards-card {
  margin-top: 2rem;
  position: relative;
}

.contact-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.contact-item {
  position: relative;
  padding: 1rem 1.25rem;
}

.contact-item:not(:nth-child(3n))::after {
  content: '';
  position: absolute;
  right: 0;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.contact-item:nth-child(n+4)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

@media(max-width: 767px){
  .contact-items {
    grid-template-columns: 1fr;
  }
  .contact-item::after {
    display: none;
  }
  .contact-item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Mobile responsive adjustments for contact forms */
@media (max-width: 767px) {
  /* Increase container width for forms */
  .driver-contact .container,
  .adv-contact .container {
    width: 95%; /* Increased from default 90% */
    max-width: none;
  }
  
  .driver-contact .contact-panel,
  .adv-contact .contact-panel {
    padding: 1.5rem 0.75rem !important;
    margin: 0; /* Remove margin to use full container width */
    max-width: 100% !important; /* Override calc(100% - 1rem) */
    border-radius: var(--radius-card) !important; /* Ensure rounded corners on mobile */
  }
  
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  .form-grid .field,
  .form-grid .form-group {
    width: 100%;
  }
  
  .lead-form .field,
  .lead-form .form-group {
    margin-bottom: 1rem;
  }
  
  .lead-form input,
  .lead-form textarea,
  .lead-form select {
    width: 100%;
    font-size: 16px; /* Prevent zoom on iOS */
    box-sizing: border-box;
  }
  
  .lead-form button,
  .form-actions button {
    width: 80%;
    padding: 1rem;
    font-size: 1rem;
  }
  
  /* Ensure form-group labels are properly sized on mobile */
  .form-group label {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }
}
.driver-faq .accordion{
  max-width:780px;
}

/* ---------- ADVERTISER TEASER ---------- */
.adv-teaser{margin:96px 0 112px}
.adv-grid{display:grid;grid-template-columns:50% 50%;gap:3rem;align-items:center}
.adv-copy{display:flex;flex-direction:column;align-items:flex-start}
.mini-kicker{font:700 .875rem/1 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--c-grad-a);margin-bottom:.5rem;display:inline-block}
.adv-title{font:700 4rem 'Poppins',sans-serif;color:var(--c-text-hi);margin-bottom:1rem}
.adv-sub{font-size:1.125rem;color:var(--c-text-med);margin-bottom:1.25rem}
.adv-metrics{display:flex;gap:2rem;margin:1rem 0}
.adv-metrics .metric-card{background:none;border:0;box-shadow:none;padding:0;align-items:flex-end}
.adv-metrics .metric{font:700 2rem 'Poppins',sans-serif;color:var(--c-text-hi)}
.adv-metrics .caption{font-size:.875rem;color:var(--c-text-med)}
.adv-benefits{display:flex;gap:1.5rem;margin:1.5rem 0}
.adv-benefits .benefit-card{flex:1 1 0;min-width:auto}
.adv-cta{margin:1rem 0;display:inline-block}
.adv-image img{max-width:500px}

/* Consolidate adv-grid - use consistent breakpoint */
@media(max-width: 767px){
  .adv-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .adv-copy{
    align-items: center;
    text-align: center;
    order: 1;
  }
  .adv-image{
    order: 2;
  }
  .adv-metrics{
    flex-direction: column;
    align-items: center;
  }
  .adv-benefits{
    flex-wrap: wrap;
    justify-content: center;
  }
  .adv-title{
    font-size: clamp(1.75rem, 5vw, 2rem); /* Use clamp for consistency */
  }
}

/* ---------- FINAL CTA BANNER ---------- */
.final-cta{position:relative;margin:96px auto 112px;width:90%;max-width:1400px;background:rgba(255,255,255,.05);border-radius:var(--radius-card);padding:2rem 0;text-align:center;color:#fff;backdrop-filter:blur(14px);box-shadow:0 4px 24px rgba(0,0,0,.4)}
.final-cta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:4px;background:linear-gradient(90deg,var(--c-grad-a),var(--c-grad-b));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;filter:blur(1px)}
.final-cta h2{font:700 2.5rem 'Poppins',sans-serif;margin-bottom:2rem}
.final-cta__actions{display:flex;gap:2rem;justify-content:center;margin-bottom:1rem}
/* Mobile optimizations for final-cta */
@media(max-width: 767px){
  .final-cta{
    margin: 3rem auto;
    padding: 1.5rem 1.5rem;
    width: 95%;
  }
  
  .final-cta__actions{
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  /* h2 already uses clamp() from variables */
}

/* ---------- FAQ ACCORDION ---------- */
.accordion{max-width:700px;margin:0 auto}
.accordion li{margin:0 0 1rem 0;list-style:none;border-radius:var(--radius-card);overflow:hidden;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);backdrop-filter:blur(6px)}
.accordion button{width:100%;padding:1rem 1.25rem;background:none;border:0;color:var(--c-text-hi);font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.accordion button::after{content:"+";font-size:1.25rem;transition:transform .3s}
.accordion button[aria-expanded="true"]::after{content:"−"}
.accordion__panel{padding:0 1.25rem;max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordion__panel p{padding:1rem 0;color:var(--c-text-med)}

/* ---------- ADVERTISE PAGE ---------- */
.plan-switch {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin: 2rem 0 1.5rem;
  font-weight: 600;
}
.plan-switch label {
  position: relative;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-btn);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  transition: background var(--motion-fade) var(--ease-out),
              box-shadow var(--motion-fade) var(--ease-out);
}
/* highlight active plan via :has if supported */
.plan-switch label:has(input:checked) {
  background: linear-gradient(90deg, var(--c-grad-a), var(--c-grad-b));
  color: #fff;
  box-shadow: 0 4px 12px rgba(35, 107, 255, 0.4);
}
.plan-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Pricing Table */
#pricingTable {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2rem;
  border-collapse: collapse;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-card);
  overflow: hidden;
}
#pricingTable th,
#pricingTable td {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#pricingTable thead th {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
}
#pricingTable tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* ROI slider */
#roi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}
#roi input[type="range"] {
  width: 100%;
  max-width: 500px;
}
#roi p {
  color: var(--c-text-med);
  font-weight: 600;
}

/* Removed redundant 600px breakpoint - already handled by 767px breakpoints above */