/* Car Gauge Inspection - Ferrari cinematic theme (DESIGN.md tokens) + fully responsive */
:root{
  --primary:#da291c; --primary-active:#b01e0a; --primary-hover:#9d2211;
  --ink:#ffffff; --body:#969696; --body-strong:#ffffff; --body-on-light:#181818;
  --muted:#666666; --muted-soft:#8f8f8f;
  --hairline:#303030; --hairline-on-light:#d2d2d2; --hairline-soft:#ebebeb;
  --canvas:#181818; --canvas-elevated:#303030; --canvas-light:#ffffff;
  --surface-soft-light:#f7f7f7; --surface-strong-light:#ebebeb;
  --on-primary:#ffffff;
  --success:#03904a; --warning:#f13a2c; --info:#4c98b9;
  --xxxs:4px; --xxs:8px; --xs:16px; --sm:24px; --md:32px; --lg:48px; --xl:64px; --xxl:96px; --super:128px;
  --font:'Inter','FerrariSans',-apple-system,system-ui,sans-serif;
  --radius-none:0px; --radius-sm:4px; --radius-full:9999px;
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--canvas);color:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);font-weight:500;margin:0 0 var(--xs);letter-spacing:-.01em;line-height:1.15}
.h2{font-size:clamp(28px,4.5vw,36px);letter-spacing:-.36px}
.lede{max-width:62ch;font-size:15px}
a{color:inherit}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding-left:var(--sm);padding-right:var(--sm)}
.narrow{max-width:820px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;padding:12px 18px;z-index:200}
.skip-link:focus{left:0}

