/* =========================================================================
   OperatoryX — styles.css
   Modern dental startup packages. Premium, simple, responsive.
   ========================================================================= */

:root {
  /* Surface palette — soft off-whites */
  --ox-bg:        #f7f8fb;
  --ox-bg-2:      #eef1f6;
  --ox-bg-warm:   #f9fafd;     /* warm off-white for image panels */
  --ox-surface:   #ffffff;

  /* Ink scale */
  --ox-ink:       #0c1830;
  --ox-ink-2:     #1a2440;
  --ox-muted:     #5b667c;
  --ox-muted-2:   #828ea1;

  /* Lines */
  --ox-line:      #e3e7ee;
  --ox-line-2:    #d6dce6;

  /* Brand */
  --ox-accent:        #1f54ff;
  --ox-accent-ink:    #1334a6;
  --ox-accent-soft:   #eaf0ff;

  /* Accents */
  --ox-amber:       #c47a07;
  --ox-amber-soft:  #fdf3dc;
  --ox-success:     #0e8a59;
  --ox-success-soft:#e3f6ed;

  /* Footer palette — premium navy */
  --ox-footer-bg:     #0a1430;
  --ox-footer-text:   #c7d0e2;
  --ox-footer-head:   #ffffff;
  --ox-footer-divide: #1f2a4a;
  --ox-footer-link:   #dde3ef;

  /* Spacing */
  --ox-s-1: 4px;  --ox-s-2: 8px;  --ox-s-3: 12px; --ox-s-4: 16px;
  --ox-s-5: 20px; --ox-s-6: 24px; --ox-s-8: 32px; --ox-s-10: 40px;
  --ox-s-12: 48px; --ox-s-14: 56px; --ox-s-16: 64px; --ox-s-20: 80px;

  --ox-r-sm: 8px; --ox-r: 12px; --ox-r-lg: 18px; --ox-r-xl: 24px;

  --ox-shadow-sm: 0 1px 2px rgba(12,24,48,0.05), 0 1px 1px rgba(12,24,48,0.04);
  --ox-shadow:    0 4px 14px rgba(12,24,48,0.06), 0 2px 4px rgba(12,24,48,0.04);
  --ox-shadow-lg: 0 18px 40px rgba(12,24,48,0.08), 0 6px 14px rgba(12,24,48,0.04);

  --ox-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ox-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ox-font);
  font-size: 16px; line-height: 1.55;
  color: var(--ox-ink);
  background: var(--ox-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
input, select, textarea { font: inherit; color: inherit; }

.ox-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--ox-s-6); }
.ox-container--narrow { max-width: 880px; }
.ox-container--wide { max-width: 1320px; }
.ox-section { padding: var(--ox-s-16) 0; }
.ox-section--tight { padding: var(--ox-s-12) 0; }

.ox-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ox-accent);
  background: var(--ox-accent-soft);
  border: 1px solid rgba(31,84,255,0.18);
  padding: 6px 12px;
  border-radius: 999px;
}
.ox-h1 { font-size: clamp(34px, 5.5vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.ox-h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1;  font-weight: 700; letter-spacing: -0.018em; margin: 0; }
.ox-h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; margin: 0; }
.ox-h4 { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 0; }
.ox-lead { font-size: clamp(16px, 1.45vw, 19px); color: var(--ox-muted); line-height: 1.55; margin: 0; }
.ox-h1 em, .ox-h2 em, .ox-h3 em { font-style: normal; color: var(--ox-accent); }

.ox-text-xs { font-size: 12px; }
.ox-text-sm { font-size: 14px; }
.ox-text-mono { font-family: var(--ox-font-mono); }
.ox-text-muted { color: var(--ox-muted); }
.ox-text-center { text-align: center; }

.ox-mt-2 { margin-top: var(--ox-s-2); } .ox-mt-3 { margin-top: var(--ox-s-3); }
.ox-mt-4 { margin-top: var(--ox-s-4); } .ox-mt-6 { margin-top: var(--ox-s-6); }
.ox-mt-8 { margin-top: var(--ox-s-8); } .ox-mb-4 { margin-bottom: var(--ox-s-4); }
.ox-flex { display: flex; } .ox-justify-between { justify-content: space-between; }
.ox-items-center { align-items: center; }

/* ---- Navigation ---- */
.ox-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--ox-line);
}
.ox-nav__inner { display: flex; align-items: center; height: 68px; gap: var(--ox-s-6); }
.ox-nav__brand {
  font-weight: 700; letter-spacing: -0.02em;
  font-size: 20px; color: var(--ox-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.ox-logo-img { height: 38px; width: auto; display: block; }
.ox-logo-text span { color: var(--ox-accent); }

.ox-nav__links { display: flex; gap: var(--ox-s-2); list-style: none; padding: 0; margin: 0 auto 0 var(--ox-s-4); }
.ox-nav__link {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  font-size: 14.5px; font-weight: 500;
  color: var(--ox-ink-2);
  border-radius: var(--ox-r-sm);
  transition: background 0.18s, color 0.18s;
}
.ox-nav__link:hover { background: var(--ox-bg-2); color: var(--ox-accent-ink); }
.ox-nav__link.is-active { color: var(--ox-accent); background: var(--ox-accent-soft); }

.ox-nav__cta { margin-left: auto; }
.ox-nav__toggle {
  display: none;
  background: transparent; border: 1px solid var(--ox-line);
  width: 40px; height: 40px;
  border-radius: var(--ox-r-sm);
  cursor: pointer; color: var(--ox-ink);
}
.ox-nav__toggle svg { width: 22px; height: 22px; margin: auto; }

.ox-nav__mobile {
  display: none;
  flex-direction: column; gap: 4px;
  padding: var(--ox-s-4) var(--ox-s-6) var(--ox-s-6);
  border-top: 1px solid var(--ox-line);
  background: var(--ox-surface);
}
.ox-nav__mobile a {
  padding: 12px 14px;
  border-radius: var(--ox-r-sm);
  color: var(--ox-ink-2); font-weight: 500;
}
.ox-nav__mobile a.ox-button { color: #fff; }
.ox-nav.is-open .ox-nav__mobile { display: flex; }

@media (max-width: 1080px) {
  .ox-nav__links { display: none; }
  /* Keep the CTA visible on mobile but compact, so users always see the primary action */
  .ox-nav__cta { display: inline-flex; margin-left: auto; }
  .ox-nav__cta .ox-button { padding: 8px 12px; font-size: 13px; gap: 4px; }
  .ox-nav__cta .ox-arrow { display: none; }
  .ox-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .ox-nav__inner { gap: var(--ox-s-3); }
}

/* Tighter still on very small phones so logo + CTA + hamburger all fit */
@media (max-width: 430px) {
  .ox-logo-img { height: 32px; }
  .ox-nav__inner { height: 60px; gap: 8px; }
  .ox-nav__cta .ox-button { padding: 7px 10px; font-size: 12.5px; }
  /* On very narrow screens, swap "Get My Estimate" → "Estimate" to avoid crowding the nav */
  .ox-nav__cta .ox-button { font-size: 0; }
  .ox-nav__cta .ox-button::after { content: "Estimate"; font-size: 13px; font-weight: 600; }
  .ox-nav__cta .ox-arrow { display: none; }
}

/* ---- Buttons ---- */
.ox-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-weight: 600; font-size: 15px;
  padding: 12px 20px;
  border-radius: var(--ox-r-sm);
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  text-align: center;
  transition: transform 0.06s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.ox-button:hover { transform: translateY(-1px); }
.ox-button:active { transform: translateY(0); }
.ox-button .ox-arrow { display: inline-block; transition: transform 0.18s ease; }
.ox-button:hover .ox-arrow { transform: translateX(3px); }

.ox-button--primary {
  background: var(--ox-accent); color: #fff;
  box-shadow: 0 1px 2px rgba(31,84,255,0.18), 0 4px 12px rgba(31,84,255,0.24);
}
.ox-button--primary:hover { background: var(--ox-accent-ink); }

.ox-button--secondary {
  background: var(--ox-surface);
  color: var(--ox-ink);
  border-color: var(--ox-line-2);
}
.ox-button--secondary:hover { background: var(--ox-bg-2); border-color: var(--ox-muted-2); }

.ox-button--dark { background: var(--ox-ink); color: #fff; }
.ox-button--dark:hover { background: #1a2440; }

.ox-button--ghost { background: transparent; color: var(--ox-ink-2); }
.ox-button--ghost:hover { background: var(--ox-bg-2); }

.ox-button--sm { padding: 8px 14px; font-size: 13.5px; }
.ox-button--lg { padding: 16px 26px; font-size: 16px; }
.ox-button--block { display: flex; width: 100%; }
.ox-button--disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ---- Hero ---- */
.ox-hero { padding: var(--ox-s-20) 0 var(--ox-s-12); position: relative; overflow: hidden; }
.ox-hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--ox-s-3); margin-top: var(--ox-s-6); }

/* Price chips on hero — for headline pricing */
.ox-price-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: var(--ox-s-6);
}
.ox-price-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: var(--ox-shadow-sm);
}
.ox-price-chip strong { color: var(--ox-ink); font-weight: 700; }
.ox-price-chip span:not(strong) { color: var(--ox-muted); }
.ox-price-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ox-accent);
  flex-shrink: 0;
}
.ox-price-chip__dot--green { background: var(--ox-success); }
.ox-price-chip__dot--amber { background: var(--ox-amber); }

