/* GENERATED by scripts/build-assets.mjs — do not edit. */
/* Source: _ds/colors_and_type.css + ui_kits/marketing/kit.css + system.css */


/* ===== _ds\guardian-recovery-design-system-36df27b2-6d87-4573-845f-aa6567037977\colors_and_type.css ===== */
/* ============================================================
   Guardian Recovery — Design Tokens
   Colors, typography, spacing, radii, shadows.
   Import at the top of any Guardian Recovery artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

@font-face {
  font-family: 'DM Serif Text';
  src: url('/fonts/DMSerifText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Primary brand ---------- */
  --gr-midnight:   #004860;   /* primary brand — headers, structure */
  --gr-gambodge:   #FFAD00;   /* accent — sunrise, CTAs, highlights */
  --gr-cerulean:   #00728B;   /* secondary blue — links, sub-headers */

  /* ---------- Accents ---------- */
  --gr-pacific:    #5292A7;   /* medium blue — supporting surfaces */
  --gr-prussian:   #083045;   /* deep navy — extra contrast */

  /* ---------- Interface backgrounds ---------- */
  --gr-frost:      #FCFDFF;   /* default canvas, near-white */
  --gr-smoke:      #F2F1F0;   /* warm light gray — section sep */
  --gr-glacier:    #D3E7EE;   /* pale blue — cards, headshot bg */

  /* ---------- Interface accents ---------- */
  --gr-cadet:      #A0B5BD;   /* muted blue-gray — dividers */
  --gr-battleship: #97999B;   /* neutral gray — borders, disabled */

  /* ---------- Text ---------- */
  --gr-cave:       #212322;   /* primary body on light */
  --gr-eerie:      #474646;   /* lead-in / small text on light */
  --gr-crest:      #5292A7;   /* tertiary text (= pacific) */

  /* ---------- Semantic roles (light canvas) ---------- */
  --bg:            var(--gr-frost);
  --bg-alt:        var(--gr-smoke);
  --bg-tint:       var(--gr-glacier);
  --fg:            var(--gr-cave);      /* body */
  --fg-muted:      var(--gr-eerie);     /* lead-in */
  --fg-soft:       var(--gr-crest);     /* tertiary */
  --fg-on-dark:    var(--gr-frost);
  --fg-heading:    var(--gr-midnight);
  --accent:        var(--gr-gambodge);
  --link:          var(--gr-cerulean);
  --border:        var(--gr-cadet);
  --border-strong: var(--gr-battleship);

  /* ---------- Type families ---------- */
  --font-serif:    'DM Serif Text', Georgia, 'Times New Roman', serif;
  --font-sans:     'IBM Plex Sans', Arial, Helvetica, sans-serif;

  /* ---------- Type scale (px, desktop) ---------- */
  --fs-display:    85px;    /* hero H1 */
  --fs-h1:         62px;
  --fs-h2:         48px;
  --fs-h3:         22px;
  --fs-lead:       18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-caption:    12px;
  --fs-overline:   13px;

  /* ---------- Line heights ---------- */
  --lh-tight:      1.1;   /* @kind font */
  --lh-heading:    1.2;   /* @kind font */
  --lh-body:       1.6;   /* @kind font */

  /* ---------- Weights ---------- */
  --fw-thin:       100;   /* @kind font */
  --fw-extralight: 200;   /* @kind font */
  --fw-light:      300;   /* @kind font */
  --fw-regular:    400;   /* @kind font */
  --fw-medium:     500;   /* @kind font */
  --fw-semibold:   600;   /* @kind font */
  --fw-bold:       700;   /* @kind font */

  /* ---------- Spacing scale (8px base) ---------- */
  --space-1:       4px;
  --space-2:       8px;
  --space-3:       12px;
  --space-4:       16px;
  --space-5:       24px;
  --space-6:       32px;
  --space-7:       48px;
  --space-8:       64px;
  --space-9:       80px;
  --space-10:      96px;
  --space-11:      120px;

  /* ---------- Radii ---------- */
  --radius-sm:     4px;    /* buttons, pills */
  --radius-md:     8px;    /* cards, inputs */
  --radius-lg:     12px;
  --radius-xl:     16px;   /* feature cards */
  --radius-photo:  40px;   /* large photography */
  --radius-full:   9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:     0 1px 2px rgba(8, 48, 69, 0.06);
  --shadow-md:     0 4px 12px rgba(8, 48, 69, 0.08);
  --shadow-lg:     0 12px 32px rgba(8, 48, 69, 0.10);
  --shadow-hover:  0 16px 40px rgba(8, 48, 69, 0.14);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2, .7, .2, 1);   /* @kind other */
  --ease-emphatic: cubic-bezier(.25, 1, .3, 1);   /* @kind other */
  --dur-fast:      140ms;   /* @kind other */
  --dur-med:       240ms;   /* @kind other */
  --dur-slow:      400ms;   /* @kind other */

  /* ---------- Layout ---------- */
  --container:     1200px;   /* @kind spacing */
  --section-py:    96px;     /* @kind spacing */
  --section-px:    80px;     /* @kind spacing */
}

/* ============================================================
   Semantic element styles
   Apply these classes directly, or mirror them via component CSS.
   ============================================================ */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
}

.gr-display, h1.gr-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--fg-heading);
  letter-spacing: -0.01em;
}

h1, .gr-h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--fg-heading);
  letter-spacing: -0.005em;
}

h2, .gr-h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg-heading);
}

h3, .gr-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--fg-heading);
}

.gr-lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-muted);
}

p, .gr-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.gr-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}

.gr-overline {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gr-gambodge);
}

a, .gr-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover, .gr-link:hover { color: var(--gr-midnight); }

