/* ============================================================
   DIY AUTOMOTIVE GARAGE — Site-wide Theme (main.css)
   ------------------------------------------------------------
   Logo-aligned palette. Class vocabulary matches the actual
   production HTML across index, bays, memberships, classes,
   diagnose, about, visit, book, login, success, dashboard.
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES — palette + all aliases inline styles use
   ============================================================ */
:root {
  /* surfaces */
  --bg:           #f0f0f0;
  --bg-alt:       #e6e6e3;
  --surface:      #ffffff;
  --surface-2:    #f7f6f1;
  --concrete:     #e8e5dd;

  /* borders */
  --rule:         #c9c5b8;
  --rule-strong:  #8a8678;

  /* ink / text */
  --ink:          #0f0f0f;
  --ink-soft:     #2d2d2d;
  --muted:        #5a5a5a;
  --muted-2:      #767676;

  /* brand cyan (logo) */
  --cyan:         #0078a5;
  --cyan-dark:    #005c7e;
  --cyan-bright:  #0aa8d4;
  --cyan-50:      #e3f2f9;
  --cyan-100:    #b5dfee;

  /* brand orange (CTA) */
  --orange:       #e14b00;
  --orange-dark:  #b53d00;
  --orange-50:    #fff1e8;
  --orange-100:   #ffd9c2;

  /* semantic */
  --success:      #15803d;
  --success-50:   #dcfce7;
  --warn:         #92400e;
  --warn-50:      #fef3c7;
  --error:        #c1272d;
  --error-50:     #fee2e2;

  /* white-on-dark text */
  --white-pure:   #ffffff;

  /* === ALIASES referenced in inline styles across pages === */
  --accent:        var(--cyan);
  --accent-soft:   var(--cyan-50);
  --border:        var(--rule);
  --text-primary:  var(--ink);
  --text-secondary:var(--ink-soft);
  --text-muted:    var(--muted-2);
  --bg-primary:    var(--bg);
  --bg-elevated:   var(--surface);
  --radius:        6px;

  /* legacy v1 aliases */
  --blue:    var(--cyan);
  --blue2:   var(--cyan-dark);
  --blue3:   var(--cyan-bright);
  --black:   var(--ink);
  --dark:    var(--surface);
  --dark2:   var(--surface);
  --steel:   var(--surface-2);
  --white:   var(--ink);

  /* type — Saira/Manrope/JetBrains are loaded sitewide;
     Barlow/Share-Tech kept as fallbacks for older pages */
  --fd:         'Saira Condensed','Barlow Condensed',sans-serif;
  --fb:         'Manrope','Barlow',sans-serif;
  --fm:         'JetBrains Mono','Share Tech Mono',monospace;
  --font-body:  var(--fb);
  --font-mono:  var(--fm);

  /* radii */
  --r:  6px;
  --r2: 12px;
  --r3: 20px;

  /* shadows */
  --shadow-1: 0 1px 3px rgba(15,15,15,.06);
  --shadow-2: 0 6px 16px rgba(15,15,15,.10);
  --shadow-3: 0 16px 48px rgba(15,15,15,.18);
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
  transition: color .15s;
}
a:hover { color: var(--cyan-dark); }
ul, ol { list-style: none; }
strong { font-weight: 700; color: var(--ink); }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--fd);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -.005em;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.01em;
}
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h3 { font-size: 1.35rem; letter-spacing: .01em; }
h4 { font-size: 1.05rem; letter-spacing: .03em; }
h5 { font-size: .92rem; letter-spacing: .06em; }

p { color: var(--ink-soft); }

/* .chrome — used inside headlines for the non-accent half */
.chrome { color: var(--ink); }

/* .accent / .text-accent — cyan brand accent inside text */
.accent, .text-accent { color: var(--cyan); }
.text-primary  { color: var(--ink); }
.text-secondary{ color: var(--ink-soft); }
.text-muted    { color: var(--muted-2); }

.mono { font-family: var(--fm); }

