/* ============================================================================
   DRIVE DIGITAL — DESKTOP REFIT & DESIGN SYSTEM (v17)
   Loads AFTER style.css. Pure presentation layer — no business logic touched.

   Contents
   01  Design tokens (8px spacing scale, radii, shadows, type, motion)
   02  Base & typography refinements
   03  Container & breakpoint system  (2560 / 1920 / 1600 / 1440 / 1366 /
                                       1280 / 1024 / 768)
   04  Accessibility (focus-visible, skip link, reduced motion, tap targets)
   05  Header & navigation (overflow fixes, condensation, states)
   06  Hero & search alignment
   07  Buttons & form controls (standard heights, radii, focus)
   08  Cards (equal heights, unified radius/border/shadow, hover)
   09  Marketplace (controls bar, responsive grid columns)
   10  Section rhythm & white-space balance
   11  Enterprise / flagship / industry / value-prop grids
   12  Footer layout
   13  Hover states & animation standardization
   14  Cross-browser & rendering consistency
   ========================================================================== */

/* ---------------------------------------------------------------------------
   01 · DESIGN TOKENS — 8px system
--------------------------------------------------------------------------- */
:root{
  /* spacing scale (8px base) */
  --s-1:4px;  --s0:8px;   --s1:12px; --s2:16px; --s3:24px;
  --s4:32px;  --s5:40px;  --s6:48px; --s7:64px; --s8:80px; --s9:96px; --s10:128px;

  /* container system */
  --container-max:1440px;      /* ≥1600 viewports */
  --container-wide:1280px;     /* 1366–1599 */
  --container-pad:32px;

  /* radii */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* elevation (single source of truth) */
  --e-0:none;
  --e-1:0 1px 2px rgba(17,17,17,.05);
  --e-2:0 4px 12px rgba(17,17,17,.06);
  --e-3:0 12px 28px rgba(17,17,17,.09);
  --e-4:0 20px 48px rgba(17,17,17,.12);
  --e-green:0 6px 18px rgba(137,197,65,.30);

  /* type scale (desktop-first, fluid) */
  --fs-h1:clamp(2.25rem,1.4rem + 2.1vw,3.5rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.2vw,2.5rem);
  --fs-h3:clamp(1.2rem,1.05rem + .5vw,1.5rem);
  --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-tight:1.15; --lh-head:1.25; --lh-body:1.65;

  /* motion */
  --t-fast:.16s ease; --t-med:.22s ease;

  /* control sizing */
  --ctl-h:48px; --ctl-h-sm:40px;
}

/* ---------------------------------------------------------------------------
   02 · BASE & TYPOGRAPHY
--------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:var(--fs-body);line-height:var(--lh-body);text-rendering:optimizeLegibility}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:-.01em}
h3{font-size:var(--fs-h3);line-height:var(--lh-head)}
p{max-width:72ch}
img,svg,video{max-width:100%;height:auto}
.section-head{margin-bottom:var(--s6)}
.section-head p{font-size:1.05rem}
.eyebrow{letter-spacing:.18em;font-size:var(--fs-xs)}

/* ---------------------------------------------------------------------------
   03 · CONTAINER & BREAKPOINTS  (desktop-first cascade)
--------------------------------------------------------------------------- */
.container{max-width:var(--container-wide);padding-inline:var(--container-pad)}

@media(min-width:1600px){          /* 1600 → 1920 → 2560 */
  .container{max-width:var(--container-max)}
}
@media(min-width:2200px){          /* 2560-class displays */
  html{font-size:17px}
  .container{max-width:1520px}
}
@media(max-width:1439px){          /* 1366-class laptops */
  .container{max-width:1200px;padding-inline:28px}
}
@media(max-width:1279px){          /* small desktop */
  .container{padding-inline:24px}
}
@media(max-width:1023px){          /* tablet */
  .container{padding-inline:20px}
}
@media(max-width:767px){           /* mobile (existing rules preserved) */
  .container{padding-inline:18px}
}