/* ---------- Buttons ---------- */
.gr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.gr-btn-primary {
  background: var(--gr-gambodge);
  color: var(--gr-midnight);
  border-color: var(--gr-gambodge);
}
.gr-btn-primary:hover { background: #E69C00; border-color: #E69C00; }
.gr-btn-secondary {
  background: transparent;
  color: var(--gr-midnight);
  border-color: var(--gr-midnight);
}
.gr-btn-secondary:hover { background: var(--gr-midnight); color: var(--gr-frost); }
.gr-btn:active { transform: translateY(1px); }

/* ---------- On dark backgrounds ---------- */
.gr-on-dark { color: var(--gr-smoke); }
.gr-on-dark h1, .gr-on-dark h2, .gr-on-dark .gr-h1, .gr-on-dark .gr-h2,
.gr-on-dark .gr-display { color: var(--gr-frost); }
.gr-on-dark .gr-lead { color: var(--gr-frost); }
.gr-on-dark a { color: var(--gr-glacier); }
.gr-on-dark a:hover { color: var(--gr-frost); }


/* ===== _ds\guardian-recovery-design-system-36df27b2-6d87-4573-845f-aa6567037977\ui_kits\marketing\kit.css ===== */
/* Marketing UI kit — shared component CSS.
   Relies on ../../colors_and_type.css tokens. */

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--gr-frost); color: var(--gr-cave); font-family: var(--font-sans); }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 80px 0; }
.section.tight { padding: 56px 0; }
.section.dark { background: var(--gr-midnight); color: var(--gr-smoke); }
.section.smoke { background: var(--gr-smoke); }
.section.glacier { background: var(--gr-glacier); position: relative; }

/* Faint sun / mandala pattern on pale-blue sections (signature texture) */
.section.glacier::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 8% 30%, transparent 0 38px, rgba(0,72,96,.05) 39px 40px, transparent 41px),
    radial-gradient(circle at 8% 30%, transparent 0 70px, rgba(0,72,96,.04) 71px 72px, transparent 73px),
    radial-gradient(circle at 8% 30%, transparent 0 104px, rgba(0,72,96,.035) 105px 106px, transparent 107px),
    repeating-conic-gradient(from 0deg at 8% 30%, rgba(0,72,96,.04) 0deg 3deg, transparent 3deg 12deg);
  -webkit-mask-image: radial-gradient(circle at 8% 30%, #000 0 200px, transparent 280px);
          mask-image: radial-gradient(circle at 8% 30%, #000 0 200px, transparent 280px);
}
.section.glacier > .container { position: relative; z-index: 1; }

.overline { font: 500 12px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gr-gambodge); margin: 0 0 10px; }
.h1 { font: 400 56px/1.1 var(--font-serif); color: var(--gr-midnight); letter-spacing:-.005em; margin: 0 0 16px; }
.h2 { font: 400 42px/1.15 var(--font-serif); color: var(--gr-midnight); letter-spacing:-.003em; margin: 0 0 10px; }
.h3 { font: 600 20px/1.4 var(--font-sans); color: var(--gr-midnight); margin: 0 0 16px; }

/* Short gold divider rule under headings (recurring signature element) */
.gold-divider { width: 64px; height: 4px; background: var(--gr-gambodge); border-radius: 2px; margin: 18px 0 22px; border: 0; }
.center .gold-divider { margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.dark .h1, .dark .h2 { color: var(--gr-frost); }
.dark .h3 { color: var(--gr-frost); }
.dark .overline { color: var(--gr-gambodge); }
.lead { font: 500 16px/1.55 var(--font-sans); color: var(--gr-eerie); }
.dark .lead { color: var(--gr-glacier); }
.body { font: 400 15px/1.6 var(--font-sans); color: var(--gr-cave); }
.dark .body { color: var(--gr-smoke); }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: 600 15px var(--font-sans); padding: 13px 26px; border-radius: 4px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background 140ms, color 140ms, border-color 140ms, transform 140ms; }
.btn-primary { background: var(--gr-gambodge); color: var(--gr-midnight); border-color: var(--gr-gambodge); }
.btn-primary:hover { background: #E69C00; border-color: #E69C00; }
.btn-secondary { background: transparent; color: var(--gr-midnight); border-color: var(--gr-midnight); }
.btn-secondary:hover { background: var(--gr-midnight); color: var(--gr-frost); }
.btn-navy { background: var(--gr-midnight); color: var(--gr-frost); border-color: var(--gr-midnight); }
.btn-navy:hover { background: var(--gr-prussian); border-color: var(--gr-prussian); }
.dark .btn-secondary { color: var(--gr-frost); border-color: var(--gr-frost); }
.dark .btn-secondary:hover { background: var(--gr-frost); color: var(--gr-midnight); }
.btn:active { transform: translateY(1px); }

/* "Learn More" link with circle-arrow (program cards, splits) */
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font: 600 13px var(--font-sans); color: var(--gr-cerulean); text-decoration: none; }
.arrow-link .circ { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--gr-cadet); display: inline-flex; align-items: center; justify-content: center; transition: background 140ms, border-color 140ms, transform 140ms; }
.arrow-link:hover .circ { background: var(--gr-gambodge); border-color: var(--gr-gambodge); transform: translateX(2px); }
.arrow-link:hover { color: var(--gr-midnight); }

.pill-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pill-row .pill { font: 600 14px var(--font-sans); color: var(--gr-midnight); }
.dark .pill-row .pill { color: var(--gr-frost); }
.sun-dot { width: 14px; height: 14px; color: var(--gr-gambodge); flex: none; }

.card { background: var(--gr-frost); border-radius: 12px; padding: 28px; border: 1px solid rgba(8,48,69,.10); box-shadow: var(--shadow-sm); transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms, border-color 240ms; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gr-gambodge); }