/* ============================================================
   4. LAYOUT — container, section, hex grid
   ============================================================ */
.container, .sw {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5rem 0;
}
.section-dark {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.center { text-align: center; }
.full-width { width: 100%; }

.hex-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34z' fill='none' stroke='rgba(0,120,165,0.10)' stroke-width='1'/%3E%3Cpath d='M28 100L0 84V50l28-16 28 16v34z' fill='none' stroke='rgba(0,120,165,0.10)' stroke-width='1'/%3E%3C/svg%3E");
}

/* ============================================================
   5. NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(240,240,240,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 2px solid var(--cyan);
  height: 64px;
}
.nav-inner {
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand, .nav-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fd);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
}
.brand:hover, .nav-logo:hover { color: var(--ink); }
.brand-mark {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--cyan);
  border-radius: 4px;
  flex-shrink: 0;
}
.brand-text { line-height: 1; }
.accent-text, .nav-logo span, .brand .accent-text {
  color: var(--cyan);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav-links a {
  font-family: var(--fd);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .4rem 0;
  position: relative;
  transition: color .15s;
}
.nav-links a:hover { color: var(--cyan); }
.nav-links a.active { color: var(--cyan); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 3px;
  background: var(--cyan);
}

.nav-cta {
  background: var(--orange);
  color: var(--ink);
  font-family: var(--fd);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .55rem 1.3rem;
  border-radius: var(--r);
  border: 1px solid var(--orange);
  white-space: nowrap;
  transition: background .15s, transform .1s;
}
.nav-cta:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: var(--white-pure);
}
.nav-cta:active { transform: translateY(1px); }

/* ============================================================
   6. HERO
   ============================================================ */
.hero {
  padding: 7rem 0 4rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 400px at 80% -20%, rgba(0,120,165,.10), transparent 60%),
    radial-gradient(700px 350px at 10% 110%, rgba(225,75,0,.07), transparent 60%),
    var(--bg);
}
.hero h1 { margin-top: 1.25rem; }
.hero .accent { display: block; }
.hero-sub {
  margin-top: 1.5rem;
  max-width: 640px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.hero-actions, .hero-btns {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   7. SECTION TAGS, TITLES, SUBS
   ============================================================ */
.section-tag, .sec-tag, .tag {
  display: inline-block;
  font-family: var(--fm);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-50);
  border: 1px solid var(--cyan-100);
  padding: .3rem .8rem;
  border-radius: 999px;
}
.section-title, .sec-h2 {
  font-family: var(--fd);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.05;
  margin: 1rem 0;
  color: var(--ink);
}
.section-title em, .sec-h2 em { color: var(--cyan); font-style: normal; }
.section-sub, .sec-sub {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 720px;
}

/* ============================================================
   8. BUTTONS — fixes the unstyled CTA problem
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--fd);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1;
  padding: .85rem 1.6rem;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-sm    { font-size: .85rem; padding: .55rem 1rem; }
.btn-lg    { font-size: 1.1rem;  padding: 1rem 1.85rem; }
.btn-block { display: flex; width: 100%; }

/* primary — orange CTA, logo-aligned */
.btn-primary {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
}
.btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: var(--white-pure);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* ghost — secondary CTA, used heavily for "Book Standard", "Join Weekend Warrior", etc.
   Was rendering as plain text in production — now styled as outlined button */
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover {
  background: var(--cyan-50);
  border-color: var(--cyan);
  color: var(--cyan-dark);
}

/* outline — alt secondary */
.btn-outline {
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan);
}
.btn-outline:hover {
  background: var(--cyan);
  color: var(--white-pure);
}

/* ============================================================
   9. BAY CARDS — used on bays, memberships, classes pages.
      THIS is the main fix for the broken layouts.
   ============================================================ */
.bay-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
}
.bay-card:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.bay-card.featured {
  border: 2px solid var(--orange);
}
.bay-card.featured::before {
  content: "FEATURED";
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--fd);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
  padding: .25rem .7rem;
  border-radius: 999px;
}