/* ---------------------------------------------------------------------------
   04 · ACCESSIBILITY
--------------------------------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--black);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-md) 0;font-weight:600}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.add-btn:focus-visible{outline-offset:3px}
a,button,input,select,textarea,summary{touch-action:manipulation}
button,.btn,.add-btn,.chip,.auth-tab{min-height:44px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------------------
   05 · HEADER & NAVIGATION — overflow fixes
--------------------------------------------------------------------------- */
header .nav{gap:var(--s3);height:80px}
.nav-links{gap:var(--s3);flex-wrap:nowrap;min-width:0;white-space:nowrap}
.nav-links a{padding:var(--s0) 2px;font-size:.9rem}
.nav-cta{display:flex;align-items:center;gap:var(--s1);flex-shrink:0}
.nav-cta .plan-btn{padding:11px 18px;box-shadow:var(--e-green)}
.logo-img{width:auto;height:44px}

@media(max-width:1439px){
  .nav-links{gap:var(--s2)}
  .nav-links a{font-size:.86rem}
}
@media(max-width:1279px) and (min-width:1024px){
  /* condense: hide lower-priority links before anything can overflow
     order: Home · Services · Solutions · Marketplace · Blog · Free Tools · About · Contact */
  .nav-links a:nth-child(5),
  .nav-links a:nth-child(6),
  .nav-links a:nth-child(7){display:none}
  .nav-account{padding:8px 12px}
}
/* tablet & below: hamburger menu (was 640px — caused 641–1023px overflow) */
@media(max-width:1023px){
  .nav-links{display:none;position:absolute;top:80px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:flex-start;padding:var(--s3);gap:var(--s2);
    border-bottom:1px solid var(--line);box-shadow:var(--e-3);white-space:normal}
  .nav-links.open{display:flex}
  .nav-links a{display:block!important;width:100%;font-size:1rem;padding:var(--s0) 0}
  .hamburger{display:block}
}

/* ---------------------------------------------------------------------------
   06 · HERO & SEARCH ALIGNMENT
--------------------------------------------------------------------------- */
.hero{padding:var(--s9) 0 var(--s8)}
.hero-pill{margin-bottom:var(--s3)}
.hero .lead{margin-top:var(--s3);font-size:1.06rem}
.hero .tek{margin:var(--s2) 0}

.search-bar{margin-top:var(--s4);max-width:680px;padding:6px;border-radius:var(--r-lg);box-shadow:var(--e-2)}
.search-bar input{height:var(--ctl-h);padding:0 var(--s2);font-size:1rem}
.search-bar .btn{height:var(--ctl-h);padding:0 var(--s3);border-radius:var(--r-md);white-space:nowrap}
.search-bar:focus-within{border-color:var(--green);box-shadow:var(--e-2),0 0 0 4px rgba(137,197,65,.14)}

.hero .chips{margin-top:var(--s2);gap:var(--s0)}
.hero .chip{min-height:36px;display:inline-flex;align-items:center}

/* two-column hero: refined gutters & visual behavior per breakpoint */
@media(min-width:1000px){
  .hero.has-visual .hero-inner{column-gap:var(--s7)}
  .hero.has-visual .hero-inner .hero-visual{align-self:center;max-width:560px;justify-self:end}
}
@media(min-width:1600px){
  .hero.has-visual .hero-inner{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
}
@media(max-width:1439px) and (min-width:1000px){
  .hero{padding:var(--s8) 0 var(--s7)}
  .hero.has-visual .hero-inner{column-gap:var(--s5)}
  .hero.has-visual .hero-inner .hero-visual{max-width:460px}
}
.fpb-bar{margin-top:var(--s5);gap:var(--s1)}
.fpb-bar.fpb-5 .fpb-step{padding:var(--s2)}
.hero-stats{margin-top:var(--s4);gap:var(--s4)}
.trust-line{margin-top:var(--s2)}

/* ---------------------------------------------------------------------------
   07 · BUTTONS & FORM CONTROLS
--------------------------------------------------------------------------- */
.btn{border-radius:var(--r-md);padding:12px var(--s3);min-height:var(--ctl-h);height:auto;line-height:1.2;box-shadow:var(--e-1)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--e-2)}
.btn:active{transform:translateY(0);box-shadow:var(--e-1)}
.btn.btn-sm{min-height:var(--ctl-h-sm);padding:8px var(--s2);font-size:var(--fs-sm)}
.btn-green:hover{box-shadow:var(--e-green)}
input,select,textarea{border-radius:var(--r-sm);font-size:.95rem}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(137,197,65,.16);outline:none}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23515151' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* ---------------------------------------------------------------------------
   08 · CARDS — consistency & equal heights
