/* ---------- Fonts (self-hosted, see DESIGN.md) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/montserrat-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/montserrat-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/montserrat-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/montserrat-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/montserrat-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/montserrat-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/montserrat-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/montserrat-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/montserrat-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/montserrat-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020;
}

/* ---------- Palette (see DESIGN.md) ---------- */
:root {
  --airwell-blue: #005994;
  --airwell-blue-dark: #003d66;
  --airwell-blue-light: #3e82b3;
  --airwell-blue-pale: #eaf3fa;
  --ink: #16232c;
  --ink-soft: #4a5b66;
  --line: #d8e3ea;
  --surface: #ffffff;
  --page-bg: #f4f8fb;
  --warn: #c0392b;
  --warn-pale: #fbeae8;
  --ok: #1f8a4c;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(0, 40, 66, 0.08);

  /* Tier colors - a deliberate progression from airy/light (Entry) to
     richest (Flagship), applied everywhere a tier name appears (matrix row
     labels, budget table headers, price table, tier reference table) so the
     hierarchy reads visually, not just by name. Flagship is the one place
     that steps outside pure blue - a warm gold accent on deep navy, since
     it's the top of the range and earns a distinct "special" treatment. */
  --tier-entry-bg: #eaf3fa;
  --tier-entry-fg: #16232c;
  --tier-core-bg: #bfe0f2;
  --tier-core-fg: #003d66;
  --tier-premium-bg: #005994;
  --tier-premium-fg: #ffffff;
  --tier-flagship-bg: #062441;
  --tier-flagship-bg-2: #0b3a63;
  --tier-flagship-fg: #e7b84b;

  /* Type scale - every font-size in this file should reference one of
     these rather than a one-off value, so the hierarchy stays consistent. */
  --fs-2xs: 0.6875rem;  /* 11px - budget point sub-labels, tiny radio text */
  --fs-xs: 0.75rem;     /* 12px - eyebrows, progress label, hints, errors */
  --fs-sm: 0.8125rem;   /* 13px - dense table text, secondary UI labels */
  --fs-base: 0.9375rem; /* 15px - inputs, textareas, radio option text */
  --fs-md: 1rem;        /* 16px - field labels, gate copy, running body text */
  --fs-lg: 1.0625rem;   /* 17px - lead paragraphs, section notes */
  --fs-xl: 1.75rem;     /* 28px - section titles */
  --fs-hero: 2.25rem;   /* 36px - cover / thank-you hero titles */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Elements toggled via the `hidden` attribute (gate/app/submitted screens,
   radio option detail fields) must stay hidden even when they also carry a
   class that sets an explicit `display` — an explicit display always beats
   the UA stylesheet's default [hidden]{display:none} at equal specificity. */
[hidden] { display: none !important; }

/* ---------- Tier colors (see the --tier-* tokens above) ----------
   !important because these classes are always applied alongside a more
   specific table selector (table.budget thead th, table.price td.tier-name,
   etc.) that would otherwise win on specificity and hide the tier color -
   same reasoning as .budget-total.over below. */
.tier-entry { background: var(--tier-entry-bg) !important; color: var(--tier-entry-fg) !important; }
.tier-core { background: var(--tier-core-bg) !important; color: var(--tier-core-fg) !important; }
.tier-premium { background: var(--tier-premium-bg) !important; color: var(--tier-premium-fg) !important; }
.tier-flagship {
  background: linear-gradient(135deg, var(--tier-flagship-bg-2), var(--tier-flagship-bg)) !important;
  color: var(--tier-flagship-fg) !important;
}
/* budget-points sub-label defaults to muted grey, unreadable on the dark
   Premium/Flagship header fills - lighten it only in those two contexts. */
.tier-premium .budget-points { color: rgba(255, 255, 255, 0.78) !important; }
.tier-flagship .budget-points { color: rgba(231, 184, 75, 0.75) !important; }

body {
  font-family: "Montserrat", -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  line-height: 1.5;
}
h1, h2, h3 { font-weight: 700; margin: 0; }
p { margin: 0 0 0.75em; }
button { font-family: inherit; }

/* ---------- Access gate ---------- */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--airwell-blue-dark), var(--airwell-blue) 60%);
}
.gate-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.gate-logo { height: 34px; margin-bottom: 22px; }
.gate-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--airwell-blue-light);
  margin-bottom: 6px;
}
.gate-title { font-size: 1.5rem; margin-bottom: 14px; color: var(--airwell-blue-dark); }
.gate-copy { color: var(--ink-soft); font-size: var(--fs-md); }
.gate-copy-small { font-size: var(--fs-sm); margin-top: 18px; }
#gateForm { display: flex; gap: 10px; margin-top: 18px; }
#gateCode {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  font-family: inherit;
  letter-spacing: 0.05em;
}
#gateCode:focus { outline: 2px solid var(--airwell-blue-light); }
.gate-error { color: var(--warn); font-size: var(--fs-sm); margin-top: 12px; }

