/* ==========================================================================
   Need Navigator — marketing site
   Hand-rolled CSS. Design tokens in :root; no framework.
   Type: Source Serif 4 (display) + Public Sans (body), self-hosted variable.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------- */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/sites/neednavigator/fonts/source-serif-4-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/sites/neednavigator/fonts/source-serif-4-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/sites/neednavigator/fonts/public-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/sites/neednavigator/fonts/public-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design tokens --------------------------------------------------- */

:root {
  /* color */
  --paper: #faf8f3;        /* warm near-white background */
  --surface: #f1ede2;      /* warm neutral surface */
  --card: #fffdf9;         /* raised card on paper */
  --ink: #20241f;          /* near-black, warm */
  --muted: #565c55;        /* secondary text — AA on paper */
  --evergreen: #1e4d3a;    /* the one accent */
  --evergreen-deep: #14382a;
  --wash: #e9efe8;         /* pale evergreen wash, used sparingly */
  --line: rgba(32, 36, 31, 0.16);      /* hairline */
  --line-soft: rgba(32, 36, 31, 0.09);
  --paper-on-deep: #f5f2ea; /* text on evergreen-deep */

  /* status (bed matrix & alike) — never color alone: icon/hatch/outline too.
     --status-maintenance is for fills, borders, and glyphs only (3.8:1 vs white);
     never set small text on it. */
  --status-occupied: var(--evergreen);
  --status-maintenance: #b77414;
  --status-offline: #565c55;
  --status-maintenance-wash: #f7ece2; /* amber wash for pending/error chips */

  /* type */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.6rem + 3.2vw, 3.4rem);

  /* shape & rhythm */
  --radius: 8px;
  --radius-sm: 5px;
  --measure: 68ch;
  --container: 1120px;
  --pad-section: clamp(3.5rem, 8vw, 6rem);
  --focus-ring: 2px solid var(--evergreen);
}

/* ---- Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 620;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 640; }
h4 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; }

p, ul, ol { margin: 0 0 1.1em; max-width: var(--measure); }
li { margin-bottom: 0.35em; }
small { font-size: var(--step--1); }

a { color: var(--evergreen); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--evergreen-deep); text-decoration-thickness: 2px; }

img, svg { max-width: 100%; height: auto; }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
/* evergreen ring is invisible on the deep surfaces — swap to paper there */
.footer :focus-visible, .cta-band :focus-visible { outline-color: var(--paper-on-deep); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

.section { padding-block: var(--pad-section); }
.section + .section { border-top: 1px solid var(--line-soft); }
.section--surface { background: var(--surface); }
.section--wash { background: var(--wash); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--evergreen);
  margin-bottom: 0.9rem;
}

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink); }
.muted { color: var(--muted); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--evergreen-deep);
  color: var(--paper-on-deep);
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--paper-on-deep); }

/* ---- Buttons ---------------------------------------------------------- */

.button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--evergreen);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.button.primary { background: var(--evergreen); color: var(--paper-on-deep); }
.button.primary:hover { background: var(--evergreen-deep); border-color: var(--evergreen-deep); color: var(--paper-on-deep); }
.button.ghost { background: transparent; color: var(--evergreen); }
.button.ghost:hover { background: var(--wash); color: var(--evergreen-deep); }
.button.on-deep { border-color: var(--paper-on-deep); background: var(--paper-on-deep); color: var(--evergreen-deep); }
.button.on-deep:hover { background: #fff; }
.button.ghost.on-deep { background: transparent; color: var(--paper-on-deep); }
.button.ghost.on-deep:hover { background: rgba(245, 242, 234, 0.12); }

/* ---- Header / nav ------------------------------------------------------ */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 24px; width: auto; }

.nav-toggle {
  display: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}

.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--evergreen-deep); }
.nav-links a.active {
  color: var(--evergreen);
  border-bottom-color: var(--evergreen);
  font-weight: 600;
}
.nav-links .button { margin-left: 0.4rem; padding: 0.55rem 1.1rem; font-size: var(--step--1); }

@media (max-width: 800px) {
  .nav-toggle { display: inline-block; }
  .nav-links {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem clamp(1.1rem, 4vw, 2rem) 1.1rem;
    z-index: 50;
  }
  .site-header { position: relative; }
  .nav-links.open { display: flex; }
  .nav-links a { padding-block: 0.7rem; border-bottom: 1px solid var(--line-soft); }
  .nav-links a.active { border-bottom-color: var(--evergreen); }
  .nav-links .button { margin: 0.8rem 0 0; text-align: center; }
}

/* ---- Hero -------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 9vw, 7rem) var(--pad-section); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: 0.5em; }
.hero .lede { margin-bottom: 1.6rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.hero-note { margin-top: 1.1rem; font-size: var(--step--1); color: var(--muted); }
.hero-art { min-width: 0; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 26rem; }
}

/* ---- Pain → solution blocks -------------------------------------------- */

.pains { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .pains { grid-template-columns: 1fr; } }
.pain {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.pain .icon { color: var(--evergreen); margin-bottom: 0.9rem; }
.pain h3 { margin-bottom: 0.4em; }
.pain-tag {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.8rem;
}
.pain p { margin-bottom: 0.8em; }
.pain a { font-weight: 600; }

/* ---- Module index (home feature map) ------------------------------------ */

.module-index { border-top: 1px solid var(--line); }
.module-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 800px) { .module-row { grid-template-columns: 1fr; gap: 0.9rem; } }
.module-head .icon { color: var(--evergreen); margin-bottom: 0.55rem; }
.module-head h2, .module-head h3 { font-size: var(--step-2); font-weight: 600; margin-bottom: 0.3em; }
.module-head p { font-size: var(--step--1); color: var(--muted); margin: 0; max-width: 36ch; }
.module-links { display: flex; flex-direction: column; gap: 0.15rem; justify-content: center; }
.module-links a {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.module-links a:hover { background: var(--wash); }
.module-links strong { font-weight: 650; color: var(--evergreen-deep); }
.module-links a > span:not(.arrow) { font-size: var(--step--1); color: var(--muted); }
.module-links .arrow { color: var(--evergreen); opacity: 0; transition: opacity 120ms ease; font-weight: 600; }
.module-links a:hover .arrow, .module-links a:focus-visible .arrow { opacity: 1; }
@media (hover: none) { .module-links .arrow { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .module-links .arrow { transition: none; } }
@media (max-width: 560px) {
  .module-links a { grid-template-columns: minmax(0, 1fr) auto; }
  .module-links a > span:not(.arrow) { grid-column: 1 / -1; }
}

/* ---- Audience router ----------------------------------------------------- */

.audiences { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .audiences { grid-template-columns: 1fr; } }
.audience {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem;
  text-decoration: none;
  color: var(--ink);
}
.audience:hover { border-color: var(--evergreen); color: var(--ink); }
.audience .icon { color: var(--evergreen); margin-bottom: 0.8rem; }
.audience strong { display: block; font-family: var(--font-display); font-size: var(--step-1); font-weight: 620; margin-bottom: 0.3rem; color: var(--ink); }
.audience span { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
.audience em { display: inline-block; font-style: normal; font-weight: 600; color: var(--evergreen); margin-top: 0.7rem; font-size: var(--step--1); }

/* ---- Trust strip ----------------------------------------------------------- */

.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.2rem); }
@media (max-width: 960px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }
.trust-item .icon { color: var(--evergreen); margin-bottom: 0.7rem; }
.trust-item h3 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; margin-bottom: 0.35em; }
.trust-item p { font-size: var(--step--1); color: var(--muted); margin: 0; }
.trust-item p a { color: var(--evergreen); }