/* tier label at top of card */
.bay-card .tier, .tier {
  display: inline-block;
  font-family: var(--fm);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  background: var(--cyan-50);
  border: 1px solid var(--cyan-100);
  padding: .25rem .6rem;
  border-radius: 999px;
  align-self: flex-start;
}

/* card heading */
.bay-card h3 {
  font-family: var(--fd);
  font-size: 1.55rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0;
}

/* big price */
.bay-card .price, .price {
  font-family: var(--fd);
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--cyan);
  line-height: 1;
}
.bay-card .price span, .price span {
  font-family: var(--fb);
  font-size: 1rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: .15rem;
}
.bay-card .price-secondary, .price-secondary {
  font-size: .9rem;
  color: var(--muted);
  margin-top: -.4rem;
}

/* feature list inside bay-card */
.bay-card ul {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: .25rem 0 .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  flex: 1;
}
.bay-card ul li {
  font-size: .94rem;
  color: var(--ink-soft);
  line-height: 1.5;
  padding-left: 1.5rem;
  position: relative;
}
.bay-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success);
  font-weight: 900;
}

/* the CTA at the bottom of every bay-card already gets .btn .btn-block styling */
.bay-card .btn { margin-top: auto; }

/* ============================================================
   10. CARDS — generic, elevated, accent
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
  transition: box-shadow .18s, border-color .18s;
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--rule-strong); }

.card-elevated {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-2);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card-elevated:hover {
  box-shadow: var(--shadow-3);
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.card-accent {
  background: linear-gradient(180deg, var(--cyan-50) 0%, var(--surface) 60%);
  border: 1.5px solid var(--cyan);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-2);
}

.card h3, .card h4,
.card-elevated h3, .card-elevated h4,
.card-accent h3, .card-accent h4 {
  font-family: var(--fd);
  text-transform: uppercase;
  color: var(--ink);
}
.card h4 { font-size: 1.05rem; letter-spacing: .04em; }
.card p, .card-elevated p, .card-accent p { color: var(--ink-soft); }

/* ============================================================
   11. FEATURES (about page numbered blocks)
   ============================================================ */
.feature {
  padding: 1.5rem 0;
}
.feature-num {
  display: inline-block;
  font-family: var(--fd);
  font-size: 2rem;
  font-weight: 900;
  color: var(--cyan);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: .75rem;
}
.feature h3 {
  font-family: var(--fd);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  margin-bottom: .6rem;
}
.feature p {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ============================================================
   12. FORMS — .field (not .form-group)
   ============================================================ */
.field {
  display: block;
  margin-bottom: 1rem;
}
.field label, label {
  display: block;
  font-family: var(--fm);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .4rem;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="search"], input:not([type]),
select, textarea {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  color: var(--ink);
  padding: .7rem .9rem;
  border-radius: var(--r);
  font-size: .95rem;
  font-family: var(--fb);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,120,165,.18);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
textarea { min-height: 110px; resize: vertical; }
select option { background: var(--surface); color: var(--ink); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-bottom: 1rem;
}
.form-section-label {
  font-family: var(--fd);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--cyan);
  margin-bottom: 1rem;
}