/* Circle-outline icon badge for program cards */
.icon-circ { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--gr-cadet); display: inline-flex; align-items: center; justify-content: center; color: var(--gr-midnight); margin-bottom: 16px; transition: border-color 240ms, color 240ms; }
.card:hover .icon-circ { border-color: var(--gr-gambodge); color: var(--gr-cerulean); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-3-text { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

.photo-panel { border-radius: 40px; overflow: hidden; aspect-ratio: 4/5; position: relative; background: radial-gradient(ellipse at 50% 60%, var(--gr-pacific) 0%, var(--gr-glacier) 70%); display: flex; align-items: flex-end; justify-content: center; }
.photo-panel .subject { width: 80%; height: 92%; margin-top: 8%; background: linear-gradient(180deg, rgba(8,48,69,.28), rgba(8,48,69,.55)); border-radius: 40% 40% 0 0 / 30% 30% 0 0; }
.photo-square { border-radius: 24px; overflow: hidden; aspect-ratio: 1; background: radial-gradient(ellipse at 50% 55%, var(--gr-pacific) 0%, var(--gr-glacier) 70%); display: flex; align-items: flex-end; justify-content: center; }
.photo-square .subject { width: 78%; height: 86%; background: linear-gradient(180deg, rgba(8,48,69,.25), rgba(8,48,69,.55)); border-radius: 45% 45% 0 0 / 35% 35% 0 0; }

.trust-stars { color: var(--gr-gambodge); font-size: 18px; letter-spacing: 3px; }

@media (max-width: 820px) {
  .grid-2, .grid-3, .grid-3-text { grid-template-columns: 1fr; gap: 32px; }
  .h1 { font-size: 40px; }
  .h2 { font-size: 32px; }
  .section { padding: 56px 0; }
  .container { padding: 0 20px; }
}


/* ===== system.css ===== */
/* ============================================================
   Guardian Recovery — Modular Landing System
   system.css — landing-page-specific styles layered on top of
   the design system's colors_and_type.css + marketing kit.css.
   Only NEW patterns live here (sticky bar, multi-step form,
   accreditation lockups, VOB band, location list, DKI slots,
   library chrome). Everything else reuses .btn/.card/.h2/etc.
   ============================================================ */

/* ---------- layout helpers reused across modules ---------- */
.lp { background: var(--gr-frost); }
.lp .container-narrow { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.module { position: relative; }          /* neutral top/bottom — no baked page padding */
.eyebrow-gold { color: var(--gr-gambodge); }

/* sun-glyph bullet used in proof rows / lists */
.sun-bullet { width: 15px; height: 15px; flex: none; color: var(--gr-gambodge); }

/* ============================================================
   C5 — Click-to-Call button (number-as-text + icon variants)
   Builds on .btn .btn-primary from kit.css
   ============================================================ */
.btn-call { gap: 11px; padding: 15px 26px; font-size: 16px; min-height: 52px; }
.btn-call .ph-ico { width: 19px; height: 19px; flex: none; }
.btn-call .call-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; gap: 2px; }
.btn-call .call-stack .lab { font: 600 10px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.btn-call .call-stack .num { font: 700 17px/1 var(--font-sans); letter-spacing: .01em; }
.btn-icon-call { width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: var(--radius-sm); justify-content: center; }
.call-text { font: 700 17px var(--font-sans); color: var(--gr-cerulean); text-decoration: none; white-space: nowrap; }
.call-text:hover { color: var(--gr-midnight); }

/* ============================================================
   M1 — Sticky Click-to-Call Bar
   ============================================================ */
.m1-bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--gr-midnight); color: var(--gr-frost);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), padding var(--dur-med) var(--ease-standard);
}
/* Solid Midnight at all times so the phone number is always legible (the hero is light, not dark) */
.m1-bar.is-top { background: var(--gr-midnight); border-bottom-color: rgba(255,255,255,.08); }
.m1-bar.is-scrolled { background: var(--gr-midnight); box-shadow: var(--shadow-md); }
.m1-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 32px; max-width: 1280px; margin: 0 auto; }
.m1-brand { display: flex; align-items: center; gap: 12px; }
.m1-brand img { height: 34px; display: block; }
.m1-tag { font: 500 13px var(--font-sans); color: var(--gr-glacier); border-left: 1px solid rgba(255,255,255,.18); padding-left: 12px; }
.m1-actions { display: flex; align-items: center; gap: 16px; }
.m1-vob { font: 600 14px var(--font-sans); color: var(--gr-glacier); text-decoration: none; white-space: nowrap; }
.m1-vob:hover { color: var(--gr-frost); }
.m1-phone { display: inline-flex; align-items: center; gap: 9px; color: var(--gr-frost); text-decoration: none; font: 700 18px var(--font-sans); }
.m1-phone .ph-ico { width: 18px; height: 18px; color: var(--gr-gambodge); }
.m1-bar.is-top .m1-tag { color: var(--gr-frost); }

/* mobile bottom dock */
.m1-dock { display: none; }
@media (max-width: 768px) {
  .m1-dock {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(252,253,255,.96); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(8,48,69,.12); box-shadow: 0 -6px 24px rgba(8,48,69,.10);
  }
  .m1-dock .btn { width: 100%; justify-content: center; min-height: 50px; }
}

/* ============================================================
   C4 — Trust Badge / Accreditation lockups (3 sizes)
   ============================================================ */
