/* Digital Facade Score — white-label EDC theme system.
   Every brand knob is a :root custom property; the values below are the
   neutral defaults (the original Triggers palette). A per-EDC theme.css —
   generated from configs/<edc>.json by scripts/build-config.mjs and loaded
   AFTER this file — overrides them. No brand values elsewhere in this file. */

:root {
  /* palette slots */
  --primary: #00689D;          /* headers, links, panel accents, gate button */
  --primary-deep: #063A53;     /* hero/CTA gradient end */
  --secondary: #198FC7;        /* "Good" band, bars, radar, site checkup */
  --success: #27A84A;          /* "Excellent" band, passed checks */
  --accent: #F99B1C;           /* CTA buttons, highlights, "Needs work" band */
  --accent-contrast: #FFFFFF;  /* text on accent-colored buttons */
  --alert: #ED3693;            /* money number, "Priority fix" band */
  --ink: #15303F;
  --paper: #FFFFFF;
  --mist: #EAECF5;
  --muted: #5B6B78;
  --error: #B00020;
  /* type slots */
  --font-display: "Bebas Neue", sans-serif;
  --font-body: Comfortaa, system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: 0.05em;
  --h1-size: clamp(42px, 8vw, 72px);
  --h2-size: clamp(30px, 5.5vw, 42px);
  --h3-size: 24px;
  --num-ring: 40px;
  --num-money: clamp(44px, 9vw, 64px);
  --num-speed: 44px;
  /* chrome */
  --wordmark-bg: transparent;  /* set when the EDC logo needs a dark chip */
  --radius-lg: 24px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* the hidden attribute must always win, even over display'd classes
   (e.g. the CTA book button when no calendly_url is configured) */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
}
/* hero state: the search view sits on the EDC's primary gradient */
body.on-hero { background: linear-gradient(150deg, var(--primary), var(--primary-deep)); }