/* ---- Cards & panels ---- */
.ox-panel {
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-lg);
  box-shadow: var(--ox-shadow);
}

.ox-callout {
  padding: var(--ox-s-4) var(--ox-s-5);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r);
  background: var(--ox-surface);
}
.ox-callout--blue { background: var(--ox-accent-soft); border-color: rgba(31,84,255,0.20); }
.ox-callout--amber { background: var(--ox-amber-soft); border-color: #f1d394; }
.ox-callout--dark { background: var(--ox-ink); color: #cad2e0; border-color: #2a3658; }
.ox-callout--dark .ox-callout__title { color: #fff; }
.ox-callout--dark .ox-callout__body { color: #a6b1c5; }
.ox-callout__title { font-weight: 700; color: var(--ox-ink); font-size: 14px; margin-bottom: 2px; }
.ox-callout__body { color: var(--ox-muted); font-size: 14.5px; line-height: 1.55; }

/* ---- Badges ---- */
.ox-badge {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  font-size: 12px; font-weight: 600;
  border-radius: 999px;
  background: var(--ox-bg-2); color: var(--ox-ink);
  border: 1px solid var(--ox-line);
}
.ox-badge--soft { background: var(--ox-accent-soft); color: var(--ox-accent-ink); border-color: rgba(31,84,255,0.18); }
.ox-badge--featured { background: #fff5e2; color: #8a6512; border-color: #f1d394; }
.ox-badge--vetted { background: var(--ox-success-soft); color: var(--ox-success); border-color: #b9e6cf; }
.ox-badge--new { background: var(--ox-ink); color: #fff; border-color: var(--ox-ink); }

/* ---- Grids ---- */
.ox-grid { display: grid; gap: var(--ox-s-6); }
.ox-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ox-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ox-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ox-grid--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 980px) { .ox-grid--3 { grid-template-columns: repeat(2, 1fr); } .ox-grid--4 { grid-template-columns: repeat(2, 1fr); } .ox-grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ox-grid--2, .ox-grid--3, .ox-grid--4 { grid-template-columns: 1fr; } .ox-grid--6 { grid-template-columns: repeat(2, 1fr); } }

.ox-split { display: grid; gap: var(--ox-s-8); grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .ox-split { grid-template-columns: 1fr; } }

.ox-step {
  display: flex; gap: var(--ox-s-4);
  padding: var(--ox-s-5);
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-lg);
  box-shadow: var(--ox-shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ox-step:hover { box-shadow: var(--ox-shadow); border-color: var(--ox-line-2); }
.ox-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--ox-accent-soft);
  color: var(--ox-accent);
  font-weight: 700;
}
.ox-step__title { font-weight: 700; font-size: 16.5px; margin-bottom: 4px; color: var(--ox-ink); }
.ox-step__body { color: var(--ox-muted); font-size: 14.5px; line-height: 1.55; }

.ox-stats { display: grid; gap: var(--ox-s-3); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .ox-stats { grid-template-columns: repeat(2, 1fr); } }
.ox-stats__cell { background: var(--ox-surface); border: 1px solid var(--ox-line); border-radius: var(--ox-r); padding: var(--ox-s-4); }
.ox-stats__num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ox-ink); }
.ox-stats__label { color: var(--ox-muted); font-size: 13px; }

.ox-statusbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-lg);
  overflow: hidden;
  background: var(--ox-surface);
}
@media (max-width: 800px) { .ox-statusbar { grid-template-columns: 1fr; } }
.ox-statusbar__cell { padding: var(--ox-s-5); border-right: 1px solid var(--ox-line); }
.ox-statusbar__cell:last-child { border-right: 0; }
.ox-statusbar__step { font-size: 12px; color: var(--ox-muted); font-weight: 600; }
.ox-statusbar__title { font-weight: 700; font-size: 16px; margin-top: 4px; }
.ox-statusbar__desc { font-size: 13.5px; color: var(--ox-muted); margin-top: 4px; }

/* ---- Forms ---- */
.ox-form { background: var(--ox-surface); border: 1px solid var(--ox-line); border-radius: var(--ox-r-lg); padding: var(--ox-s-6); box-shadow: var(--ox-shadow); }
.ox-form__row { display: grid; gap: var(--ox-s-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .ox-form__row { grid-template-columns: 1fr; } }
.ox-form__group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ox-s-3); }
.ox-form__label { font-weight: 600; font-size: 14px; color: var(--ox-ink); }
.ox-form__label--req::after { content: " *"; color: var(--ox-accent); }
.ox-form__hint { font-size: 12.5px; color: var(--ox-muted); }
.ox-form__error { display: none; font-size: 12.5px; color: #b3261e; }
.ox-form__group.has-error .ox-form__error { display: block; }
.ox-form__group.has-error .ox-input { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,0.10); }