/* ---- CTA band --------------------------------------------------------------- */

.cta-band { background: var(--evergreen-deep); color: var(--paper-on-deep); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--paper-on-deep); }
.cta-band .hero-ctas { margin-top: 1.4rem; }
.cta-band a:not(.button) { color: #fff; }

/* ---- Vignette (day in the life) ---------------------------------------------- */

.vignette {
  background: var(--surface);
  border-left: 3px solid var(--evergreen);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3.5vw, 2.4rem);
  max-width: 46rem;
}
.vignette h3 { margin-bottom: 0.7em; }
.vignette p:last-child { margin-bottom: 0; }

/* ---- FAQ ---------------------------------------------------------------------- */

.faq { max-width: 46rem; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item:first-of-type { border-top: 1px solid var(--line-soft); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0.2rem;
  font-weight: 600;
  font-size: var(--step-0);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1;
  color: var(--evergreen);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-body { padding: 0 0.2rem 1.2rem; }
.faq-item .faq-body p { margin-bottom: 0.7em; }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* ---- Stylized UI representations ----------------------------------------------- */

.uiframe {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none;
}
.uiframe-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.uiframe-bar i {
  width: 8px; height: 8px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-block;
}
.uiframe-bar span {
  margin-left: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.uiframe-body { padding: clamp(0.9rem, 2vw, 1.4rem); overflow-x: auto; }
.ui-caption { font-size: var(--step--1); color: var(--muted); margin-top: 0.7rem; }

/* Bed-availability matrix (shelters). Status is never color alone:
   available = outline, occupied = evergreen span bar, maintenance = amber + glyph,
   offline = gray + diagonal hatch. Legend labels everything. */
.bedmatrix { min-width: 560px; font-size: 0.78rem; }
.bedmatrix table { border-collapse: collapse; width: 100%; }
.bedmatrix th, .bedmatrix td {
  border: 1px solid var(--line-soft);
  padding: 0;
  height: 2rem;
  min-width: 3.4rem;
  text-align: center;
  font-weight: 500;
  color: var(--muted);
}
.bedmatrix thead th { font-weight: 600; padding: 0.35rem 0.4rem; background: var(--surface); color: var(--ink); }
.bedmatrix tbody th {
  text-align: left;
  padding: 0.35rem 0.6rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  white-space: nowrap;
}
.bedmatrix .span-occupied {
  display: block;
  margin: 3px; /* 2px+ surface gap between fills */
  height: calc(2rem - 6px);
  border-radius: 4px;
  background: var(--status-occupied);
  color: #fff;
  font-weight: 600;
  font-size: 0.72rem;
  line-height: calc(2rem - 6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 0.5rem;
  text-align: left;
}
.bedmatrix .cell-maintenance {
  background: var(--status-maintenance);
  color: #fff;
  font-weight: 700;
}
.bedmatrix .cell-offline {
  background: repeating-linear-gradient(45deg, var(--status-offline) 0 4px, #6d746c 4px 8px);
  color: #fff;
  font-weight: 700;
}
.matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 0.8rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.matrix-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.matrix-legend i {
  width: 14px; height: 14px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}
.matrix-legend .k-available { border: 1px solid var(--line); background: var(--card); }
.matrix-legend .k-occupied { background: var(--status-occupied); }
.matrix-legend .k-maintenance { background: var(--status-maintenance); }
.matrix-legend .k-offline { background: repeating-linear-gradient(45deg, var(--status-offline) 0 3px, #6d746c 3px 6px); }

/* Mini dashboard strip (home) — stat tiles + one meter. Text wears text tokens. */
.minidash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
@media (max-width: 640px) { .minidash { grid-template-columns: 1fr; } }
.stat-tile {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  background: var(--card);
}
.stat-tile .stat-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.2rem; }
.stat-tile .stat-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 640; color: var(--ink); line-height: 1.1; }
.stat-tile .stat-note { font-size: 0.75rem; color: var(--muted); }
.pool-meter { grid-column: 1 / -1; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 0.9rem 1rem; background: var(--card); }
.pool-meter .pool-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; margin-bottom: 0.45rem; }
.pool-meter .pool-row strong { color: var(--ink); font-weight: 650; }
.pool-meter .pool-row span { color: var(--muted); }
.pool-track { height: 8px; border-radius: 4px; background: var(--surface); overflow: hidden; }
.pool-fill { height: 100%; border-radius: 4px; background: var(--evergreen); }

/* ---- Capability rows (feature pages) ------------------------------------------- */

.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
@media (max-width: 800px) { .caps { grid-template-columns: 1fr; } }
.cap h3 { margin-bottom: 0.35em; }
.cap .icon { color: var(--evergreen); margin-bottom: 0.6rem; }
.cap p { font-size: var(--step-0); margin-bottom: 0; }

/* Cross-links */
.crosslinks { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.crosslinks a {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--evergreen-deep);
  background: var(--card);
}
.crosslinks a:hover { border-color: var(--evergreen); }

/* Breadcrumbs */
.breadcrumbs { font-size: var(--step--1); color: var(--muted); margin-bottom: 1.6rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; max-width: none; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: 0.4rem; color: var(--line); }
.breadcrumbs a { color: var(--muted); }

/* ---- Contact form (platform component skin — style .sh-* classes only) ---------- */

.sh-form { max-width: 34rem; }
.sh-form__field { margin-bottom: 1.1rem; }
.sh-form__field label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: 0.35rem; }
.sh-form__field input,
.sh-form__field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
}
.sh-form__field input:focus-visible,
.sh-form__field textarea:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.sh-form__hp { position: absolute; left: -9999px; }
.sh-form__actions button {
  font: inherit; font-weight: 600;
  background: var(--evergreen); color: var(--paper-on-deep);
  border: 1px solid var(--evergreen);
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
}
.sh-form__actions button:hover { background: var(--evergreen-deep); }
.sh-form__success, .sh-form__error {
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.sh-form__success { background: var(--wash); border: 1px solid var(--evergreen); }
.sh-form__error { background: var(--status-maintenance-wash); border: 1px solid var(--status-maintenance); }

/* ---- Footer ----------------------------------------------------------------------- */

.footer {
  background: var(--evergreen-deep);
  color: var(--paper-on-deep);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.6rem;
  font-size: var(--step--1);
}
.footer a { color: var(--paper-on-deep); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(245, 242, 234, 0.18);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 22px; width: auto; margin-bottom: 0.9rem; }
.footer-brand p { color: rgba(245, 242, 234, 0.8); max-width: 30ch; }
.footer strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, 0.6);
  margin-bottom: 0.8rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.45rem; }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1.4rem;
  color: rgba(245, 242, 234, 0.65);
}