.accred-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.accred {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(8,48,69,.16); border-radius: var(--radius-md);
  padding: 8px 13px; background: var(--gr-frost);
}
.accred .seal { width: 26px; height: 26px; flex: none; color: var(--gr-cerulean); }
.accred .seal.gold { color: var(--gr-gambodge); }
.accred .seal.green { color: #1F8A5B; }
.accred .seal.cerulean { color: var(--gr-cerulean); }
.accred .seal.navy { color: var(--gr-midnight); }
.accred .meta { display: flex; flex-direction: column; line-height: 1.15; }
.accred .meta .n { font: 700 12px var(--font-sans); color: var(--gr-midnight); letter-spacing: .01em; }
.accred .meta .s { font: 500 10px var(--font-sans); color: var(--gr-eerie); letter-spacing: .04em; text-transform: uppercase; }
/* micro size — inline in hero */
.accred-row.micro .accred { border: 0; padding: 0 4px; background: transparent; gap: 7px; }
.accred-row.micro .accred .seal { width: 20px; height: 20px; }
.accred-row.micro .accred .meta .n { font-size: 11px; }
.accred-row.micro .accred .meta .s { display: none; }
.accred-row.micro .accred + .accred { border-left: 1px solid rgba(8,48,69,.14); padding-left: 12px; }
/* footer size — monochrome on dark */
.accred-row.footer .accred { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.accred-row.footer .accred .seal { color: var(--gr-glacier); }
.accred-row.footer .accred .meta .n { color: var(--gr-frost); }
.accred-row.footer .accred .meta .s { color: var(--gr-glacier); }

.rating-line { display: inline-flex; align-items: center; gap: 9px; }
.rating-line .stars { color: var(--gr-gambodge); font-size: 16px; letter-spacing: 2px; }
.rating-line .txt { font: 500 14px var(--font-sans); color: var(--gr-eerie); }
.rating-line .txt b { color: var(--gr-midnight); }

/* insurer logos (grayscale wordmarks — swap for real assets) */
.insurer-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.insurer-logo { font: 700 16px var(--font-sans); color: var(--gr-battleship); letter-spacing: .01em; filter: grayscale(1); opacity: .85; white-space: nowrap; }
.insurer-logo.matched { color: var(--gr-midnight); filter: none; opacity: 1; position: relative; }
.insurer-logo.matched::after { content: "In‑Network"; display: inline-block; margin-left: 8px; font: 700 9px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gr-midnight); background: var(--gr-gambodge); padding: 3px 7px; border-radius: 3px; vertical-align: middle; }

/* ============================================================
   C1 — Multi-Step Lead Form
   ============================================================ */
.c1-form { background: var(--gr-frost); border: 1px solid rgba(8,48,69,.12); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 26px; }
.c1-form .c1-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.c1-title { font: 600 19px var(--font-sans); color: var(--gr-midnight); margin: 0; }
.c1-step-label { font: 600 12px var(--font-sans); color: var(--gr-crest); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.c1-sub { font: 400 13px/1.5 var(--font-sans); color: var(--gr-eerie); margin: 4px 0 16px; }
.c1-progress { height: 6px; border-radius: 99px; background: var(--gr-glacier); overflow: hidden; margin-bottom: 20px; }
.c1-progress > i { display: block; height: 100%; background: var(--gr-gambodge); border-radius: 99px; transition: width var(--dur-med) var(--ease-emphatic); }
.c1-choices { display: grid; gap: 10px; }
.c1-choice {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  min-height: 56px; padding: 12px 16px; border-radius: var(--radius-md);
  border: 1.5px solid var(--gr-cadet); background: var(--gr-frost); cursor: pointer;
  font: 500 15px var(--font-sans); color: var(--gr-cave);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.c1-choice:hover { border-color: var(--gr-cerulean); background: #F7FBFC; }
.c1-choice.sel { border-color: var(--gr-gambodge); background: #FFF8EA; }
.c1-choice .ic { width: 26px; height: 26px; flex: none; color: var(--gr-cerulean); }
.c1-choice .arr { margin-left: auto; width: 18px; height: 18px; color: var(--gr-cadet); flex: none; }
.c1-field { margin-bottom: 14px; }
.c1-field label { display: block; font: 600 12px var(--font-sans); color: var(--gr-midnight); letter-spacing: .03em; margin-bottom: 6px; }
.c1-field input, .c1-field select {
  width: 100%; min-height: 50px; padding: 13px 14px; font: 400 15px var(--font-sans);
  color: var(--gr-cave); background: var(--gr-frost);
  border: 1px solid var(--gr-cadet); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.c1-field input:focus, .c1-field select:focus { outline: none; border-color: var(--gr-cerulean); box-shadow: 0 0 0 3px rgba(0,114,139,.14); }
.c1-field.err input { border-color: #C0492F; box-shadow: 0 0 0 3px rgba(192,73,47,.12); }
.c1-err { font: 500 12px var(--font-sans); color: #C0492F; margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.c1-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.c1-actions .btn { min-height: 50px; }
.c1-back { all: unset; cursor: pointer; font: 600 14px var(--font-sans); color: var(--gr-crest); padding: 8px; }
.c1-back:hover { color: var(--gr-midnight); }
.c1-reassure { display: flex; align-items: center; gap: 7px; font: 400 12px var(--font-sans); color: var(--gr-eerie); margin-top: 14px; }
.c1-reassure svg { width: 14px; height: 14px; color: var(--gr-cerulean); flex: none; }
.c1-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--gr-battleship); font: 500 12px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.c1-or::before, .c1-or::after { content: ""; flex: 1; height: 1px; background: rgba(8,48,69,.12); }
/* success */
.c1-success { text-align: center; padding: 18px 8px; }
.c1-success .tick { width: 62px; height: 62px; border-radius: 50%; background: #E8F4EE; color: #1F8A5B; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.c1-success .tick svg { width: 30px; height: 30px; }
.c1-success h4 { font: 400 26px var(--font-serif); color: var(--gr-midnight); margin: 0 0 8px; }
.c1-success p { font: 400 14px/1.6 var(--font-sans); color: var(--gr-eerie); margin: 0 auto 18px; max-width: 320px; }

/* ============================================================
   PhotoSlot — labeled, swap-ready image placeholder (art direction)
   ============================================================ */
.photo-slot {
  position: relative; overflow: hidden; min-height: 120px;
  background: radial-gradient(ellipse at 50% 32%, var(--gr-pacific), var(--gr-glacier));
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.photo-slot::before {
  content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgba(252,253,255,.75);
  border-radius: inherit; pointer-events: none;
}
.photo-slot .ps-cam {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(8,48,69,.42); color: var(--gr-frost);
}
.ps-inner { position: relative; z-index: 1; padding: 20px; max-width: 90%; }
.ps-ico { color: var(--gr-frost); opacity: .92; margin: 0 auto 11px; display: block; filter: drop-shadow(0 1px 2px rgba(8,48,69,.35)); }
.ps-kind { display: inline-block; font: 700 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gr-prussian); background: var(--gr-gambodge); padding: 3px 9px; border-radius: 99px; margin-bottom: 10px; }
.ps-hint { font: 500 13px/1.45 var(--font-sans); color: var(--gr-frost); margin: 0 0 10px; text-shadow: 0 1px 3px rgba(8,48,69,.45); }
.ps-token { font: 600 11px ui-monospace, "SF Mono", Menlo, monospace; color: var(--gr-frost); background: rgba(8,48,69,.5); padding: 3px 8px; border-radius: 4px; display: inline-block; }
.photo-slot.compact .ps-inner { padding: 8px; }
.photo-slot.compact .ps-ico { margin-bottom: 6px; }
.photo-slot.compact::before { inset: 5px; }
.photo-slot.compact .ps-cam, .photo-slot.compact .ps-token { display: none; }

/* ============================================================
   M7 — Insurance / VOB band
   ============================================================ */
.m7-band { background: var(--gr-glacier); }
.m7-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.m7-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.m7-points li { display: flex; gap: 11px; align-items: flex-start; font: 400 15px/1.5 var(--font-sans); color: var(--gr-cave); }
.m7-points li svg { width: 20px; height: 20px; flex: none; color: var(--gr-cerulean); margin-top: 1px; }

/* ============================================================
   M4 — Value prop bullets
   ============================================================ */
.m4-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.m4-item .icon-circ { margin-bottom: 14px; }
.m4-item h4 { font: 600 17px var(--font-sans); color: var(--gr-midnight); margin: 0 0 7px; }
.m4-item p { font: 400 14px/1.55 var(--font-sans); color: var(--gr-cave); margin: 0; }

/* ============================================================
   M6 — Program / Level-of-care detail
   ============================================================ */
.m6-card { background: var(--gr-frost); border: 1px solid rgba(8,48,69,.12); border-radius: var(--radius-xl); overflow: hidden; display: grid; grid-template-columns: .8fr 1.2fr; }
.m6-photo { position: relative; min-height: 320px; background: radial-gradient(ellipse at 50% 40%, var(--gr-pacific), var(--gr-glacier)); }
.m6-photo .subject { position: absolute; inset: auto 0 0 0; height: 86%; background: linear-gradient(180deg, rgba(8,48,69,.22), rgba(8,48,69,.5)); border-radius: 42% 42% 0 0 / 22% 22% 0 0; margin: 0 8%; }
.m6-body { padding: 38px 40px; }
.m6-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 13px; }
.m6-facts li { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding-bottom: 13px; border-bottom: 1px solid rgba(8,48,69,.08); font: 400 14px/1.5 var(--font-sans); color: var(--gr-cave); }
.m6-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.m6-facts li b { font: 600 12px var(--font-sans); color: var(--gr-crest); letter-spacing: .06em; text-transform: uppercase; align-self: start; padding-top: 2px; }

/* ============================================================
   C6 — NJ location list block (+ adolescent badge)
   ============================================================ */
.c6-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.c6-loc { display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid rgba(8,48,69,.12); border-radius: var(--radius-lg); background: var(--gr-frost); transition: border-color var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); }
.c6-loc:hover { border-color: var(--gr-gambodge); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.c6-meta { display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px; }
.c6-pin { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--gr-glacier); color: var(--gr-midnight); display: inline-flex; align-items: center; justify-content: center; }
.c6-pin svg { width: 16px; height: 16px; }
.c6-loc .nm { font: 600 15px var(--font-sans); color: var(--gr-midnight); margin: 0 0 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c6-loc .ad { font: 400 13px var(--font-sans); color: var(--gr-eerie); margin: 0; }
.badge-adolescent { font: 700 9px var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--gr-prussian); background: var(--gr-gambodge); padding: 2px 7px; border-radius: 99px; }
.c6-note { font: 400 12px/1.5 var(--font-sans); color: var(--gr-eerie); margin: 16px 0 0; display: flex; gap: 7px; align-items: flex-start; }
.c6-note svg { width: 15px; height: 15px; color: var(--gr-cerulean); flex: none; margin-top: 1px; }

/* ============================================================
   Hero (M2a form-first) — extends kit hero patterns
   ============================================================ */
.m2-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--gr-smoke) 0%, var(--gr-frost) 60%); }
.m2-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 52px; align-items: start; }
.m2-grid.form-below { grid-template-columns: 1fr; }
.m2-grid.form-below .m2-formwrap { max-width: 560px; }
.m2-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.m2-h1 { margin: 14px 0 0; }
.m2-lead { margin-top: 16px; max-width: 540px; }
.m2-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.m2-microtrust { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(8,48,69,.10); }

/* expandable form on mobile (form-beside compresses to a toggle) */
.m2-form-toggle { display: none; }

@media (max-width: 900px) {
  .m2-grid { grid-template-columns: 1fr; gap: 30px; }
  .m4-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .m6-card { grid-template-columns: 1fr; }
  .m6-photo { min-height: 220px; }
  .m7-grid { grid-template-columns: 1fr; gap: 30px; }
  .c6-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .m4-grid, .c6-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DKI — dynamic slot annotation (library + demo "reveal slots")
   ============================================================ */
[data-slot] { position: relative; }
.show-slots [data-slot] {
  outline: 1.5px dashed var(--gr-cerulean); outline-offset: 3px;
  border-radius: 3px;
}
.show-slots [data-slot]::after {
  content: "{{" attr(data-slot) "}}";
  position: absolute; top: -9px; left: 0; transform: translateY(-100%);
  font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em;
  color: var(--gr-frost); background: var(--gr-cerulean);
  padding: 3px 6px; border-radius: 3px; white-space: nowrap; z-index: 5;
  pointer-events: none;
}

/* ============================================================
   Library / showcase chrome
   ============================================================ */
.lib { background: #EAEFF1; min-height: 100vh; }
.lib-wrap { max-width: 1320px; margin: 0 auto; padding: 40px 32px 120px; }
.lib-intro { margin-bottom: 8px; }
.lib-kicker { font: 600 12px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gr-gambodge); margin: 0 0 10px; }
.lib-piece { margin-top: 44px; }
.lib-piece-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.lib-tag { font: 700 12px var(--font-sans); letter-spacing: .04em; color: var(--gr-frost); background: var(--gr-midnight); padding: 4px 10px; border-radius: 4px; }
.lib-tag.comp { background: var(--gr-cerulean); }
.lib-name { font: 600 19px var(--font-sans); color: var(--gr-midnight); margin: 0; }
.lib-desc { font: 400 14px/1.5 var(--font-sans); color: var(--gr-eerie); margin: 0; flex: 1 1 260px; }
.lib-frame { background: var(--gr-frost); border: 1px solid rgba(8,48,69,.14); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.lib-frame.pad { padding: 28px; }
.lib-variants { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.lib-state { flex: 1 1 300px; min-width: 280px; }
.lib-state .cap { font: 600 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gr-crest); margin: 0 0 9px; display: flex; align-items: center; gap: 8px; }
.lib-state .cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gr-gambodge); }

/* phone frame for mobile previews */
.phone { width: 360px; flex: none; border: 10px solid var(--gr-prussian); border-radius: 40px; overflow: hidden; background: var(--gr-frost); box-shadow: var(--shadow-lg); position: relative; }
.phone .scroll { height: 720px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; }
.phone .scroll::-webkit-scrollbar { width: 0; }
.phone-label { text-align: center; font: 600 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gr-crest); margin: 0 0 10px; }

/* top app bar (view switch) */
.app-bar { position: sticky; top: 0; z-index: 200; background: var(--gr-prussian); color: var(--gr-frost); }
.app-bar-inner { max-width: 1320px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 20px; }
.app-bar .brand { display: flex; align-items: center; gap: 11px; font: 600 14px var(--font-sans); color: var(--gr-frost); }
.app-bar .brand img { height: 26px; }
.app-bar .brand .sys { color: var(--gr-glacier); font-weight: 400; border-left: 1px solid rgba(255,255,255,.2); padding-left: 11px; }
.app-tabs { display: flex; gap: 4px; margin-left: auto; background: rgba(255,255,255,.07); padding: 4px; border-radius: 99px; }
.app-tab { all: unset; cursor: pointer; padding: 8px 18px; border-radius: 99px; font: 600 13px var(--font-sans); color: var(--gr-glacier); transition: background var(--dur-fast), color var(--dur-fast); white-space: nowrap; }
.app-tab.active { background: var(--gr-gambodge); color: var(--gr-prussian); }
.app-tab:hover:not(.active) { color: var(--gr-frost); }

@media (max-width: 760px) {
  .lib-variants { gap: 32px; }
  .phone { width: 320px; }
  .app-bar-inner { flex-wrap: wrap; gap: 12px; }
  .app-tabs { margin-left: 0; width: 100%; justify-content: center; flex-wrap: wrap; }
}

/* ============================================================
   T3 — Single-Facility: M2c hero · M5 gallery · C3 map
   ============================================================ */
.m2c-hero { position: relative; background: var(--gr-midnight); color: var(--gr-frost); overflow: hidden; }
.m2c-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.m2c-photo { position: relative; min-height: 480px; }
.m2c-copy { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.m2c-loc { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gr-gambodge); }
.m2c-loc svg { width: 16px; height: 16px; }
.m2c-name { font-family: var(--font-serif); font-weight: 400; font-size: 54px; line-height: 1.04; color: var(--gr-frost); margin: 14px 0 0; letter-spacing: -.01em; }
.m2c-sub { font: 500 17px/1.5 var(--font-sans); color: var(--gr-glacier); margin: 16px 0 28px; max-width: 440px; }

/* M5 gallery */
.m5-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 176px; gap: 14px; }
.m5-cell { border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.m5-cell.tall { grid-row: span 2; }
.m5-cell.wide { grid-column: span 2; }
.amenities-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; margin-top: 40px; }
.amenities { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 28px; }
.amenities li { display: flex; gap: 10px; align-items: flex-start; font: 400 15px/1.4 var(--font-sans); color: var(--gr-cave); }
.amenities li svg { width: 18px; height: 18px; color: var(--gr-cerulean); flex: none; margin-top: 2px; }