.ox-input, input.ox-input, select.ox-input, textarea.ox-input {
  background: var(--ox-surface);
  border: 1px solid var(--ox-line-2);
  border-radius: var(--ox-r-sm);
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ox-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.ox-input:focus { outline: none; border-color: var(--ox-accent); box-shadow: 0 0 0 3px rgba(31,84,255,0.16); }
textarea.ox-input { min-height: 120px; resize: vertical; }

.ox-options { display: grid; gap: var(--ox-s-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .ox-options { grid-template-columns: 1fr; } }
.ox-option {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  padding: var(--ox-s-4) var(--ox-s-5);
  background: var(--ox-surface);
  border: 1.5px solid var(--ox-line);
  border-radius: var(--ox-r);
  cursor: pointer; text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.ox-option:hover { border-color: var(--ox-line-2); }
.ox-option.is-selected { border-color: var(--ox-accent); background: var(--ox-accent-soft); box-shadow: 0 0 0 3px rgba(31,84,255,0.10); }
.ox-option__title { font-weight: 700; color: var(--ox-ink); }
.ox-option__hint { font-size: 13px; color: var(--ox-muted); }

.ox-checkbox {
  display: flex; gap: var(--ox-s-3); align-items: flex-start;
  padding: var(--ox-s-4) var(--ox-s-5);
  background: var(--ox-surface);
  border: 1.5px solid var(--ox-line);
  border-radius: var(--ox-r);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.ox-checkbox input { margin-top: 3px; }
.ox-checkbox.is-checked { border-color: var(--ox-accent); background: var(--ox-accent-soft); }
.ox-checkbox span { font-size: 14.5px; color: var(--ox-ink); }

.ox-status {
  display: none;
  margin-top: var(--ox-s-4);
  padding: 12px 14px;
  border-radius: var(--ox-r-sm);
  font-size: 14px;
}
.ox-status.is-shown { display: block; }
.ox-status--error { background: #fdecea; border: 1px solid #f3c8c4; color: #b3261e; }
.ox-status--success { background: var(--ox-success-soft); border: 1px solid #b9e6cf; color: var(--ox-success); }

/* ---- Wizard ---- */
.ox-wizard { background: var(--ox-surface); border: 1px solid var(--ox-line); border-radius: var(--ox-r-xl); box-shadow: var(--ox-shadow-lg); overflow: hidden; }
.ox-wizard__header { padding: var(--ox-s-5) var(--ox-s-6); border-bottom: 1px solid var(--ox-line); }
.ox-wizard__progress { background: var(--ox-bg-2); border-radius: 999px; height: 6px; overflow: hidden; }
.ox-wizard__progress-bar { background: var(--ox-accent); height: 100%; transition: width 0.3s ease; width: 11%; }
.ox-wizard__step-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ox-muted); font-weight: 600; }
.ox-wizard__body { padding: var(--ox-s-8) var(--ox-s-6); }
.ox-wizard__step { display: none; }
.ox-wizard__step.is-active { display: block; animation: oxFadeUp .3s ease; }
.ox-wizard__title { font-size: 26px; font-weight: 700; letter-spacing: -0.014em; margin: 0; }
.ox-wizard__subtitle { color: var(--ox-muted); margin-top: 8px; margin-bottom: var(--ox-s-6); font-size: 16px; line-height: 1.55; }
.ox-wizard__footer { padding: var(--ox-s-4) var(--ox-s-6); border-top: 1px solid var(--ox-line); display: flex; justify-content: space-between; align-items: center; background: var(--ox-bg); gap: var(--ox-s-3); }

@keyframes oxFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Results — fixed responsive layout, no price cutoff ---- */
.ox-results {
  display: grid;
  gap: var(--ox-s-6);
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
}
@media (max-width: 980px) { .ox-results { grid-template-columns: minmax(0, 1fr); } }

.ox-results__hero {
  padding: var(--ox-s-6);
  background: linear-gradient(135deg, #0c1830 0%, #1f3a8c 100%);
  color: #fff;
  border-radius: var(--ox-r-lg);
}

/* Pricing summary inside results hero — uses larger headline price */
.ox-pricebox {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--ox-r);
  padding: var(--ox-s-5);
  margin-top: var(--ox-s-5);
}
.ox-pricebox__label {
  font-size: 12px; color: #b8c2da;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.ox-pricebox__value {
  font-size: clamp(28px, 4.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: 6px;
  line-height: 1.1;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ox-pricebox__sub {
  font-size: 13.5px; color: #c5cee2;
  margin-top: 6px;
  line-height: 1.5;
}
.ox-pricebox__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ox-s-4);
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 14px;
  color: #c5cee2;
}
.ox-pricebox__line:first-of-type { border-top: 0; }
.ox-pricebox__line strong { color: #fff; font-weight: 700; }

.ox-results__inputs {
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r);
  padding: var(--ox-s-4);
  margin-top: var(--ox-s-5);
}
.ox-results__input-grid {
  display: grid;
  gap: var(--ox-s-2);
  grid-template-columns: 1fr 1fr;
  font-size: 14px;
}
@media (max-width: 540px) { .ox-results__input-grid { grid-template-columns: 1fr; } }
.ox-results__input-grid > div {
  display: flex; justify-content: space-between; gap: var(--ox-s-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--ox-line);
  flex-wrap: wrap;
}
.ox-results__input-grid > div:last-child { border-bottom: 0; }
.ox-results__input-grid span:first-child { color: var(--ox-muted); }
.ox-results__input-grid span:last-child {
  color: var(--ox-ink); font-weight: 600;
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ox-results__main { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ox-results__side { display: flex; flex-direction: column; gap: var(--ox-s-3); min-width: 0; }

.ox-side-card { background: var(--ox-surface); border: 1px solid var(--ox-line); border-radius: var(--ox-r); padding: var(--ox-s-4); }
.ox-side-card__title { font-weight: 700; font-size: 14.5px; color: var(--ox-ink); margin-bottom: 8px; }
.ox-side-card ol, .ox-side-card ul { padding-left: 18px; margin: 0; font-size: 14px; color: var(--ox-muted); }
.ox-side-card ol li, .ox-side-card ul li { margin-bottom: 6px; }

.ox-next-steps { padding-left: 18px; margin: 0; font-size: 14px; color: var(--ox-muted); }
.ox-next-steps li { margin-bottom: 6px; }

/* ---- FAQ ---- */
.ox-faq { display: flex; flex-direction: column; gap: var(--ox-s-2); }
.ox-faq__item { background: var(--ox-surface); border: 1px solid var(--ox-line); border-radius: var(--ox-r); overflow: hidden; }
.ox-faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ox-s-4);
  width: 100%;
  padding: var(--ox-s-4) var(--ox-s-5);
  background: transparent; border: 0;
  text-align: left; font-weight: 600; font-size: 16px;
  color: var(--ox-ink);
  cursor: pointer;
}
.ox-faq__q::after { content: "+"; font-weight: 400; color: var(--ox-muted); font-size: 22px; }
.ox-faq__item.is-open .ox-faq__q::after { content: "−"; }
.ox-faq__a {
  padding: 0 var(--ox-s-5);
  color: var(--ox-muted); font-size: 14.5px; line-height: 1.6;
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease;
}
.ox-faq__item.is-open .ox-faq__a { padding: 0 var(--ox-s-5) var(--ox-s-5); max-height: 800px; }

/* ---- Tabs ---- */
.ox-tabs {
  display: inline-flex;
  background: var(--ox-bg-2);
  padding: 4px;
  border-radius: var(--ox-r-sm);
  margin-bottom: var(--ox-s-4);
  flex-wrap: wrap;
}
.ox-tab {
  padding: 8px 14px;
  font-size: 14px; font-weight: 600;
  background: transparent; border: 0;
  border-radius: 6px;
  color: var(--ox-muted-2);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.ox-tab.is-active { background: var(--ox-surface); color: var(--ox-ink); box-shadow: var(--ox-shadow-sm); }
.ox-tab-panel { display: none; }
.ox-tab-panel.is-active { display: block; animation: oxFadeUp .25s ease; }

/* =========================================================================
   Footer — premium navy, fully readable
   ========================================================================= */
.ox-footer {
  background: var(--ox-footer-bg);
  color: var(--ox-footer-text);
  padding: var(--ox-s-14) 0 var(--ox-s-6);
}
.ox-footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--ox-s-8);
}
@media (max-width: 1080px) { .ox-footer__top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px)  { .ox-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .ox-footer__top { grid-template-columns: 1fr; } }

.ox-footer__brand .ox-logo-img {
  height: 38px;
  width: auto;
  display: block;
  /* Dark navy logo on dark footer needs a white surface to read against */
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 10px;
  box-sizing: content-box;
}
.ox-footer__brand .ox-logo-text { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ox-footer__brand .ox-logo-text span { color: #6c8eff; }
.ox-footer__brand p {
  color: var(--ox-footer-text);
  font-size: 14px;
  margin-top: var(--ox-s-4);
  max-width: 280px;
  line-height: 1.55;
}

.ox-footer__col h4 {
  color: var(--ox-footer-head);
  font-size: 13.5px;
  margin: 0 0 var(--ox-s-3);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ox-footer__col ul { list-style: none; padding: 0; margin: 0; }
.ox-footer__col li { margin-bottom: 10px; font-size: 14.5px; }
.ox-footer__col a {
  color: var(--ox-footer-link);
  transition: color 0.15s;
}
.ox-footer__col a:hover { color: #fff; text-decoration: underline; }

.ox-footer__bottom {
  margin-top: var(--ox-s-10);
  padding-top: var(--ox-s-5);
  border-top: 1px solid var(--ox-footer-divide);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ox-footer-text);
}
.ox-footer__bottom p { margin: 0 0 6px; }

.ox-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.ox-reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* =========================================================================
   Equipment Packages — premium 3-tier presentation
   ========================================================================= */

/* Package overview cards — 3 tiers, more breathing room than 4 */
.ox-pkg-grid {
  display: grid;
  gap: var(--ox-s-6);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .ox-pkg-grid { grid-template-columns: 1fr; gap: var(--ox-s-5); } }

.ox-pkg-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-lg);
  overflow: hidden;
  box-shadow: var(--ox-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ox-pkg-card:hover { transform: translateY(-4px); box-shadow: var(--ox-shadow-lg); border-color: var(--ox-line-2); }

/* Featured (Growth) — accent border + soft glow */
.ox-pkg-card--featured {
  border-color: var(--ox-accent);
  box-shadow: 0 0 0 4px rgba(31,84,255,0.08), var(--ox-shadow);
}
/* Premium — darker treatment to feel elevated, distinct from Growth */
.ox-pkg-card--premium {
  background: linear-gradient(180deg, #fff 0%, #f6f8fe 100%);
  border-color: #b6c2dc;
  box-shadow: 0 10px 30px rgba(12,24,48,0.08), 0 2px 6px rgba(12,24,48,0.04);
}
.ox-pkg-card--premium .ox-pkg-card__media {
  background: linear-gradient(180deg, #eef2fb 0%, #d9e0ee 100%);
  min-height: 300px;
}
.ox-pkg-card--premium .ox-pkg-card__name {
  background: linear-gradient(90deg, #0c1830 0%, #1f3a8c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Image panel — soft warm off-white, no harsh white, plenty of room for full chair */
.ox-pkg-card__media {
  background: #ffffff;  /* pure white — matches the flattened chair PNG background so transparency blends seamlessly */
  padding: var(--ox-s-6);
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--ox-line);
  position: relative;
  overflow: hidden;
}
.ox-pkg-card__media img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  object-position: center;
  display: block;
  /* mix-blend-mode removed — new chair/cabinetry PNGs are transparent-bg, no multiply trick needed */
}

.ox-pkg-card__body { padding: var(--ox-s-6); display: flex; flex-direction: column; flex: 1; gap: 0; }
.ox-pkg-card__sub { font-size: 12px; color: var(--ox-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.ox-pkg-card__name { font-size: 22px; font-weight: 700; color: var(--ox-ink); margin: 4px 0 0; letter-spacing: -0.012em; }
.ox-pkg-card__badge {
  position: absolute; top: var(--ox-s-3); right: var(--ox-s-3);
  font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  background: var(--ox-ink); color: #fff;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ox-pkg-card__badge--accent { background: var(--ox-accent); }
.ox-pkg-card__badge--amber { background: var(--ox-amber); color: #fff; }

.ox-pkg-card__bestfor {
  font-size: 14px; color: var(--ox-muted);
  margin-top: var(--ox-s-3);
  line-height: 1.55;
}

/* Price block — clinic package starting price prominent, eq-only secondary */
.ox-pkg-card__price {
  margin-top: var(--ox-s-4);
  padding: var(--ox-s-4);
  background: var(--ox-bg);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-sm);
}
.ox-pkg-card__price-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ox-s-3); }
.ox-pkg-card__price-label { font-size: 12px; color: var(--ox-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.ox-pkg-card__price-value {
  font-size: 22px; font-weight: 700;
  color: var(--ox-ink);
  letter-spacing: -0.014em;
  margin-top: 2px;
}
.ox-pkg-card__price-value small { font-size: 12px; color: var(--ox-muted); font-weight: 500; margin-right: 4px; letter-spacing: 0; text-transform: uppercase; }
.ox-pkg-card__price-secondary {
  margin-top: var(--ox-s-3);
  padding-top: var(--ox-s-3);
  border-top: 1px dashed var(--ox-line-2);
  font-size: 13px; color: var(--ox-muted);
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.ox-pkg-card__price-secondary strong { color: var(--ox-ink-2); font-weight: 700; }

.ox-pkg-includes {
  margin-top: var(--ox-s-4);
  font-size: 13.5px;
  color: var(--ox-muted);
  line-height: 1.7;
}
.ox-pkg-includes-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ox-pkg-includes-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--ox-ink-2);
}
.ox-pkg-includes-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 12px;
  background: var(--ox-success-soft);
  border: 2px solid var(--ox-success);
  border-radius: 50%;
}

.ox-pkg-card__cta { margin-top: auto; padding-top: var(--ox-s-5); display: flex; flex-direction: column; gap: 8px; }

/* Color selector — premium swatches */
.ox-color-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: var(--ox-s-3);
}
.ox-color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 1px solid var(--ox-line);
  cursor: pointer;
  transition: transform 0.15s, outline-color 0.15s;
}
.ox-color-swatch:hover { transform: scale(1.1); outline-color: var(--ox-muted-2); }
.ox-color-swatch.is-active { outline-color: var(--ox-accent); outline-width: 2px; }
.ox-color-meta { font-size: 12.5px; color: var(--ox-muted); margin-top: 8px; }
.ox-color-meta strong { color: var(--ox-ink); font-weight: 700; }

/* Package detail */
.ox-pkg-detail {
  padding: var(--ox-s-8);
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-xl);
  box-shadow: var(--ox-shadow);
}
.ox-pkg-detail__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ox-s-4); flex-wrap: wrap; margin-bottom: var(--ox-s-6); }
.ox-pkg-detail__title { font-size: 30px; font-weight: 700; letter-spacing: -0.014em; margin: 0; }
.ox-pkg-detail__sub { color: var(--ox-muted); font-size: 13px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.ox-pkg-detail__quote { font-size: 17px; color: var(--ox-ink-2); line-height: 1.6; padding-left: var(--ox-s-4); border-left: 3px solid var(--ox-accent); margin: var(--ox-s-5) 0 var(--ox-s-6); font-style: italic; }

.ox-pkg-detail__collage {
  display: grid; gap: var(--ox-s-3);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--ox-s-6);
}
@media (max-width: 800px) { .ox-pkg-detail__collage { grid-template-columns: repeat(2, 1fr); } }
.ox-pkg-detail__collage-item {
  background: #ffffff;  /* pure white — matches the flattened chair PNG background so transparency blends seamlessly */
  padding: var(--ox-s-4);
  border-radius: var(--ox-r);
  border: 1px solid var(--ox-line);
  min-height: 170px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.ox-pkg-detail__collage-item img {
  width: 100%;
  height: 130px;
  object-fit: contain;
  object-position: center;
  display: block;
  /* mix-blend-mode removed — new chair/cabinetry PNGs are transparent-bg, no multiply trick needed */
}
.ox-pkg-detail__collage-item span {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--ox-muted);
  margin-top: 6px;
}

.ox-pkg-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ox-pkg-list li {
  position: relative;
  padding: 10px 14px 10px 36px;
  background: var(--ox-bg);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-sm);
  font-size: 14.5px; color: var(--ox-ink-2);
}
.ox-pkg-list li::before {
  content: ""; position: absolute; left: 14px; top: 14px;
  width: 14px; height: 14px;
  background: var(--ox-success-soft);
  border: 2px solid var(--ox-success);
  border-radius: 50%;
}
.ox-pkg-list--addon li::before { background: var(--ox-accent-soft); border-color: var(--ox-accent); }
.ox-pkg-list--excl li::before { background: #fdecea; border-color: #b3261e; }

/* Comparison table */
.ox-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ox-compare {
  width: 100%; min-width: 720px;
  border-collapse: separate; border-spacing: 0;
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-lg);
  overflow: hidden;
}
.ox-compare th, .ox-compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ox-line);
  font-size: 14px;
  vertical-align: top;
}
.ox-compare thead th {
  background: var(--ox-ink); color: #fff;
  font-weight: 700; font-size: 14.5px;
  text-align: left;
}
.ox-compare thead th:first-child { background: #1a2440; }
.ox-compare tbody th {
  background: var(--ox-bg-2);
  font-weight: 700; color: var(--ox-ink);
  width: 240px; min-width: 200px;
  text-align: left;
}
.ox-compare tbody tr:last-child td, .ox-compare tbody tr:last-child th { border-bottom: 0; }
.ox-compare tbody tr:hover td, .ox-compare tbody tr:hover th { background: var(--ox-accent-soft); }
.ox-compare__yes { color: var(--ox-success); font-weight: 700; }
.ox-compare__no { color: #aaa; }
.ox-compare__opt { color: var(--ox-amber); font-weight: 600; font-size: 13px; }

/* Buying-paths cards (homepage two paths) */
.ox-paths { display: grid; gap: var(--ox-s-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .ox-paths { grid-template-columns: 1fr; } }
.ox-path-card {
  background: var(--ox-surface);
  border: 1.5px solid var(--ox-line);
  border-radius: var(--ox-r-lg);
  padding: var(--ox-s-6);
  box-shadow: var(--ox-shadow);
  transition: border-color 0.18s, transform 0.18s;
}
.ox-path-card:hover { border-color: var(--ox-line-2); transform: translateY(-2px); }
.ox-path-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ox-accent-soft);
  color: var(--ox-accent);
  font-weight: 800; font-size: 18px;
  margin-bottom: var(--ox-s-3);
}
.ox-path-card__title { font-size: 22px; font-weight: 700; color: var(--ox-ink); margin: 0; }
.ox-path-card__sub { color: var(--ox-muted); font-size: 14.5px; margin-top: 6px; line-height: 1.55; }
.ox-path-flow { list-style: none; padding: 0; margin: var(--ox-s-4) 0 var(--ox-s-5); display: grid; gap: 6px; counter-reset: item; }
.ox-path-flow li {
  font-size: 14px; color: var(--ox-ink-2);
  padding: 8px 12px 8px 36px;
  position: relative;
  background: var(--ox-bg);
  border-radius: var(--ox-r-sm);
}
.ox-path-flow li::before {
  content: counter(item); counter-increment: item;
  position: absolute; left: 8px; top: 7px;
  width: 22px; height: 22px;
  font-size: 11px; font-weight: 700;
  background: var(--ox-surface);
  border: 1px solid var(--ox-line-2);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ox-muted);
}

/* Equipment categories grid */
.ox-cat-grid { display: grid; gap: var(--ox-s-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ox-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ox-cat-grid { grid-template-columns: 1fr; } }
.ox-cat-card {
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-lg);
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.18s;
}
.ox-cat-card:hover { box-shadow: var(--ox-shadow); transform: translateY(-2px); }
.ox-cat-card__media {
  background: #ffffff;  /* pure white — matches the flattened chair PNG background so transparency blends seamlessly */
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--ox-s-5);
  border-bottom: 1px solid var(--ox-line);
}
.ox-cat-card__media img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  object-position: center;
  display: block;
  /* mix-blend-mode removed — new chair/cabinetry PNGs are transparent-bg, no multiply trick needed */
}
.ox-cat-card__body { padding: var(--ox-s-4) var(--ox-s-5); }
.ox-cat-card__title { font-size: 17px; font-weight: 700; color: var(--ox-ink); margin: 0; }
.ox-cat-card__desc { font-size: 13.5px; color: var(--ox-muted); margin-top: 4px; line-height: 1.55; }
.ox-cat-card__avail { display: flex; gap: 4px; flex-wrap: wrap; margin-top: var(--ox-s-3); }
.ox-cat-card__chip {
  font-size: 11px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ox-accent-soft); color: var(--ox-accent-ink);
  border: 1px solid rgba(31,84,255,0.18);
}
.ox-cat-card__chip--muted { background: var(--ox-bg-2); color: var(--ox-muted); border-color: var(--ox-line); }