/* ---------- App shell ---------- */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.app-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-logo { height: 22px; flex-shrink: 0; }
.progress-track {
  flex: 1;
  height: 6px;
  background: var(--airwell-blue-pale);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--airwell-blue);
  transition: width 0.25s ease;
}
.progress-label { font-size: var(--fs-xs); color: var(--ink-soft); white-space: nowrap; }

.content {
  flex: 1;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.app-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.footer-hint { flex: 1; text-align: center; font-size: var(--fs-sm); color: var(--warn); font-weight: 600; }

.btn {
  padding: 12px 26px;
  border-radius: var(--radius);
  border: none;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--airwell-blue); color: #fff; }
.btn-primary:hover { background: var(--airwell-blue-dark); }
.btn-primary:disabled { background: #a9c2d3; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--airwell-blue-dark); }
.btn-ghost:disabled { visibility: hidden; }

/* ---------- Section chrome ---------- */
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--airwell-blue-light);
  margin-bottom: 8px;
}
.section-title { font-size: var(--fs-xl); color: var(--airwell-blue-dark); margin-bottom: 18px; line-height: 1.25; }
.section-note {
  background: var(--airwell-blue-pale);
  border-left: 3px solid var(--airwell-blue);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.section-image {
  width: 100%;
  border-radius: 14px;
  margin: 22px 0;
  display: block;
  max-height: 260px;
  object-fit: cover;
}
.section-image.cover-hero-image { max-height: 420px; }
.section-image.tall { max-height: 420px; }
.info-paragraph { color: var(--ink-soft); font-size: var(--fs-lg); }
.info-paragraph:first-of-type { color: var(--ink); font-weight: 500; }

/* Highlight chips used on the section-divider ("intro") pages to preview
   what the following questions cover, so those pages don't read as just
   one or two sentences. */
.info-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 0;
  list-style: none;
}
.info-highlights li {
  background: var(--airwell-blue-pale);
  color: var(--airwell-blue-dark);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Big standalone partner spotlight on the opening context page - a step up
   from the small cover pill, see renderPartnerSpotlight() in script.js. */
.partner-spotlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 26px;
  margin: 6px auto 26px;
  max-width: 340px;
  box-shadow: var(--shadow);
}
.partner-spotlight-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-soft);
}
.partner-spotlight-logo {
  height: 76px;
  max-width: 260px;
  object-fit: contain;
  object-position: center center;
}
.partner-spotlight-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--airwell-blue-dark);
}

.cover-screen {
  text-align: center;
  padding-top: 6vh;
}
.cover-title, .thanks-title { font-size: var(--fs-hero); line-height: 1.2; }

/* Personalization banner: shown on the cover screen when the access code
   used identifies a specific distributor (see CLIENT_LOGOS in
   survey-config.js). */