/* C3 location/map */
.c3 { display: grid; grid-template-columns: 1.25fr .75fr; border: 1px solid rgba(8,48,69,.12); border-radius: var(--radius-xl); overflow: hidden; background: var(--gr-frost); }
.c3-info { padding: 34px 36px; }
.c3-addr { font: 400 15px/1.6 var(--font-sans); color: var(--gr-cave); margin: 14px 0 20px; }
.c3-row { display: flex; align-items: center; gap: 10px; font: 400 14px var(--font-sans); color: var(--gr-eerie); margin-bottom: 12px; }
.c3-row svg { width: 18px; height: 18px; color: var(--gr-cerulean); flex: none; }

@media (max-width: 900px) {
  .m2c-grid { grid-template-columns: 1fr; }
  .m2c-photo { min-height: 280px; order: -1; }
  .m2c-copy { padding: 40px 24px; }
  .m2c-name { font-size: 38px; }
  .m5-gallery { display: flex; overflow-x: auto; grid-auto-rows: none; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .m5-cell { flex: 0 0 80%; height: 230px; scroll-snap-align: center; }
  .m5-cell.tall, .m5-cell.wide { grid-row: auto; grid-column: auto; }
  .amenities-wrap { grid-template-columns: 1fr; gap: 28px; }
  .c3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .amenities { grid-template-columns: 1fr; } }

/* ============================================================
   C7 — Chat CTA: floating launcher + panel + inline link
   ============================================================ */
.chat-link {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font: 600 14px var(--font-sans); color: var(--gr-cerulean);
}
.chat-link:hover { color: var(--gr-midnight); }
.chat-link svg { flex: none; }

.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px; border: 0; cursor: pointer;
  background: var(--gr-gambodge); color: var(--gr-prussian);
  border-radius: 99px; box-shadow: 0 8px 24px rgba(8,48,69,.26);
  font: 700 15px var(--font-sans); letter-spacing: .01em;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.chat-fab:hover { background: #E69C00; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(8,48,69,.3); }
.chat-fab:active { transform: translateY(1px); }
.chat-fab svg { flex: none; }
.chat-fab.hidden { display: none; }

.chat-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 75;
  width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--gr-frost); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(8,48,69,.32); border: 1px solid rgba(8,48,69,.1);
  animation: chat-in var(--dur-med) var(--ease-emphatic);
}
@keyframes chat-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--gr-midnight); color: var(--gr-frost); }
.chat-id { display: flex; align-items: center; gap: 11px; }
.chat-ava { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--gr-gambodge); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chat-name { font: 700 15px var(--font-sans); }
.chat-status { font: 500 11px var(--font-sans); color: var(--gr-glacier); display: flex; align-items: center; gap: 6px; }
.chat-status i { width: 7px; height: 7px; border-radius: 50%; background: #46C77F; box-shadow: 0 0 0 3px rgba(70,199,127,.25); }
.chat-x { all: unset; cursor: pointer; color: var(--gr-glacier); padding: 4px; border-radius: 6px; display: inline-flex; }
.chat-x:hover { color: var(--gr-frost); background: rgba(255,255,255,.1); }
.chat-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--gr-smoke); }
.chat-msg { max-width: 84%; padding: 11px 14px; font: 400 14px/1.5 var(--font-sans); border-radius: 14px; }
.chat-msg.agent { align-self: flex-start; background: var(--gr-frost); color: var(--gr-cave); border: 1px solid rgba(8,48,69,.1); border-bottom-left-radius: 4px; }
.chat-msg.user { align-self: flex-end; background: var(--gr-cerulean); color: var(--gr-frost); border-bottom-right-radius: 4px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chat-quick button { all: unset; cursor: pointer; font: 600 13px var(--font-sans); color: var(--gr-cerulean); background: var(--gr-frost); border: 1px solid var(--gr-cerulean); border-radius: 99px; padding: 8px 14px; }
.chat-quick button:hover { background: var(--gr-cerulean); color: var(--gr-frost); }
.chat-input { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid rgba(8,48,69,.1); background: var(--gr-frost); }
.chat-input input { flex: 1; min-height: 44px; padding: 10px 14px; font: 400 14px var(--font-sans); color: var(--gr-cave); border: 1px solid var(--gr-cadet); border-radius: 99px; }
.chat-input input:focus { outline: none; border-color: var(--gr-cerulean); box-shadow: 0 0 0 3px rgba(0,114,139,.14); }
.chat-send { all: unset; cursor: pointer; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--gr-gambodge); color: var(--gr-prussian); display: inline-flex; align-items: center; justify-content: center; }
.chat-send:hover { background: #E69C00; }
.chat-foot { font: 400 11px var(--font-sans); color: var(--gr-eerie); text-align: center; padding: 9px 12px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--gr-frost); }
.chat-foot svg { color: var(--gr-cerulean); flex: none; }
.chat-foot a { color: var(--gr-cerulean); }