/* Hero product visual (large single image on right side of hero) */
.ox-hero-visual {
  background: #ffffff;  /* pure white — matches the flattened chair PNG */
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-xl);
  padding: var(--ox-s-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--ox-shadow);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ox-hero-visual img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  /* mix-blend-mode removed — new chair/cabinetry PNGs are transparent-bg, no multiply trick needed */
}
.ox-hero-visual__chip {
  position: absolute;
  bottom: var(--ox-s-4); left: var(--ox-s-4);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--ox-line);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ox-ink);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ox-hero-visual__chip::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ox-accent);
}

/* Hero chips */
.ox-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--ox-s-5); }
.ox-hero-chip {
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ox-surface);
  color: var(--ox-ink-2);
  border: 1px solid var(--ox-line);
}

/* ============= Marketplace cards (partner network) ============= */
.ox-mp-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--ox-s-3) var(--ox-s-5);
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r);
  margin-bottom: var(--ox-s-5);
  flex-wrap: wrap; gap: var(--ox-s-3);
}
.ox-mp-bar__left { display: flex; gap: 6px; flex-wrap: wrap; }
.ox-mp-bar__count { font-size: 13px; color: var(--ox-muted); }
.ox-mp-chip {
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  background: var(--ox-bg-2); color: var(--ox-ink-2);
  border: 1px solid var(--ox-line); border-radius: 999px;
  cursor: pointer; transition: background 0.15s;
}
.ox-mp-chip.is-active { background: var(--ox-accent); color: #fff; border-color: var(--ox-accent); }
.ox-mp-chip:hover { background: var(--ox-accent-soft); }

.ox-partner-grid { display: grid; gap: var(--ox-s-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .ox-partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ox-partner-grid { grid-template-columns: 1fr; } }
.ox-partner, .ox-mp-card {
  background: var(--ox-surface);
  border: 1.5px solid var(--ox-line);
  border-radius: var(--ox-r-lg);
  overflow: hidden;
  box-shadow: var(--ox-shadow-sm);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.ox-partner:hover, .ox-mp-card:hover { transform: translateY(-3px); box-shadow: var(--ox-shadow); }
.ox-partner.is-selected { border-color: var(--ox-accent); box-shadow: 0 0 0 3px rgba(31,84,255,0.10), var(--ox-shadow); }

.ox-mp-card__cover {
  height: 130px;
  background: linear-gradient(135deg, #4a64d3 0%, #1f54ff 100%);
  position: relative;
  display: flex; align-items: flex-end;
  padding: var(--ox-s-3);
}
.ox-mp-card__icon-btn {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 0; cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.ox-mp-card__icon-btn.is-active { color: #d23434; }
.ox-mp-card__cover-meta { color: #fff; font-size: 12px; font-weight: 600; }

.ox-mp-card__body { padding: var(--ox-s-5); }
.ox-mp-card__head { display: flex; justify-content: space-between; align-items: start; gap: 8px; margin-bottom: 6px; }
.ox-mp-card__title-row { display: flex; flex-direction: column; gap: 2px; }
.ox-mp-card__type { font-size: 12px; font-weight: 600; color: var(--ox-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ox-mp-card__name { font-size: 18px; font-weight: 700; color: var(--ox-ink); margin: 0; }
.ox-mp-card__bio { font-size: 13.5px; color: var(--ox-muted); line-height: 1.5; margin: var(--ox-s-3) 0; }
.ox-mp-card__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: var(--ox-s-3) 0; }
.ox-mp-card__stat { background: var(--ox-bg-2); padding: 8px 10px; border-radius: var(--ox-r-sm); }
.ox-mp-card__stat-value { font-size: 16px; font-weight: 700; color: var(--ox-ink); }
.ox-mp-card__stat-label { font-size: 11px; color: var(--ox-muted); }
.ox-mp-card__footer { padding: var(--ox-s-3) var(--ox-s-5); border-top: 1px solid var(--ox-line); background: var(--ox-bg); }

.ox-compat-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--ox-s-3); }
.ox-compat-tag {
  font-size: 11px; padding: 3px 8px;
  background: var(--ox-bg-2); color: var(--ox-muted);
  border: 1px solid var(--ox-line);
  border-radius: 999px;
}
.ox-compat-tag--match { background: var(--ox-success-soft); color: var(--ox-success); border-color: #b9e6cf; font-weight: 600; }

.ox-shortlist__item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: var(--ox-bg);
  border-radius: var(--ox-r-sm);
  margin-bottom: 6px;
  font-size: 14px;
}
.ox-shortlist__item button {
  font-size: 12px; padding: 4px 10px;
  background: transparent; border: 1px solid var(--ox-line-2);
  border-radius: 999px; cursor: pointer;
  color: var(--ox-muted);
}
.ox-shortlist__empty { color: var(--ox-muted); font-size: 13.5px; padding: 8px; }

/* Breakdown (build plan) */
.ox-breakdown { display: flex; flex-direction: column; gap: var(--ox-s-3); }
.ox-breakdown__row {
  display: grid; gap: var(--ox-s-3);
  grid-template-columns: 1.5fr 2fr 110px;
  align-items: center;
}
@media (max-width: 640px) { .ox-breakdown__row { grid-template-columns: 1fr; } }
.ox-breakdown__label { font-weight: 700; color: var(--ox-ink); font-size: 14.5px; }
.ox-breakdown__sub { color: var(--ox-muted); font-size: 12.5px; }
.ox-breakdown__bar { background: var(--ox-bg-2); border-radius: 999px; height: 10px; overflow: hidden; }
.ox-breakdown__bar-fill { background: var(--ox-accent); height: 100%; }
.ox-breakdown__value { text-align: right; font-weight: 700; color: var(--ox-ink); font-size: 14px; }
.ox-breakdown__row--total { padding-top: var(--ox-s-3); border-top: 1px solid var(--ox-line); margin-top: var(--ox-s-2); }
.ox-breakdown__row--total .ox-breakdown__label, .ox-breakdown__row--total .ox-breakdown__value { color: var(--ox-accent); }

/* Checklist */
.ox-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ox-s-2); }
.ox-checklist__item {
  display: flex; gap: var(--ox-s-3);
  padding: var(--ox-s-3) var(--ox-s-4);
  background: var(--ox-surface);
  border: 1.5px solid var(--ox-line);
  border-radius: var(--ox-r);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.ox-checklist__box {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 2px solid var(--ox-line-2);
  border-radius: 6px;
  background: var(--ox-surface);
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.18s, border-color 0.18s;
}
.ox-checklist__item.is-checked { background: var(--ox-success-soft); border-color: #b9e6cf; }
.ox-checklist__item.is-checked .ox-checklist__box { background: var(--ox-success); border-color: var(--ox-success); }
.ox-checklist__item.is-checked .ox-checklist__box::after { content: "✓"; }
.ox-checklist__title { font-weight: 600; font-size: 14.5px; color: var(--ox-ink); }
.ox-checklist__desc { font-size: 13px; color: var(--ox-muted); margin-top: 2px; }
.ox-checklist__body { flex: 1; }

.ox-success-state {
  display: none;
  padding: var(--ox-s-8);
  background: var(--ox-success-soft);
  border: 1px solid #b9e6cf;
  border-radius: var(--ox-r-lg);
  text-align: center;
}
.ox-success-state.is-shown { display: block; animation: oxFadeUp .3s ease; }

.ox-print-only { display: none; }
@media print {
  .ox-nav, .ox-footer, .ox-button, .ox-wizard__footer, .ox-results__side button { display: none !important; }
  .ox-print-only { display: block; }
  body { background: #fff; }
  .ox-results__hero { background: #f4f7fc !important; color: var(--ox-ink) !important; }
  .ox-pricebox__value, .ox-pricebox__label, .ox-pricebox__line, .ox-pricebox__sub { color: var(--ox-ink) !important; }
}

@media (max-width: 700px) {
  .ox-h1, .ox-wizard__title { font-size: 28px; }
  .ox-section, .ox-section--tight { padding: var(--ox-s-12) 0; }
  .ox-pkg-detail { padding: var(--ox-s-5); }
  .ox-results__hero { padding: var(--ox-s-5); }
  .ox-pricebox { padding: var(--ox-s-4); }
}

/* Hide elements until JS revealed (avoid flash) */
.ox-nav__mobile { /* default hidden via display flex on .is-open */ }

/* =========================================================================
   Live chair preview (tier-aware) — used in equipment-packages + estimator
   ========================================================================= */
.ox-chair-preview {
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-lg);
  padding: var(--ox-s-5);
  box-shadow: var(--ox-shadow-sm);
}
.ox-chair-preview__head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--ox-s-3);
  margin-bottom: var(--ox-s-4);
}
.ox-chair-preview__title { font-size: 13px; color: var(--ox-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.ox-chair-preview__sel { font-size: 14px; color: var(--ox-ink); font-weight: 700; }
.ox-chair-preview__sel span { color: var(--ox-muted); font-weight: 500; }

.ox-chair-preview__stage {
  background: #ffffff;  /* pure white — matches the flattened chair PNG background so transparency blends seamlessly */
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r);
  min-height: 280px;
  padding: var(--ox-s-5);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ox-chair-preview__stage img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  object-position: center;
  /* mix-blend-mode removed — new chair/cabinetry PNGs are transparent-bg, no multiply trick needed */
}
.ox-chair-preview__tier-tabs {
  display: inline-flex;
  background: var(--ox-bg-2);
  border-radius: var(--ox-r-sm);
  padding: 4px;
  margin-bottom: var(--ox-s-3);
}
.ox-chair-preview__tier-tab {
  padding: 8px 14px;
  font-size: 13.5px; font-weight: 600;
  background: transparent; border: 0;
  border-radius: 6px;
  color: var(--ox-muted-2);
  cursor: pointer;
}
.ox-chair-preview__tier-tab.is-active {
  background: var(--ox-surface);
  color: var(--ox-ink);
  box-shadow: var(--ox-shadow-sm);
}

/* =========================================================================
   Estimator line-item range table — replaces single price box
   ========================================================================= */
.ox-range-list {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--ox-r);
  margin-top: var(--ox-s-4);
  overflow: hidden;
}
.ox-range-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ox-s-3);
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ox-range-row:last-child { border-bottom: 0; }
.ox-range-row__label {
  font-size: 13.5px;
  color: #c5cee2;
  line-height: 1.4;
}
.ox-range-row__value {
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow-wrap: break-word;
  word-break: keep-all;
  text-align: right;
}
.ox-range-row--subtotal {
  background: rgba(255,255,255,0.05);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.ox-range-row--subtotal .ox-range-row__label,
.ox-range-row--subtotal .ox-range-row__value { color: #fff; font-weight: 700; }

.ox-range-row--total {
  background: rgba(31,84,255,0.18);
  border-top: 2px solid rgba(120,165,255,0.40);
}
.ox-range-row--total .ox-range-row__label {
  font-size: 14px;
  color: #d9e3fb;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.ox-range-row--total .ox-range-row__value {
  font-size: clamp(18px, 2.5vw, 22px);
  color: #fff;
}

@media (max-width: 540px) {
  .ox-range-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ox-range-row__value {
    text-align: left;
    font-size: 16px;
  }
  .ox-range-row--total .ox-range-row__value { font-size: 20px; }
}

/* Mini input for custom square footage */
.ox-input--mini {
  max-width: 260px;
}

/* Wizard step error inline */
.ox-wizard__inline-error {
  margin-top: var(--ox-s-4);
}

/* =========================================================================
   Result page cards — 3-tier hierarchy (main / secondary / tertiary)
   ========================================================================= */

.ox-result-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ox-s-5);
}

/* MAIN: OperatoryX package estimate — largest, dark, prominent */
.ox-result-card {
  border-radius: var(--ox-r-lg);
  padding: var(--ox-s-6);
  border: 1px solid var(--ox-line);
  background: var(--ox-surface);
  box-shadow: var(--ox-shadow-sm);
}
.ox-result-card--main {
  background: linear-gradient(135deg, #0c1830 0%, #1f3a8c 100%);
  color: #fff;
  border: 0;
  box-shadow: var(--ox-shadow-lg);
}
.ox-result-card--main .ox-result-card__eyebrow {
  background: rgba(255, 255, 255, 0.10);
  color: #cfdcff;
  border-color: rgba(255, 255, 255, 0.15);
}
.ox-result-card--main .ox-result-card__title { color: #fff; }
.ox-result-card--main .ox-result-card__sub { color: #c5cee2; }

.ox-result-card__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--ox-line);
  background: var(--ox-bg-2);
  color: var(--ox-muted);
}
.ox-result-card__title {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.014em;
  margin: var(--ox-s-3) 0 6px;
  color: var(--ox-ink);
  line-height: 1.2;
}
.ox-result-card__sub {
  color: var(--ox-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 var(--ox-s-5);
}

/* Line-items list (within main card) */
.ox-result-card--main .ox-range-row {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.ox-result-card--main .ox-range-row__label { color: #c5cee2; }
.ox-result-card--main .ox-range-row__value { color: #fff; font-weight: 600; }
.ox-range-row--muted .ox-range-row__value {
  color: var(--ox-muted) !important;
  font-style: italic;
  font-weight: 500 !important;
  font-size: 14px;
}

/* Highlighted package total (within main card) */
.ox-result-card__highlight {
  margin-top: var(--ox-s-5);
  padding: var(--ox-s-5);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ox-r);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ox-result-card__highlight-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b8c2da;
}
.ox-result-card__highlight-value {
  font-size: clamp(28px, 4.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* SECONDARY: Buildout — medium prominence, lighter card */
.ox-result-card--secondary {
  background: var(--ox-bg);
  border: 1.5px solid var(--ox-line-2);
}
.ox-result-card--secondary .ox-result-card__amount {
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ox-ink);
  margin: var(--ox-s-3) 0 var(--ox-s-3);
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ox-result-card--secondary .ox-result-card__note {
  font-size: 13px;
  color: var(--ox-muted);
  line-height: 1.55;
  margin: 0;
}

/* TERTIARY: Total project planning — smallest, subdued */
.ox-result-card--tertiary {
  background: var(--ox-surface);
  border: 1px dashed var(--ox-line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ox-s-3);
  flex-wrap: wrap;
  padding: var(--ox-s-4) var(--ox-s-5);
}
.ox-result-card--tertiary .ox-result-card__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--ox-muted);
}
.ox-result-card--tertiary .ox-result-card__amount {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: var(--ox-ink);
  letter-spacing: -0.012em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Assumptions panel — transparent defaults the calc used */
.ox-assumptions {
  background: var(--ox-amber-soft);
  border: 1px solid #f1d394;
  border-radius: var(--ox-r);
  padding: var(--ox-s-4) var(--ox-s-5);
}
.ox-assumptions__title {
  font-size: 13px;
  font-weight: 700;
  color: #8a6512;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.ox-assumptions__list {
  margin: 0;
  padding-left: 18px;
  color: #8a6512;
  font-size: 14px;
  line-height: 1.6;
}
.ox-assumptions__list li { margin-bottom: 2px; }

/* =========================================================================
   Dealer comparison card — Section 2 of results page
   ========================================================================= */
.ox-result-card--compare {
  background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fb 100%);
  border: 1.5px solid #d6dce6;
}
.ox-compare-grid {
  display: grid;
  gap: var(--ox-s-3);
  grid-template-columns: 1fr 1fr;
  margin: var(--ox-s-4) 0;
}
@media (max-width: 640px) { .ox-compare-grid { grid-template-columns: 1fr; } }

.ox-compare-cell {
  padding: var(--ox-s-4);
  border-radius: var(--ox-r);
  border: 1px solid var(--ox-line);
  background: #fff;
}
.ox-compare-cell--ox {
  border-color: var(--ox-accent);
  background: var(--ox-accent-soft);
}
.ox-compare-cell--dealer {
  border-color: var(--ox-line-2);
  background: var(--ox-bg);
}
.ox-compare-cell__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ox-muted);
  margin-bottom: 6px;
}
.ox-compare-cell--ox .ox-compare-cell__label { color: var(--ox-accent-ink); }
.ox-compare-cell__value {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ox-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.2;
}
.ox-compare-cell--dealer .ox-compare-cell__value {
  color: var(--ox-muted-2);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(91, 102, 124, 0.55);
}

.ox-compare-diff {
  margin-top: var(--ox-s-3);
  padding: var(--ox-s-4) var(--ox-s-5);
  background: var(--ox-success-soft);
  border: 1px solid #b9e6cf;
  border-radius: var(--ox-r);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ox-s-3);
  flex-wrap: wrap;
}
.ox-compare-diff__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ox-success);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ox-compare-diff__value {
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 700;
  color: var(--ox-success);
  letter-spacing: -0.014em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ox-compare-diff__suffix {
  font-size: 13px;
  font-weight: 600;
  color: var(--ox-success);
  margin-left: 4px;
}

/* Chair color dot — small swatch next to the selected color name in live preview */
.ox-chair-color-dot,
.ox-chair-preview__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  vertical-align: middle;
  margin: 0 4px 2px 2px;
}

/* Empty state shown in cabinetry preview when user picks "No cabinetry" —
   the brief requires a placeholder/copy instead of any product image here. */
.ox-chair-preview__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ox-s-5);
  color: var(--ox-muted-2);
  font-size: 14px;
  font-weight: 500;
}

/* =========================================================================
   Global product image frame — used wherever a single product visual needs a
   soft, contained, on-brand frame. Always object-fit: contain so equipment
   images are never cropped or stretched.
   ========================================================================= */
.ox-product-image-frame,
.ox-package-visual,
.ox-preview-image-frame {
  background: #ffffff;  /* pure white — matches the flattened chair PNG background so transparency blends seamlessly */
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ox-product-image-frame img,
.ox-package-visual img,
.ox-preview-image-frame img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* =========================================================================
   MOBILE REFINEMENT PASS — keep the site simpler, cleaner, conversion-focused
   on iPhone widths (375 / 390 / 414 / 430). Desktop stays largely unchanged.
   ========================================================================= */

/* Utility: hide on small screens. Apply to sections that explain something
   already covered elsewhere — keeps mobile focused on the path to the CTA. */
@media (max-width: 720px) {
  .ox-hide-mobile { display: none !important; }
  /* Trim hero & section padding on mobile so the page doesn't feel airy-empty */
  .ox-hero { padding-top: var(--ox-s-8); padding-bottom: var(--ox-s-10); }
  /* Big H1 headlines were sized for desktop; scale down a notch on phone */
  .ox-h1 { font-size: 32px; line-height: 1.12; }
  .ox-h2 { font-size: 24px; line-height: 1.18; }
  .ox-h3 { font-size: 20px; }
  .ox-lead { font-size: 16px; line-height: 1.55; }
  /* Card grids: avoid 1-up huge gaps; tighten section padding */
  .ox-grid--3 { gap: var(--ox-s-3); }
  /* Long supporting paragraphs under section headers get compressed */
  .ox-mt-3 { margin-top: var(--ox-s-2); }
  .ox-mt-4 { margin-top: var(--ox-s-3); }
}

/* Stop horizontal overflow at any width — long words, code, links, etc. */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Hero image is mostly decorative on mobile and adds vertical scroll —
   hide it to push the CTAs above the fold on iPhone. Desktop keeps it. */
@media (max-width: 720px) {
  .ox-hero .ox-hero-visual { display: none; }
  .ox-hero .ox-split { display: block; }
}

/* The "What your package can include" category grid is decorative on mobile
   — 9 cards stacked vertically is too much scrolling. Show 4 most relevant
   in a tighter 2-up grid, hide the rest. */
@media (max-width: 720px) {
  .ox-cat-grid { grid-template-columns: 1fr 1fr; gap: var(--ox-s-3); }
  .ox-cat-card__media { min-height: 130px; padding: var(--ox-s-3); }
  .ox-cat-card__body { padding: var(--ox-s-3); }
  .ox-cat-card__title { font-size: 14.5px; }
  .ox-cat-card__desc  { font-size: 12.5px; line-height: 1.4; }
  /* Show only the first 4 categories on mobile — chair, cabinetry, sterile, compressor */
  .ox-cat-grid .ox-cat-card:nth-child(n+5) { display: none; }
}

/* Price-chip rows: on mobile, make them wrap nicely and lighten weight */
@media (max-width: 720px) {
  .ox-price-chips { gap: var(--ox-s-2); }
  .ox-price-chip { font-size: 12.5px; padding: 6px 10px; }
}

/* Hero CTA row: ensure buttons span full width on mobile so they're tappable */
@media (max-width: 720px) {
  .ox-hero__cta-row { display: flex; flex-direction: column; gap: var(--ox-s-2); }
  .ox-hero__cta-row .ox-button { width: 100%; }
}

/* Final-CTA section: same full-width treatment, less vertical padding */
@media (max-width: 720px) {
  .ox-container--narrow { padding: 0 var(--ox-s-4); }
}

/* Mobile menu (hamburger panel) — make the visible CTA at the bottom of the
   panel feel like the primary action, not just another link */
@media (max-width: 1080px) {
  .ox-nav__mobile { padding: var(--ox-s-3) var(--ox-s-5) var(--ox-s-5); }
  .ox-nav__mobile a { padding: 14px 14px; font-size: 15px; }
  .ox-nav__mobile a.ox-button { margin-top: var(--ox-s-3); padding: 14px; font-size: 15px; }
}

/* Wizard / get-quote step page — tighten on mobile, single-column option cards */
@media (max-width: 720px) {
  .ox-wizard__progress { font-size: 12px; padding: 8px 10px; }
  .ox-wizard__step h2 { font-size: 22px; }
  .ox-wizard__step .ox-lead { font-size: 15px; }
}

/* Estimator option cards: bigger tap targets on mobile, less visual noise */
@media (max-width: 720px) {
  .ox-option-card { padding: var(--ox-s-4); }
  .ox-option-card__title { font-size: 15px; }
  .ox-option-card__desc { font-size: 12.5px; }
}

/* Result page — the dealer-comparison block should be a big, scannable hero,
   not a wall of legal text. Tighten paragraphs, push numbers forward. */
@media (max-width: 720px) {
  .ox-result-section { padding: var(--ox-s-5); }
  .ox-result-section__big { font-size: 28px; }
  .ox-result-section__small { font-size: 12.5px; }
}

/* =========================================================================
   Dealer-quote comparison page (compare-quote.html) + CTA band used on
   index.html, equipment-packages.html, and get-quote.html.
   ========================================================================= */

/* Two-column layout: form on the left, "what you'll get back" on the right.
   Stacks to single column on tablet/phone widths. */
.ox-quote-grid {
  display: grid;
  gap: var(--ox-s-6);
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  align-items: start;
}
@media (max-width: 980px) {
  .ox-quote-grid { grid-template-columns: minmax(0, 1fr); }
}

.ox-quote-form-wrap { min-width: 0; }
.ox-quote-aside { min-width: 0; }

/* The form sits inside a clean white card to read against the page bg */
.ox-quote-form {
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r);
  padding: var(--ox-s-6);
  box-shadow: var(--ox-shadow-sm);
}

/* File input — default <input type=file> is ugly across browsers; this gives
   it the same surface as the other ox-input fields. The label still works,
   the file picker still works, and on iOS Safari we get a clean tap target. */
.ox-input--file {
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  background: var(--ox-bg-2);
}
.ox-input--file::-webkit-file-upload-button {
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  color: var(--ox-ink);
  margin-right: 12px;
  cursor: pointer;
}
.ox-input--file::file-selector-button {
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  color: var(--ox-ink);
  margin-right: 12px;
  cursor: pointer;
}

/* Hint text under a form field (used for the file-size / email-fallback note) */
.ox-form__hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ox-muted);
  line-height: 1.5;
}