/* ---- Scroll reveal (progressive enhancement; off under reduced motion) ------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 480ms ease, transform 480ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal, .no-io .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Utility ------------------------------------------------------------------------ */

.section-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section-head p { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.icon { display: inline-block; }

/* ==========================================================================
   Page-scoped UI-representation styles (Step 3) — one prefixed block per page
   ========================================================================== */

/* ---- /features/client-records: one-page dossier UI representation ---- */
.ui-dossier { position: relative; min-width: 560px; font-size: 0.8rem; }
.ui-dossier .dossier-alert { display: flex; align-items: center; gap: 0.55rem; background: var(--status-maintenance-wash); border: 1px solid var(--status-maintenance); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-bottom: 0.85rem; color: var(--ink); }
.ui-dossier .dossier-alert svg { flex: none; color: var(--status-maintenance); }
.ui-dossier .dossier-alert em { margin-left: auto; font-style: normal; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.ui-dossier .dossier-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.ui-dossier .dossier-photo { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--wash); border: 1px solid var(--line-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--evergreen); }
.ui-dossier .dossier-name { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.ui-dossier .dossier-name strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 640; color: var(--ink); }
.ui-dossier .chip { display: inline-block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.5rem; color: var(--muted); background: var(--surface); }
.ui-dossier .dossier-meta { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 0.2rem; }
.ui-dossier .dossier-fresh { margin-left: auto; font-size: 0.72rem; color: var(--evergreen-deep); background: var(--wash); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 0.35rem 0.6rem; white-space: nowrap; }
.ui-dossier .dossier-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 0.9rem; }
.ui-dossier .dcard { border: 1px solid var(--line-soft); background: var(--paper); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; }
.ui-dossier .dcard span { display: block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.15rem; }
.ui-dossier .dcard strong { display: block; color: var(--ink); font-weight: 650; }
.ui-dossier .dcard em { font-style: normal; color: var(--muted); font-size: 0.72rem; }
.ui-dossier .dossier-tabs { display: flex; flex-wrap: wrap; gap: 0.15rem; border-bottom: 1px solid var(--line); margin-bottom: 0.6rem; }
.ui-dossier .dossier-tabs span { padding: 0.35rem 0.55rem; font-size: 0.74rem; color: var(--muted); }
.ui-dossier .dossier-tabs .on { color: var(--evergreen-deep); font-weight: 650; box-shadow: inset 0 -2px 0 var(--evergreen); }
.ui-dossier .dossier-rows { min-height: 170px; padding-right: 175px; }
.ui-dossier .drow { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.42rem 0; border-bottom: 1px dashed var(--line-soft); }
.ui-dossier .drow strong { color: var(--ink); font-weight: 600; }
.ui-dossier .drow span { color: var(--muted); }
.ui-dossier .drow em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.ui-dossier .dossier-radial { position: absolute; right: 0.4rem; bottom: 0; width: 158px; height: 158px; }
.ui-dossier .r-center { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: var(--evergreen); color: var(--paper-on-deep); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(20, 56, 42, 0.25) /* = --evergreen-deep @ 25% */; }
.ui-dossier .r-item { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--evergreen-deep); display: inline-flex; align-items: center; justify-content: center; }
.ui-dossier .r-item.r1 { transform: rotate(-90deg) translate(58px) rotate(90deg); }
.ui-dossier .r-item.r2 { transform: rotate(-45deg) translate(58px) rotate(45deg); }
.ui-dossier .r-item.r3 { transform: translate(58px); }
.ui-dossier .r-item.r4 { transform: rotate(45deg) translate(58px) rotate(-45deg); }
.ui-dossier .r-item.r5 { transform: rotate(90deg) translate(58px) rotate(-90deg); }
.ui-dossier .r-item.r6 { transform: rotate(135deg) translate(58px) rotate(-135deg); }
.ui-dossier .r-item.r7 { transform: rotate(180deg) translate(58px) rotate(-180deg); }
.ui-dossier .r-item.r8 { transform: rotate(-135deg) translate(58px) rotate(135deg); }

/* /features/documents — Document Inbox triage illustration */
.ui-docinbox { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0.9rem; min-width: 560px; font-size: 0.78rem; }
.ui-docinbox .di-queue { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; align-self: start; }
.ui-docinbox .di-queue-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; background: var(--surface); font-weight: 650; color: var(--ink); }
.ui-docinbox .di-queue-head span { font-size: 0.66rem; font-weight: 600; color: var(--paper-on-deep); background: var(--evergreen); border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; }
.ui-docinbox .di-item { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem; border-top: 1px solid var(--line-soft); color: var(--ink); }
.ui-docinbox .di-item.is-active { background: var(--wash); box-shadow: inset 2px 0 0 var(--evergreen); font-weight: 650; }
.ui-docinbox .di-src { font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.05rem 0.4rem; white-space: nowrap; }
.ui-docinbox .di-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0.9rem; align-self: start; }
.ui-docinbox .di-preview { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); padding: 1rem 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ui-docinbox .di-preview i { height: 6px; border-radius: 3px; background: var(--surface); }
.ui-docinbox .di-preview i:first-child { width: 52%; background: var(--wash); }
.ui-docinbox .di-preview i:nth-child(4) { width: 78%; }
.ui-docinbox .di-preview i:nth-child(7) { width: 64%; }
.ui-docinbox .di-fields { display: flex; flex-direction: column; gap: 0.55rem; }
.ui-docinbox .di-field { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 0.55rem; }
.ui-docinbox .di-label { font-size: 0.62rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ui-docinbox .di-value { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 0.32rem 0.55rem; color: var(--ink); }
.ui-docinbox .di-value.di-match { border-color: var(--evergreen); color: var(--evergreen); font-weight: 650; }
.ui-docinbox .di-caret { color: var(--muted); }
.ui-docinbox .di-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.ui-docinbox .di-btn { border-radius: var(--radius-sm); padding: 0.35rem 0.9rem; font-weight: 650; background: var(--evergreen); color: var(--paper-on-deep); }
.ui-docinbox .di-btn.is-ghost { background: transparent; color: var(--evergreen); border: 1px solid var(--line); }

.ui-household { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; font-size: 0.78rem; }
@media (max-width: 720px) { .ui-household { grid-template-columns: 1fr; } }
.ui-household .hh-members { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
.ui-household .hh-member { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--paper); padding: 0.25rem 0.7rem 0.25rem 0.3rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ui-household .hh-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--wash); color: var(--evergreen-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; }
.ui-household .hh-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--paper-on-deep); background: var(--evergreen); border-radius: 999px; padding: 0.12rem 0.5rem; }
.ui-household .hh-matrix { overflow-x: auto; }
.ui-household .hh-matrix table { border-collapse: collapse; width: 100%; min-width: 420px; }
.ui-household .hh-matrix th, .ui-household .hh-matrix td { border: 1px solid var(--line-soft); padding: 0.3rem 0.5rem; text-align: center; font-weight: 500; color: var(--muted); white-space: nowrap; }
.ui-household .hh-matrix thead th { background: var(--surface); color: var(--ink); font-weight: 600; }
.ui-household .hh-matrix thead th:first-child { text-align: left; }
.ui-household .hh-matrix tbody th { background: var(--surface); color: var(--ink); font-weight: 600; text-align: left; }
.ui-household .hh-matrix .hh-self { color: var(--line); }
.ui-household .hh-outside { margin-top: 0.6rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; color: var(--muted); background: var(--paper); }
.ui-household .hh-outside strong { color: var(--ink); font-weight: 650; }
.ui-household .hh-sync { border: 1px solid var(--evergreen); border-radius: var(--radius-sm); background: var(--paper); padding: 0.85rem 0.95rem; align-self: start; }
.ui-household .hh-sync-head { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--evergreen-deep); margin-bottom: 0.45rem; }
.ui-household .hh-sync p { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.55rem; max-width: none; }
.ui-household .hh-check { display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0; font-weight: 600; color: var(--ink); }
.ui-household .hh-box { width: 14px; height: 14px; border: 1px solid var(--evergreen); border-radius: 3px; background: var(--evergreen); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; line-height: 1; flex-shrink: 0; }
.ui-household .hh-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.ui-household .hh-btn { display: inline-block; background: var(--evergreen); color: var(--paper-on-deep); border-radius: var(--radius-sm); padding: 0.35rem 0.8rem; font-weight: 600; font-size: 0.75rem; }
.ui-household .hh-btn.is-ghost { background: transparent; color: var(--evergreen); border: 1px solid var(--line); }