.client-welcome {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px 10px 10px;
  margin: 0 auto 28px;
  box-shadow: var(--shadow);
}
.client-welcome-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-soft);
}
.client-welcome-logo {
  height: 42px;
  max-width: 180px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 2px 6px;
}
.client-welcome-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--airwell-blue-dark);
}

/* Thank-you screen: reuses the cover layout, plus a short "what happens
   next" list so the closing page isn't just two lines of text. */
.thanks-next {
  text-align: left;
  max-width: 460px;
  margin: 24px auto 0;
  padding: 0;
  list-style: none;
}
.thanks-next li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-base);
  color: var(--ink-soft);
}
.thanks-next li:first-child { border-top: none; }
.thanks-next .thanks-next-index {
  color: var(--airwell-blue);
  font-weight: 700;
  flex-shrink: 0;
}
.thanks-closing { margin-top: 22px; }

/* ---------- Fields ---------- */
.field { margin-bottom: 26px; }
.field-label { font-weight: 600; margin-bottom: 10px; display: block; font-size: var(--fs-md); }
.field input[type="text"], .field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: inherit;
  background: var(--surface);
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--airwell-blue-light); }

.field-select, .compound-parts select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.field-select:focus, .compound-parts select:focus { outline: 2px solid var(--airwell-blue-light); }

.radio-options { display: flex; flex-direction: column; gap: 10px; }
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
  font-size: var(--fs-base);
}
.radio-option:hover { border-color: var(--airwell-blue-light); }
.radio-option.selected { border-color: var(--airwell-blue); background: var(--airwell-blue-pale); }
.radio-option input { margin-top: 3px; }
.radio-option-detail {
  margin-top: 8px;
  padding-left: 26px;
}
.radio-option-detail input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-base);
}

.multi-text-item { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.multi-text-item span { color: var(--airwell-blue); font-weight: 700; width: 20px; }
.multi-text-item input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-base);
}

.compound-parts { display: grid; gap: 12px; }
.compound-parts .field-label { font-size: var(--fs-sm); font-weight: 500; }

/* ---------- Matrix tables ---------- */
.matrix-wrap { overflow-x: auto; margin-bottom: 8px; }
table.matrix { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.matrix th, table.matrix td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
}
table.matrix thead th {
  background: var(--airwell-blue-pale);
  color: var(--airwell-blue-dark);
  font-weight: 600;
}
table.matrix td.row-label {
  text-align: left;
  font-weight: 600;
  background: #fbfdfe;
  white-space: normal;
}
table.matrix input[type="radio"], table.matrix input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }

/* ---------- Budget feature tables ---------- */
.budget-wrap { overflow-x: auto; }
table.budget { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.budget th, table.budget td {
  border: 1px solid var(--line);
  padding: 9px 10px;
}
table.budget thead th {
  background: var(--airwell-blue-pale);
  color: var(--airwell-blue-dark);
  font-weight: 600;
  text-align: center;
}
table.budget thead th.feature-col { text-align: left; }
table.budget td.feature-name { font-weight: 500; }
table.budget td.feature-cost { text-align: center; color: var(--ink-soft); width: 44px; }
table.budget td.feature-check { text-align: center; width: 56px; }
table.budget input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
table.budget tfoot td {
  font-weight: 700;
  text-align: center;
  background: #fbfdfe;
}
table.budget tfoot td.total-label { text-align: right; color: var(--ink-soft); font-weight: 600; }
.budget-total { transition: color 0.15s, background-color 0.15s; }
.budget-total.over { color: var(--warn); background: var(--warn-pale) !important; }
.budget-total.ok { color: var(--ok); }
.budget-col-header .budget-points { display: block; font-size: var(--fs-2xs); font-weight: 500; color: var(--ink-soft); }

/* ---------- Priority-split table (1.3) ---------- */
table.priority { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); max-width: 640px; }
table.priority th, table.priority td { border: 1px solid var(--line); padding: 10px 14px; }
table.priority thead th { background: var(--airwell-blue-pale); color: var(--airwell-blue-dark); font-weight: 600; text-align: left; }
table.priority th.priority-pct-col { text-align: center; width: 130px; }
.priority-criteria-name { font-weight: 600; }
.priority-criteria-examples { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: 2px; }
td.priority-pct { text-align: center; white-space: nowrap; }
.priority-input {
  width: 56px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--fs-base);
  text-align: right;
}
.priority-pct-sign { margin-left: 4px; color: var(--ink-soft); }
table.priority tfoot td { font-weight: 700; background: #fbfdfe; }
table.priority tfoot td.priority-total-label { text-align: right; color: var(--ink-soft); font-weight: 600; }
td.priority-total { text-align: center; }

/* ---------- Price table ---------- */
table.price { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.price th, table.price td { border: 1px solid var(--line); padding: 10px; vertical-align: top; }
table.price thead th { background: var(--airwell-blue-pale); color: var(--airwell-blue-dark); }
table.price td.tier-name { font-weight: 700; color: var(--airwell-blue-dark); }
table.price .target-price { font-weight: 700; }
.price-correction { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.price-correction label { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); cursor: pointer; }
.price-your-input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; font-family: inherit; font-size: var(--fs-base); }
.price-volume { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.price-volume label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---------- Tier reference table (info sections) ---------- */
table.tier-ref { border-collapse: collapse; width: 100%; margin-top: 18px; font-size: var(--fs-sm); }
table.tier-ref th, table.tier-ref td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
table.tier-ref thead th { background: var(--airwell-blue-dark); color: #fff; }
table.tier-ref td.tier-name { font-weight: 700; color: var(--airwell-blue-dark); }

@media (max-width: 640px) {
  .app-header { padding: 12px 16px; }
  .content { padding: 28px 16px 90px; }
  .app-footer { padding: 12px 16px; }
  .section-title { font-size: 1.375rem; }
  .cover-title, .thanks-title { font-size: 1.75rem; }
  .client-welcome { padding: 8px 16px 8px 8px; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .client-welcome-logo { height: 32px; max-width: 130px; }
  .section-image.cover-hero-image, .section-image.tall { max-height: 260px; }
  .partner-spotlight-logo { height: 56px; max-width: 220px; }
}

/* ---------- Page transition: a small "breeze" on every step change ----------
   A nod to Airwell's own product (moving air) rather than a generic fade.
   Triggered from triggerTransitionEffects() in script.js, which toggles the
   .run class off/on with a forced reflow to restart the animation each time. */
.breeze-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  overflow: hidden;
}
.breeze-line {
  position: absolute;
  left: -35%;
  height: 5px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), rgba(62, 130, 179, 0.7), transparent);
  filter: blur(0.4px);
}
.breeze-line:nth-child(1) { top: 16%; width: 38%; }
.breeze-line:nth-child(2) { top: 40%; width: 55%; }
.breeze-line:nth-child(3) { top: 64%; width: 34%; }
.breeze-line:nth-child(4) { top: 84%; width: 48%; }
.breeze-layer.run .breeze-line:nth-child(1) { animation: breeze-sweep 0.85s ease-out; }
.breeze-layer.run .breeze-line:nth-child(2) { animation: breeze-sweep 0.85s ease-out 0.07s; }
.breeze-layer.run .breeze-line:nth-child(3) { animation: breeze-sweep 0.85s ease-out 0.03s; }
.breeze-layer.run .breeze-line:nth-child(4) { animation: breeze-sweep 0.85s ease-out 0.11s; }
@keyframes breeze-sweep {
  0% { transform: translateX(0) scaleX(0.7); opacity: 0; }
  18% { opacity: 0.9; }
  65% { opacity: 0.4; }
  100% { transform: translateX(220%) scaleX(1.3); opacity: 0; }
}

.content-enter { animation: content-fade-slide 0.4s ease; }
@keyframes content-fade-slide {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .breeze-line, .content-enter { animation: none !important; }
}