--------------------------------------------------------------------------- */
.listing,.ent-card,.flagship-card,.svc-item,.review-card,.stat-card,
.fpb-step,.model,.step,.prog{border-radius:var(--r-lg)}
.listing{border-width:1px;box-shadow:var(--e-1);height:100%}
.listing:hover{transform:translateY(-4px);box-shadow:var(--e-3);border-color:var(--green)}
.mkt-grid{align-items:stretch}
.mkt-grid>*{height:100%}
.listing-body{padding:var(--s2) var(--s3) var(--s3)}
.listing-body h3{font-size:1.05rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.listing .loc{font-size:var(--fs-sm)}
.listing .metrics{gap:var(--s2);margin:var(--s1) 0 var(--s2)}
.listing-cover{aspect-ratio:16/7}
.ent-card,.flagship-card{height:100%}
.ent-card:hover,.flagship-card:hover{box-shadow:var(--e-3)}

/* ---------------------------------------------------------------------------
   09 · MARKETPLACE — controls & grid columns per breakpoint
--------------------------------------------------------------------------- */
.mkt-controls{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.mkt-filters{gap:var(--s1)}
.mkt-filters select,.mkt-filters input{height:var(--ctl-h-sm);padding:0 var(--s1);min-width:150px}
.mkt-tabs{gap:var(--s0);flex-wrap:wrap}

.mkt-grid{gap:var(--s3)}
@media(min-width:1600px){ .mkt-grid{grid-template-columns:repeat(4,1fr)} }
@media(max-width:1599px) and (min-width:1180px){ .mkt-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:1179px) and (min-width:641px){ .mkt-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .mkt-grid{grid-template-columns:1fr} }

/* ---------------------------------------------------------------------------
   10 · SECTION RHYTHM & WHITE-SPACE
--------------------------------------------------------------------------- */
section{padding:var(--s8) 0}
@media(max-width:1439px){ section{padding:var(--s7) 0} }
@media(max-width:767px){ section{padding:var(--s6) 0} }
.page-hero{padding:var(--s6) 0 var(--s5)}
.info-banner{padding:var(--s3)}

/* ---------------------------------------------------------------------------
   11 · ENTERPRISE / FLAGSHIP / INDUSTRY / VALUE-PROP GRIDS
--------------------------------------------------------------------------- */
.ent-grid{gap:var(--s2);margin-top:var(--s4)}
@media(max-width:1439px) and (min-width:1021px){ .ent-grid{grid-template-columns:repeat(4,1fr);gap:var(--s1)} .ent-card{padding:var(--s2)} }
.flagship-grid{gap:var(--s3)}

.ind-grid{gap:var(--s1)}
@media(max-width:1439px) and (min-width:1024px){ .ind-grid{grid-template-columns:repeat(4,1fr)} }
@media(max-width:1023px) and (min-width:768px){ .ind-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:767px){ .ind-grid{grid-template-columns:repeat(2,1fr)} }

@media(max-width:1439px) and (min-width:961px){
  .fpb-bar.fpb-5{grid-template-columns:repeat(5,1fr);gap:var(--s0)}
  .fpb-bar.fpb-5 .fpb-step small{font-size:.72rem}
}

/* ---------------------------------------------------------------------------
   12 · FOOTER
--------------------------------------------------------------------------- */
footer{padding-top:var(--s8)}
.foot-grid{grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s6);margin-bottom:var(--s6)}
.foot-grid h4{margin-bottom:var(--s2)}
.foot-grid a{display:inline-block;padding:3px 0}
@media(max-width:1179px) and (min-width:641px){ .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s5)} }

/* ---------------------------------------------------------------------------
   13 · HOVER & ANIMATION STANDARDIZATION
--------------------------------------------------------------------------- */
a,button{transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast),
  box-shadow var(--t-med),transform var(--t-med)}
.listing,.ent-card,.flagship-card,.review-card,.prog,.mod,.svc{transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-fast)}
.chip:hover{transform:translateY(-1px)}
.listing-cover img{transition:transform .3s ease}

/* ---------------------------------------------------------------------------
   14 · CROSS-BROWSER & RENDERING
--------------------------------------------------------------------------- */
@supports not (backdrop-filter:blur(1px)){ header{background:rgba(255,255,255,.98)} }
input::-ms-clear{display:none}
*{-webkit-tap-highlight-color:transparent}
.ticker span{will-change:transform}
@media print{ header,footer,.mobile-nav,.hero-visual{display:none!important} }