/* /features/income-eligibility — eligibility verdict UI representation (.ui-elig) */
.ui-elig { min-width: 540px; font-size: 0.8rem; }
.ui-elig .elig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-bottom: 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line-soft); }
.ui-elig .elig-head strong { color: var(--ink); font-weight: 650; }
.ui-elig .elig-head .elig-meta { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 0.15rem; }
.ui-elig .elig-limit { font-family: var(--font-display); font-weight: 640; font-size: 1.15rem; color: var(--ink); white-space: nowrap; text-align: right; }
.ui-elig .elig-limit span { display: block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ui-elig .elig-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.25rem 1rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.ui-elig .elig-row .who { display: block; font-weight: 600; color: var(--ink); }
.ui-elig .elig-row .src { display: block; color: var(--muted); font-size: 0.72rem; }
.ui-elig .elig-amt { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.ui-elig .tag { display: inline-block; border-radius: 999px; padding: 0.12rem 0.6rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.ui-elig .tag--verified { background: var(--wash); border: 1px solid var(--evergreen); color: var(--evergreen-deep); }
.ui-elig .tag--pending { background: var(--status-maintenance-wash); border: 1px solid var(--status-maintenance); color: #7c4d0d; }
.ui-elig .tag--excluded { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.ui-elig .pool-meter { margin-top: 0.9rem; }
.ui-elig .elig-verdict { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.9rem; }
.ui-elig .elig-verdict .badge { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--wash); border: 1px solid var(--evergreen); color: var(--evergreen-deep); border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; font-weight: 700; }
.ui-elig .elig-verdict .badge svg { flex: none; }
.ui-elig .elig-verdict .verdict-note { color: var(--muted); font-size: 0.75rem; }

/* /features/emergency-assistance — printable voucher UI representation */
.ui-voucher { max-width: 33rem; margin-inline: auto; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 1rem 1.15rem; font-size: 0.8rem; color: var(--muted); }
.ui-voucher .v-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.65rem; margin-bottom: 0.65rem; border-bottom: 1px dashed var(--line); }
.ui-voucher .v-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 640; color: var(--ink); }
.ui-voucher .v-status { border: 1px solid var(--evergreen); background: var(--wash); color: var(--evergreen-deep); border-radius: 999px; padding: 0.12rem 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ui-voucher .v-block + .v-block { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); }
.ui-voucher .v-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.ui-voucher .v-row { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.16rem; }
.ui-voucher .v-row strong { color: var(--ink); font-weight: 650; text-align: right; }
.ui-voucher .v-total { margin-top: 0.2rem; padding-top: 0.4rem; border-top: 1px solid var(--line-soft); }
.ui-voucher .v-verdict, .ui-voucher .v-check { display: flex; align-items: center; gap: 0.4rem; color: var(--evergreen-deep); font-weight: 650; margin-top: 0.35rem; }
.ui-voucher .v-check { font-weight: 600; font-size: 0.75rem; }
.ui-voucher .v-verdict svg, .ui-voucher .v-check svg { flex: none; color: var(--evergreen); }

.ui-casenote { max-width: 36rem; font-size: 0.85rem; line-height: 1.5; }
.ui-casenote .cn-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.ui-casenote .cn-chip { display: inline-block; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.15rem 0.65rem; }
.ui-casenote .cn-msg { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); padding: 0.75rem 0.95rem; margin-bottom: 0.7rem; }
.ui-casenote .cn-msg--reply { margin-left: clamp(1rem, 4vw, 2rem); background: var(--wash); }
.ui-casenote .cn-author { display: block; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.ui-casenote .cn-msg p, .ui-casenote .cn-pending p { margin: 0 0 0.35rem; max-width: none; color: var(--ink); }
.ui-casenote .cn-time { font-size: 0.72rem; color: var(--muted); }
.ui-casenote .cn-mention { color: var(--evergreen-deep); background: var(--wash); border-radius: 3px; padding: 0 0.3em; font-weight: 650; }
.ui-casenote .cn-msg--reply .cn-mention { background: var(--card); }
.ui-casenote .cn-pending { border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--paper); padding: 0.75rem 0.95rem; }
.ui-casenote .cn-undo { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.ui-casenote .cn-undo svg { flex: none; }
.ui-casenote .cn-undo em { font-style: normal; color: var(--evergreen); text-decoration: underline; text-underline-offset: 0.15em; }

/* Billing batch illustration (/features/billing) */
.ui-batch { min-width: 640px; font-size: 0.78rem; }
.ui-batch table { border-collapse: collapse; width: 100%; }
.ui-batch th, .ui-batch td { border: 1px solid var(--line-soft); padding: 0.45rem 0.6rem; text-align: left; font-weight: 500; color: var(--muted); white-space: nowrap; }
.ui-batch thead th { font-weight: 600; background: var(--surface); color: var(--ink); }
.ui-batch tbody th { font-weight: 600; background: var(--surface); color: var(--ink); }
.ui-batch .num { text-align: right; }
.ui-batch .b-units { font-weight: 650; color: var(--evergreen); }
.ui-batch tr.b-excluded th, .ui-batch tr.b-excluded td { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(32, 36, 31, 0.05) 6px 12px); }
.ui-batch .b-strike { text-decoration: line-through; text-decoration-color: rgba(32, 36, 31, 0.4); }
.ui-batch .b-flag i { color: var(--status-maintenance); font-style: normal; font-weight: 700; margin-right: 0.3rem; }
.ui-batch .b-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.9rem; }
.ui-batch .b-sums { color: var(--muted); }
.ui-batch .b-sums strong { color: var(--ink); font-weight: 650; }
.ui-batch .b-export { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--evergreen); color: var(--paper-on-deep); border-radius: var(--radius-sm); padding: 0.45rem 0.85rem; font-weight: 600; }