@media (max-width: 768px) {
  .chat-fab { bottom: 86px; right: 14px; padding: 12px 16px; }
  .chat-fab span { display: none; }
  .chat-fab { width: 54px; height: 54px; justify-content: center; padding: 0; }
  .chat-panel { bottom: 80px; right: 8px; left: 8px; width: auto; max-width: none; height: calc(100vh - 180px); }
}

/* ============================================================
   T2 — Content-First: M2b empathy hero
   ============================================================ */
.m2b-hero { background: linear-gradient(180deg, var(--gr-glacier) 0%, var(--gr-frost) 70%); }
.m2b-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.m2b-copy { max-width: 560px; }
.m2b-photo { width: 100%; }
@media (max-width: 900px) {
  .m2b-grid { grid-template-columns: 1fr; gap: 32px; }
  .m2b-photo { order: -1; max-width: 420px; }
}

/* ============================================================
   Production placeholder — "photos coming soon" call-out
   (PhotoSlot publicLabel mode; replaces the internal art-direction
   chrome for facilities that don't have photography yet)
   ============================================================ */
.photo-slot.ps-public { background: linear-gradient(160deg, var(--gr-glacier), #E4EFF3); }
.photo-slot.ps-public::before { border: 0; }
.photo-slot.ps-public .ps-pub-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; }
.photo-slot.ps-public .ps-pub-ico { color: var(--gr-midnight); opacity: .55; }
.photo-slot.ps-public .ps-pub-label { font: 600 12px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gr-midnight); opacity: .75; }
.photo-slot[data-filled] .ps-pub-inner { display: none !important; }

