/* AZ Fast Bath Shower Builder — mobile-first, scoped to .azfb-app so it never
   collides with the WordPress theme. Palette comes from data/branding.json
   (applied as CSS vars by branding.js); the values below are fallbacks. */

.azfb-app {
  --azfb-primary: #0e2a2c;
  --azfb-accent: #d9501f;
  --azfb-gold: #e0a92e;
  --azfb-sky: #25b0bd;
  --azfb-ink: #1c2024;
  --azfb-cream: #f3ede1;
  --azfb-surface: #ffffff;
  --azfb-line: #e3e6ea;
  --azfb-radius: 14px;
  --azfb-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);

  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--azfb-ink);
  max-width: 1180px;
  margin: 0 auto;
}
.azfb-app *, .azfb-app *::before, .azfb-app *::after { box-sizing: border-box; }

/* Header — slim brand bar, sticky at the very top so it stays with the (also sticky) render. */
.azfb-app { --azfb-header-h: 46px; }
.azfb-header {
  display: flex; align-items: center; gap: 12px;
  height: var(--azfb-header-h, 46px); box-sizing: border-box;
  padding: 0 16px; background: var(--azfb-primary);
  border-radius: var(--azfb-radius) var(--azfb-radius) 0 0;
  position: sticky; top: 0; z-index: 30;
}
.azfb-header__home { display: inline-flex; align-items: center; }
.azfb-header__logo { height: 32px; width: auto; display: block; cursor: pointer; }
.azfb-header__tagline { color: var(--azfb-cream); font-size: 12.5px; opacity: .9; margin-left: auto; }

.azfb-content { padding: 16px; }

/* Buttons */
.azfb-btn { font-size: 15px; font-weight: 700; padding: 13px 18px; border: 0; border-radius: 11px; cursor: pointer; }
.azfb-btn--primary { background: var(--azfb-accent); color: #fff; }
.azfb-btn--primary:hover { filter: brightness(1.05); }
.azfb-btn--ghost { background: var(--azfb-surface); color: var(--azfb-primary); box-shadow: var(--azfb-shadow); }

/* Hero / Start */
.azfb-hero { text-align: center; padding: 24px 8px 8px; }
.azfb-hero h1 { font-size: 28px; margin: 6px 0; color: var(--azfb-primary); }
.azfb-hero__sub { color: #4b5563; max-width: 36ch; margin: 0 auto 18px; }
.azfb-hero__prompt { font-weight: 700; margin: 18px 0 12px; }
/* ── Studio landing ─────────────────────────────────────────────────────────
   Editorial split: welcome copy (left) anchored by two large lifestyle project
   cards (right). Composition, spacing, sizing & hierarchy only — colours, type
   tokens, navigation and the click flow are unchanged. */
.azfb-studio-hero__grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
@media (min-width: 900px) { .azfb-studio-hero__grid { grid-template-columns: 0.82fr 1.18fr; gap: 52px; } }
.azfb-studio-hero__intro { max-width: 42ch; }
.azfb-studio-hero__intro h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.12; margin: 0 0 14px; }
.azfb-studio-hero__intro .azfb-hero__sub { max-width: 40ch; margin: 0 0 16px; font-size: 16px; }
.azfb-hero__rule { width: 46px; height: 3px; border-radius: 3px; background: var(--azfb-gold); margin: 0 0 16px; }
.azfb-studio-hero__intro .azfb-hero__prompt { margin: 0; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--azfb-accent); font-weight: 700; }
.azfb-hero__tagline { margin-top: 34px; }
.azfb-hero__tagline .azfb-brandline { margin: 0; text-align: left; }
.azfb-hero__tagline .azfb-brandline-alt { margin: 5px 0 0; text-align: left; }

/* Project cards — the focal point: large lifestyle render + title + one-line description, subtle hover lift. */
.azfb-choices { display: flex; flex-wrap: wrap; gap: 20px; }
.azfb-choice {
  flex: 1 1 240px; max-width: 320px; display: flex; flex-direction: column; text-align: left; padding: 0;
  overflow: hidden; background: var(--azfb-surface); border: 1px solid var(--azfb-line);
  border-radius: var(--azfb-radius); box-shadow: var(--azfb-shadow); cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.azfb-choice:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14,42,44,.16), 0 6px 14px rgba(14,42,44,.10); border-color: #d8cfc0; }