h1, h2, h3 {
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); line-height: 1.05; margin: 0 0 12px;
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
a { color: var(--primary); }
.muted { color: var(--muted); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- shell ---------- */
.top {
  max-width: 720px; margin: 0 auto; padding: 20px 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wordmark {
  font-family: var(--font-body); font-weight: 700; font-size: 18px;
  color: var(--primary); text-decoration: none;
  display: inline-flex; align-items: center;
  background: var(--wordmark-bg); border-radius: 10px;
}
/* EDC logo lockup: when --wordmark-bg is set the logo sits in its brand chip
   (mirrors EDC sites whose logo only exists in a light-on-dark variant) */
.wordmark img { display: block; height: 44px; width: auto; padding: 6px 10px; }
body.on-hero .wordmark { color: #fff; }
.wordmark .dot { color: var(--accent); }

/* ---------- header "scan a business" (hidden on the search hero) ---------- */
.scan-again {
  border: 0; cursor: pointer; border-radius: 999px; margin-left: auto;
  background: var(--accent); color: var(--accent-contrast);
  font: 700 12px/1 var(--font-body); padding: 10px 16px;
  transition: transform 150ms var(--ease-out);
}
.scan-again:hover { transform: translateY(-1px); }
.scan-again:active { transform: scale(0.97); }
body.on-hero .scan-again { display: none; }
@media (prefers-reduced-motion: reduce) {
  .scan-again, .scan-again:hover, .scan-again:active { transition: none; transform: none; }
}

/* ---------- language toggle (EN / ES) ---------- */
.lang-toggle {
  display: inline-flex; gap: 2px; padding: 3px; flex: none;
  border-radius: var(--radius-pill);
  background: rgba(21, 48, 63, 0.06);
  border: 1px solid rgba(21, 48, 63, 0.12);
}
.lang-btn {
  min-width: 42px; padding: 6px 13px; border: 0; cursor: pointer;
  background: transparent; border-radius: var(--radius-pill);
  font: 700 13px var(--font-body); letter-spacing: 0.04em;
  color: var(--muted);
  transition: background 150ms ease, color 150ms ease;
}
.lang-btn.active { background: var(--accent); color: var(--accent-contrast); }
.lang-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* invert on the blue hero so it stays legible on the gradient */
body.on-hero .lang-toggle {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
}
body.on-hero .lang-btn { color: rgba(255, 255, 255, 0.9); }
body.on-hero .lang-btn.active { background: #fff; color: var(--primary); }
body.on-hero .lang-btn:focus-visible { outline-color: #fff; }

/* ---------- header actions: Playbook quick link + language toggle ----------
   The link is the blog's front door from the scan page (EDC/chamber staff
   point people at the content without a scan). Same pill geometry as the
   toggle so the two read as one control group. */
.top-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.nav-guides {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 14px 6px 12px;
  border-radius: var(--radius-pill); text-decoration: none;
  font: 700 13px var(--font-body); letter-spacing: 0.02em;
  color: var(--primary);
  background: rgba(21, 48, 63, 0.06);
  border: 1px solid rgba(21, 48, 63, 0.12);
  transition: background 150ms ease, border-color 150ms ease,
              transform 160ms var(--ease-out);
}
.nav-guides svg { width: 16px; height: 16px; flex: none; }
.nav-guides:hover { background: rgba(21, 48, 63, 0.1); }
.nav-guides:active { transform: scale(0.97); }
.nav-guides:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* invert on the dark hero, same as the toggle */
body.on-hero .nav-guides {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
}
body.on-hero .nav-guides:hover { background: rgba(255, 255, 255, 0.24); }
body.on-hero .nav-guides:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .nav-guides, .nav-guides:active { transition: background 150ms ease; transform: none; }
}
/* small screens: icon-only pill (label stays readable to screen readers);
   in the report flow the "Scan a business" button needs the room, and the
   report already links the guides from "Fix these first" */
@media (max-width: 520px) {
  .nav-guides { padding: 6px 10px; gap: 0; }
  .nav-guides .nav-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  body:not(.on-hero) .nav-guides { display: none; }
}
main { max-width: 720px; margin: 0 auto; padding: 0 20px 48px; }
.view { padding-top: clamp(36px, 9vh, 80px); }
.foot {
  max-width: 720px; margin: 0 auto; padding: 24px 20px 40px;
  color: var(--muted); font-size: 13px;
}
body.on-hero .foot, body.on-hero .foot a { color: rgba(255, 255, 255, 0.75); }
.foot a { color: var(--muted); }

/* ---------- footer: "read our blog" strip (Playbook front door) ----------
   A paper card in the report flow; a glass card on the dark hero. Skins with
   a light hero override back to paper in their own sections below. */
.foot-blog {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 22px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: var(--paper); color: var(--ink);
  border: 1px solid rgba(21, 48, 63, 0.12);
  box-shadow: 0 4px 16px rgba(6, 25, 35, 0.05);
}
.foot-blog-text { flex: 1 1 300px; min-width: 0; }
.foot-blog-k {
  margin: 0 0 6px; font: 700 11px/1 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.foot-blog-h {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); font-size: 26px; line-height: 1.1;
  color: var(--ink);
}
.foot-blog-p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.foot-blog .foot-blog-cta { min-height: 48px; padding: 12px 24px; font-size: 15px; flex: none; }
body.on-hero .foot-blog {
  background: rgba(255, 255, 255, 0.08); color: #fff;
  border-color: rgba(255, 255, 255, 0.22); box-shadow: none;
}
body.on-hero .foot-blog-h { color: #fff; }
body.on-hero .foot-blog-p { color: rgba(255, 255, 255, 0.82); }
body.on-hero .foot-blog .foot-blog-cta { background: #fff; color: var(--primary); }

/* ---------- search view (on the gradient) ---------- */
#view-search { color: #fff; }
.eyebrow {
  display: inline-block; padding: 7px 16px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 18px;
}
h1 .pop { color: var(--accent); }
.lede { font-size: 17px; max-width: 56ch; margin: 0 0 28px; }
#view-search .lede { opacity: 0.92; }

.searchbar { display: flex; flex-direction: column; gap: 10px; }
.searchbar input {
  width: 100%; min-height: 56px; padding: 16px 24px;
  background: #fff; color: var(--ink);
  border: 2px solid transparent; border-radius: var(--radius-pill);
  font: 400 16px var(--font-body);
  transition: border-color 150ms ease;
}
.searchbar input:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.searchbar input::placeholder { color: #8A97A0; }
.searchbar button, .btn-accent {
  min-height: 56px; padding: 16px 30px;
  background: var(--accent); color: var(--accent-contrast);
  border: 0; border-radius: var(--radius-pill);
  font: 700 16px var(--font-body); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 160ms var(--ease-out), filter 150ms ease;
}
.searchbar button:active, .btn-accent:active, .candidates button:active { transform: scale(0.97); }
.searchbar button:focus-visible, .btn-accent:focus-visible,
.candidates button:focus-visible, .linklike:focus-visible,
.gate-form button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
#view-search button:focus-visible { outline-color: #fff; }
.searchbar button[disabled], .btn-accent[disabled] { opacity: 0.6; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .searchbar button:hover, .btn-accent:hover, .gate-form button:hover { filter: brightness(1.07); }
}
.trust { font-size: 13px; margin-top: 16px; opacity: 0.8; }

/* ---------- "why facade" manifesto (hero, below the search) ---------- */
.facade-note {
  margin-top: clamp(48px, 9vh, 84px); max-width: 58ch;
  padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.facade-note h2 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 6px; }
.facade-sub {
  color: var(--accent); font-weight: 700; font-size: 17px; margin: 0 0 12px;
}
.facade-p { font-size: 15px; line-height: 1.7; opacity: 0.88; margin: 0 0 20px; }
.btn-ghost {
  min-height: 48px; padding: 12px 26px; cursor: pointer;
  background: transparent; color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-pill);
  font: 700 15px var(--font-body);
  transition: background 150ms ease, border-color 150ms ease,
              transform 160ms var(--ease-out);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.btn-ghost:active { transform: scale(0.97); }
.btn-ghost:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .btn-ghost, .btn-ghost:active { transition: background 150ms ease; transform: none; }
}
.field-error { color: var(--error); font-size: 14px; margin: 10px 4px 0; }
#view-search .field-error { color: #FFD9DE; }

/* ---------- pick view ---------- */
.candidates { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; }
.candidates button {
  width: 100%; text-align: left; padding: 16px 22px; min-height: 56px;
  background: #fff; color: var(--ink);
  border: 2px solid var(--mist); border-radius: var(--radius-lg);
  font: 400 16px var(--font-body); cursor: pointer;
  transition: border-color 150ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .candidates button:hover { border-color: var(--secondary); }
}
.candidates .c-name { font-weight: 700; display: block; }
.candidates .c-addr { color: var(--muted); font-size: 14px; }

/* live autocomplete menu — Elsa-first suggestions under the search box */
.search-wrap { position: relative; }
.ac-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  list-style: none; margin: 0; padding: 6px; text-align: left;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 20px 54px rgba(6, 25, 35, 0.32);
  max-height: 340px; overflow-y: auto;
}
.ac-menu li { margin: 0; }
.ac-item {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 14px;
  padding: 12px 16px; color: var(--ink); font: 400 16px var(--font-body);
  display: flex; flex-direction: column; gap: 3px;
}
.ac-item:hover, .ac-item.active { background: var(--mist); }
.ac-item .c-row { display: flex; align-items: center; gap: 10px; }
.ac-item .c-name { font-weight: 700; }
.ac-item .c-tag {
  font: 700 11px var(--font-body); letter-spacing: 0.08em;
  color: var(--accent); border: 1.5px solid var(--accent);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.ac-item .c-addr { color: var(--muted); font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .ac-menu { animation: ac-in 140ms var(--ease-out); }
  @keyframes ac-in { from { opacity: 0; transform: translateY(-6px); } }
}

.linklike {
  background: none; border: 0; color: var(--primary); font: 400 15px var(--font-body);
  cursor: pointer; padding: 12px 4px; text-decoration: underline;
}

/* ---------- loading view: radar + polaroids ---------- */
.scan-stage {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; /* photos drop below the radar on narrow screens */
  margin: 26px 0 10px; min-height: 300px;
}
.radar { position: relative; width: 210px; height: 210px; flex: 0 0 auto; }
.radar svg { width: 100%; height: 100%; }
.radar .rr { fill: none; stroke: var(--mist); stroke-width: 1.5; }
.radar-sweep {
  position: absolute; inset: 5px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--secondary) 45%, transparent),
    color-mix(in srgb, var(--secondary) 12%, transparent) 55deg, transparent 80deg);
  animation: spin 2.6s linear infinite;
}
.radar-you {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* polaroid stack — the business's real Google photos */
.polaroids { position: relative; flex: 1 1 280px; min-width: 0; height: 290px; }
.polaroid {
  position: absolute; left: 50%; top: 50%;
  width: min(225px, 56vw); padding: 8px 8px 30px;
  background: #fff; border: 1px solid #E3E6EF;
  box-shadow: 0 10px 22px rgba(21, 48, 63, 0.18);
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  opacity: 1;
  transition: transform 500ms var(--ease-out), opacity 400ms ease;
}
.polaroid img { display: block; width: 100%; height: 160px; object-fit: cover; background: var(--mist); }
.polaroid .cap {
  position: absolute; left: 0; right: 0; bottom: 7px; text-align: center;
  font: 700 11px var(--font-body); color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.polaroid.deal-in { transform: translate(-50%, -110%) rotate(0deg); opacity: 0; }
.polaroid.empty { border-style: dashed; border-color: #C6CCDB; box-shadow: none; }
.polaroid.empty .ph { display: grid; place-content: center; height: 160px; background: var(--mist); color: var(--muted); font-size: 26px; }

/* small fan of photos in the report header */
.polaroids-head { display: none; }
@media (min-width: 700px) {
  .polaroids-head { display: block; width: 240px; height: 195px; flex: 0 0 auto; }
  .polaroids-head .polaroid { width: 175px; padding-bottom: 22px; }
  .polaroids-head .polaroid img { height: 122px; }
  .polaroids-head .cap { display: none; }
}
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.steps li { color: var(--muted); padding-left: 30px; position: relative; transition: color 200ms ease; }
.steps li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border: 2px solid var(--mist); border-radius: 50%;
  transition: border-color 200ms ease, background 200ms ease;
}
.steps li.done { color: var(--ink); }
.steps li.done::before {
  background: var(--success); border-color: var(--success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 14px; background-position: center; background-repeat: no-repeat;
}

/* ---------- report ---------- */
.score-head { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.ring-wrap { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.ring { width: 132px; height: 132px; transform: rotate(-90deg); }
.ring-track, .ring-fill {
  fill: none; stroke-width: 11; stroke-linecap: round;
  cx: 60px; cy: 60px; r: 52px;
}
.ring-track { stroke: var(--mist); }
.ring-fill {
  stroke: var(--score-color, var(--secondary));
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 900ms var(--ease-out);
}
.ring-number {
  position: absolute; inset: 0; display: grid; place-content: center;
  font: var(--display-weight) var(--num-ring)/1 var(--font-display);
}
.ring-number small { font: 700 12px var(--font-body); color: var(--muted); text-align: center; }
.score-meta { min-width: 220px; flex: 1; }
.chip {
  display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill);
  font: 700 13px var(--font-body); color: #fff;
  background: var(--score-color, var(--secondary)); margin-bottom: 10px;
}
#biz-name { margin-bottom: 4px; }

/* soft geofence note — informative, never alarming */
.geo-note {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
  border-left: 4px solid var(--secondary);
  background: color-mix(in srgb, var(--secondary) 8%, var(--paper));
  color: var(--muted); font-size: 14px;
}

/* strict-geofence stop card (view-blocked) */
.geo-blocked { max-width: 560px; display: grid; gap: 14px; justify-items: start; }
.geo-blocked h2 { margin: 0; }
.geo-blocked .lede { margin: 0; }
#blocked-status { margin: 0; font-weight: 700; color: var(--secondary); }

/* certificate row (90+ reports) */
.cert-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.cert-btn { min-height: 48px; padding: 12px 24px; font-size: 15px; border: 0; cursor: pointer; }

.panel {
  background: #fff; border: 1px solid var(--mist);
  border-top: 4px solid var(--primary);
  border-radius: var(--radius-lg); padding: 26px 26px 24px; margin: 16px 0;
  box-shadow: 0 2px 14px rgba(21, 48, 63, 0.06);
}

/* money panel — the honest version of owner.com's loss number */
.money { border-top-color: var(--alert); }
.money-line { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 16px; flex-wrap: wrap; }
.money-num {
  font: var(--display-weight) var(--num-money)/1 var(--font-display);
  color: var(--alert); letter-spacing: 0.02em;
}
.money-per { color: var(--muted); font-size: 14px; line-height: 1.45; }
.money-slider { display: block; font-size: 14px; color: var(--muted); max-width: 380px; }
.money-slider b { color: var(--ink); }
.money-slider input {
  display: block; width: 100%; margin-top: 10px; accent-color: var(--primary);
  min-height: 28px;
}
.money-how { margin-top: 16px; font-size: 14px; }
.money-how summary { cursor: pointer; color: var(--primary); font-weight: 700; }
.money-how ul { margin: 12px 0 8px; padding-left: 20px; color: var(--muted); display: grid; gap: 6px; }
.small { font-size: 13px; }

/* website checkup */
.sitecheck { border-top-color: var(--secondary); }
.speed-row {
  display: flex; align-items: center; gap: 20px;
  margin: 14px 0 10px; flex-wrap: wrap;
}
.speed-dial {
  display: grid; justify-items: center; gap: 2px;
  padding: 14px 22px; border-radius: 16px;
  background: color-mix(in srgb, var(--secondary) 6%, var(--paper));
}
.speed-num {
  font: var(--display-weight) var(--num-speed)/1 var(--font-display);
  color: var(--speed-color, var(--muted));
}
.speed-dial.loading .speed-num { animation: pulse-fade 1.2s ease-in-out infinite; }
@keyframes pulse-fade { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .speed-dial.loading .speed-num { animation: none; opacity: 0.6; }
}
.speed-dial small { color: var(--muted); font-size: 12px; }
.speed-cap {
  font: 700 9px/1.3 var(--font-body); color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
}
.speed-row p { flex: 1; min-width: 200px; margin: 0; }

/* offer cards inside the CTA */
.offers { display: grid; gap: 12px; margin: 18px 0; }
@media (min-width: 560px) { .offers { grid-template-columns: 1fr 1fr; } }
.offer {
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px; padding: 16px 18px;
}
.offer h4 {
  font: var(--display-weight) 20px var(--font-display); letter-spacing: var(--display-tracking);
  color: var(--accent); margin: 0 0 6px;
}
.offer p { color: rgba(255, 255, 255, 0.85); font-size: 14px; margin: 0; }
.cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta-alt { color: rgba(255, 255, 255, 0.85); font-size: 14px; }

/* benchmark map: rivals plotted at real bearings/distances */
.bench-map {
  position: relative; width: min(300px, 100%); height: 240px;
  margin: 18px auto 6px;
}
.bench-map svg { width: 100%; height: 100%; }
.bench-map .field { fill: color-mix(in srgb, var(--secondary) 10%, var(--paper)); }
.bench-map .rr { fill: none; stroke: color-mix(in srgb, var(--secondary) 32%, var(--paper)); stroke-width: 1.5; }
.bench-map .rr-x { stroke: color-mix(in srgb, var(--secondary) 18%, var(--paper)); stroke-width: 1; }
.bench-map .dot { stroke: #fff; stroke-width: 2.5; }
.bench-map .dot-label { font: 700 9px var(--font-body); fill: var(--muted); }
.bench-map .map-n { font: 700 11px var(--font-body); fill: var(--muted); }
.bench-map .you-pulse { animation: pulse 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.bench-map .map-cap {
  position: absolute; right: 4px; bottom: 0;
  font: 700 10px var(--font-body); color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* benchmark */
.bench-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.bench-list li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; font-size: 15px; }
.bench-list .bar {
  grid-column: 1 / -1; height: 6px; border-radius: 3px;
  background: var(--mist); overflow: hidden;
}
.bench-list .bar i { display: block; height: 100%; background: var(--secondary); border-radius: 3px; }
.bench-list li.you { font-weight: 700; }
.bench-list li.you .bar i { background: var(--accent); }
.bench-list li.you .b-name { color: var(--accent); }

/* gate */
.gate-zone { position: relative; }
.gated.locked {
  filter: blur(10px); pointer-events: none; user-select: none;
  max-height: 560px; overflow: hidden; /* don't scroll through miles of blur */
}
.gate {
  position: absolute; inset: 0; margin: 16px 0;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border-top-color: var(--accent);
}
.gate-zone.open .gate { display: none; }
.gate-zone.open .gated { filter: none; pointer-events: auto; user-select: auto; max-height: none; }
.gate-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.gate-form input {
  min-height: 52px; padding: 14px 22px;
  background: #fff; color: var(--ink);
  border: 2px solid var(--mist); border-radius: var(--radius-pill);
  font: 400 16px var(--font-body);
}
.gate-form input:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.gate-form button {
  min-height: 52px; padding: 14px 26px;
  background: var(--primary); color: #fff; border: 0;
  border-radius: var(--radius-pill); font: 700 15px var(--font-body);
  cursor: pointer; transition: transform 160ms var(--ease-out), filter 150ms ease;
}
.gate-form button:active { transform: scale(0.97); }
.gate-form button[disabled] { opacity: 0.6; cursor: default; }

/* checkpoints */
.checkpoints { list-style: none; margin: 8px 0 0; padding: 0; }
.checkpoints li {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--mist); align-items: start;
}
.checkpoints li:last-child { border-bottom: 0; }
.checkpoints .mark { font-weight: 700; text-align: center; }
.checkpoints li.pass .mark { color: var(--success); }
.checkpoints li.part .mark { color: var(--accent); }
.checkpoints li.fail .mark { color: var(--error); }
.checkpoints .cp-label { font-weight: 700; }
.checkpoints .cp-detail { color: var(--muted); font-size: 14px; display: block; }
.checkpoints .cp-flag { color: var(--accent); font-size: 13px; font-weight: 700; }
.checkpoints .pts { color: var(--muted); font-size: 14px; white-space: nowrap; }

/* fixes */
.fixes { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 14px; }
.fixes b { display: block; font-weight: 700; color: var(--ink); }
.fixes span { color: var(--muted); font-size: 15px; }
.fixes .fix-guide {
  display: inline-block; margin-top: 4px;
  color: var(--primary); font-size: 14px; font-weight: 700;
}
/* personalized "How to fix this" walkthrough (details/summary) */
.fix-how { margin-top: 8px; }
.fix-how summary {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  list-style: none; color: var(--primary); font-weight: 700; font-size: 14px;
  -webkit-user-select: none; user-select: none;
}
.fix-how summary::-webkit-details-marker { display: none; }
.fix-how summary::before {
  content: "▸"; font-size: 12px; color: var(--accent);
  transition: transform 160ms var(--ease-out); transform-origin: center;
}
.fix-how[open] summary::before { transform: rotate(90deg); }
.fix-how .fh-pts {
  color: var(--muted); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.fix-how .fh-body {
  margin: 10px 0 4px; padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--mist) 45%, var(--paper));
  border-radius: 0 10px 10px 0;
}
.fix-how[open] .fh-body { animation: fh-rise 240ms var(--ease-out) both; }
@keyframes fh-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fix-how[open] .fh-body { animation: none; }
  .fix-how summary::before { transition: none; }
}
.fix-how .fh-now { margin: 0 0 10px; font-size: 14px; }
.fix-how .fh-now b { display: inline; color: var(--primary-deep); font-size: 13px;
  letter-spacing: 0.02em; text-transform: uppercase; }
.fix-how .fh-now span { font-size: 14px; }
.fix-how .fh-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.fix-how .fh-steps li { font-size: 14.5px; }
.fix-how .fh-steps b { display: inline; color: var(--ink); }
.fix-how .fh-steps span { color: var(--muted); font-size: 14.5px; }
.fixes-more { margin: 18px 0 0; }
.fixes-more a { color: var(--primary); font-weight: 700; }
/* an EDC without website help drops the second offer card — let the
   remaining one take the full row */
.offers .offer:only-child { grid-column: 1 / -1; }
#view-report .panel:nth-of-type(2) { border-top-color: var(--success); }

/* cta — matches the city-site .card-cta */
.cta {
  background: linear-gradient(150deg, var(--primary), var(--primary-deep));
  border-top: 4px solid var(--accent); color: #fff;
}
.cta p { color: rgba(255, 255, 255, 0.88); margin: 0 0 18px; }

/* website-help anchor — only rendered when the business has no real site */
.cta p.upsell {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 13px 16px;
  color: #fff; font-weight: 600; font-size: 15px;
}

@media (min-width: 560px) {
  .searchbar { flex-direction: row; }
  .searchbar input { flex: 1; }
  /* email + phone share a row; the button takes the full row below */
  .gate-form { flex-direction: row; flex-wrap: wrap; }
  .gate-form input { flex: 1 1 220px; }
  .gate-form button { flex: 1 1 100%; }
}

/* checkpoint rows rise in when the gate opens */
.gate-zone.open .checkpoints li {
  animation: rise 320ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ring-fill { transition: none; }
  .radar-sweep { animation: none; opacity: 0.4; }
  .bench-map .you-pulse { animation: none; }
  .polaroid { transition: opacity 200ms ease; }
  .gate-zone.open .checkpoints li { animation: none; }
  .searchbar button, .btn-accent, .gate-form button, .candidates button { transition: filter 150ms ease; }
}

/* =========================================================================
   layout: "civic" — config-selected skin (theme.layout in configs/<edc>.json;
   the class is injected by the generated edc-config.js). Light, flat,
   government-calm: the search hero sits on paper instead of the brand
   gradient, the secondary (data) color carries hero accents, and corners
   tighten. Configs without theme.layout keep the classic dark hero — the
   rules below never match them. First instance: Weslaco "Get Found".
   ========================================================================= */
body.layout-civic { --radius-lg: 14px; }
body.layout-civic.on-hero { background: var(--paper); }
body.layout-civic #view-search { color: var(--ink); }
body.layout-civic.on-hero .wordmark { color: var(--primary); }
body.layout-civic.on-hero .lang-toggle {
  background: rgba(21, 48, 63, 0.06);
  border-color: rgba(21, 48, 63, 0.12);
}
body.layout-civic.on-hero .lang-btn { color: var(--muted); }
body.layout-civic.on-hero .lang-btn.active { background: var(--accent); color: var(--accent-contrast); }
body.layout-civic.on-hero .lang-btn:focus-visible { outline-color: var(--accent); }
body.layout-civic.on-hero .foot,
body.layout-civic.on-hero .foot a { color: var(--muted); }
body.layout-civic.on-hero .nav-guides {
  color: var(--primary);
  background: rgba(21, 48, 63, 0.06);
  border-color: rgba(21, 48, 63, 0.12);
}
body.layout-civic.on-hero .nav-guides:hover { background: rgba(21, 48, 63, 0.1); }
body.layout-civic.on-hero .nav-guides:focus-visible { outline-color: var(--accent); }
body.layout-civic.on-hero .foot-blog {
  background: var(--paper); color: var(--ink);
  border-color: rgba(21, 48, 63, 0.12); box-shadow: 0 4px 16px rgba(6, 25, 35, 0.05);
}
body.layout-civic.on-hero .foot-blog-h { color: var(--ink); }
body.layout-civic.on-hero .foot-blog-p { color: var(--muted); }
body.layout-civic.on-hero .foot-blog .foot-blog-cta { background: var(--accent); color: var(--accent-contrast); }

/* hero, on paper */
body.layout-civic .eyebrow { background: var(--mist); color: var(--secondary); }
body.layout-civic h1 .pop { color: var(--secondary); }
body.layout-civic #view-search .lede { opacity: 1; color: var(--muted); }
body.layout-civic .trust { opacity: 1; color: var(--muted); }
body.layout-civic .searchbar input,
body.layout-civic .searchbar button,
body.layout-civic .btn-accent,
body.layout-civic .btn-ghost { border-radius: var(--radius-lg); }
body.layout-civic .searchbar input {
  border-color: var(--mist);
  box-shadow: 0 10px 30px rgba(21, 48, 63, 0.08);
}
body.layout-civic #view-search button:focus-visible { outline-color: var(--accent); }
body.layout-civic #view-search .field-error { color: var(--error); }

/* manifesto, on paper */
body.layout-civic .facade-note { border-top-color: var(--mist); }
body.layout-civic .facade-sub { color: var(--secondary); }
body.layout-civic .facade-p { opacity: 1; color: var(--muted); }
body.layout-civic .btn-ghost {
  color: var(--primary-deep);
  border-color: rgba(21, 48, 63, 0.35);
}
body.layout-civic .btn-ghost:hover { background: var(--mist); border-color: var(--primary-deep); }
body.layout-civic .btn-ghost:focus-visible { outline: 3px solid var(--accent); }

/* program lockup: initiative name joins the EDC seal inside the brand chip
   (only rendered for civic-layout configs; assumes a dark wordmark_bg chip) */
.wordmark .program-tag {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  letter-spacing: 0.02em; color: #fff;
  padding: 0 14px 0 12px; margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

/* =========================================================================
   layout: "split" — config-selected skin (theme.layout: "split"). An
   Owner-style demo composition: brand-color product panel on the left
   (score-card visual, headline, benefit bullets), clean white action panel
   on the right (lockup, form heading, search, trust line, partner badges).
   The panel wrappers + extras are injected by app.js applyBranding().
   Configs without theme.layout keep the classic dark hero.
   ========================================================================= */
body.layout-split { --radius-lg: 14px; }
body.layout-split.on-hero { background: var(--paper); }

/* header: brand lockup floats over the white panel on its own row, the
   Playbook link + toggle group in the corner above it (the group is wider
   than the toggle alone, so sharing a row with the centered lockup would
   collide below ~1370px) */
body.layout-split.on-hero .top {
  position: absolute; top: 26px; right: 0; width: 50%; max-width: none;
  margin: 0; padding: 0 20px; justify-content: center; z-index: 4;
}
body.layout-split.on-hero .top-actions {
  position: absolute; top: 0; right: 26px; z-index: 5;
}
body.layout-split.on-hero .wordmark { margin-top: 58px; }
body.layout-split.on-hero .lang-toggle {
  background: rgba(21, 48, 63, 0.06);
  border-color: rgba(21, 48, 63, 0.12);
}
body.layout-split.on-hero .lang-btn { color: var(--muted); }
body.layout-split.on-hero .lang-btn.active { background: var(--accent); color: var(--accent-contrast); }
body.layout-split.on-hero .lang-btn:focus-visible { outline-color: var(--accent); }
body.layout-split.on-hero .nav-guides {
  color: var(--primary-deep);
  background: rgba(21, 48, 63, 0.06);
  border-color: rgba(21, 48, 63, 0.12);
}
body.layout-split.on-hero .nav-guides:hover { background: rgba(21, 48, 63, 0.1); }
body.layout-split.on-hero .nav-guides:focus-visible { outline-color: var(--accent); }

body.layout-split.on-hero main { max-width: none; padding: 0; }
body.layout-split.on-hero #view-search {
  display: grid; grid-template-columns: 1fr 1fr; padding-top: 0; color: #fff;
}
body.layout-split .facade-note { display: none; }

/* left: brand panel (tonal gradient — same-hue steps only) */
body.layout-split.on-hero .split-left {
  background: linear-gradient(165deg, var(--primary), var(--primary-deep));
  min-height: 100vh;
  padding: clamp(28px, 4vh, 52px) clamp(28px, 4.5vw, 72px);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
body.layout-split .split-left h1 { font-size: clamp(28px, 3.2vw, 42px); }
body.layout-split .split-left h1 .pop { color: #fff; }
body.layout-split .split-left .lede { font-size: 16px; opacity: 0.92; margin: 0; }

body.layout-split .split-bullets {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; gap: 16px; max-width: 58ch;
}
body.layout-split .split-bullets li { display: flex; gap: 12px; align-items: flex-start; }
body.layout-split .split-bullets p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
body.layout-split .split-bullets b { color: #fff; }
body.layout-split .split-bullets .sv-check {
  flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: #fff; color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 13px/1 var(--font-body);
}

/* the floating score-card visual */
body.layout-split .split-visual { display: flex; justify-content: center; margin-bottom: 6px; }
.sv-card {
  background: #fff; color: var(--ink); border-radius: 18px;
  padding: 22px 24px 20px; width: min(300px, 100%);
  box-shadow: 0 24px 60px rgba(6, 25, 35, 0.35);
}
.sv-dial {
  position: relative; width: 92px; height: 92px; margin: 0 auto 10px;
  border-radius: 50%;
  background: conic-gradient(var(--success) 0 87%, var(--mist) 87% 100%);
  display: flex; align-items: center; justify-content: center; gap: 1px;
}
.sv-dial::before { content: ""; position: absolute; inset: 9px; background: #fff; border-radius: 50%; }
.sv-dial span { position: relative; font: 800 26px var(--font-display); }
.sv-dial small { position: relative; font: 700 12px var(--font-body); color: var(--muted); }
.sv-title {
  margin: 0; text-align: center;
  font: 700 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.sv-status { margin: 2px 0 14px; text-align: center; font: 800 20px var(--font-display); color: var(--primary); }
.sv-rows { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--mist); display: grid; gap: 11px; }
.sv-rows li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.sv-rows b { margin-left: auto; color: var(--primary); font-size: 12.5px; }
.sv-rows .sv-check {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--success); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 10px/1 var(--font-body);
}

/* right: white action panel */
body.layout-split.on-hero .split-right {
  min-height: 100vh;
  padding: clamp(28px, 4vh, 56px) clamp(28px, 5vw, 96px) 216px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  color: var(--ink); text-align: center;
}
body.layout-split .split-form-h { font-size: clamp(26px, 2.6vw, 34px); color: var(--ink); margin: 0 0 4px; }
body.layout-split .split-right .searchbar input {
  border: 1.5px solid rgba(21, 48, 63, 0.18); border-radius: var(--radius-lg);
  box-shadow: none; text-align: left;
}
body.layout-split .split-right .searchbar button {
  background: var(--primary-deep); color: #fff; border-radius: var(--radius-lg);
}
body.layout-split .split-right .searchbar button:focus-visible { outline-color: var(--accent); }
body.layout-split #view-search .field-error { color: var(--error); }
body.layout-split #view-search .trust { opacity: 1; color: var(--muted); font-size: 12.5px; }

/* footer + partner badges pinned to the white panel's base */
body.layout-split.on-hero .foot {
  position: absolute; bottom: 8px; right: 0; width: 50%; max-width: none;
  margin: 0; padding: 0 32px 16px; text-align: center; font-size: 11.5px;
}
body.layout-split.on-hero .foot, body.layout-split.on-hero .foot a { color: var(--muted); }
body.layout-split.on-hero .foot-blog {
  background: var(--paper); color: var(--ink);
  border-color: rgba(21, 48, 63, 0.12); box-shadow: 0 4px 14px rgba(6, 25, 35, 0.06);
  text-align: left;
}
body.layout-split.on-hero .foot-blog-h { color: var(--ink); }
body.layout-split.on-hero .foot-blog-p { color: var(--muted); }
body.layout-split.on-hero .foot-blog .foot-blog-cta { background: var(--primary-deep); color: #fff; }
@media (min-width: 1000px) {
  /* pinned to the panel base: one tidy line, no kicker/blurb */
  body.layout-split.on-hero .foot-blog {
    justify-content: center; gap: 8px 16px;
    margin: 0 0 14px; padding: 12px 18px;
  }
  body.layout-split.on-hero .foot-blog-text { flex: 0 1 auto; }
  body.layout-split.on-hero .foot-blog-k,
  body.layout-split.on-hero .foot-blog-p { display: none; }
  body.layout-split.on-hero .foot-blog-h { font-size: 18px; margin: 0; }
  body.layout-split.on-hero .foot-blog .foot-blog-cta { min-height: 38px; padding: 8px 16px; font-size: 13px; }
}
.split-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 10px; }
.split-badges .badge {
  background: #fff; border: 1px solid rgba(21, 48, 63, 0.12); border-radius: 12px;
  padding: 8px 14px; box-shadow: 0 4px 14px rgba(6, 25, 35, 0.06);
}
.split-badges .badge img { display: block; height: 30px; width: auto; }

/* stacked composition on small screens: white header bar, brand intro
   card, then the form — the absolute desktop chrome goes back into flow */
@media (max-width: 999px) {
  body.layout-split.on-hero .top {
    position: static; width: auto; margin: 0 auto; padding: 20px 20px 16px;
    justify-content: space-between; max-width: 720px;
  }
  body.layout-split.on-hero .top-actions { position: static; }
  body.layout-split.on-hero .wordmark { margin-top: 0; }
  body.layout-split.on-hero #view-search { display: block; }
  body.layout-split.on-hero .split-left {
    min-height: 0; border-radius: 0 0 26px 26px;
    padding: 34px 24px 38px; gap: 14px;
  }
  body.layout-split.on-hero .split-right { min-height: 0; padding: 36px 20px 24px; }
  body.layout-split.on-hero .foot {
    position: static; width: auto; padding: 0 20px 32px;
  }
}
body.layout-split .split-left .eyebrow { align-self: flex-start; margin-bottom: 0; }

/* split skin: the lockup drops the dark chip — the EDC's color mark leads,
   larger on the hero, with the initiative name beside it in ink */
body.layout-split .wordmark { background: transparent; }
body.layout-split .wordmark img { padding: 6px 0; }
body.layout-split .wordmark .program-tag {
  color: var(--ink);
  border-left-color: rgba(21, 48, 63, 0.22);
  padding: 0 0 0 16px; margin-left: 14px;
}
body.layout-split.on-hero .wordmark img { height: 62px; }
body.layout-split.on-hero .wordmark .program-tag { font-size: 23px; }
@media (max-width: 999px) {
  body.layout-split.on-hero .wordmark img { height: 48px; }
  body.layout-split.on-hero .wordmark .program-tag { font-size: 18px; padding-left: 12px; margin-left: 10px; }
}

/* split skin: the clean-white system carried through the report flow,
   guides, and staff chrome — dark-green primary actions, cards matched to
   the hero's white-card language, orange retired to small highlights
   (active language tab, the "you" bar in benchmarks, "Needs work" band) */
body.layout-split .btn-accent,
body.layout-split .scan-again { background: var(--primary-deep); color: #fff; }
body.layout-split .panel {
  border-color: rgba(21, 48, 63, 0.12);
  box-shadow: 0 4px 16px rgba(6, 25, 35, 0.05);
}
/* green CTA panels (report + guides): white action button, no orange trim */
body.layout-split .cta { border-top-color: var(--success); }
body.layout-split .cta .btn-accent,
body.layout-split .guide-cta .btn-accent { background: #fff; color: var(--primary-deep); }
body.layout-split .offer h4 { color: #fff; }
body.layout-split .cta p.upsell {
  background: rgba(255, 255, 255, 0.12);
  border-left-color: var(--success);
}
body.layout-split .ac-item .c-tag { color: var(--primary); border-color: var(--primary); }
body.layout-split .box-tip {
  border-left-color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--paper));
}

/* ============================================================
   "poster" skin (Alton, 2026-09-08) — white announcement hero modeled on
   the EDC/Chamber's own Facebook posts: dual-logo lockup, letter-spaced
   eyebrow between hairline rules, huge two-tone uppercase headline (navy
   line / red pop line), red star divider, red banner button, diagonal
   navy/red corner ribbons. Scoped entirely to body.layout-poster —
   configs without theme.layout render byte-identical.
   ============================================================ */
body.layout-poster { --radius-lg: 14px; }
body.layout-poster.on-hero { background: var(--paper); }
body.layout-poster #view-search { color: var(--ink); text-align: center; }

/* header chrome on white: typographic wordmark (hero carries the logos) */
body.layout-poster .wordmark {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 19px; color: var(--primary-deep);
}
body.layout-poster.on-hero .lang-toggle { background: var(--mist); }
body.layout-poster.on-hero .lang-btn { color: var(--muted); }
body.layout-poster.on-hero .lang-btn.active { background: var(--accent); color: var(--accent-contrast); }
body.layout-poster.on-hero .lang-btn:focus-visible { outline-color: var(--accent); }
body.layout-poster.on-hero .foot,
body.layout-poster.on-hero .foot a { color: var(--muted); }
body.layout-poster.on-hero .nav-guides {
  color: var(--primary-deep); background: var(--mist);
  border-color: rgba(21, 48, 63, 0.12);
}
body.layout-poster.on-hero .nav-guides:hover { background: rgba(21, 48, 63, 0.1); }
body.layout-poster.on-hero .nav-guides:focus-visible { outline-color: var(--accent); }
body.layout-poster.on-hero .foot-blog {
  background: var(--paper); color: var(--ink);
  border-color: #C9CFD8; box-shadow: 0 4px 16px rgba(6, 25, 35, 0.05);
}
body.layout-poster.on-hero .foot-blog-h { color: var(--primary-deep); }
body.layout-poster.on-hero .foot-blog-p { color: var(--muted); }
body.layout-poster.on-hero .foot-blog .foot-blog-cta { background: var(--accent); color: var(--accent-contrast); }
/* poster type: the strip's heading and button follow the hero's uppercase banner voice */
body.layout-poster .foot-blog-h { text-transform: uppercase; }
body.layout-poster .foot-blog .foot-blog-cta {
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px;
}

/* report and guides drop .on-hero, so the footer's `.foot a` muted rule (0,1,1)
   outranks `.btn-accent` (0,1,0) and paints the Playbook button's label grey on
   Chamber Red, about 1.1:1. Restore the button's own contrast colour. */
body.layout-poster .foot .foot-blog-cta { color: var(--accent-contrast); }

/* CTA panels (report + guides) sit on the navy gradient, where Chamber Red
   lands at 1.0:1 against the light end. The panel switches to a white action
   button and white offer heads, the same treatment the split skin uses. Red
   stays the action colour everywhere it sits on paper. */
body.layout-poster .cta .btn-accent,
body.layout-poster .guide-cta .btn-accent { background: #fff; color: var(--primary-deep); }
body.layout-poster .offer h4 { color: #fff; }
body.layout-poster #view-search button:focus-visible { outline-color: var(--accent); }

/* poster hero gets a wider column so the display type breathes */
body.layout-poster.on-hero main { max-width: 920px; }

/* dual EDC + Chamber lockup (injected by app.js). multiply blend melts the
   logos' near-white PNG backgrounds into the white page — no visible boxes */
body.layout-poster .poster-lockup {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  margin: 14px auto 30px;
}
body.layout-poster .poster-lockup img {
  height: 84px; width: auto; display: block; mix-blend-mode: multiply;
}
body.layout-poster .poster-lockup .lockup-divider {
  width: 1px; height: 68px; background: #C9CFD8;
}

/* eyebrow between hairline rules */
body.layout-poster #view-search .eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: none; padding: 0; border-radius: 0;
  color: var(--muted); letter-spacing: 0.26em; font-size: 12px;
}
body.layout-poster #view-search .eyebrow::before,
body.layout-poster #view-search .eyebrow::after {
  content: ""; flex: none; width: 58px; height: 1px; background: #C9CFD8;
}

/* two-tone uppercase headline + red star divider */
body.layout-poster #view-search h1 {
  text-transform: uppercase; line-height: 0.99;
  color: var(--primary-deep); margin: 14px 0 0;
}
body.layout-poster #view-search h1 .pop { color: var(--accent); }
body.layout-poster #view-search > .lede {
  color: var(--muted); opacity: 1;
  margin: 0 auto 30px; max-width: 54ch;
}
body.layout-poster #view-search > .lede::before {
  content: "★"; display: block; width: 230px; margin: 18px auto 20px;
  color: var(--accent); font-size: 14px; line-height: 1;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 50% / 88px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 50% / 88px 2px no-repeat;
}

/* search: navy-bordered field + red banner button */
body.layout-poster .search-wrap { max-width: 560px; margin: 0 auto; }
body.layout-poster .ac-menu { text-align: left; }
body.layout-poster .searchbar input {
  border-color: var(--primary-deep); border-radius: var(--radius-lg);
}
body.layout-poster .searchbar input:focus-visible { border-color: var(--primary); }
body.layout-poster .searchbar button {
  border-radius: var(--radius-lg);
  text-transform: uppercase; letter-spacing: 0.08em;
}
body.layout-poster .trust { color: var(--muted); opacity: 1; }

/* manifesto reads as ink-on-paper */
body.layout-poster .facade-note {
  border-top-color: #C9CFD8; margin-left: auto; margin-right: auto;
}
body.layout-poster .facade-sub { color: var(--accent); }
body.layout-poster .facade-p { opacity: 1; color: var(--muted); }
body.layout-poster #view-search .btn-ghost {
  color: var(--primary-deep); border-color: var(--primary-deep);
}
body.layout-poster #view-search .btn-ghost:hover {
  background: var(--mist); border-color: var(--primary);
}

/* diagonal corner ribbons (the FB-post garnish) — desktop hero only;
   hidden on small screens where they would crowd the content column */
body.layout-poster.on-hero::before,
body.layout-poster.on-hero::after {
  content: ""; position: fixed; bottom: 0; z-index: -1;
  width: min(42vw, 430px); height: 130px; pointer-events: none;
}
body.layout-poster.on-hero::before {
  left: 0;
  background: linear-gradient(58deg,
    var(--primary-deep) 0 32%, var(--paper) 32% 38%,
    var(--accent) 38% 50%, transparent 50%);
}
body.layout-poster.on-hero::after {
  right: 0;
  background: linear-gradient(-58deg,
    var(--primary-deep) 0 32%, var(--paper) 32% 38%,
    var(--accent) 38% 50%, transparent 50%);
}

@media (max-width: 720px) {
  body.layout-poster .poster-lockup { gap: 16px; }
  body.layout-poster .poster-lockup img { height: 44px; }
  body.layout-poster .poster-lockup .lockup-divider { height: 38px; }
  body.layout-poster.on-hero::before,
  body.layout-poster.on-hero::after { display: none; }
}

/* ============================================================
   DEMO MODE (features.demo_mode) — prospect instances only.
   Nothing here renders on a config without the flag, so the
   live instances are untouched. Added 2026-09-23 for La Marque.
   ============================================================ */

/* the config carries both languages; <html lang> picks one */
.dfeat [lang] { display: none; }
html:lang(en) .dfeat [lang="en"] { display: inline; }
html:lang(es) .dfeat [lang="es"] { display: inline; }

.dfeat { margin: 26px 0 0; }
.dfeat-h { font: 700 15px/1.35 var(--font-body); letter-spacing: .01em;
  color: var(--muted); margin: 0 0 12px; text-transform: none; }

.dfeat-card { display: flex; align-items: flex-start; gap: 14px;
  text-decoration: none; color: inherit; padding: 13px 14px; border-radius: 12px;
  border: 2px solid var(--mist); background: var(--paper); margin: 0 0 9px;
  transition: border-color .15s ease, transform .15s ease; }
.dfeat-card:hover, .dfeat-card:focus-visible {
  border-color: var(--c); transform: translateY(-1px); }
.dfeat-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.dfeat-score { flex: none; width: 46px; height: 46px; border-radius: 11px;
  background: var(--c); color: var(--c-on, #fff);
  display: grid; place-items: center;
  font: 800 18px/1 var(--font-body); font-variant-numeric: tabular-nums; }

.dfeat-body { display: block; min-width: 0; }
.dfeat-name { display: block; font: 700 16px/1.25 var(--font-body); color: var(--ink); }
.dfeat-cat { display: block; font: 600 12px/1.4 var(--font-body);
  letter-spacing: .05em; text-transform: uppercase; color: var(--c);
  margin: 2px 0 5px; }
.dfeat-blurb { display: block; font: 400 14px/1.5 var(--font-body); color: var(--muted); }

.dfeat-note { font: 400 13.5px/1.5 var(--font-body); color: var(--muted);
  margin: 12px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .dfeat-card { transition: none; }
  .dfeat-card:hover, .dfeat-card:focus-visible { transform: none; }
}

/* the demo banner the staff pages carry (dashboard, home, certs, packet) */
.demo-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--primary-deep); color: #fff; border-radius: 12px;
  padding: 12px 16px; margin: 0 0 18px;
  font: 400 14px/1.5 var(--font-body); }
.demo-bar b { font-weight: 800; }
.demo-bar .demo-pill { flex: none; background: var(--accent);
  color: var(--accent-contrast); font: 800 11px/1 var(--font-body);
  letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; }
.demo-bar a { color: #fff; font-weight: 700; }

/* The split skin is a fixed 100vh stage: both panels are min-height 100vh and
   .foot is absolutely pinned to the white panel's base, with 216px of reserved
   padding above it. The demo's five business cards make that panel taller than
   the stage, so here the hero is allowed to grow and the footer flows after it.
   Scoped to .demo-mode, so Weslaco and Alton keep the approved fixed stage. */
body.demo-mode.layout-split.on-hero .split-right {
  justify-content: flex-start;
  padding-bottom: clamp(28px, 4vh, 56px);
}
/* the left panel still stretches to the row height (grid default), so the
   brand gradient fills whatever the right panel grows to */
body.demo-mode.layout-split.on-hero .foot {
  position: static; width: auto; max-width: 900px;
  margin: 0 auto; padding: 26px 32px 34px;
}
/* A mock "87/100 Looking great" card next to five real scanned scores reads as
   a fake. The real cards are the proof; drop the decorative one. */
body.demo-mode .split-visual { display: none; }
/* the header is absolutely positioned over the white panel, so the right
   panel's first element has to clear it once content starts at the top */
body.demo-mode.layout-split.on-hero .split-right > :first-child { margin-top: 116px; }
/* the banner is screen chrome: certificates and packets are printed artifacts */
@media print { .demo-bar { display: none !important; } }

/* demo mode: the role-focused panel on the staff home (PR/comms logins) */
.demo-focus { background: var(--mist); border-left: 4px solid var(--accent);
  border-radius: 0 14px 14px 0; padding: 20px 22px; margin: 0 0 18px; }
.demo-focus h2 { font-size: 20px; margin: 0 0 6px; }
.demo-focus p { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.demo-focus-links { display: flex; gap: 10px; flex-wrap: wrap; }
.demo-focus-links a { display: inline-block; text-decoration: none;
  font: 700 14px var(--font-body); padding: 10px 16px; border-radius: 10px; }
.demo-focus-links a.primary { background: var(--primary-deep); color: #fff; }
.demo-focus-links a.ghost { border: 2px solid var(--paper); background: var(--paper);
  color: var(--primary-deep); }

/* Narrow screens: a very wide wordmark (La Marque's is 5.4:1) pushes the
   Playbook link and language toggle off the right edge of the split header.
   max-width only bites on logos already wider than the cap, and object-fit
   keeps the aspect ratio inside it, so narrower marks are untouched. */
@media (max-width: 560px) {
  body.layout-split .wordmark img { max-width: 132px; object-fit: contain; }
  body.layout-split .wordmark .program-tag { font-size: 12px; }
}
@media (max-width: 400px) {
  body.layout-split .wordmark .program-tag { display: none; }
}

/* Fictional fixture town: the staff-home tour (demo-mode.js tour()) */
.demo-tour { margin: 0; padding-left: 22px; }
.demo-tour li { margin: 0 0 8px; line-height: 1.5; color: var(--ink); }
.demo-tour a { font-weight: 700; color: var(--primary); }

/* Fictional fixture town: 20 business cards make the white panel many screens
   tall, and the brand panel centers its headline in that full height (off
   screen). Pin the brand panel to the viewport while the list scrolls; the
   grid's left half carries the deep brand color underneath it. Desktop only;
   the stacked mobile layout is unaffected. */
@media (min-width: 1000px) {
  body.demo-mode.layout-split.on-hero #view-search {
    background: linear-gradient(90deg, var(--primary-deep) 50%, transparent 50%);
  }
  body.demo-mode.layout-split.on-hero .split-left {
    position: sticky; top: 0; align-self: start;
    height: 100vh; min-height: 0; overflow: auto;
  }
}