/* Buttons - sharp 0px, uppercase 1.4px tracking, 48px height */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 32px;font:700 14px/1 var(--font);letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;border-radius:var(--radius-none);border:1px solid transparent;cursor:pointer;transition:background .15s ease,transform .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:active{background:var(--primary-active)}
.btn-outline-dark{background:transparent;color:var(--body-on-light);border-color:var(--body-on-light)}
.btn-light{background:#fff;color:#181818}
.btn-sm{min-height:44px;padding:12px 22px}
.btn-block{width:100%}
.link-btn{background:none;border:0;color:var(--body);text-decoration:underline;cursor:pointer;font-size:12px}

/* Kicker + badge pill (only pill geometry) */
.kicker{font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-soft);margin:0 0 var(--xs)}
.kicker-dark{color:#8a8a8a}
.kicker-on-red{color:#fff;opacity:.85}
.badge-pill{display:inline-flex;align-items:center;gap:8px;background:var(--canvas-elevated);color:var(--ink);font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;border-radius:var(--radius-full);padding:4px 12px;margin:0 0 var(--xs)}
.badge-pill .dot{width:8px;height:8px;background:var(--primary);border-radius:50%;display:inline-block}

/* Top nav - 64px, dark */
.topnav{position:sticky;top:0;z-index:100;background:var(--canvas);border-bottom:1px solid var(--hairline)}
.topnav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-text{font-weight:700;font-size:16px;line-height:1.1;display:flex;flex-direction:column}
.brand-text em{font-style:normal;color:var(--primary)}
.brand-text small{font-size:10px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-soft)}
.brand-logo{height:38px;width:auto;display:block}
.brand-logo-footer{height:34px}
.nav-desktop{display:flex;gap:26px}
.nav-desktop a{font-size:13px;font-weight:600;letter-spacing:.65px;text-transform:uppercase;text-decoration:none;color:var(--ink);opacity:.85;padding:14px 0;min-height:48px;display:inline-flex;align-items:center}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:1px solid var(--hairline);padding:12px;cursor:pointer;min-width:48px;min-height:48px;align-items:center;justify-content:center}
.nav-toggle span{width:22px;height:2px;background:#fff;display:block}
.nav-mobile{display:none;flex-direction:column;gap:4px;padding:16px 24px 24px;border-top:1px solid var(--hairline);background:var(--canvas)}
.nav-mobile a:not(.btn){color:var(--ink);text-decoration:none;text-transform:uppercase;font-size:13px;font-weight:600;letter-spacing:.65px;padding:14px 0;border-bottom:1px solid var(--hairline)}
.nav-mobile.open{display:flex}

/* Hero - full-bleed cinema photo */
.hero{position:relative;overflow:hidden;background:var(--canvas)}
.hero-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1502877338535-766e1452684a?q=80&w=2000&auto=format&fit=crop') center 60%/cover no-repeat;min-height:100%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,24,24,.55) 0%,rgba(24,24,24,.72) 45%,#181818 100%)}
.hero-inner{position:relative;padding-top:var(--xxl);padding-bottom:var(--lg)}
.hero h1{font-size:clamp(32px,8vw,80px);line-height:1.05;letter-spacing:-1.6px;color:#fff;max-width:12ch}
.hero-sub{color:#d6d6d6;font-size:clamp(15px,2.4vw,18px);max-width:52ch}
.lookup-card{background:rgba(48,48,48,.72);backdrop-filter:blur(8px);border:1px solid var(--hairline);padding:var(--sm);max-width:640px;margin-top:var(--sm)}
.lookup-label{display:block;font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:#fff;margin-bottom:var(--xxs)}
.lookup-row{display:flex;gap:12px}
.plate-wrap{flex:1;display:flex;align-items:stretch;background:#fff;border-radius:var(--radius-sm);overflow:hidden;border:2px solid #fff}
.plate-gb{background:#1a3a8f;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;padding:0 10px;letter-spacing:1px}
.plate-wrap input{flex:1;border:0;outline:0;font:800 clamp(20px,4vw,28px)/1 var(--font);letter-spacing:2px;text-transform:uppercase;padding:12px 14px;background:#FFDD00;color:#181818;min-width:0}
.plate-wrap input::placeholder{color:rgba(24,24,24,.45)}
.vin-row input{width:100%;margin-top:12px;background:var(--canvas);border:1px solid var(--hairline);color:var(--ink);border-radius:var(--radius-sm);padding:14px 16px;min-height:48px;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.lookup-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-size:12px;color:#c9c9c9;flex-wrap:wrap}
.form-error{color:#ffb4ab;font-size:13px;margin:8px 0 0}
.lookup-result{margin-top:12px;background:var(--canvas-light);color:var(--body-on-light);padding:16px;font-size:13px;border-left:4px solid var(--success)}
.lookup-result.bad{border-left-color:var(--warning)}
.hero-trust{list-style:none;display:flex;gap:var(--md);margin:var(--sm) 0 0;padding:0;flex-wrap:wrap}
.hero-trust li{display:flex;flex-direction:column}
.hero-trust strong{color:#fff;font-size:26px;font-weight:500}
.hero-trust span{font-size:12px}
.hero-strip{position:relative;border-top:1px solid var(--hairline);background:rgba(24,24,24,.85)}
.hero-strip-inner{display:flex;gap:16px;justify-content:space-between;padding-top:14px;padding-bottom:14px;font-size:12px;letter-spacing:.4px;flex-wrap:wrap}

/* Sections */
.section{padding:var(--xxl) 0}
.section-alt{background:#202020;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sm);margin-top:var(--md)}
.feature-card-photo{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-none);overflow:hidden;display:flex;flex-direction:column}
.card-img{aspect-ratio:16/9;overflow:hidden;background:#000}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:var(--sm)}
.card-body h3{font-size:18px;font-weight:700}
.card-body ul{margin:0 0 var(--xs);padding-left:18px;color:var(--body)}
.card-body li{margin-bottom:6px}
.card-link{color:#fff;text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:1.4px;text-decoration:none;border-bottom:2px solid var(--primary);padding-bottom:2px}
.check-card{background:var(--canvas-elevated);border:1px solid var(--hairline);padding:var(--sm);border-radius:var(--radius-none)}
.check-card h3{font-size:18px;font-weight:700}
.check-card p{margin:0}

/* Tabs + split + stats */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--lg);align-items:start}
.tabs{display:flex;gap:8px;margin:var(--sm) 0;flex-wrap:wrap}
.tab{background:transparent;border:1px solid var(--hairline);color:var(--ink);padding:12px 20px;min-height:48px;font:700 12px/1 var(--font);letter-spacing:1.1px;text-transform:uppercase;cursor:pointer;border-radius:var(--radius-none)}
.tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
.tick-list{list-style:none;margin:0 0 var(--sm);padding:0}
.tick-list li{padding:10px 0 10px 32px;position:relative;border-bottom:1px solid var(--hairline)}
.tick-list li::before{content:"✓";position:absolute;left:0;top:10px;color:var(--primary);font-weight:800}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--xs)}
.stat{background:var(--canvas);border:1px solid var(--hairline);padding:var(--md) var(--sm);text-align:left}
.stat-num{display:block;font-size:clamp(30px,4vw,44px);font-weight:700;color:var(--primary);letter-spacing:-1px}
.stat-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--body)}

/* Steps */
.steps .step{background:var(--canvas);border:1px solid var(--hairline);padding:var(--md) var(--sm)}
.step-no{display:block;font-size:56px;font-weight:700;color:var(--primary);letter-spacing:-1px;line-height:1}
.step h3{font-size:18px;font-weight:700;margin-top:8px}

/* Light pricing band */
.section-light{background:var(--canvas-light);color:var(--body-on-light)}
.h2-dark{color:var(--body-on-light)}
.lede-dark{color:#4a4a4a}
.pricing{align-items:stretch}
.price-card{background:#fff;border:1px solid var(--hairline-on-light);padding:var(--md) var(--sm);display:flex;flex-direction:column;position:relative}
.price-card.featured{border:2px solid var(--primary)}
.price-card .flag{position:absolute;top:-14px;left:24px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;padding:4px 12px;margin:0}
.price-card h3{color:var(--body-on-light);font-weight:700;font-size:22px;margin-bottom:4px}
.price-desc{color:#666;margin:0 0 12px}
.price span{font-size:44px;font-weight:700;color:var(--body-on-light);letter-spacing:-1px}
.price small{display:block;color:#666;font-size:12px}
.price-card ul{list-style:none;padding:0;margin:16px 0 24px}
.price-card li{padding:8px 0 8px 28px;position:relative;border-bottom:1px solid var(--hairline-soft);font-size:14px}
.price-card li::before{content:"✓";position:absolute;left:4px;color:var(--success);font-weight:800}
.price-card .btn{margin-top:auto}
.btn-outline-dark:hover{background:#181818;color:#fff}
.guarantee{text-align:center;color:#666;font-size:13px;margin-top:var(--sm)}

/* Sample */
.sample-rows{margin:var(--sm) 0 0;border-top:1px solid var(--hairline)}
.sample-rows div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.sample-rows dt{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-soft)}
.sample-rows dd{margin:0;color:var(--ink)}
.pass{color:#7ddba3 !important}
.warn{color:#ffb4ab !important}
.sample-card{background:var(--canvas-elevated);border:1px solid var(--hairline);padding:var(--md) var(--sm);align-self:start}
.sample-plate{display:inline-flex;align-items:center;gap:10px;background:#FFDD00;color:#181818;font-weight:800;font-size:26px;letter-spacing:2px;padding:8px 16px 8px 0;border-radius:4px;overflow:hidden}
.sample-plate .plate-gb{padding:8px 10px;align-self:stretch}
.sample-car{color:#fff;font-weight:700;margin:12px 0 4px}
.sample-sub{margin:0 0 12px}
.sample-score{display:flex;justify-content:space-between;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:1px}
.sample-score strong{color:var(--primary);font-size:20px}
.sample-bar{height:8px;background:var(--canvas);margin:8px 0 16px}
.sample-bar span{display:block;height:100%;background:linear-gradient(180deg,#a00c01,#da291c 64%)}
.fineprint{font-size:12px;color:var(--muted-soft)}

/* Reviews */
.review{background:var(--canvas);border:1px solid var(--hairline);padding:var(--sm);margin:0}
.review p{color:#e6e6e6;font-size:15px}
.review footer{color:var(--body);font-size:13px}
.review footer span{color:var(--primary)}

/* FAQ accordion */
.accordion details{background:var(--canvas-elevated);border:1px solid var(--hairline);margin-bottom:8px}
.accordion summary{cursor:pointer;padding:18px 20px;color:#fff;font-weight:600;font-size:15px;list-style:none;min-height:48px}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";float:right;color:var(--primary);font-weight:800}
.accordion details[open] summary::after{content:"–"}
.accordion details p{padding:0 20px 20px;margin:0}

/* Contact */
.contact-list{list-style:none;padding:0;margin:var(--sm) 0}
.contact-list li{padding:12px 0;border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:4px}
.contact-list strong{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-soft)}
.contact-list a{color:#fff;text-decoration:none;font-size:16px}
.contact-form{background:var(--canvas);border:1px solid var(--hairline);padding:var(--sm)}
.field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field label{font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:#fff}
.field input,.field textarea{background:var(--canvas);border:1px solid var(--hairline);color:var(--ink);border-radius:var(--radius-sm);padding:14px 16px;min-height:48px;font:400 14px var(--font);width:100%}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:13px;color:#7ddba3}

/* Livery band - Rosso Corsa */
.livery-band{background:var(--primary);color:#fff;padding:var(--xxl) 0}
.livery-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--md)}
.livery-inner h2{color:#fff;font-size:clamp(28px,4.5vw,36px)}
.code{background:#181818;padding:2px 10px;letter-spacing:2px}

/* Footer - dark, 5-col */
.footer{background:var(--canvas);border-top:1px solid var(--hairline);padding:var(--xl) 0 0;color:var(--body);font-size:13px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:var(--md)}
.footer h4{color:#fff;font-size:12px;letter-spacing:1.1px;text-transform:uppercase}
.footer-grid nav{display:flex;flex-direction:column;gap:10px}
.footer-grid a{color:var(--body);text-decoration:none}
.footer-grid a:hover{color:#fff}
.footer-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--hairline);margin-top:var(--lg);padding:20px 24px;font-size:12px}

/* ============ RESPONSIVE - mobile <640, tablet 640-1024, desktop >1024 ============ */
@media (min-width:1025px){
  #pricing .pricing{grid-template-columns:repeat(2,1fr);max-width:880px;margin-left:auto;margin-right:auto}
}
@media (max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--md)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .livery-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:900px){
  .nav-desktop{display:none}
  .nav-toggle{display:flex}
  .nav-actions .btn{display:none}
}
@media (max-width:640px){
  .container{padding-left:var(--xs);padding-right:var(--xs)}
  .section{padding:var(--xl) 0}
  .hero-inner{padding-top:var(--xl)}
  .grid-3{grid-template-columns:1fr}
  .lookup-row{flex-direction:column}
  .lookup-row .btn{width:100%}
  .field-row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:var(--sm)}
  .footer-grid{grid-template-columns:1fr}
  .hero-strip-inner{flex-direction:column;gap:4px}
  .sample-rows div{grid-template-columns:1fr;gap:2px}
  .livery-band{padding:var(--xl) 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* Legal pages (privacy / terms / refunds) */
.legal-hero{background:var(--canvas);border-bottom:1px solid var(--hairline);padding:var(--xl) 0 var(--lg)}
.legal-hero h1{font-size:clamp(30px,5vw,52px);letter-spacing:-1px;color:#fff;max-width:20ch}
.legal-hero p{max-width:62ch}
.legal-body{background:var(--canvas-light);color:var(--body-on-light);padding:var(--xl) 0}
.legal-body .narrow{max-width:820px}
.legal-body h2{color:var(--body-on-light);font-size:22px;font-weight:700;margin:var(--md) 0 var(--xxs)}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{color:#3a3a3a;font-size:15px}
.legal-body ul{padding-left:20px}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--primary)}
.updated{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#777}

/* Free basic check result card (inside .lookup-result light panel) */
.free-title{font-size:15px;font-weight:800;color:#181818;margin:0 0 10px}
.free-grid{margin:0 0 10px;display:flex;flex-direction:column;gap:8px}
.free-grid div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--hairline-soft)}
.free-grid dt{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#777}
.free-grid dd{margin:0;color:#181818;font-weight:600;font-size:13px}
.free-note{font-size:12px;color:#555;margin:0 0 12px}
.free-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--primary);color:#fff !important;text-decoration:none;font-weight:700;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;padding:12px 22px;border-radius:var(--radius-none)}

/* Checkout page */
.checkout-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--lg);align-items:start}
.co-form{background:var(--canvas);border:1px solid var(--hairline);padding:var(--sm)}
.co-h{font-size:18px;font-weight:700;color:#fff;margin:var(--sm) 0 var(--xs)}
.co-h:first-child{margin-top:0}
.co-h small{color:var(--muted-soft);font-weight:400}
.plan-pick{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.plan-option{display:flex;gap:12px;align-items:flex-start;background:var(--canvas-elevated);border:1px solid var(--hairline);padding:14px 16px;cursor:pointer}
.plan-option input{width:22px;height:22px;margin-top:2px;accent-color:var(--primary);flex-shrink:0}
.plan-option strong{color:#fff;display:block}
.plan-option small{color:var(--body)}
.order-box{background:var(--canvas-elevated);border:1px solid var(--hairline);padding:var(--md) var(--sm);align-self:start;position:sticky;top:88px}
.order-rows{margin:0 0 var(--sm)}
.order-rows div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.order-rows dt{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted-soft)}
.order-rows dd{margin:0;color:#fff;font-weight:600;text-align:right}
.order-rows .total dd{font-size:24px;color:var(--primary)}
@media (max-width:1024px){.checkout-grid{grid-template-columns:1fr}.order-box{position:static}}

/* Embedded Stripe form */
#payBtn:disabled{opacity:.65;cursor:default}
#stripe-embed{margin-top:4px;min-height:200px}