/* Success card — hidden by default; revealed by inline JS after ?submitted=1 */
.ox-quote-success {
  display: none;
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-left: 4px solid var(--ox-accent);
  border-radius: var(--ox-r);
  padding: var(--ox-s-6);
  box-shadow: var(--ox-shadow-sm);
}
.ox-quote-success.is-shown { display: block; }

/* Mobile: tighter form padding, full-width submit, no horizontal overflow */
@media (max-width: 720px) {
  .ox-quote-form { padding: var(--ox-s-4); }
  .ox-quote-form__row { display: block; }
  .ox-quote-success { padding: var(--ox-s-5); }
}

/* =========================================================================
   "Compare a dealer quote" CTA band — reused on homepage, packages page,
   and as a small callout above the estimator.
   ========================================================================= */
.ox-quote-band {
  background: var(--ox-surface);
  border: 1px solid var(--ox-line);
  border-radius: var(--ox-r-xl);
  padding: var(--ox-s-7) var(--ox-s-6);
  display: grid;
  gap: var(--ox-s-5);
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
  align-items: center;
  box-shadow: var(--ox-shadow-sm);
}
@media (max-width: 820px) {
  .ox-quote-band { grid-template-columns: minmax(0, 1fr); padding: var(--ox-s-5); }
}

.ox-quote-band__title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ox-ink); margin: 0; }
.ox-quote-band__sub   { color: var(--ox-muted); margin-top: var(--ox-s-2); font-size: 15.5px; line-height: 1.55; }
.ox-quote-band__bullets {
  list-style: none; padding: 0; margin: var(--ox-s-3) 0 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  color: var(--ox-muted); font-size: 13.5px;
}
.ox-quote-band__bullets li::before { content: "•"; color: var(--ox-accent); margin-right: 6px; font-weight: 700; }
.ox-quote-band__cta { display: flex; justify-content: flex-end; }
@media (max-width: 820px) {
  .ox-quote-band__cta { justify-content: flex-start; }
  .ox-quote-band__cta .ox-button { width: 100%; }
  .ox-quote-band__title { font-size: 21px; }
}
.ox-quote-band__fine {
  margin-top: var(--ox-s-3);
  font-size: 12px;
  color: var(--ox-muted-2);
  line-height: 1.55;
  grid-column: 1 / -1;
}

/* Smaller variant used inside the estimator/packages pages */
.ox-quote-band--compact { padding: var(--ox-s-5); }
.ox-quote-band--compact .ox-quote-band__title { font-size: 19px; }
.ox-quote-band--compact .ox-quote-band__sub { font-size: 14.5px; }

/* Tiny inline link used in the hero ("Already have a dealer quote? Compare yours →") */
.ox-hero__quote-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--ox-s-4);
  color: var(--ox-accent);
  font-weight: 600;
  font-size: 14.5px;
}
.ox-hero__quote-link:hover { text-decoration: underline; }