.azfb-choice__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #e9e4da; }
.azfb-choice__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.azfb-choice:hover .azfb-choice__img img { transform: scale(1.05); }
.azfb-choice__body { padding: 15px 17px 18px; display: flex; flex-direction: column; }
.azfb-choice__label { font-size: 18px; font-weight: 800; color: var(--azfb-primary); }
.azfb-choice__desc { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #5b6570; }
.azfb-choice__cta { margin-top: 12px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--azfb-accent); opacity: .85; transition: opacity .2s; }
.azfb-choice:hover .azfb-choice__cta { opacity: 1; }

/* Layout picker */
.azfb-back { background: none; border: 0; color: var(--azfb-accent); font-weight: 600; cursor: pointer; padding: 4px 0; }
.azfb-picker h2 { color: var(--azfb-primary); }
.azfb-layout-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .azfb-layout-cards { grid-template-columns: 1fr 1fr; } }
.azfb-layout-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 18px; border: 2px solid var(--azfb-line); border-radius: var(--azfb-radius);
  background: var(--azfb-surface); cursor: pointer; box-shadow: var(--azfb-shadow);
}
.azfb-layout-card:hover { border-color: var(--azfb-accent); }
.azfb-layout-card__name { font-weight: 700; color: var(--azfb-primary); }
.azfb-layout-card__dims { font-size: 13px; color: #6b7280; }

/* Builder */
.azfb-builder { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .azfb-builder { flex-direction: row; align-items: flex-start; }
  .azfb-builder__preview { position: sticky; top: calc(var(--azfb-header-h, 46px) + 12px); flex: 1 1 52%; }
  .azfb-builder__controls { flex: 1 1 48%; } }
/* Sticky on ALL sizes so the render stays visible while the option panels scroll (desktop overrides top). */
.azfb-builder__preview { position: sticky; top: var(--azfb-header-h, 46px); z-index: 20; background: var(--azfb-surface); border-radius: var(--azfb-radius); box-shadow: var(--azfb-shadow); padding: 14px; }
/* No forced aspect-ratio: the canvas displays at its intrinsic size, which the
   compositor sets per layout (square for geometric, 4:3 for the photo base). */
.azfb-canvas { width: 100%; height: auto; display: block; border-radius: 10px; background: #c9ced4; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.azfb-builder__layout-name { margin: 10px 2px 0; font-weight: 700; color: var(--azfb-primary); }
.azfb-builder__heading { color: var(--azfb-primary); font-size: 20px; }
.azfb-section__title { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--azfb-accent); margin: 16px 0 8px; }
.azfb-subsection__title { font-size: 12px; font-weight: 600; color: var(--azfb-ink); margin: 10px 0 6px; }
/* Material category section header inside a grouped picker (Euro Series) */
.azfb-matgroup { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--azfb-accent); margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--azfb-line, #e3e6ea); }
.azfb-matgroup:first-child { margin-top: 0; }
/* Special Order inventory notes — subtle, light gray, never distracting. No warning styling. */
.azfb-special-note { font-size: 12px; font-weight: 400; color: #8a94a6; margin: -2px 0 8px; }
.azfb-slot__specialnote { font-size: 12.5px; font-weight: 400; color: #6b7280; margin: 4px 0 0; }

/* Representational disclosure — one understated block beneath the whole builder, all series.
   Muted brand gray, readable on desktop + mobile; no icons, no alarmist styling. */
/* Render caption — lives INSIDE the visualization card (.azfb-builder__preview), directly beneath the
   render, so it stays with the sticky preview as the option panels scroll. Reads like a caption, not fine
   print: small, muted, left-aligned, comfortable leading, no border or callout box. */
.azfb-disclosure { padding-top: 12px; text-align: left; }
/* Short, always-visible friendly line + inline "More info" toggle. */
.azfb-disclosure__short { margin: 0; font-size: 12.5px; line-height: 1.55; color: #566171; }
.azfb-disclosure__toggle { display: inline; margin-left: 6px; padding: 0; border: 0; background: none; color: var(--azfb-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.azfb-disclosure__toggle:hover { opacity: .78; }
.azfb-disclosure__more { margin-top: 10px; }
.azfb-disclosure__more[hidden] { display: none; }
.azfb-disclosure__line { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: #6b7280; }
.azfb-disclosure__line:last-child { margin-bottom: 0; }
/* The closing representative/finalized note — a lighter footnote so the warm invitation above stays primary. */
.azfb-disclosure__fine { font-size: 11.5px; color: #9099a3; margin-top: 12px; }
/* "More info" is a PHONE-ONLY affordance: on desktop there is room to show the full copy, so hide the
   short line + toggle and always reveal the detail (overriding the [hidden] collapse state). */
@media (min-width: 900px) {
  .azfb-disclosure__short { display: none; }
  .azfb-disclosure__more { display: block !important; margin-top: 0; }
}

.azfb-slot { background: var(--azfb-surface); border-radius: 12px; box-shadow: var(--azfb-shadow); padding: 12px; margin-bottom: 10px; }
.azfb-slot__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.azfb-slot__head h4 { margin: 0; font-size: 15px; }
.azfb-slot__chosen { font-size: 12px; color: #6b7280; }
.azfb-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px,1fr)); gap: 10px; }
.azfb-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 4px; background: none; border: 2px solid transparent; border-radius: 10px; cursor: pointer; }
.azfb-swatch:hover { transform: translateY(-1px); }
.azfb-swatch.is-active { border-color: var(--azfb-accent); }
.azfb-swatch__thumb { width: 56px; height: 56px; border-radius: 8px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.azfb-swatch__name { font-size: 11px; text-align: center; line-height: 1.2; color: var(--azfb-sky); }
/* Wall Finish titles (Onyx texture names) use the brand black-green, not the blue used for material names. */
.azfb-swatches--finish .azfb-swatch__name { color: var(--azfb-primary); }
.azfb-swatch__series { font-size: 10px; color: var(--azfb-accent); }

/* Summary */
/* The Review section is the NEXT PHASE (designing → reviewing), not another material category. A generous
   gap plus a subtle centered divider in that gap set it clearly apart from the final "Hardware Finish"
   group above, so the customer feels the transition. CSS-only, minimal, premium. */
.azfb-summary { background: var(--azfb-surface); border-radius: 12px; box-shadow: var(--azfb-shadow); padding: 16px; margin-top: 40px; position: relative; }
.azfb-summary::before { content: ""; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 56px; height: 3px; border-radius: 3px; background: var(--azfb-gold); }
.azfb-summary__title { margin: 0 0 8px; color: var(--azfb-primary); }
.azfb-sum { width: 100%; border-collapse: collapse; }
.azfb-sum td { padding: 8px 6px; border-bottom: 1px solid var(--azfb-line); font-size: 13px; vertical-align: top; }
.azfb-sum__role { color: #6b7280; white-space: nowrap; }
.azfb-sum__series { color: var(--azfb-accent); font-weight: 600; }
/* Design Insight: ONE secondary supporting paragraph. Kept visually lighter than the product table above so
   the customer's selections stay primary — a calm designer's note, not a headline. */
.azfb-design-insight__body { font-size: 14px; line-height: 1.62; color: #4a4538; background: var(--azfb-cream);
  border-left: 3px solid var(--azfb-gold); border-radius: 0 8px 8px 0; padding: 12px 15px; margin: 0; }
/* Understanding Your Selections — preserved per-component product education, kept compact so it informs
   without fatiguing. Secondary to the product table above. */
.azfb-education__list { margin: 6px 0 0; padding: 0; list-style: none; }
.azfb-education__list li { font-size: 13px; line-height: 1.5; color: #4a4538; padding: 7px 0; border-bottom: 1px solid var(--azfb-line); }
.azfb-education__list li:last-child { border-bottom: none; }
.azfb-education__list strong { color: var(--azfb-primary); }
.azfb-sum__qty { white-space: nowrap; text-align: right; }
.azfb-financing { margin: 14px 0; padding: 12px; background: #f0f7f6; border-radius: 10px; }
.azfb-financing strong { color: var(--azfb-primary); }
.azfb-financing p { margin: 4px 0 0; font-size: 13px; color: #4b5563; }
.azfb-summary__cta { width: 100%; }

/* Lead form */
.azfb-lead h2 { color: var(--azfb-primary); font-size: 20px; margin-top: 20px; }
.azfb-qual__q { border: 0; padding: 0; margin: 0 0 14px; }
.azfb-qual__q legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.azfb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.azfb-chip { padding: 9px 14px; border: 1.5px solid var(--azfb-line); border-radius: 999px; background: var(--azfb-surface); cursor: pointer; font-size: 14px; }
.azfb-chip.is-active { border-color: var(--azfb-accent); background: var(--azfb-accent); color: #fff; }
.azfb-photos { margin: 14px 0; }
.azfb-photos h3 { margin-bottom: 4px; }
.azfb-photos__hint, .azfb-muted { color: #6b7280; font-size: 13px; }
.azfb-photos__list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: #4b5563; }
.azfb-contact { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .azfb-contact { grid-template-columns: 1fr 1fr; } }
.azfb-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #6b7280; }
.azfb-field input { font-size: 16px; padding: 11px 12px; border: 1px solid var(--azfb-line); border-radius: 9px; background: #fbfcfd; color: var(--azfb-ink); }
.azfb-field input:focus { outline: 2px solid var(--azfb-accent); border-color: var(--azfb-accent); }
/* Opt-in / consent notice — small, muted, sits just above the submit button. */
.azfb-lead__consent { font-size: 11.5px; line-height: 1.5; color: #8a94a6; margin: 14px 0 0; }
.azfb-lead__submit { width: 100%; margin-top: 12px; }
.azfb-lead__status { font-size: 13px; min-height: 1em; margin-top: 8px; }
.azfb-lead__status.is-error { color: #b42318; }

/* "Your design is ready" — download card at the top of the scheduling step. */
.azfb-design-ready { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--azfb-line); border-radius: 12px; background: #fbfcfd; padding: 14px 16px; margin: 4px 0 18px; }
.azfb-design-ready__text { flex: 1 1 220px; min-width: 0; }
.azfb-design-ready__text h3 { margin: 0 0 2px; font-size: 15px; }
.azfb-design-ready__download { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 480px) { .azfb-design-ready__download { width: 100%; } }

/* Free-text "anything we should know" notes. */
.azfb-notes { margin: 14px 0; }
.azfb-notes h3 { margin-bottom: 4px; }
.azfb-notes__input { width: 100%; box-sizing: border-box; margin-top: 6px; font: inherit; font-size: 16px;
  padding: 11px 12px; border: 1px solid var(--azfb-line); border-radius: 9px; background: #fbfcfd;
  color: var(--azfb-ink); resize: vertical; min-height: 84px; }
.azfb-notes__input:focus { outline: 2px solid var(--azfb-accent); border-color: var(--azfb-accent); }

/* Scheduling heading styled like the configurator's orange section titles (e.g. "COMPONENTS").
   Higher specificity (h2.class) so it overrides the default dark ".azfb-lead h2" heading. */
.azfb-lead h2.azfb-lead__schedhead { color: var(--azfb-accent); font-size: 22px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; margin: 22px 0 8px; }
/* The site theme injects `h2/h3 { font-size: clamp(28px,4vw,56px) !important }`, which balloons this
   heading to ~56px on desktop. Match the !important so our controlled desktop size wins, and keep the
   "Anything we should know?" sub-head clearly smaller than it. */
.azfb-lead .azfb-notes h3 { font-size: 18px !important; }
@media (min-width: 768px) {
  .azfb-lead h2.azfb-lead__schedhead { font-size: 24px !important; }
}
/* The GoHighLevel booking calendar uses GHL's own standard embed (see leadForm.js) and is left at its
   NATURAL size. Do NOT add width / height / position rules to `.azfb-booking iframe`, and do NOT widen the
   column around it — resizing the frame is what made the GHL widget render blank. form_embed.js sizes it. */

/* Fixture package cards */
.azfb-pkgcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px,1fr)); gap: 10px; }
.azfb-pkgcard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; background: var(--azfb-surface); border: 2px solid var(--azfb-line); border-radius: 12px; cursor: pointer; box-shadow: var(--azfb-shadow); transition: border-color .12s, transform .06s; }
.azfb-pkgcard:hover { transform: translateY(-1px); }
.azfb-pkgcard.is-active { border-color: var(--azfb-accent); }
.azfb-pkgcard__imgs { display: flex; align-items: center; justify-content: center; gap: 4px; height: 58px; width: 100%; }
.azfb-pkgcard__head { height: 58px; width: auto; max-width: 64%; object-fit: contain; }
.azfb-pkgcard__valve { height: 42px; width: auto; max-width: 36%; object-fit: contain; }
.azfb-pkgcard__name { font-size: 11px; text-align: center; line-height: 1.2; color: var(--azfb-ink); }

/* Fixture finish swatches */
.azfb-finishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); gap: 10px; }
.azfb-finish { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 5px; background: none; border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: border-color .12s, transform .06s; }
/* COLLISION GUARD: the site's azfb-design-system mu-plugin (components.css) ships an unrelated
   `.azfb-finish` carousel card with a fixed `width:236px`. Because our swatch is a grid item, that stray
   width makes each swatch overflow its ~80px track and overlap its neighbours, so the active orange
   border visually spans ~3 swatches. Scoping to the builder root (.azfb-app) out-specifies the bare
   mu-plugin rule and lets each swatch size to its own grid track. */
.azfb-app .azfb-finish { width: auto; }
.azfb-finish:hover { transform: translateY(-1px); }
.azfb-finish.is-active { border-color: var(--azfb-accent); }
.azfb-finish__sw { width: 52px; height: 52px; border-radius: 8px; background-size: cover; background-position: center; transition: box-shadow .12s; }
.azfb-finish.is-active .azfb-finish__sw { box-shadow: 0 2px 9px rgba(16,24,40,.24); }
.azfb-finish__name { font-size: 11px; text-align: center; line-height: 1.2; }

/* Shower glass cards */
.azfb-glasscards { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px,1fr)); gap: 10px; }
.azfb-glasscard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; background: var(--azfb-surface); border: 2px solid var(--azfb-line); border-radius: 12px; cursor: pointer; box-shadow: var(--azfb-shadow); transition: border-color .12s, transform .06s; }
.azfb-glasscard:hover { transform: translateY(-1px); }
.azfb-glasscard.is-active { border-color: var(--azfb-accent); }
.azfb-glasscard__img { width: 100%; height: 64px; background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: 8px; overflow: hidden; }
.azfb-glasscard__img.is-none { background: repeating-linear-gradient(45deg, #eef1f4, #eef1f4 6px, #e4e8ed 6px, #e4e8ed 12px); }
/* Collection cover thumbnail — fills the image area cleanly, clipped to the card radius. */
.azfb-glasscard__pic { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
/* Collection cards only: a taller portrait tile so the manufacturer hero render reads as an open
   architectural shot rather than a tight close-up. Scoped to the collection row — glass/accessory
   cards keep the compact 64px tile. Card WIDTH, grid, spacing, hover and selected border are unchanged. */
.azfb-glasscards--collection .azfb-glasscard__img { height: auto; aspect-ratio: 4 / 5; }
.azfb-glasscards--collection .azfb-glasscard__pic { object-position: center 48%; }
.azfb-glasscard__name { font-size: 11px; text-align: center; line-height: 1.2; color: var(--azfb-ink); }

/* Confirmation */
.azfb-confirm { text-align: center; padding: 32px 12px; }
.azfb-confirm h2 { color: var(--azfb-primary); }
.azfb-confirm p { max-width: 44ch; margin: 8px auto 20px; color: #4b5563; }
.azfb-confirm__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ============================================================================
   AZ Fast Bath Design Studio — customer-experience layer (journey + portfolio)
   ============================================================================ */

/* Stage 1 — Dream: premium welcome */
.azfb-studio-hero { text-align: left; padding: 44px 4px 28px; }
.azfb-hero__support { color: #4b5563; max-width: 60ch; margin: 0 auto 18px; font-size: 14px; line-height: 1.6; }
.azfb-brandline { color: var(--azfb-accent); font-weight: 800; font-style: italic; letter-spacing: .2px; margin: 22px 0 6px; }
.azfb-brandline--review { text-align: center; margin-top: 16px; }

/* Stage 2 — Discover: collection lifestyle story */
.azfb-collection-story {
  margin: 4px 0 14px; padding: 14px 16px; border-radius: var(--azfb-radius);
  background: var(--azfb-cream); border: 1px solid var(--azfb-line);
}
.azfb-collection-story__tag { margin: 0 0 6px; color: var(--azfb-primary); font-weight: 800; font-size: 14px; }
.azfb-collection-story__style { margin: 0 0 8px; color: #44505a; font-size: 13px; line-height: 1.55; }
.azfb-collection-story__benefits { margin: 0 0 8px; padding-left: 18px; color: #44505a; font-size: 13px; }
.azfb-collection-story__benefits li { margin: 2px 0; }
.azfb-collection-story__for { margin: 0; font-size: 12px; color: #556; }

/* Stage 3 — Design: Designer Insight card */
.azfb-insight {
  margin: 8px 0 4px; padding: 10px 12px; border-left: 3px solid var(--azfb-gold);
  background: #fffaf0; border-radius: 0 8px 8px 0;
}
.azfb-insight__tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--azfb-gold); margin-bottom: 3px; }
.azfb-insight p { margin: 0; font-size: 13px; color: #444; line-height: 1.5; }

/* Stage 4 — Review: celebration */
.azfb-celebrate { text-align: center; padding: 8px 0 4px; }
.azfb-celebrate__title { color: var(--azfb-primary); font-size: 24px; margin: 0; }
.azfb-celebrate__sub { color: #4b5563; margin: 4px 0 0; }
.azfb-designid { margin: 10px auto 0; display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--azfb-primary); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .4px; }
.azfb-designid span { color: var(--azfb-gold); font-weight: 700; margin-right: 6px; }

.azfb-highlights, .azfb-designer-notes, .azfb-selections, .azfb-why, .azfb-investment { margin: 18px 0 0; }
.azfb-highlights__list { margin: 6px 0 0; padding-left: 20px; }
.azfb-highlights__list li { margin: 5px 0; color: #344; line-height: 1.5; }
.azfb-designer-notes__body {
  margin: 6px 0 0; padding: 12px 14px; border-left: 4px solid var(--azfb-primary);
  background: #f0f7f6; border-radius: 0 8px 8px 0; color: #334; line-height: 1.6; font-size: 14px;
}

/* Stage 5 — Learn: Why These Products cards */
.azfb-why__grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
@media (min-width: 560px) { .azfb-why__grid { grid-template-columns: 1fr 1fr; } }
.azfb-why__card { border: 1px solid var(--azfb-line); border-radius: var(--azfb-radius); padding: 12px 14px; background: var(--azfb-surface); }
.azfb-why__title { margin: 0; color: var(--azfb-primary); font-size: 14px; }
.azfb-why__sel { margin: 2px 0 6px; color: var(--azfb-accent); font-weight: 600; font-size: 12px; }
.azfb-why__love { margin: 0 0 6px; font-size: 13px; color: #344; line-height: 1.5; }
.azfb-why__benefits { margin: 0 0 6px; padding-left: 18px; font-size: 12px; color: #455; }
.azfb-why__for { margin: 0; font-size: 12px; color: #556; }

/* Stage 6 — Investment: planning range */
.azfb-investment__range { font-size: 28px; font-weight: 800; color: var(--azfb-primary); text-align: center; margin: 6px 0; }
.azfb-investment__note { font-size: 12px; color: #667; line-height: 1.55; max-width: 60ch; margin: 0 auto; text-align: center; }

/* Stage 8 — confirmation */
.azfb-confirm__designid { display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--azfb-primary); color: #fff; font-weight: 700; font-size: 13px; margin: 6px 0; }
.azfb-confirm__designid span { color: var(--azfb-gold); margin-right: 6px; }

/* Brand mission — secondary slogan "Every Style. Every Stage. Every Home." (minimal, never loud) */
.azfb-brandline-alt { color: #667; font-weight: 600; font-size: 13px; letter-spacing: .3px; margin: 4px 0 6px; text-align: center; }

/* ============================================================================
   Design Studio 2.0 — milestones, design inspiration, consultation transition
   ============================================================================ */

/* Priority 1 — Celebrate Progress: slim milestone bar */
.azfb-milestones { display: flex; gap: 2px; justify-content: space-between; margin: 2px 0 18px; padding: 0; }
.azfb-ms { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; min-width: 0; position: relative; }
.azfb-ms::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: #e7ebee; z-index: 0; }
.azfb-ms:first-child::before { display: none; }
.azfb-ms.is-done::before, .azfb-ms.is-active::before { background: var(--azfb-primary); }
.azfb-ms__dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: #e7ebee;
  color: #8a98a3; border: 2px solid #e7ebee; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.azfb-ms__label { font-size: 9.5px; line-height: 1.2; text-align: center; color: #9aa6af; font-weight: 600; }
.azfb-ms.is-done .azfb-ms__dot { background: var(--azfb-primary); border-color: var(--azfb-primary); color: #fff; }
.azfb-ms.is-done .azfb-ms__label { color: #5a6770; }
.azfb-ms.is-active .azfb-ms__dot { background: var(--azfb-accent); border-color: var(--azfb-accent); color: #fff; box-shadow: 0 0 0 3px rgba(217,80,31,.16); }
.azfb-ms.is-active .azfb-ms__label { color: var(--azfb-primary); font-weight: 700; }
.azfb-milestones--done { margin-bottom: 14px; }

/* Priority 2 — Design Inspiration badge (review) */
.azfb-aesthetic { margin: 10px 0 2px; font-size: 16px; color: var(--azfb-primary); font-weight: 800; }
.azfb-aesthetic span { display: block; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--azfb-gold); font-weight: 800; margin-bottom: 2px; }
.azfb-aesthetic__desc { margin: 0 auto 4px; font-size: 13px; color: #556; max-width: 44ch; }

/* Priority 2 — Why These Selections Work Together (review) */
.azfb-together { margin: 18px 0 0; }
.azfb-together__body { margin: 6px 0 0; font-size: 14px; color: #334; line-height: 1.65;
  padding: 12px 14px; background: #faf6ef; border-left: 4px solid var(--azfb-gold); border-radius: 0 8px 8px 0; }

/* Priority 4 — consultation transition intro (lead screen) */
.azfb-lead-intro { text-align: center; margin: 0 0 18px; padding: 16px 18px; background: var(--azfb-cream); border-radius: var(--azfb-radius); }
.azfb-lead-intro__title { margin: 0; color: var(--azfb-primary); font-size: 20px; }
.azfb-lead-intro__sub { margin: 6px auto 0; color: #445; font-size: 13px; line-height: 1.6; max-width: 56ch; }

/* P2/P4 — material-story note + confidence reassurance (review) */
.azfb-why__love { color: #243; }
.azfb-confidence { list-style: none; margin: 12px 0 0; padding: 0; }
.azfb-confidence li { position: relative; padding: 5px 0 5px 24px; font-size: 12.5px; color: #334; }
.azfb-confidence li::before { content: "✓"; position: absolute; left: 0; top: 5px; color: var(--azfb-primary); font-weight: 800; }