/* ═══════════════════════════════════════════════════════════════════════════
   ROUTE 90 DRIVING SCHOOL — Design System CSS v3
   Hand-tuned utility stylesheet for a React SPA.
   Color system inspired by Material Design 2 surface / elevation model.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CUSTOM PROPERTIES ─────────────────────────────────────────────────── */
:root {
  --font-display: 'Clash Display', system-ui, sans-serif;
  --font-body: 'Satoshi', system-ui, sans-serif;
  /* Elevation shadows – warm-tinted, Material-inspired */
  --shadow-xs:  0 1px 2px rgba(28,25,23,.06);
  --shadow-sm:  0 1px 3px rgba(28,25,23,.08), 0 1px 2px rgba(28,25,23,.06);
  --shadow-md:  0 4px 6px -1px rgba(28,25,23,.08), 0 2px 4px -2px rgba(28,25,23,.06);
  --shadow-lg:  0 10px 20px -4px rgba(28,25,23,.10), 0 4px 8px -4px rgba(28,25,23,.06);
  --shadow-xl:  0 20px 40px -8px rgba(28,25,23,.12), 0 8px 16px -6px rgba(28,25,23,.06);
  --shadow-2xl: 0 25px 50px -12px rgba(28,25,23,.20);
  --shadow-amber:    0 8px 24px -4px rgba(245,158,11,.30);
  --shadow-amber-lg: 0 12px 32px -4px rgba(245,158,11,.35);
  --shadow-dark:     0 10px 24px -4px rgba(28,25,23,.25);
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── BASE RESET ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:#fafaf9;color:#1c1917;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6,[style*="Clash Display"]{font-family:var(--font-display)!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
img{max-width:100%;display:block}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d6d3d1;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#a8a29e}
::selection{background:#f59e0b;color:#fff}

/* ── ANIMATIONS ────────────────────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.animate-fadeIn{animation:fadeIn .5s var(--ease-out) both}
.animate-fadeInUp{animation:fadeInUp .55s var(--ease-out) both}
.animate-slideIn{animation:slideIn .4s var(--ease-out) both}
.animate-slideDown{animation:slideDown .3s var(--ease-out) both}
.animate-spin{animation:spin .8s linear infinite}

/* ═════════════════════════════  UTILITIES  ═════════════════════════════ */

/* Display */
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none}.contents{display:contents}

/* Flex */
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-1{flex:1 1 0%}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}

/* Gap */
.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}

/* Grid */
.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.grid-cols-6{grid-template-columns:repeat(6,1fr)}.grid-cols-7{grid-template-columns:repeat(7,1fr)}.col-span-2{grid-column:span 2/span 2}

/* Width */
.w-full{width:100%}.w-fit{width:fit-content}
.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-80{width:20rem}
.w-\[400px\]{width:400px}.w-\[500px\]{width:500px}

/* Height */
.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-80{height:20rem}
.h-\[400px\]{height:400px}.h-\[500px\]{height:500px}

/* Min / Max */
.min-w-0{min-width:0}.min-h-screen{min-height:100vh}
.min-h-\[85vh\]{min-height:85vh}.min-h-\[100px\]{min-height:100px}.min-h-\[calc\(100vh-64px\)\]{min-height:calc(100vh - 64px)}
.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}
.max-h-96{max-height:24rem}.max-h-\[70vh\]{max-height:70vh}.max-h-\[90vh\]{max-height:90vh}