/* ---- Smart Button composer illustration (/features/programs-automation) ---- */
.ui-smartbtn { display: grid; gap: 0.9rem; font-size: 0.8rem; }
.ui-smartbtn .sb-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ui-smartbtn .sb-preview { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--evergreen); color: #fff; font-weight: 650; border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; }
.ui-smartbtn .sb-preview i { font-style: normal; background: rgba(255, 255, 255, 0.18); border-radius: 3px; padding: 0.05rem 0.35rem; font-size: 0.72rem; letter-spacing: 0.04em; }
.ui-smartbtn .sb-head-meta { color: var(--muted); font-size: 0.75rem; }
.ui-smartbtn .sb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-width: none; }
.ui-smartbtn .sb-step { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; border: 1px solid var(--line-soft); background: var(--card); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; }
.ui-smartbtn .sb-num { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--wash); color: var(--evergreen-deep); font-weight: 700; font-size: 0.72rem; display: inline-flex; align-items: center; justify-content: center; }
.ui-smartbtn .sb-body { display: grid; gap: 0.4rem; min-width: 0; }
.ui-smartbtn .sb-body strong { color: var(--ink); font-size: 0.8rem; }
.ui-smartbtn .sb-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ui-smartbtn .sb-chip { border: 1px solid var(--line-soft); background: var(--surface); border-radius: 999px; padding: 0.12rem 0.6rem; font-size: 0.72rem; color: var(--muted); }
.ui-smartbtn .sb-chip--prompt { border: 1px dashed var(--evergreen); background: var(--card); color: var(--evergreen-deep); font-weight: 600; }
.ui-smartbtn .sb-note { font-size: 0.75rem; color: var(--muted); }
.ui-smartbtn .sb-var { font-style: normal; background: var(--wash); color: var(--evergreen-deep); border-radius: 3px; padding: 0 0.3rem; font-weight: 600; }
.ui-smartbtn .sb-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; color: var(--muted); font-size: 0.75rem; }
.ui-smartbtn .sb-foot span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ui-smartbtn .sb-foot span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--evergreen); flex-shrink: 0; }

/* Printed referral UI representation — /features/referrals-partners */
.ui-referral { max-width: 640px; margin-inline: auto; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; font-size: 0.82rem; }
.ui-referral .r-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 0.9rem; }
.ui-referral .r-title { font-weight: 650; color: var(--ink); }
.ui-referral .r-chip { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--evergreen-deep); background: var(--wash); border-radius: 999px; padding: 0.2rem 0.6rem; white-space: nowrap; }
.ui-referral .r-grid { display: grid; grid-template-columns: 1fr auto; gap: 1.1rem; align-items: start; }
.ui-referral .r-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; }
.ui-referral .r-row span { color: var(--muted); }
.ui-referral .r-row strong { color: var(--ink); font-weight: 650; text-align: right; }
.ui-referral .r-qr { text-align: center; color: var(--muted); font-size: 0.7rem; max-width: 8.5rem; }
.ui-referral .r-qr svg { display: block; margin: 0 auto 0.4rem; color: var(--ink); background: #fff; border: 1px solid var(--line-soft); border-radius: 4px; padding: 6px; }
.ui-referral .r-qr span { display: block; line-height: 1.4; }
.ui-referral .r-closure { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; background: var(--wash); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; color: var(--evergreen-deep); }
.ui-referral .r-closure svg { flex: none; margin-top: 0.1rem; }
.ui-referral .r-closure p { margin: 0; font-size: 0.8rem; max-width: none; }
.ui-referral .r-closure .r-when { display: block; font-weight: 650; margin-bottom: 0.15rem; }
@media (max-width: 560px) { .ui-referral .r-grid { grid-template-columns: 1fr; } .ui-referral .r-qr { max-width: none; } }

/* /features/forms — side-by-side translation editor representation */
.ui-translate { min-width: 560px; font-size: 0.8rem; }
.ui-translate .tr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; margin-bottom: 0.8rem; font-size: 0.74rem; color: var(--muted); }
.ui-translate .tr-chip { display: inline-block; border-radius: 999px; padding: 0.12rem 0.6rem; font-weight: 600; font-size: 0.68rem; font-style: normal; }
.ui-translate .tr-chip--ai { background: var(--wash); color: var(--evergreen-deep); border: 1px solid var(--evergreen); }
.ui-translate .tr-chip--edited { background: var(--evergreen); color: #fff; }
.ui-translate .tr-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.ui-translate .tr-head { background: var(--surface); color: var(--ink); font-weight: 600; padding: 0.5rem 0.75rem; }
.ui-translate .tr-cell { padding: 0.55rem 0.75rem; border-top: 1px solid var(--line-soft); color: var(--ink); }
.ui-translate .tr-cell--section { background: var(--surface); font-weight: 600; }
.ui-translate .tr-kind { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.18rem; }
.ui-translate .tr-kind .tr-chip { margin-left: 0.4rem; text-transform: none; letter-spacing: normal; }
.ui-translate .tr-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.ui-translate .tr-opt { border: 1px solid var(--line); border-radius: 999px; padding: 0.08rem 0.55rem; color: var(--muted); font-weight: 500; }

/* ---- /features/intake-management — live submissions grid (.ui-intake) ---- */
.ui-intake { min-width: 640px; font-size: 0.78rem; color: var(--ink); }
.ui-intake .grid-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.65rem; }
.ui-intake .view-chip { border: 1px solid var(--line); background: var(--wash); border-radius: 999px; padding: 0.18rem 0.7rem; font-weight: 600; color: var(--evergreen-deep); }
.ui-intake .searchbox { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.18rem 0.6rem; color: var(--muted); background: var(--card); }
.ui-intake .presence { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); margin-left: auto; }
.ui-intake .presence i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; font-style: normal; color: var(--paper-on-deep); }
.ui-intake .p-a { background: var(--evergreen); }
.ui-intake .p-b { background: var(--card); border: 2px solid var(--status-maintenance); color: var(--ink); }
.ui-intake table { width: 100%; border-collapse: collapse; background: var(--card); }
.ui-intake th, .ui-intake td { border: 1px solid var(--line-soft); padding: 0.42rem 0.55rem; text-align: left; white-space: nowrap; vertical-align: middle; }
.ui-intake thead th { background: var(--surface); font-weight: 600; padding: 0.35rem 0.55rem; }
.ui-intake tbody th { font-weight: 600; }
.ui-intake .badge { display: inline-block; border-radius: 999px; padding: 0.08rem 0.55rem; font-size: 0.68rem; font-weight: 650; }
.ui-intake .badge-exact { background: var(--evergreen); color: var(--paper-on-deep); }
.ui-intake .badge-probable { border: 1px solid var(--status-maintenance); color: var(--ink); background: var(--card); }
.ui-intake .badge-new { border: 1px dashed var(--evergreen); color: var(--evergreen-deep); background: var(--card); }
.ui-intake .st { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.ui-intake .st i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); background: transparent; flex: none; }
.ui-intake .st-ready i { border-color: var(--status-maintenance); background: var(--status-maintenance); }
.ui-intake .st-approved i { border-color: var(--evergreen); background: var(--evergreen); }
.ui-intake .cell-editing { position: relative; box-shadow: inset 0 0 0 2px var(--evergreen); background: var(--wash); }
.ui-intake .editor-tag { position: absolute; top: -7px; right: -5px; background: var(--evergreen); color: var(--paper-on-deep); font-size: 0.55rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.35rem; line-height: 1.3; }
.ui-intake .row-tint th, .ui-intake .row-tint td { background: #f9efdd; }
.ui-intake .grid-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.65rem; color: var(--muted); font-size: 0.72rem; }