/* C3 map embed wrapper */
.c3-map { position: relative; min-height: 320px; background: var(--gr-glacier); }

/* ============================================================
   Mobile optimization pass (June 2026)
   Stacks the inline-styled grids (M9/M10/M11), trims the sticky
   bar, full-width CTAs, and tightens type + spacing on phones.
   ============================================================ */

/* never allow sideways scroll from long DKI strings / wide rows */
html, body { overflow-x: clip; }

/* fluid type floor — long {{city}}/{{insurer}} headlines wrap safely */
.m2-h1 { overflow-wrap: break-word; }

@media (max-width: 900px) {
  /* M9 process: 4-up → 2-up */
  .m9-steps { grid-template-columns: 1fr 1fr !important; gap: 28px 18px !important; }
  /* M10 FAQ: stack; un-stick the intro column */
  .m10-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .m10-grid > div:first-child { position: static !important; }
  /* M11 footer: 3-col → single column */
  .m11-foot-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

@media (max-width: 768px) {
  /* sticky bar: keep logo + tap-to-call only */
  .m1-tag { display: none; }
  .m1-vob { display: none; }
  .m1-inner { padding: 10px 16px; gap: 12px; }
  .m1-brand img { height: 28px; }
  .m1-phone { font-size: 16px; }
  /* trust band + insurer rows center nicely when wrapped */
  .accred-row, .insurer-row { justify-content: center; }
  .insurer-row { gap: 18px; }
}

@media (max-width: 560px) {
  .h1 { font-size: 34px; }
  .h2 { font-size: 28px; }
  .lead { font-size: 15px; }
  .section { padding: 48px 0; }
  .container { padding: 0 16px; }
  /* hero + final CTAs go full-width for one-thumb tapping */
  .m2-ctas, #final .cta-row { flex-direction: column; align-items: stretch; }
  .m2-ctas .btn, #final .cta-row .btn { width: 100%; justify-content: center; }
  .m2-ctas .call-text { align-self: center; }
  .m9-steps { grid-template-columns: 1fr !important; }
  .m11-cta-card { padding: 36px 20px !important; border-radius: 16px !important; }
  .c1-form { padding: 18px 16px; }
  /* M6 facts: stack the label above the copy */
  .m6-facts li { grid-template-columns: 1fr; gap: 4px; }
  /* footer legal row stacks */
  footer .container > div:last-child { flex-direction: column; }
}

/* ============================================================
   Mobile pass, round 2 — dock fit, fixed header, centered layout
   ============================================================ */

/* bottom dock: columns may never exceed half the bar (nowrap labels were
   pushing the grid wider than the viewport) */
.m1-dock { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.m1-dock .btn { min-width: 0; padding-left: 12px; padding-right: 12px; }
.m1-dock .btn-call .num { font-size: 15px; }

@media (max-width: 768px) {
  /* header pinned to the viewport (fixed beats sticky inside overflow-clipped
     ancestors on some mobile browsers) */
  .m1-bar { position: fixed; top: 0; left: 0; right: 0; }
  body { padding-top: 48px; }
  html { scroll-padding-top: 60px; }

  /* ---- centered / balanced mobile layout ---- */
  .m2-grid > div:first-child, .m2b-copy { text-align: center; }
  .m2-grid .gold-divider, .m2b-copy .gold-divider { margin-left: auto; margin-right: auto; }
  .m2-lead { margin-left: auto; margin-right: auto; }
  .m2-eyebrow { justify-content: center; }
  .m2-ctas { justify-content: center; }
  .m2-microtrust .rating-line { justify-content: center; }
  .pill-row { justify-content: center; }

  .m4-item { text-align: center; }
  .m4-item .icon-circ { margin-left: auto; margin-right: auto; }

  .m7-grid > div:first-child { text-align: center; }
  .m7-grid > div:first-child .gold-divider { margin-left: auto; margin-right: auto; }
  .m7-grid > div:first-child .body { margin-left: auto; margin-right: auto; }
  .m7-points { max-width: 360px; margin-left: auto; margin-right: auto; text-align: left; }
  .m7-grid .c1-or { margin-left: auto; margin-right: auto; }

  .m10-grid > div:first-child { text-align: center; }
  .m10-grid > div:first-child .gold-divider { margin-left: auto; margin-right: auto; }

  .amenities-wrap > div:first-child { text-align: center; }
  .amenities-wrap > div:first-child .gold-divider { margin-left: auto; margin-right: auto; }
  .amenities-wrap > div:first-child .body { margin-left: auto; margin-right: auto; }

  .c3-info { text-align: center; }
  .c3-row { justify-content: center; }
  .c3-info .cta-row { justify-content: center; }

  .grid-2 > div:first-child { text-align: center; }
  .grid-2 .gold-divider { margin-left: auto; margin-right: auto; }

  /* footer: centered brand, columns, legal row */
  .m11-foot-grid { text-align: center; }
  .m11-foot-grid img { margin-left: auto; margin-right: auto; }
  footer .container > div:last-child { align-items: center; text-align: center; }
  footer .container > div:last-child > div { justify-content: center; }
}