/* Padding */
.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}.p-12{padding:3rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-11{padding-left:2.75rem;padding-right:2.75rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-20{padding-top:5rem;padding-bottom:5rem}
.pt-4{padding-top:1rem}.pt-\[5vh\]{padding-top:5vh}.pb-2{padding-bottom:.5rem}.pb-5{padding-bottom:1.25rem}
.pl-4{padding-left:1rem}.pl-9{padding-left:2.25rem}.pl-11{padding-left:2.75rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-12{padding-right:3rem}

/* Margin */
.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-16{margin-top:4rem}
.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-16{margin-bottom:4rem}

/* Typography */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}
.font-mono{font-family:ui-monospace,SFMono-Regular,'Cascadia Code',Menlo,Consolas,monospace}
.uppercase{text-transform:uppercase}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.underline{text-decoration:underline}
.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.5em\]{letter-spacing:.5em}
.leading-none{line-height:1}.leading-\[0\.9\]{line-height:.9}.leading-relaxed{line-height:1.625}

/* Text colors */
.text-white{color:#fff}
.text-stone-200{color:#e7e5e4}.text-stone-300{color:#d6d3d1}.text-stone-400{color:#a8a29e}.text-stone-500{color:#78716c}.text-stone-600{color:#57534e}.text-stone-700{color:#44403c}.text-stone-800{color:#292524}.text-stone-900{color:#1c1917}.text-stone-950{color:#0c0a09}
.text-red-400{color:#f87171}.text-red-500{color:#ef4444}.text-red-600{color:#dc2626}.text-red-700{color:#b91c1c}
.text-amber-400{color:#fbbf24}.text-amber-500{color:#f59e0b}.text-amber-600{color:#d97706}.text-amber-700{color:#b45309}.text-amber-800{color:#92400e}.text-amber-900{color:#78350f}
.text-emerald-500{color:#10b981}.text-emerald-600{color:#059669}.text-emerald-700{color:#047857}.text-emerald-800{color:#065f46}
.text-blue-600{color:#2563eb}.text-blue-700{color:#1d4ed8}
.text-indigo-700{color:#4338ca}.text-purple-600{color:#9333ea}.text-purple-700{color:#7e22ce}
.text-cyan-600{color:#0891b2}.text-cyan-700{color:#0e7490}.text-sky-800{color:#075985}

/* Background colors */
.bg-white{background-color:#fff}
.bg-stone-50{background-color:#fafaf9}.bg-stone-100{background-color:#f5f5f4}.bg-stone-200{background-color:#e7e5e4}.bg-stone-300{background-color:#d6d3d1}.bg-stone-800{background-color:#292524}.bg-stone-900{background-color:#1c1917}.bg-stone-950{background-color:#0c0a09}
.bg-red-50{background-color:#fef2f2}.bg-red-100{background-color:#fee2e2}.bg-red-600{background-color:#dc2626}
.bg-amber-50{background-color:#fffbeb}.bg-amber-100{background-color:#fef3c7}.bg-amber-200{background-color:#fde68a}.bg-amber-500{background-color:#f59e0b}
.bg-emerald-50{background-color:#ecfdf5}.bg-emerald-100{background-color:#d1fae5}.bg-emerald-600{background-color:#059669}
.bg-blue-100{background-color:#dbeafe}.bg-blue-600{background-color:#2563eb}
.bg-indigo-50{background-color:#eef2ff}.bg-purple-100{background-color:#f3e8ff}.bg-purple-600{background-color:#9333ea}
.bg-orange-100{background-color:#ffedd5}.bg-cyan-100{background-color:#cffafe}.bg-sky-50{background-color:#f0f9ff}
/* Semi-transparent */
.bg-white\/5{background-color:rgba(255,255,255,.05)}.bg-white\/10{background-color:rgba(255,255,255,.10)}.bg-white\/20{background-color:rgba(255,255,255,.20)}
.bg-black\/50{background-color:rgba(0,0,0,.50)}
.bg-stone-50\/50{background-color:rgba(250,250,249,.5)}.bg-amber-50\/50{background-color:rgba(255,251,235,.5)}
.bg-amber-500\/10{background-color:rgba(245,158,11,.10)}.bg-amber-500\/20{background-color:rgba(245,158,11,.20)}
.bg-indigo-500\/10{background-color:rgba(99,102,241,.10)}.bg-red-950\/30{background-color:rgba(69,10,10,.30)}

/* Borders */
.border{border-width:1px;border-style:solid}.border-2{border-width:2px;border-style:solid}.border-3{border-width:3px;border-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}.border-t-2{border-top-width:2px;border-top-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}.border-b-2{border-bottom-width:2px;border-bottom-style:solid}
.border-l-4{border-left-width:4px;border-left-style:solid}.border-dashed{border-style:dashed}
.border-transparent{border-color:transparent}
.border-stone-100{border-color:#f5f5f4}.border-stone-200{border-color:#e7e5e4}.border-stone-300{border-color:#d6d3d1}.border-stone-400{border-color:#a8a29e}.border-stone-800{border-color:#292524}.border-stone-900{border-color:#1c1917}
.border-red-200{border-color:#fecaca}.border-red-300{border-color:#fca5a5}
.border-amber-200{border-color:#fde68a}.border-amber-300{border-color:#fcd34d}.border-amber-400{border-color:#fbbf24}.border-amber-500{border-color:#f59e0b}
.border-emerald-200{border-color:#a7f3d0}.border-emerald-300{border-color:#6ee7b7}
.border-indigo-200{border-color:#c7d2fe}.border-sky-300{border-color:#7dd3fc}
.border-white\/10{border-color:rgba(255,255,255,.10)}.border-white\/20{border-color:rgba(255,255,255,.20)}.border-amber-500\/20{border-color:rgba(245,158,11,.20)}
.border-t-indigo-600{border-top-color:#4f46e5}
.border-l-amber-500{border-left-color:#f59e0b}.border-l-blue-500{border-left-color:#3b82f6}.border-l-cyan-500{border-left-color:#06b6d4}.border-l-emerald-500{border-left-color:#10b981}

/* Radius */
.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}

/* Shadows */
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-2xl{box-shadow:var(--shadow-2xl)}
.shadow-stone-900\/20{box-shadow:var(--shadow-dark)}.shadow-amber-500\/25{box-shadow:var(--shadow-amber)}.shadow-amber-500\/30{box-shadow:var(--shadow-amber-lg)}

/* Position */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.top-0{top:0}.top-4{top:1rem}.top-20{top:5rem}.top-1\/2{top:50%!important}
.right-0{right:0}.right-4{right:1rem}.right-20{right:5rem}
.bottom-0{bottom:0}.bottom-20{bottom:5rem}
.left-0{left:0}.left-3{left:.75rem}.left-4{left:1rem}.left-20{left:5rem}
.inset-0{inset:0}.z-50{z-index:50}.z-\[100\]{z-index:100}

/* Transform */
.translate-y-1\/2{transform:translateY(50%)}.-translate-y-1\/2{transform:translateY(-50%)!important}

/* Overflow */
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.resize-none{resize:none}

/* Opacity */
.opacity-0{opacity:0}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-\[0\.03\]{opacity:.03}

/* Blur */
.blur-\[100px\]{filter:blur(100px)}.blur-\[120px\]{filter:blur(120px)}

/* Misc */
.outline-none{outline:none}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.select-none{user-select:none}.accent-amber-500{accent-color:#f59e0b}
.transition,.transition-all{transition-property:all;transition-duration:200ms;transition-timing-function:var(--ease-out)}
.transition-transform{transition-property:transform;transition-duration:200ms;transition-timing-function:var(--ease-out)}

/* Divide */
.divide-y>:not(:first-child){border-top:1px solid}.divide-y-2>:not(:first-child){border-top:2px solid}
.divide-stone-100>:not(:first-child){border-color:#f5f5f4}.divide-amber-200>:not(:first-child){border-color:#fde68a}

/* Space-y */
.space-y-1>:not(:first-child){margin-top:.25rem}.space-y-1\.5>:not(:first-child){margin-top:.375rem}.space-y-2>:not(:first-child){margin-top:.5rem}.space-y-3>:not(:first-child){margin-top:.75rem}.space-y-4>:not(:first-child){margin-top:1rem}.space-y-5>:not(:first-child){margin-top:1.25rem}.space-y-6>:not(:first-child){margin-top:1.5rem}

/* Ring */
.ring-2{box-shadow:0 0 0 2px}.ring-amber-200{box-shadow:0 0 0 2px #fde68a}

/* Table */
table{border-collapse:collapse;width:100%}

/* Placeholder */
.placeholder\:text-stone-400::placeholder{color:#a8a29e}


/* ═════════════════════  INTERACTIVE STATES  ═════════════════════════════ */

/* Group hover */
.group:hover .group-hover\:scale-110{transform:scale(1.1)}
.group:hover .group-hover\:brightness-110{filter:brightness(1.1)}
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:text-amber-500{color:#f59e0b}
.group:hover .group-hover\:text-amber-600{color:#d97706}

/* Hover – backgrounds */
.hover\:bg-stone-50:hover{background-color:#fafaf9}.hover\:bg-stone-100:hover{background-color:#f5f5f4}.hover\:bg-stone-200:hover{background-color:#e7e5e4}.hover\:bg-stone-800:hover{background-color:#292524}
.hover\:bg-white:hover{background-color:#fff}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)}.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.10)}.hover\:bg-white\/20:hover{background-color:rgba(255,255,255,.20)}.hover\:bg-white\/30:hover{background-color:rgba(255,255,255,.30)}
.hover\:bg-amber-400:hover{background-color:#fbbf24}.hover\:bg-amber-600:hover{background-color:#d97706}
.hover\:bg-emerald-100:hover{background-color:#d1fae5}.hover\:bg-emerald-200:hover{background-color:#a7f3d0}
.hover\:bg-blue-200:hover{background-color:#bfdbfe}
.hover\:bg-red-100:hover{background-color:#fee2e2}.hover\:bg-red-200:hover{background-color:#fecaca}.hover\:bg-red-700:hover{background-color:#b91c1c}.hover\:bg-red-950\/30:hover{background-color:rgba(69,10,10,.30)}

/* Hover – text */
.hover\:text-white:hover{color:#fff}
.hover\:text-stone-600:hover{color:#57534e}.hover\:text-stone-700:hover{color:#44403c}.hover\:text-stone-900:hover{color:#1c1917}
.hover\:text-amber-700:hover{color:#b45309}.hover\:text-amber-800:hover{color:#92400e}
.hover\:text-red-400:hover{color:#f87171}.hover\:text-red-700:hover{color:#b91c1c}

/* Hover – borders */
.hover\:border-stone-200:hover{border-color:#e7e5e4}.hover\:border-stone-400:hover{border-color:#a8a29e}.hover\:border-stone-900:hover{border-color:#1c1917}
.hover\:border-white\/30:hover{border-color:rgba(255,255,255,.30)}

/* Hover – misc */
.hover\:shadow-xl:hover{box-shadow:var(--shadow-xl)}
.hover\:-translate-y-0\.5:hover{transform:translateY(-2px)}.hover\:-translate-y-1:hover{transform:translateY(-4px)}
.hover\:underline:hover{text-decoration:underline}
.hover\:opacity-100:hover{opacity:1}
.hover\:brightness-110:hover{filter:brightness(1.1)}
.hover\:ring-stone-300:hover{box-shadow:0 0 0 2px #d6d3d1}

/* Focus */
.focus\:border-stone-900:focus{border-color:#1c1917}.focus\:border-amber-400:focus{border-color:#fbbf24}
.focus\:bg-white:focus{background-color:#fff}
.focus\:shadow-sm:focus{box-shadow:var(--shadow-sm)}
.focus\:outline-none:focus{outline:none}
.focus\:ring-2:focus{box-shadow:0 0 0 2px}.focus\:ring-offset-2:focus{box-shadow:0 0 0 2px #fafaf9,0 0 0 4px}
.focus\:ring-stone-200:focus{box-shadow:0 0 0 2px #e7e5e4}.focus\:ring-stone-300:focus{box-shadow:0 0 0 2px #d6d3d1}.focus\:ring-stone-500:focus{box-shadow:0 0 0 2px #78716c}
.focus\:ring-amber-400:focus{box-shadow:0 0 0 2px #fbbf24}.focus\:ring-red-400:focus{box-shadow:0 0 0 2px #f87171}

/* Disabled */
.disabled\:opacity-50:disabled{opacity:.5}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}


/* ═══════════════════════  RESPONSIVE  ═══════════════════════════════════ */

@media(min-width:640px){
  .sm\:flex-row{flex-direction:row}.sm\:grid{display:grid}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.sm\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.sm\:grid-cols-4{grid-template-columns:repeat(4,1fr)}
  .sm\:col-span-2{grid-column:span 2}.sm\:items-center{align-items:center}
  .sm\:w-auto{width:auto}.sm\:w-72{width:18rem}
  .sm\:block{display:block}.sm\:inline{display:inline}.sm\:hidden{display:none}
  .sm\:text-xl{font-size:1.25rem}.sm\:text-3xl{font-size:1.875rem}.sm\:text-4xl{font-size:2.25rem}.sm\:text-5xl{font-size:3rem}.sm\:text-6xl{font-size:3.75rem}
  .sm\:p-5{padding:1.25rem}.sm\:p-8{padding:2rem}.sm\:p-12{padding:3rem}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:py-8{padding-top:2rem;padding-bottom:2rem}.sm\:py-12{padding-top:3rem;padding-bottom:3rem}.sm\:py-28{padding-top:7rem;padding-bottom:7rem}
}
@media(min-width:768px){
  .md\:flex{display:flex}.md\:hidden{display:none}
  .md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .md\:text-7xl{font-size:4.5rem}
}
@media(min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}.lg\:grid-cols-4{grid-template-columns:repeat(4,1fr)}.lg\:grid-cols-6{grid-template-columns:repeat(6,1fr)}.lg\:grid-cols-7{grid-template-columns:repeat(7,1fr)}
  .lg\:col-span-2{grid-column:span 2}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:text-8xl{font-size:6rem}
}


/* ══════════════════════════════════════════════════════════════════════════
   COMPONENT ENHANCEMENTS
   These target existing class combos used by the React components
   to add polish WITHOUT touching JS.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CARDS: Proper elevation ───────────────────────────────────────────── */
.bg-white.rounded-3xl.border-2.border-stone-100{
  box-shadow:
    0 0 0 1px rgba(28,25,23,.02),
    0 1px 3px rgba(28,25,23,.04),
    0 6px 24px -4px rgba(28,25,23,.07);
  border-color: #edeceb;
}

/* ── INPUTS: Visible borders + amber focus ring ────────────────────────── */
input.bg-stone-50.border-2.border-stone-200,
input.bg-stone-50.border-2,
select.bg-stone-50.border-2.border-stone-200,
select.bg-stone-50.border-2,
textarea.bg-stone-50.border-2{
  border-color:#d6d3d1;
  box-shadow:inset 0 1px 2px rgba(28,25,23,.03);
  transition:all 200ms var(--ease-out);
}
input.bg-stone-50:focus,
select.bg-stone-50:focus,
textarea.bg-stone-50:focus{
  border-color:#f59e0b !important;
  background-color:#fff;
  box-shadow:inset 0 1px 2px rgba(28,25,23,.01),0 0 0 3px rgba(245,158,11,.12);
  outline:none;
}

/* ── ICON CONTRAST inside inputs ───────────────────────────────────────── */
.relative>span.absolute.text-stone-400{color:#6d6560}
.relative:focus-within>span.absolute.text-stone-400{color:#44403c}

/* SVG crispness */
svg[viewBox="0 0 24 24"]{shape-rendering:geometricPrecision}

/* ── PRIMARY BUTTON (dark) ─────────────────────────────────────────────── */
button.bg-stone-900.text-white,
a.bg-stone-900.text-white{
  background:linear-gradient(180deg,#292524,#1c1917);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,var(--shadow-lg);
  transition:all 220ms var(--ease-out);
}
button.bg-stone-900.text-white:hover,
a.bg-stone-900.text-white:hover{
  background:linear-gradient(180deg,#44403c,#292524);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,var(--shadow-xl);
  transform:translateY(-1px);
}
button.bg-stone-900.text-white:active{
  transform:translateY(0);
  box-shadow:var(--shadow-xs);
}

/* ── AMBER ACCENT BUTTON ───────────────────────────────────────────────── */
button.bg-amber-500.text-white,
a.bg-amber-500.text-white{
  background:linear-gradient(180deg,#fbbf24,#f59e0b);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,var(--shadow-amber);
  transition:all 220ms var(--ease-out);
}
button.bg-amber-500.text-white:hover,
a.bg-amber-500.text-white:hover{
  background:linear-gradient(180deg,#fcd34d,#fbbf24);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,var(--shadow-amber-lg);
  transform:translateY(-1px);
}
button.bg-amber-500.text-white:active,
a.bg-amber-500.text-white:active{
  transform:translateY(0);
  background:linear-gradient(180deg,#f59e0b,#d97706);
}

/* ── OUTLINE BUTTON ────────────────────────────────────────────────────── */
a.border-2.border-stone-200.text-stone-600:hover,
button.border-2.border-stone-200.text-stone-600:hover{
  border-color:#1c1917;color:#1c1917;box-shadow:var(--shadow-sm);
}

/* ── NAVBAR: subtle blur ───────────────────────────────────────────────── */
nav.bg-stone-950{
  background:rgba(12,10,9,.94);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  backdrop-filter:blur(12px) saturate(180%);
}

/* ── LOGIN ICON (dark circle w/ car) ───────────────────────────────────── */
.w-16.h-16.bg-stone-900.rounded-3xl{
  background:linear-gradient(135deg,#292524,#0c0a09);
  box-shadow:0 0 0 4px rgba(245,158,11,.10),var(--shadow-xl);
}

/* ── FEATURE-CARD ICONS ────────────────────────────────────────────────── */
.w-14.h-14.rounded-2xl{
  transition:transform 250ms var(--ease-spring),box-shadow 250ms var(--ease-out);
}
.group:hover .w-14.h-14.rounded-2xl{
  transform:scale(1.08);box-shadow:var(--shadow-lg);
}

/* ── FORM LABELS ───────────────────────────────────────────────────────── */
label.text-xs.font-bold.text-stone-500{color:#57534e}

/* ── SPINNER: amber instead of indigo ──────────────────────────────────── */
.border-3.border-stone-200{
  border-color:rgba(245,158,11,.18);
}
.border-t-indigo-600{
  border-top-color:#f59e0b !important;
}

/* ── PASSWORD TOGGLE ───────────────────────────────────────────────────── */
button.absolute.right-4.top-1\/2{
  padding:4px;border-radius:6px;transition:all 150ms var(--ease-out);
}
button.absolute.right-4.top-1\/2:hover{
  background-color:rgba(28,25,23,.06);
}

/* ── MODAL BACKDROP ────────────────────────────────────────────────────── */
.fixed.inset-0.bg-black\/50{
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

/* ── PAGE BG refinement ────────────────────────────────────────────────── */
main.bg-stone-50{
  background-color:#fafaf9;
  background-image:
    radial-gradient(ellipse at 20% 0%,rgba(245,158,11,.025) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 100%,rgba(99,102,241,.015) 0%,transparent 50%);
}

/* ── DARK HERO ─────────────────────────────────────────────────────────── */
section.bg-stone-950{background:linear-gradient(180deg,#0c0a09,#1c1917)}
section.bg-stone-900{background:linear-gradient(180deg,#1c1917,#292524)}

/* ── ERROR ALERT ───────────────────────────────────────────────────────── */
.bg-red-50.border-2.border-red-200{box-shadow:0 0 0 1px rgba(239,68,68,.04)}

/* ── TOAST ─────────────────────────────────────────────────────────────── */
.fixed.top-4.right-4{box-shadow:var(--shadow-xl)}

/* ── SMOOTH ROOT TRANSITIONS ───────────────────────────────────────────── */
#root>*{animation:fadeIn .25s var(--ease-out)}

/* ── CHECKBOX ──────────────────────────────────────────────────────────── */
input[type="checkbox"]{accent-color:#f59e0b;border-radius:4px}

/* ── SELECT ARROW ──────────────────────────────────────────────────────── */
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:40px !important;
}

/* ── STAT NUMBERS – subtle gradient text ───────────────────────────────── */
.text-3xl.font-black.text-white,
.text-4xl.font-black.text-white{
  background:linear-gradient(180deg,#fff,#e7e5e4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* ══════════════════════════════════════════════════════════════════════════
   CRITICAL ICON POSITIONING FIX
   Direct targeting with high specificity
   ══════════════════════════════════════════════════════════════════════════ */

/* Input field icons - ensure vertical centering */
.relative > span.absolute.left-4.top-1\/2.-translate-y-1\/2,
span.absolute.left-4.top-1\/2.-translate-y-1\/2,
span[class*="absolute"][class*="left-4"][class*="top-1/2"] {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Password toggle button positioning */
button.absolute.right-4.top-1\/2.-translate-y-1\/2,
button[class*="absolute"][class*="right-4"][class*="top-1/2"] {
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Icon sizes */
svg.w-4.h-4,
[class*="w-4"][class*="h-4"] svg {
  width: 1rem !important;
  height: 1rem !important;
}

svg.w-5.h-5,
[class*="w-5"][class*="h-5"] svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Input styling ensure visibility */
input[class*="bg-stone-50"][class*="border-2"] {
  background-color: #fafaf9 !important;
  border: 2px solid #d6d3d1 !important;
}

input[class*="bg-stone-50"]:focus {
  border-color: #f59e0b !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important;
}