/* ---- /features/public-intake-portal: portal phone + arrival illustration ---- */
.ui-portal .ui-portal-duo { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
@media (max-width: 760px) { .ui-portal .ui-portal-duo { grid-template-columns: 1fr; justify-items: center; } .ui-portal .ui-portal-duo .uiframe { width: 100%; } }
.ui-portal .phone { width: 15rem; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 0.55rem 0.55rem 0.8rem; }
.ui-portal .phone-top { display: flex; justify-content: center; padding: 0.2rem 0 0.5rem; }
.ui-portal .phone-top i { width: 3.4rem; height: 5px; border-radius: 3px; background: var(--line); }
.ui-portal .phone-screen { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; padding: 0.8rem; font-size: 0.72rem; color: var(--muted); }
.ui-portal .p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.55rem; }
.ui-portal .p-head strong { font-size: 0.78rem; color: var(--ink); line-height: 1.25; }
.ui-portal .p-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.ui-portal .p-lang span { padding: 0.1rem 0.45rem; font-weight: 600; font-size: 0.66rem; }
.ui-portal .p-lang .on { background: var(--evergreen); color: var(--paper-on-deep); }
.ui-portal .p-step { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--evergreen); margin: 0 0 0.5rem; }
.ui-portal .p-q { font-size: 0.78rem; font-weight: 600; color: var(--ink); margin: 0 0 0.55rem; }
.ui-portal .p-source { border: 1px solid var(--line-soft); background: var(--card); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; margin-bottom: 0.45rem; }
.ui-portal .p-source strong { display: block; color: var(--ink); font-size: 0.72rem; }
.ui-portal .p-add { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; text-align: center; font-weight: 600; color: var(--evergreen); margin-bottom: 0.6rem; }
.ui-portal .p-next { background: var(--evergreen); color: var(--paper-on-deep); border-radius: var(--radius-sm); text-align: center; font-weight: 600; padding: 0.5rem; }
.ui-portal .arrival-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--line-soft); }
.ui-portal .arrival-main strong { display: block; font-size: 0.82rem; color: var(--ink); }
.ui-portal .arrival-sub { font-size: 0.72rem; color: var(--muted); }
.ui-portal .badge { flex-shrink: 0; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.ui-portal .badge-match { border: 1px solid var(--evergreen); color: var(--evergreen-deep); background: var(--wash); }
.ui-portal .badge-unverified { border: 1px solid var(--status-maintenance); color: #7c4d0d; background: #faf1e2; }
.ui-portal .arrival-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.75rem; }
.ui-portal .arrival-actions span { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.3rem 0.7rem; font-size: 0.7rem; font-weight: 600; color: var(--evergreen-deep); background: var(--card); }

/* ---- /features/events — event page + day-of check-in UI representation ---- */
.ui-event .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); align-items: start; }
@media (max-width: 900px) { .ui-event .duo { grid-template-columns: 1fr; } }
.ui-event .ev-page { display: grid; gap: 0.7rem; font-size: 0.8rem; color: var(--muted); justify-items: start; }
.ui-event .ev-hero { width: 100%; height: 72px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--wash), var(--surface)); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ui-event .ev-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 640; color: var(--ink); }
.ui-event .ev-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
.ui-event .ev-capline { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.78rem; }
.ui-event .ev-capline strong { color: var(--ink); font-weight: 650; }
.ui-event .ev-track { width: 100%; height: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line-soft); overflow: hidden; }
.ui-event .ev-track i { display: block; height: 100%; border-radius: 4px; background: var(--evergreen); }
.ui-event .ev-ticket { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); padding: 0.55rem 0.8rem; color: var(--ink); font-weight: 600; }
.ui-event .ev-ticket .qty { font-weight: 500; font-size: 0.72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; }
.ui-event .ev-chip { display: inline-flex; align-items: center; background: var(--wash); color: var(--evergreen-deep); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.75rem; font-weight: 600; }
.ui-event .ev-note { margin: 0; font-size: 0.72rem; max-width: none; }
.ui-event .ev-btn { display: inline-block; background: var(--evergreen); color: var(--paper-on-deep); border-radius: var(--radius); padding: 0.5rem 1.2rem; font-size: 0.8rem; font-weight: 600; }
.ui-event .ev-counts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding-bottom: 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line-soft); font-size: 0.75rem; color: var(--muted); }
.ui-event .ev-counts strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; color: var(--ink); margin-right: 0.25rem; }
.ui-event .ev-row { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.55rem 0.1rem; border-bottom: 1px solid var(--line-soft); font-size: 0.78rem; color: var(--ink); }
.ui-event .ev-row:last-child { border-bottom: 0; }
.ui-event .ev-row .who { display: flex; flex-direction: column; gap: 0.1rem; font-weight: 600; }
.ui-event .ev-row .who span { font-weight: 500; font-size: 0.7rem; color: var(--muted); }
.ui-event .ev-row .acts { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.ui-event .st { border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.ui-event .st-in { background: var(--wash); color: var(--evergreen-deep); }
.ui-event .st-open { border: 1px solid var(--evergreen); color: var(--evergreen); }
.ui-event .st-no { border: 1px solid var(--line-soft); color: var(--muted); }
.ui-event .undo { font-size: 0.7rem; text-decoration: underline; }

/* Facilitator mobile attendance grid (parent-education-classes). Status is never
   color alone: letters P/A/L/E label every pill; late = amber border + ink text
   (per token rule: --status-maintenance never carries small text). */
.ui-attendgrid { max-width: 23rem; margin-inline: auto; }
.ui-attendgrid .ag-head { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.55rem; }
.ui-attendgrid .ag-head strong { color: var(--ink); font-weight: 650; }
.ui-attendgrid .ag-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.1rem; border-top: 1px solid var(--line-soft); }
.ui-attendgrid .ag-row:last-of-type { border-bottom: 1px solid var(--line-soft); }
.ui-attendgrid .ag-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); min-width: 0; }
.ui-attendgrid .ag-name small { display: block; font-weight: 500; font-size: 0.68rem; color: var(--muted); }
.ui-attendgrid .ag-pills { display: flex; gap: 0.3rem; flex-shrink: 0; }
.ui-attendgrid .ag-pill { width: 1.7rem; height: 1.7rem; border: 1px solid var(--line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.72rem; color: var(--muted); background: var(--card); }
.ui-attendgrid .ag-pill.is-present { background: var(--evergreen); border-color: var(--evergreen); color: #fff; }
.ui-attendgrid .ag-pill.is-absent { background: var(--status-offline); border-color: var(--status-offline); color: #fff; }
.ui-attendgrid .ag-pill.is-late { border: 2px solid var(--status-maintenance); color: var(--ink); font-weight: 700; }
.ui-attendgrid .ag-pill.is-excused { background: var(--wash); border-color: var(--evergreen); color: var(--evergreen-deep); font-weight: 700; }
.ui-attendgrid .ag-foot { margin-top: 0.8rem; }
.ui-attendgrid .ag-walkin { display: inline-block; border: 1px dashed var(--line); border-radius: 999px; padding: 0.3rem 0.85rem; font-weight: 600; font-size: 0.72rem; color: var(--evergreen-deep); }
.ui-attendgrid .ag-note { font-size: 0.72rem; color: var(--muted); margin-top: 0.6rem; }

.ui-geomap .geo-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.9rem; }
.ui-geomap .geo-chip { font-size: 0.73rem; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0.28rem 0.75rem; }
.ui-geomap .geo-chip strong { color: var(--ink); font-weight: 650; }
.ui-geomap svg { display: block; width: 100%; min-width: 520px; height: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }

.features-hub .module-head p { font-size: var(--step-0); color: var(--ink); max-width: 52ch; margin: 0; }
.features-hub .module-head p + p { margin-top: 0.7em; }

/* /solutions hub — audience rows */
.sol-hub .sol-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(1.7rem, 3.5vw, 2.5rem); border-top: 1px solid var(--line-soft); }
.sol-hub .sol-row:first-of-type { border-top: 0; padding-top: 0; }
.sol-hub .sol-row h2 { font-size: var(--step-2); margin-bottom: 0.45em; }
.sol-hub .sol-row p { margin-bottom: 0; }
@media (max-width: 760px) { .sol-hub .sol-row { grid-template-columns: 1fr; gap: 1.2rem; } }

.ui-caapools { display: grid; gap: 0.9rem; }
.ui-caapools .split { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); padding: 0.9rem 1rem; font-size: 0.8rem; }
.ui-caapools .split-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.45rem; }
.ui-caapools .split-head strong { color: var(--ink); font-weight: 650; }
.ui-caapools .split-head span { color: var(--muted); }
.ui-caapools .split-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-top: 1px dashed var(--line-soft); color: var(--muted); }
.ui-caapools .split-ok { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.55rem; font-weight: 600; color: var(--evergreen-deep); }