/* ============================================================
   13. GRIDS — 2 / 3 / 4 column utilities
   ============================================================ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ============================================================
   14. TABLES
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}
th {
  background: var(--surface-2);
  text-align: left;
  font-family: var(--fd);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .85rem 1rem;
  border-bottom: 2px solid var(--rule-strong);
  color: var(--ink);
}
td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: .95rem;
  color: var(--ink-soft);
}
tr:last-child td { border-bottom: none; }

/* ============================================================
   15. FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  color: rgba(240,240,240,.85);
  border-top: 4px solid var(--cyan);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}
.footer .container { color: rgba(240,240,240,.85); }
.footer-grid, .footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer .brand { color: var(--white-pure); }
.footer .brand .accent-text { color: var(--cyan-bright); }
.footer .brand-mark { border-color: var(--cyan-bright); }
.footer h4, .footer h5 {
  font-family: var(--fd);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--cyan-bright);
  margin-bottom: .9rem;
  text-transform: uppercase;
}
.footer ul li { margin-bottom: .5rem; }
.footer a {
  color: rgba(240,240,240,.75);
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
  transition: color .15s;
}
.footer a:hover { color: var(--cyan-bright); }
.footer a.mono, .footer .mono { font-family: var(--fm); }
.footer-tagline { color: rgba(240,240,240,.7); font-size: .9rem; line-height: 1.6; }
.footer-social { display: flex; gap: .75rem; margin-top: .75rem; }
.footer-social a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.footer-social a:hover { background: var(--orange); color: var(--ink); }
.footer-legal, .footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .82rem;
  color: rgba(240,240,240,.6);
}

/* ============================================================
   16. BADGES + RIBBONS
   ============================================================ */
.badge {
  display: inline-block;
  font-family: var(--fm);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: 999px;
}
.badge-success, .badge-active {
  background: var(--success-50);
  color: var(--success);
  border: 1px solid rgba(21,128,61,.25);
}
.badge-pending {
  background: var(--warn-50);
  color: var(--warn);
  border: 1px solid rgba(146,64,14,.25);
}

.ribbon {
  display: inline-block;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--fd);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: 2px;
}

/* ============================================================
   17. DIAGNOSTIC RESULTS (diagnose.html)
   ============================================================ */
.diag-result {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--cyan);
  border-radius: var(--r);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-1);
}
.diag-result h4 {
  font-family: var(--fd);
  font-size: 1.1rem;
  color: var(--ink);
  text-transform: uppercase;
}
.diag-result .meta, .meta {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--muted);
}
.diag-result .meta strong, .meta strong { color: var(--ink); }

.severity {
  display: inline-block;
  font-family: var(--fm);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 2px;
}
.severity-high   { background: var(--error-50);   color: var(--error);   border: 1px solid rgba(193,39,45,.3); }
.severity-medium { background: var(--warn-50);    color: var(--warn);    border: 1px solid rgba(146,64,14,.3); }
.severity-low    { background: var(--success-50); color: var(--success); border: 1px solid rgba(21,128,61,.3); }

/* ============================================================
   18. SPINNER + LIVE DOT
   ============================================================ */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--rule);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse 2s infinite;
  margin-right: 6px;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ============================================================
   19. TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--success);
  color: var(--ink);
  border-radius: 12px;
  padding: .9rem 1.4rem;
  font-size: .92rem;
  z-index: 1100;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  box-shadow: var(--shadow-3);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.err, .toast.error { border-left-color: var(--error); color: var(--error); }

/* ============================================================
   20. HIDDEN
   ============================================================ */
.hidden { display: none !important; }

/* ============================================================
   21. SPACING UTILITIES — .mt-*, .mb-*
   ============================================================ */
.mt-1  { margin-top:  .25rem; }
.mt-2  { margin-top:  .5rem; }
.mt-4  { margin-top:  1rem; }
.mt-6  { margin-top:  1.5rem; }
.mt-8  { margin-top:  2rem; }
.mt-12 { margin-top:  3rem; }
.mb-2  { margin-bottom: .5rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-8  { margin-bottom: 2rem; }

/* ============================================================
   22. FLEX UTILITIES
   ============================================================ */
.flex          { display: flex; }
.between       { justify-content: space-between; }
.items-center  { align-items: center; }
.gap-2         { gap: .75rem; }
.wrap          { flex-wrap: wrap; }

/* ============================================================
   23. RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid, .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .nav-links { gap: 1rem; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid, .footer-inner { grid-template-columns: 1fr; }
  .hero { padding: 6rem 0 3rem; }
  h1 { font-size: 2.2rem; }
  .bay-card { padding: 1.5rem; }
  .bay-card .price, .price { font-size: 2.25rem; }
  .footer-legal, .footer-bottom { flex-direction: column; align-items: flex-start; }
}