/* /solutions/shelters-housing — group check-out card (UI representation) */
.ui-shexit { max-width: 36rem; display: grid; gap: 0.9rem; font-size: 0.85rem; }
.ui-shexit .stay { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; }
.ui-shexit .stay strong { color: var(--ink); font-weight: 650; }
.ui-shexit .stay .dates { display: block; color: var(--muted); font-size: 0.78rem; }
.ui-shexit .nights { color: var(--muted); font-size: 0.78rem; }
.ui-shexit .nights b { color: var(--ink); font-weight: 650; font-size: 0.95rem; }
.ui-shexit .members { display: grid; gap: 0.35rem; }
.ui-shexit .member { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); padding: 0.45rem 0.7rem; color: var(--ink); font-weight: 500; }
.ui-shexit .member svg { color: var(--evergreen); flex-shrink: 0; }
.ui-shexit .member span { margin-left: auto; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.ui-shexit .field label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.ui-shexit .select { display: flex; align-items: center; gap: 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 0.5rem 0.7rem; color: var(--ink); }
.ui-shexit .select svg { margin-left: auto; color: var(--muted); flex-shrink: 0; }
.ui-shexit .chip { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--evergreen-deep); background: var(--wash); border-radius: 999px; padding: 0.15rem 0.55rem; flex-shrink: 0; }
.ui-shexit .automation { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; color: var(--muted); border-left: 3px solid var(--evergreen); padding-left: 0.7rem; }
.ui-shexit .automation svg { color: var(--evergreen); flex-shrink: 0; margin-top: 0.1rem; }
.ui-shexit .doit { justify-self: start; font-weight: 600; font-size: 0.8rem; color: var(--paper-on-deep); background: var(--evergreen); border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; }

/* /solutions/food-banks-community-aid — distribution-day grid representation */
.ui-fooddist { min-width: 560px; font-size: 0.78rem; }
.ui-fooddist .fd-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-bottom: 0.6rem; }
.ui-fooddist .fd-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--evergreen); display: inline-block; }
.ui-fooddist table { border-collapse: collapse; width: 100%; }
.ui-fooddist th, .ui-fooddist td { border: 1px solid var(--line-soft); padding: 0.45rem 0.6rem; text-align: left; color: var(--muted); white-space: nowrap; }
.ui-fooddist thead th { font-weight: 600; background: var(--surface); color: var(--ink); }
.ui-fooddist td strong { color: var(--ink); font-weight: 600; }
.ui-fooddist .fd-badge { display: inline-block; border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.7rem; font-weight: 600; line-height: 1.5; }
.ui-fooddist .fd-badge.is-match { background: var(--evergreen); color: #fff; }
.ui-fooddist .fd-badge.is-probable { border: 1px solid var(--status-maintenance); color: var(--ink); }
.ui-fooddist .fd-badge.is-new { border: 1px solid var(--line); color: var(--ink); }
.ui-fooddist .fd-status { font-weight: 600; color: var(--evergreen-deep); }

/* ---- /solutions/parent-education — cohort completion UI representation (.ui-cohort) ---- */
.ui-cohort .co-list { min-width: 500px; font-size: 0.82rem; }
.ui-cohort .co-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; font-size: 0.78rem; color: var(--muted); padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft); }
.ui-cohort .co-head strong { color: var(--ink); }
.ui-cohort .co-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
.ui-cohort .co-name { flex: 1 1 auto; font-weight: 600; color: var(--ink); }
.ui-cohort .co-name small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); }
.ui-cohort .co-dots { display: inline-flex; gap: 0.3rem; flex: none; }
.ui-cohort .co-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--evergreen); }
.ui-cohort .co-dots i.d-off { background: var(--card); border: 1px solid var(--line); }
.ui-cohort .co-dots i.d-ov { background: var(--status-maintenance); }
.ui-cohort .co-count { flex: none; min-width: 4.5ch; font-size: 0.75rem; color: var(--muted); text-align: right; }
.ui-cohort .co-chip { flex: none; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 0.18rem 0.6rem; white-space: nowrap; }
.ui-cohort .co-chip.is-ready { background: var(--wash); border: 1px solid var(--evergreen); color: var(--evergreen-deep); }
.ui-cohort .co-chip.is-below { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.ui-cohort .co-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; padding-top: 0.8rem; }
.ui-cohort .co-generate { display: inline-block; background: var(--evergreen); color: var(--paper-on-deep); font-size: 0.78rem; font-weight: 600; border-radius: var(--radius-sm); padding: 0.45rem 0.9rem; }
.ui-cohort .co-legend { font-size: 0.72rem; color: var(--muted); }

/* /reporting — saved-report-definition UI representation */
.ui-repdef { min-width: 560px; font-size: 0.8rem; color: var(--ink); }
.ui-repdef .rd-row { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); gap: 0.9rem; align-items: baseline; padding-block: 0.55rem; border-top: 1px solid var(--line-soft); }
.ui-repdef .rd-row:first-child { border-top: 0; padding-top: 0; }
.ui-repdef .rd-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ui-repdef .rd-val { color: var(--ink); }
.ui-repdef .rd-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ui-repdef .rd-chip { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 0.08rem 0.6rem; color: var(--muted); background: var(--card); white-space: nowrap; }
.ui-repdef .rd-chip--on { background: var(--evergreen); border-color: var(--evergreen); color: #fff; font-weight: 600; }
.ui-repdef .rd-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 0.85rem; border-top: 1px solid var(--line-soft); margin-top: 0.2rem; }
.ui-repdef .rd-btn { display: inline-block; border-radius: var(--radius-sm); padding: 0.35rem 0.9rem; font-weight: 600; background: var(--evergreen); color: #fff; }
.ui-repdef .rd-btn--ghost { background: var(--card); color: var(--evergreen-deep); border: 1px solid var(--line); }

/* /security — audit & access monitoring: flag-queue illustration + rules list */
.ui-audit .fq { min-width: 560px; font-size: 0.8rem; }
.ui-audit .fq-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 0.75rem; }
.ui-audit .fq-head strong { color: var(--ink); font-weight: 650; }
.ui-audit .fq-export { color: var(--evergreen-deep); font-weight: 600; font-size: 0.73rem; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.ui-audit .fq-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; align-items: start; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--paper); padding: 0.65rem 0.85rem; }
.ui-audit .fq-row + .fq-row { margin-top: 0.55rem; }
.ui-audit .fq-ico { color: var(--status-maintenance); line-height: 0; margin-top: 0.15rem; }
.ui-audit .fq-row.is-resolved .fq-ico { color: var(--evergreen); }
.ui-audit .fq-main strong { display: block; color: var(--ink); }
.ui-audit .fq-main span { display: block; color: var(--muted); }
.ui-audit .fq-main em { display: block; font-style: normal; color: var(--muted); font-size: 0.7rem; margin-top: 0.15rem; }
.ui-audit .fq-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--status-maintenance); border-radius: 999px; padding: 0.16rem 0.6rem; white-space: nowrap; color: var(--ink); background: var(--status-maintenance-wash); }
.ui-audit .fq-row.is-resolved .fq-badge { color: var(--evergreen-deep); border-color: var(--evergreen); background: var(--wash); }
.ui-audit .rules { list-style: none; counter-reset: sec-rule; margin: 0 0 1.1em; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2.2rem; }
@media (max-width: 720px) { .ui-audit .rules { grid-template-columns: 1fr; } }
.ui-audit .rules li { margin: 0; position: relative; padding-left: 2.35rem; }
.ui-audit .rules li::before { counter-increment: sec-rule; content: counter(sec-rule); position: absolute; left: 0; top: 0.1rem; width: 1.55rem; height: 1.55rem; border: 1px solid var(--evergreen); border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: var(--evergreen-deep); }
.ui-audit .rules strong { display: block; color: var(--ink); }
.ui-audit .rules span { color: var(--muted); font-size: var(--step--1); }

/* ---- /pricing — price card (.nn-pricing) ---------------------------------- */
.nn-pricing .price-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .nn-pricing .price-grid { grid-template-columns: 1fr; } }
.nn-pricing .price-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); }
.nn-pricing .price-tag { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--evergreen); margin: 0 0 1rem; }
.nn-pricing .price-figure { display: flex; align-items: baseline; gap: 0.7rem; margin: 0; }
.nn-pricing .price-amount { font-family: var(--font-display); font-size: clamp(3.2rem, 7vw, 4.2rem); font-weight: 640; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.nn-pricing .price-unit { font-size: var(--step--1); font-weight: 600; color: var(--muted); line-height: 1.35; }
.nn-pricing .price-terms { margin: 0.9rem 0 0; font-size: var(--step--1); color: var(--muted); }
.nn-pricing .price-includes { list-style: none; margin: 1.3rem 0 1.5rem; padding: 1.3rem 0 0; border-top: 1px solid var(--line-soft); max-width: none; }
.nn-pricing .price-includes li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--step--1); margin-bottom: 0.6rem; }
.nn-pricing .price-includes svg { color: var(--evergreen); flex-shrink: 0; margin-top: 0.2rem; }
.nn-pricing .price-card .button { display: block; text-align: center; }
.nn-pricing .price-note { margin: 0.9rem 0 0; font-size: var(--step--1); color: var(--muted); text-align: center; }

.nn-about .steps { list-style: none; counter-reset: nn-step; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.nn-about .steps li { counter-increment: nn-step; margin: 0; }
.nn-about .steps li::before { content: counter(nn-step); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--evergreen); color: var(--paper-on-deep); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.7rem; }
.nn-about .steps h3 { margin-bottom: 0.35em; }
.nn-about .steps p { font-size: var(--step-0); margin: 0; }
@media (max-width: 800px) { .nn-about .steps { grid-template-columns: 1fr; } }

/* /contact — form + aside layout */
.nn-contact .hero-grid { align-items: start; }
.nn-contact .contact-aside {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.nn-contact .contact-aside h3 { margin-bottom: 0.4em; }
.nn-contact .contact-aside ul { padding-left: 1.1rem; }