:root {
  --black: #0a0a0a;
  --dark: #1a1a1a;
  --gray-900: #262626;
  --gray-800: #333333;
  --gray-700: #4d4d4d;
  --gray-600: #666666;
  --gray-500: #808080;
  --gray-400: #999999;
  --gray-300: #b3b3b3;
  --gray-200: #cccccc;
  --gray-100: #e5e5e5;
  --gray-50: #f5f5f5;
  --off-white: #fafafa;
  --white: #ffffff;
  --border: #e0e0e0;
  --border-light: rgba(255, 255, 255, 0.1);
  --text-primary: var(--black);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-400);
  --text-inverse: var(--white);
  --text-inverse-secondary: rgba(255, 255, 255, 0.7);
  --text-inverse-tertiary: rgba(255, 255, 255, 0.4);
  --positive: #10b981;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--white);
  margin: 0;
}

h1, h2, h3, h4 { line-height: 1.1; margin: 0; }
p { line-height: 1.6; margin: 0 0 1.5rem; }
p:last-child { margin-bottom: 0; }

h1 { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 600; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
h4 { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 3rem;
}
.section-inner {
  max-width: 1100px;
  width: 100%;
}
.content-section { background: var(--white); }
.content-section.alt { background: var(--off-white); }
.content-section.dark { background: var(--black); color: var(--text-inverse); }

.section-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 2rem;
}
.dark .section-label { color: var(--text-inverse-tertiary); }

.lead {
  font-size: 1.375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  font-weight: 300;
  max-width: 760px;
}
.dark .lead { color: var(--text-inverse-secondary); }

.callout {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  line-height: 1.5;
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 3rem 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn:hover { background: var(--gray-700); border-color: var(--gray-700); }
.btn.light {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.btn.light:hover { background: var(--gray-200); border-color: var(--gray-200); }
.btn.ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}
.btn.ghost:hover { border-color: var(--black); background: transparent; }
.btn.small { padding: 0.55rem 1.1rem; font-size: 0.75rem; }

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
nav .nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav .logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text-primary);
}
nav .logo-mark {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
nav .logo-mark svg { width: 16px; height: 16px; stroke: var(--black); }
nav .logo-text {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
nav .nav-links { display: flex; gap: 2rem; align-items: center; }
nav .nav-links a {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
nav .nav-links a:hover { color: var(--text-primary); }
nav .nav-links a.nav-cta {
  padding: 0.5rem 1.1rem;
  background: var(--black);
  color: var(--white);
  border-radius: 999px;
}
nav .nav-links a.nav-cta:hover { background: var(--gray-700); }

/* HERO */
.hero {
  min-height: 100vh;
  background: var(--black);
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 3rem;
}
.hero-split-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.hero-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-inverse-tertiary);
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 2rem;
}
.hero .subtitle {
  font-size: 1.1875rem;
  font-weight: 300;
  color: var(--text-inverse-secondary);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
}
.stat {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--text-inverse-tertiary);
  padding-left: 1rem;
}
.stat-value {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
}
.stat-label {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inverse-tertiary);
  margin-top: 0.5rem;
  line-height: 1.5;
}
.widget-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  color: var(--text-primary);
}
.widget-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.widget-card figcaption {
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 1rem 0.5rem 0.5rem;
  line-height: 1.5;
}

/* SERVICES GRID */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 3rem 0;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  transition: border-color 0.2s;
}
.service-card:hover { border-color: var(--gray-400); }
.service-card .num {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 1.5rem;
}
.service-card h3 { margin-bottom: 0.75rem; }
.service-card p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* GALLERY */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
.gallery-grid figure { margin: 0; }
.gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  filter: grayscale(1);
}
.gallery-grid figcaption {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 0.75rem 0.25rem 0;
}

/* FINAL */
.final {
  background: var(--black);
  color: var(--text-inverse);
  text-align: center;
}
.final h2 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 2rem; }
.final p {
  font-size: 1.25rem;
  color: var(--text-inverse-secondary);
  max-width: 700px;
  margin: 0 auto 2.5rem;
  font-weight: 300;
  line-height: 1.7;
}

/* FOOTER + SCROLL */
footer {
  background: var(--black);
  color: var(--text-inverse-tertiary);
  padding: 3rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
footer a { color: var(--text-inverse-secondary); text-decoration: none; }
footer a:hover { color: var(--white); }
.scroll-indicator {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s;
  z-index: 50;
}
.scroll-indicator:hover { background: var(--black); border-color: var(--black); }
.scroll-indicator:hover svg { stroke: var(--white); }
.scroll-indicator svg {
  width: 16px;
  height: 16px;
  stroke: var(--black);
  transition: stroke 0.2s;
}

@media (max-width: 900px) {
  section { padding: 6rem 1.5rem; min-height: auto; }
  .hero { padding: 7rem 1.5rem; min-height: 100vh; }
  .hero-split-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-widget { order: -1; }
  .hero-stats { flex-wrap: wrap; gap: 1.5rem; }
  .services-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  nav .nav-links { display: none; }
  nav .nav-inner { padding: 1rem 1.5rem; }
}


/* TOOLKIT OVERVIEW */
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 3rem 0;
}
.tool-card {
  background: var(--dark);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text-inverse);
  transition: border-color 0.2s, transform 0.2s;
}
.tool-card:hover { border-color: var(--gray-500); transform: translateY(-2px); }
.tool-card .num {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-inverse-tertiary);
}
.tool-card h3 { font-size: 1.0625rem; }
.tool-card p {
  font-size: 0.8125rem;
  color: var(--text-inverse-secondary);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}
.tool-card .go {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-inverse-secondary);
}
.demo-note {
  font-size: 0.8125rem;
  color: var(--text-inverse-tertiary);
  border-top: 1px solid var(--border-light);
  padding-top: 1.5rem;
  max-width: 760px;
  line-height: 1.7;
}

/* APP FRAME + FORMS */
.app-frame {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
  margin-top: 3rem;
}
.alt .app-frame { box-shadow: 0 10px 30px -18px rgba(0,0,0,0.18); }
.app-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.app-head .app-tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 2rem 0 1.5rem;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--black); }
.field input::placeholder,
.field textarea::placeholder { color: var(--gray-300); }
.confirm {
  display: none;
  border: 1px solid var(--border);
  border-left: 3px solid var(--black);
  border-radius: 8px;
  background: var(--off-white);
  padding: 1.25rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-top: 1.5rem;
}
.confirm.show { display: block; }
.confirm strong { font-weight: 600; }
.form-note { font-size: 0.8125rem; color: var(--text-tertiary); margin-top: 1rem; line-height: 1.6; }

/* TABLES + STATUS */
.data-table {
  width: 100%;
  margin: 2rem 0 1rem;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 400;
  vertical-align: middle;
}
.data-table th {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.data-table .ref { color: var(--text-tertiary); font-size: 0.75rem; white-space: nowrap; }
.data-table select {
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text-primary);
  cursor: pointer;
}
.data-table .row-action {
  font-family: inherit;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.data-table .row-action:hover { border-color: var(--negative); color: var(--negative); }
.empty-row td {
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
  padding: 2rem 0;
}
.pill {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pill.done { border-color: var(--positive); color: var(--positive); }
.pill.stock { border-color: var(--black); color: var(--black); }
.summary-line {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.summary-line .pill { font-size: 0.6875rem; }
.filter-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.filter-btn {
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--gray-400); }
.filter-btn.active { background: var(--black); border-color: var(--black); color: var(--white); }
.table-scroll { overflow-x: auto; }

/* SELF-CHECK */
.check-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
}
.reading-line {
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 1.25rem;
  line-height: 1.4;
}
.reading-line.size-1 { font-size: 1.375rem; }
.reading-line.size-2 { font-size: 1rem; }
.reading-line.size-3 { font-size: 0.6875rem; }
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.check-row:last-child { border-bottom: none; }
.check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  accent-color: var(--black);
  flex-shrink: 0;
  cursor: pointer;
}
.verdict {
  display: none;
  border: 1px solid var(--border);
  border-left: 3px solid var(--black);
  border-radius: 8px;
  background: var(--off-white);
  padding: 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.verdict.show { display: block; }
.verdict a { color: var(--text-primary); font-weight: 600; }
.disclaimer {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 2rem;
  line-height: 1.6;
}

/* calibrated self-check */
.sc-step[hidden] { display: none; }
.sc-notes { margin: 1rem 0 0; padding-left: 1.25rem; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.6; }
.sc-notes li { margin-bottom: 0.75rem; }
.sc-notes strong { color: var(--text-primary); font-weight: 600; }
.sc-instruction { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 1.25rem; }
.sc-instruction strong { color: var(--text-primary); }
.sc-cal-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 2rem 1.5rem; border: 1px dashed var(--border); border-radius: 8px; background: var(--white); overflow-x: auto; }
#sc-cal-rect { width: 320px; flex-shrink: 0; height: 202px; border: 2px solid var(--black); border-radius: 6px; background: var(--white); box-shadow: 0 8px 20px -14px rgba(0,0,0,0.4); display: flex; align-items: flex-end; justify-content: center; }
#sc-cal-rect span { font-size: 0.75rem; color: var(--text-tertiary); padding: 0.5rem; }
.sc-slider { width: 100%; max-width: 420px; accent-color: var(--black); }
.sc-cal-readout { font-size: 0.875rem; color: var(--text-secondary); }
.sc-cal-note { font-size: 0.8125rem; color: var(--text-secondary); margin: 0 0 1rem; }
.sc-step-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap; }
.sc-back { background: none; border: none; padding: 0; font: inherit; font-size: 0.875rem; color: var(--text-secondary); text-decoration: underline; cursor: pointer; }
.sc-back:hover { color: var(--text-primary); }
.app-frame .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sc-line-block { margin-bottom: 0.75rem; }
.sc-line-block .reading-line { margin-bottom: 0.35rem; white-space: nowrap; overflow-x: auto; }
.sc-line-size { color: var(--text-tertiary); font-size: 0.8125rem; font-weight: 400; }
.sc-range { margin-bottom: 1rem; font-size: 1rem; }
.sc-range-value { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; margin-right: 0.4rem; }
.sc-range-tag { display: block; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--text-secondary); }
.sc-why { display: block; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--text-secondary); }
.sc-saved-note { font-size: 0.875rem; color: var(--text-secondary); margin-top: 1rem; }
#sc-redflag-msg.show { border-left-width: 6px; }

/* IMPACT CALCULATOR */
.calc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 2rem;
  align-items: start;
}
.calc-display {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--white);
}
.calc-amount {
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.calc-amount sup { font-size: 0.4em; font-weight: 500; vertical-align: super; }
.calc-caption {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  margin-top: 0.75rem;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--black);
  cursor: pointer;
  margin: 2rem 0 0.5rem;
}
.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}
.calc-breakdown { list-style: none; margin: 0; padding: 0; }
.calc-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}
.calc-breakdown li:last-child { border-bottom: none; }
.calc-breakdown .val { font-weight: 600; white-space: nowrap; }
.rates-note {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 1rem;
  line-height: 1.6;
}

/* EVENTS */
.event-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.event-list li {
  display: flex;
  gap: 2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.event-list li:last-child { border-bottom: none; }
.event-date {
  min-width: 6.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.event-body { flex-grow: 1; }
.event-body strong { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
.event-body span { font-size: 0.875rem; color: var(--text-secondary); }
.event-list a { color: var(--text-primary); font-weight: 500; font-size: 0.875rem; }
@media (max-width: 900px) {
  .toolkit-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .calc-layout { grid-template-columns: 1fr; }
  .event-list li { flex-direction: column; gap: 0.5rem; }
  .app-frame { padding: 1.5rem; }
}

/* ===== GLASSES BANK · structured lens data ===== */
.pill.unmeasured { border-style: dashed; color: var(--text-secondary); }
.power-cyl { font-size: 0.6875rem; color: var(--text-tertiary); white-space: nowrap; }
.check-inline { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; cursor: pointer; margin-top: 0.4rem; }
.check-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--black);
  flex-shrink: 0;
  cursor: pointer;
}

/* ===== GRANT ENGINE · staff portal ===== */
.tool-card.ge-staff-card { border-style: dashed; }
.ge-login { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
.ge-demo-pass { font-size: 0.9375rem; color: var(--text-secondary); margin: 1.25rem 0 1.25rem; }
.ge-demo-pass strong { color: var(--text-primary); font-weight: 600; letter-spacing: 0.02em; }
.ge-panel { border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 2.25rem; }
.ge-panel:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.ge-profile-mission {
  font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7;
  background: var(--off-white); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.25rem 1.5rem; margin-top: 1.5rem;
}
.ge-profile-mission strong { color: var(--text-primary); }
.ge-src { display: block; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--text-tertiary); }
.ge-src a { color: var(--text-secondary); font-weight: 500; }
.ge-priorities { display: flex; gap: 0.75rem 1.75rem; flex-wrap: wrap; margin-top: 0.25rem; }
.ge-inline-status { display: inline-block; margin-left: 1rem; font-size: 0.8125rem; color: var(--text-secondary); }
.ge-search-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.75rem 0 0; align-items: center; }
.ge-search-row input {
  flex: 1; min-width: 220px;
  font-family: inherit; font-size: 0.875rem; color: var(--text-primary);
  background: var(--white); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.6rem 1.1rem; outline: none;
}
.ge-search-row input:focus { border-color: var(--black); }
.ge-search-row select {
  font-family: inherit; font-size: 0.8125rem; color: var(--text-primary);
  background: var(--white); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.55rem 0.9rem; cursor: pointer;
}
.ge-search-row select:focus { border-color: var(--black); }
.ge-grant {
  border: 1px solid var(--border); border-radius: 12px; background: var(--white);
  padding: 1.75rem; margin-top: 1.25rem;
}
.ge-grant.ge-top { border: 2px solid var(--black); }
.ge-grant-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ge-funder { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.ge-program { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 0.3rem; }
.ge-top-tag {
  display: inline-block; margin-top: 0.5rem;
  background: var(--black); color: var(--white);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 0.25rem 0.75rem;
}
.ge-score { text-align: right; white-space: nowrap; }
.ge-score-num { display: block; font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ge-score-cap { display: block; margin-top: 0.3rem; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.ge-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.pill.ge-example { border-style: dashed; border-color: var(--gray-400); color: var(--text-secondary); }
.ge-reasons { margin: 1rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
.ge-reasons li { margin-bottom: 0.35rem; }
.ge-notes { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-tertiary); line-height: 1.6; }
.ge-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }
.ge-actions select {
  font-family: inherit; font-size: 0.75rem; color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 999px; background: var(--white);
  padding: 0.4rem 0.7rem; cursor: pointer;
}
.ge-note-ok {
  margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6;
  border-left: 3px solid var(--black); padding-left: 0.9rem;
}
.ge-countdown { font-variant-numeric: tabular-nums; }
.ge-pipe-program { font-size: 0.75rem; color: var(--text-tertiary); }
.field textarea.ge-draft-ta { min-height: 132px; }
@media (max-width: 900px) {
  .ge-login { grid-template-columns: 1fr; }
  .ge-score { text-align: left; }
}

/* ===== MULTI-PAGE ADDITIONS ===== */
section { min-height: auto; }
section.hero, section.home-full { min-height: 100vh; }
.page-section { padding-top: 7.5rem; padding-bottom: 5rem; }

/* active nav state */
nav .nav-links a.active { color: var(--text-primary); font-weight: 600; }
nav .nav-links a.nav-cta.active { color: var(--white); }

/* mobile menu */
.nav-toggle { display: none; }
.nav-burger { display: none; }
@media (max-width: 900px) {
  .nav-burger {
    display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px;
  }
  .nav-burger span { width: 20px; height: 2px; background: var(--black); display: block; }
  nav .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); flex-direction: column; align-items: flex-start;
    padding: 1.5rem 3rem; gap: 1.25rem; border-bottom: 1px solid var(--border);
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
}

/* footer */
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.9rem; }
.footer-brand { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-inverse-secondary); }
.footer-links a { margin: 0 0.35rem; }

/* content page cta row */
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; }
.section-cta { margin-top: 2.5rem; }

/* donate tiers */
.tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 3rem 0; }
.tier-card { background: var(--white); color: var(--text-primary); border-radius: 12px; padding: 2rem 1.75rem; text-align: left; }
.tier-card .amount { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.tier-card .provides { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 900px) { .tiers-grid { grid-template-columns: 1fr; } }

/* audience toolkit nav: condensed labels between burger and full widths */
nav .nav-links a .nav-short { display: none; }
@media (max-width: 1150px) and (min-width: 901px) {
  nav .nav-links { gap: 1.1rem; }
  nav .nav-links a .nav-long { display: none; }
  nav .nav-links a .nav-short { display: inline; }
}

/* audience toolkit pages: intro cross-links + function group headings */
.toolkit-also { font-size: 0.8125rem; color: var(--text-inverse-secondary); margin: 1.25rem 0 0; }
.toolkit-also a { color: var(--text-inverse); text-decoration: underline; text-underline-offset: 3px; }
.toolkit-also .here-now { color: var(--text-inverse-tertiary); }
.toolkit-group-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-inverse-tertiary); margin: 3.25rem 0 0; }
.toolkit-group-title + .toolkit-grid { margin-top: 1.25rem; }
.tool-card.portal-card-dashed { border-style: dashed; }
#vm-panel { scroll-margin-top: 6.5rem; }

/* app pager */
.app-pager { max-width: 1100px; margin: 0 auto; padding: 0 3rem 4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.app-pager a { font-size: 0.8125rem; color: var(--text-secondary); text-decoration: none; letter-spacing: 0.02em; }
.app-pager a:hover { color: var(--text-primary); }

/* vision match panel */
.vm-estimate { font-size: 0.9375rem; color: var(--text-secondary); margin: 1.25rem 0 0; line-height: 1.6; }
.vm-estimate strong { color: var(--text-primary); }
.vm-empty { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; margin: 1.25rem 0 0; }
.vm-disclaimer { border-top: 1px solid var(--border); padding-top: 0.9rem; margin-top: 1.25rem; }
.vm-cards { display: grid; gap: 1rem; margin: 1.25rem 0 0; }
.vm-card { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; background: var(--white); flex-wrap: wrap; }
.vm-card-main { min-width: 240px; }
.vm-card-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.vm-style { font-weight: 600; letter-spacing: -0.01em; }
.vm-badge { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.7rem; color: var(--text-secondary); }
.vm-badge.close { border-color: var(--black); color: var(--black); }
.vm-powers { margin-top: 0.4rem; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.vm-id { margin-left: 0.6rem; font-size: 0.6875rem; color: var(--text-tertiary); letter-spacing: 0.04em; }
.vm-note { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.55; }
.vm-confirm { border-left: 3px solid var(--black); padding: 0.35rem 0 0.35rem 1rem; margin: 1.25rem 0 0; font-size: 0.9375rem; line-height: 1.6; }
.vm-reserve { white-space: nowrap; }

/* ===== PORTALS: staff / provider / patient ===== */
.portal-panel { border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 2.25rem; }
.portal-panel:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.portal-login { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
.portal-demo-pass { font-size: 0.9375rem; color: var(--text-secondary); margin: 1.25rem 0; }
.portal-demo-pass strong { color: var(--text-primary); font-weight: 600; letter-spacing: 0.02em; }
.portal-inline-status { display: inline-block; margin-left: 1rem; font-size: 0.8125rem; color: var(--text-secondary); }
.portal-hub-links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.portal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0 2.75rem; }
.portal-stat { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; }
.portal-stat .num { display: block; font-size: 1.875rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.portal-stat .cap { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-top: 0.3rem; }
.portal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.portal-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.4rem; }
.portal-card h3 { font-size: 1.0625rem; margin: 0; letter-spacing: -0.01em; }
.portal-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.portal-kv { display: flex; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.7; }
.portal-kv b { font-weight: 500; color: var(--text-tertiary); white-space: nowrap; }
.portal-kv span { min-width: 0; overflow-wrap: anywhere; }
.portal-meta { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; }
.portal-badge { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.7rem; color: var(--text-secondary); white-space: nowrap; }
.portal-badge.open { border-color: var(--black); color: var(--black); }
.portal-badge.claimed { background: var(--gray-600); border-color: var(--gray-600); color: var(--white); }
.portal-badge.scheduled { background: var(--black); border-color: var(--black); color: var(--white); }
.portal-badge.completed, .portal-badge.confirmed { border-color: var(--positive); color: var(--positive); }
.portal-badge.confirmed { background: var(--positive); color: var(--white); }
.portal-badge.closed { border-style: dashed; color: var(--text-tertiary); }
.portal-badge.followup { border-style: dashed; border-color: var(--black); color: var(--black); }
.claim-card .claim-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.claim-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }
.ba-thumbs { display: flex; align-items: center; gap: 0.6rem; }
.ba-fig { margin: 0; text-align: center; }
.ba-fig img { width: 84px; height: 63px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.ba-fig figcaption { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 0.3rem; }
.img-thumb-preview { width: 96px !important; height: 72px !important; }
.img-slot { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; margin-top: 0.4rem; }
.img-slot .grow { flex: 1; min-width: 200px; }
.img-preview-row { margin-top: 0.6rem; }
.record-card { display: flex; gap: 1.25rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.record-main { flex: 1; min-width: 240px; }
.pp-mode-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.pp-complete-box { border: 1px solid var(--border); border-left: 3px solid var(--black); border-radius: 10px; background: var(--white); padding: 1.25rem 1.5rem; margin-top: 1.5rem; }
.pa-act-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.pa-act-row select, .pa-act-row input { flex: 1; min-width: 180px; }
.pa-checklist { list-style: none; padding: 0; margin: 0; }
.pa-checklist li { padding: 0.7rem 0 0.7rem 1.9rem; position: relative; border-bottom: 1px solid var(--border); font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }
.pa-checklist li:last-child { border-bottom: none; }
.pa-checklist li:before { content: ""; position: absolute; left: 0.15rem; top: 1rem; width: 0.75rem; height: 0.75rem; border: 1.5px solid var(--black); border-radius: 2px; }
.portal-note-ok { border-left: 3px solid var(--positive); padding: 0.35rem 0 0.35rem 1rem; margin-top: 1rem; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }
.portal-note-ok strong { color: var(--text-primary); }
.sp-form-title { margin: 3rem 0 0; font-size: 1.25rem; letter-spacing: -0.01em; }
@media (max-width: 900px) { .portal-stats { grid-template-columns: repeat(2, 1fr); } .portal-login { grid-template-columns: 1fr; } }

/* ===== GAMBIA + EYECARE RESOURCES CENTER ===== */
.src-note { font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.6; margin: 0.75rem 0 0; }
.src-note a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.src-note a:hover { color: var(--text-primary); }
.dark .src-note { color: var(--text-inverse-tertiary); }
.dark .src-note a { color: var(--text-inverse-secondary); }
.dark .src-note a:hover { color: var(--text-inverse); }
.dark .gallery-grid figcaption { color: var(--text-inverse-secondary); }
.dark .vm-badge { border-color: var(--border-light); color: var(--text-inverse-secondary); }
.toc-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.75rem 0 0; }
.toc-links a { font-size: 0.8125rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.9rem; text-decoration: none; color: var(--text-secondary); background: var(--white); }
.toc-links a:hover { border-color: var(--black); color: var(--black); }
.branch-record { background: var(--off-white); border: 1px dashed var(--gray-400); border-radius: 12px; padding: 1.75rem 1.75rem 1.5rem; margin-top: 2.75rem; }
.branch-record h3 { margin: 0.75rem 0 0; font-size: 1.0625rem; letter-spacing: -0.01em; }
.branch-record dl { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 0.6rem 1.5rem; margin: 1.25rem 0 0; }
.branch-record dt { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.branch-record dd { margin: 0; font-size: 0.9375rem; color: var(--text-primary); }
.pending { color: var(--text-tertiary); font-style: italic; }
.verified-stamp { display: inline-block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.9rem; color: var(--text-secondary); background: var(--white); }
.dark .verified-stamp { border-color: var(--border-light); color: var(--text-inverse-secondary); background: transparent; }
.urgent-box { background: var(--white); border: 2px solid var(--black); border-radius: 12px; padding: 1.75rem 2rem; margin-top: 2.5rem; }
.urgent-box h3 { margin: 0; font-size: 1.0625rem; letter-spacing: -0.01em; }
.urgent-box ul { margin: 1rem 0 0; padding-left: 1.25rem; }
.urgent-box li { margin: 0.4rem 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-primary); }
#erc-intro, #erc-stats .data-table td a { overflow-wrap: anywhere; }
@media (max-width: 900px) { .branch-record dl { grid-template-columns: 1fr; } }

/* =====================================================================
   I See You All — design layer (v2, 2026-10-23)
   Appended last by build_site.py, so it re-skins the browser-tested
   markup without touching the tools' structure.

   Colour comes from the I See You All logo (navy, teal, leaf, gold).
   Type is Atkinson Hyperlegible Next, drawn by the Braille Institute for
   readers with low vision: a site about seeing, set in a face made to be seen.
   The one bold move is the home headline, a wall eye chart with a
   without/with glasses switch; the lenses drop in once on load.
   ===================================================================== */

:root {
  --navy: #0d2b5e;        /* logo ring; text and dark sections */
  --navy-2: #163a75;      /* raised surfaces on navy */
  --teal: #00777a;        /* links and primary actions (AA on white) */
  --teal-bright: #00a8a8; /* logo teal; rules and accents only */
  --leaf: #3d8a23;        /* positive states (AA on white) */
  --leaf-bright: #78c030; /* logo green; accents only */
  --gold: #f2a81d;        /* donate and keyboard focus */
  --wash: #edf6f5;        /* alternate section background */

  --black: var(--navy);
  --dark: var(--navy-2);
  --gray-900: #1b2f52;
  --gray-800: #2a3f63;
  --gray-700: #3f5275;
  --gray-600: #4d5d78;
  --gray-500: #6b7a92;
  --gray-400: #8a97ab;
  --gray-300: #b2bccb;
  --gray-200: #d3dbe5;
  --gray-100: #e6ecf2;
  --gray-50: #f3f6f9;
  --off-white: var(--wash);
  --border: #d6e0ea;
  --border-light: rgba(255, 255, 255, 0.18);
  --text-secondary: #46566f;
  --text-tertiary: #66748b;
  --text-inverse-secondary: rgba(255, 255, 255, 0.8);
  --text-inverse-tertiary: rgba(255, 255, 255, 0.62);
  --positive: var(--leaf);
}

html { font-size: 17px; }
body {
  font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--navy);
}
h1, h2 { font-weight: 800; letter-spacing: -0.01em; }
h2 { line-height: 1.12; }
h3 { font-weight: 700; letter-spacing: 0; }
.lead, .hero .subtitle, .final p, .callout { font-weight: 400; }
a { color: var(--teal); }

/* Keyboard focus: one visible ring everywhere */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* Labels in sentence case, not tracked-out capitals */
.section-label, .hero-label, h4, .stat-label, .toolkit-group-title, .footer-brand,
.tool-card .go, .app-head .app-tag, .pill, .portal-badge, .vm-badge, .verified-stamp,
.portal-stat .cap, .ba-fig figcaption, .ge-funder, .ge-score-cap, .ge-top-tag,
.event-date, .data-table th, .field label, .filter-btn, .range-labels, .sc-range-tag {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}
.section-label, .hero-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 1rem;
}
.dark .section-label, .final .section-label { color: #7fd6d3; }
.toolkit-group-title { font-size: 0.95rem; color: #7fd6d3; }

/* Sections: generous, not full-screen */
section, section.home-full { min-height: auto; padding: 6.5rem 3rem; }
.page-section { padding-top: 8.5rem; padding-bottom: 5.5rem; }

/* Buttons */
.btn { font-weight: 700; font-size: 0.95rem; letter-spacing: 0; padding: 0.85rem 1.6rem; }
.btn:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn.ghost { border-color: var(--navy); }
.btn.ghost:hover { background: var(--wash); }
.dark .btn.ghost:hover, .final .btn.ghost:hover { background: rgba(255, 255, 255, 0.08); }
.final .btn.light, .dark .btn.light { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.final .btn.light:hover, .dark .btn.light:hover { background: #ffbe45; border-color: #ffbe45; }

/* Nav */
nav { background: rgba(255, 255, 255, 0.97); }
nav .nav-inner { padding: 0.7rem 3rem; }
nav .logo-img { width: 46px; height: 46px; object-fit: contain; display: block; }
nav .logo-text { font-size: 1.05rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--navy); }
nav .nav-links a { font-size: 0.9rem; color: var(--navy); letter-spacing: 0; }
nav .nav-links a:hover { color: var(--teal); }
nav .nav-links a.active { color: var(--teal); font-weight: 700; box-shadow: inset 0 -2px 0 var(--teal-bright); padding-bottom: 2px; }
nav .nav-links a.nav-cta { background: var(--gold); color: var(--navy); font-weight: 700; box-shadow: none; }
nav .nav-links a.nav-cta:hover, nav .nav-links a.nav-cta.active { background: #ffbe45; color: var(--navy); }

/* Hero: the wall eye chart, Marie and her sisters beside it */
section.hero { min-height: auto; }
.hero {
  background: var(--wash);
  color: var(--navy);
  padding: 7.5rem 3rem 4rem;
  flex-direction: column;
}
.hero-split-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4rem; align-items: start; max-width: 1180px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.eye-chart {
  container-type: inline-size;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2.4rem 1.25rem 1.6rem;
  box-shadow: 0 1px 0 rgba(13, 43, 94, 0.04), 0 28px 50px -34px rgba(13, 43, 94, 0.45);
}
.chart-rows { list-style: none; margin: 0; padding: 0; counter-reset: row; }
.chart-rows li {
  counter-increment: row;
  display: grid; grid-template-columns: 2.2rem 1fr 3.4rem; align-items: center;
  color: var(--navy);
}
.chart-rows li::before, .chart-rows li::after {
  font-size: 0.8rem; font-weight: 700; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.chart-rows li::before { content: counter(row); text-align: left; }
.chart-rows li::after { content: attr(data-acuity); text-align: right; }
.chart-rows span {
  display: block; text-align: center; white-space: nowrap;
  text-transform: uppercase; font-weight: 700; line-height: 1.12;
  letter-spacing: 0.16em; margin-right: -0.16em; /* letters spaced like optotypes, still centred */
  transition: filter 1.1s cubic-bezier(.2, .7, .2, 1), opacity 1.1s;
}
/* sizes in container units, so the chart scales with its card */
.chart-rows li:nth-child(1) span { font-size: 26cqi; line-height: 1; letter-spacing: 0; margin-right: 0; }
.chart-rows li:nth-child(2) span { font-size: 15cqi; letter-spacing: 0.22em; margin-right: -0.22em; }
.chart-rows li:nth-child(3) span { font-size: 10cqi; letter-spacing: 0.2em; margin-right: -0.2em; }
.chart-rows li:nth-child(4) span { font-size: 6.4cqi; letter-spacing: 0.18em; margin-right: -0.18em; }
.chart-rows li:nth-child(5) span { font-size: 4.4cqi; }
.chart-rows li { padding: 0.9cqi 0; }
.chart-rows li.line-red, .chart-rows li.line-green { padding-bottom: 2.4cqi; border-bottom: 2px solid #c8423b; margin-bottom: 1.6cqi; }
.chart-rows li.line-green { border-bottom-color: var(--leaf-bright); margin-bottom: 0; }

/* on wide screens the chart stands as tall as the column beside it, rows spread like a wall chart */
@media (min-width: 901px) {
  .hero-split-inner { align-items: stretch; }
  .hero-chart-col { display: flex; flex-direction: column; }
  .eye-chart { flex: 1; display: flex; flex-direction: column; }
  .chart-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
}

/* The lens dial: one blur for every row, as with uncorrected vision; big rows survive */
.eye-chart { --lens-blur: 0px; }
.chart-rows span { filter: blur(var(--lens-blur)); transition: filter 0.45s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .chart-rows span { transition: none; } }

.lens-dial { margin-top: 1.1rem; }
.lens-dial > label { display: block; font-size: 0.95rem; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; }
.lens-track { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); }
.lens-track input[type="range"] { width: 100%; accent-color: var(--teal); height: 2rem; cursor: pointer; margin: 0; }
.lens-note { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--text-secondary); min-height: 1.5em; }
.lens-more { display: inline-block; margin-top: 0.35rem; font-weight: 700; color: var(--teal); }
@media (max-width: 520px) { .lens-track { grid-template-columns: 1fr 1fr; } .lens-track input[type="range"] { grid-column: 1 / -1; grid-row: 1; } .lens-track span:last-child { text-align: right; } }

.hero-content { display: flex; flex-direction: column; }
.hero .subtitle { color: var(--text-secondary); font-size: 1.15rem; margin: 1.5rem 0 1.75rem; max-width: 34rem; }
.hero .btn.light { background: var(--teal); border-color: var(--teal); color: #fff; }
.hero .btn.light:hover { background: var(--navy); border-color: var(--navy); }
.hero-stats { max-width: 1180px; width: 100%; margin: 3.5rem auto 0; padding-top: 2rem; border-top: 1px solid var(--border); }
.stat { border-left: 3px solid var(--teal-bright); }
.stat:nth-child(2) { border-left-color: var(--leaf-bright); }
.stat:nth-child(3) { border-left-color: var(--gold); }
.stat-value { font-weight: 800; }
.stat-label { font-size: 0.85rem; color: var(--text-secondary); }

.hero-photo { margin: 0; }
.hero-photo img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 6 / 5; object-fit: cover; object-position: 50% 35%;
  border-radius: 22px 22px 22px 4px;
  box-shadow: 0 30px 60px -34px rgba(13, 43, 94, 0.5);
}
.hero-photo figcaption { font-size: 0.9rem; color: var(--text-secondary); padding: 0.7rem 0.25rem 0; }

/* Cards: numbers only where the content is a sequence */
.service-card .num, .tool-card .num { display: none; }
.service-card { border-radius: 14px; border-top: 4px solid var(--teal-bright); }
.service-card:nth-child(2) { border-top-color: var(--leaf-bright); }
.service-card:nth-child(3) { border-top-color: var(--gold); }
.service-card:nth-child(4) { border-top-color: var(--navy); }
.service-card:hover { border-color: var(--gray-300); }
.service-card p, .tool-card p { font-size: 1rem; }
.tool-card { background: var(--navy-2); border-radius: 14px; }
.tool-card:hover { border-color: #7fd6d3; }
.tool-card .go { color: #7fd6d3; font-size: 0.9rem; }

/* Photos in colour */
.gallery-grid img { filter: none; border-radius: 16px; }
.gallery-grid figcaption { font-size: 0.9rem; }

/* App frames and forms */
.app-frame { border-radius: 18px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.18); outline: none; }
.confirm { border-left-color: var(--leaf); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pill.done, .pill.stock { border-color: var(--leaf); color: var(--leaf); }
.vm-badge.close, .portal-badge.open { border-color: var(--teal); color: var(--teal); }

/* Closing band and footer */
.final { background: var(--navy); }
footer { background: #0a2350; font-size: 0.9rem; letter-spacing: 0; line-height: 1.7; }
.footer-brand { color: #fff; font-size: 1.05rem; font-weight: 800; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; }
.footer-links a { margin: 0; }
footer a { color: rgba(255, 255, 255, 0.85); }
footer a:hover { color: var(--gold); }
.scroll-indicator { border-color: var(--border); }

.staging-bar {
  background: var(--gold); color: var(--navy); text-align: center;
  font-size: 0.9rem; font-weight: 700; padding: 0.45rem 1rem;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
}
body.is-staging { padding-bottom: 2.4rem; }

@media (max-width: 900px) {
  section, section.home-full { padding: 4.5rem 1.5rem; }
  .page-section { padding-top: 7rem; padding-bottom: 4rem; }
  .hero { padding: 6rem 1.25rem 3.5rem; }
  .hero-split-inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero-widget { order: 0; }
  .eye-chart { padding: 1.6rem 0.6rem 1.1rem; }
  .chart-rows li { grid-template-columns: 1.3rem 1fr 2.6rem; }
  .chart-rows li::before, .chart-rows li::after { font-size: 0.7rem; }
  .hero-stats { margin-top: 2.5rem; }
  nav .nav-inner { padding: 0.6rem 1.5rem; }
  nav .nav-links { padding: 1.5rem; }
  nav .nav-links a { font-size: 1.05rem; }
}

/* The gallery's concept photos are black and white: tint them in brand colour so they
   read as a deliberate set beside the full-colour photo of Marie and her sisters. */
.gallery-grid .tint { display: block; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #5e98a3 0%, #24426f 100%); }
.gallery-grid .tint img { border-radius: 0; mix-blend-mode: luminosity; filter: contrast(1.08) brightness(1.06); }

/* Small print stays readable: nothing below about 13.5px */
.app-head .app-tag, .field label, .form-note, .src-note, .demo-note, .rates-note, .disclaimer,
.data-table th, .pill, .portal-badge, .vm-badge, .ge-funder, .ge-score-cap, .portal-kv, .portal-meta,
.app-pager a, .widget-card figcaption, .sc-cal-note, .vm-id, .ba-fig figcaption, .event-date {
  font-size: max(0.8rem, 13.5px) !important;
}
.app-head .app-tag { color: var(--teal); font-weight: 700; }
.app-pager a { color: var(--teal); font-weight: 700; }

/* Accounts (stage 1): sign in, invitations, two-step sign-in, Marie's team page */
.account-inner { max-width: 620px; }
.acct-panel h2 { outline: none; }
.acct-form .field { margin-bottom: 1.1rem; }
.acct-form .form-grid { margin: 1rem 0 0.5rem; }
.acct-form .cta-row { margin-top: 1.25rem; }
.field label, .acct-choice legend { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.field input, .field select, .field textarea { font-size: 1rem; }
.acct-choice { border: 0; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.55rem; }
.acct-choice label { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; cursor: pointer; }
.acct-choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--teal); }
.acct-error { color: #a3261d; font-weight: 700; margin: 0.5rem 0 0; }
.acct-error::before { content: "⚠ "; }
.acct-ok { color: var(--leaf); font-weight: 700; margin: 0.5rem 0 0; }
.acct-steps { padding-left: 1.3rem; margin: 0 0 1.5rem; display: grid; gap: 0.9rem; line-height: 1.6; }
.acct-qr { width: 200px; max-width: 70vw; margin: 1rem 0 0.25rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.acct-qr svg { display: block; width: 100%; height: auto; }
.acct-secret { font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; word-break: break-all; background: var(--wash); padding: 0.1rem 0.4rem; border-radius: 4px; }
.acct-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.5rem; }
.acct-links .form-note { flex-basis: 100%; margin-top: 0.25rem; }
.team-sub { margin-top: 2rem; font-size: 1.05rem; }
#team .app-frame + .app-frame { margin-top: 1.5rem; }
#team .data-table td, #team .data-table th { vertical-align: middle; }
#team .data-table select { font: inherit; font-size: 0.95rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--navy); }
#team .data-table td .btn + .btn { margin-left: 0.4rem; }
nav .nav-links a.nav-signin { font-weight: 700; color: var(--teal); }
@media (max-width: 900px) { .acct-form .form-grid { grid-template-columns: 1fr; } }

/* Anything marked hidden stays hidden, even buttons and fields whose own style sets a display */
[hidden] { display: none !important; }

/* See what they see (see.html) and the home-page strip */
.see-title { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 1.75rem; max-width: 22ch; }
.see-story { max-width: 40rem; display: grid; gap: 1rem; }
.see-story p { font-size: 1.2rem; line-height: 1.7; margin: 0; color: var(--navy); }
.see-story p:first-child::first-letter { font-size: 3.2em; float: left; line-height: 0.9; margin: 0.08em 0.1em 0 0; font-weight: 800; color: var(--teal); }
.see-lead { margin: 2rem 0 0; font-weight: 700; color: var(--teal); font-size: 1.1rem; }
section.see-intro { padding-bottom: 2rem; }
section.see-sim-section { padding-top: 0; }
.see-sim { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 1.25rem; box-shadow: 0 28px 50px -38px rgba(13, 43, 94, 0.45); }
.see-tabs, .see-glasses, .see-strength, .give-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.see-tabs { margin-bottom: 1rem; }
.see-tabs button, .see-glasses button, .see-strength button, .give-quick button {
  font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; padding: 0.55rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--navy); background: transparent; color: var(--navy);
}
.see-tabs button[aria-pressed="true"], .see-glasses button[aria-pressed="true"], .see-strength button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.see-glasses button[data-glasses="on"][aria-pressed="true"] { background: var(--teal); border-color: var(--teal); }
.see-tabs button:hover, .see-glasses button:hover, .see-strength button:hover, .give-quick button:hover { background: rgba(13, 43, 94, 0.08); }
.see-tabs button[aria-pressed="true"]:hover, .see-strength button[aria-pressed="true"]:hover { background: var(--navy-2); }
.see-stage { border-radius: 12px; overflow: hidden; background: var(--wash); line-height: 0; }
.see-stage .scene { width: 100%; height: auto; display: block; }
.wave-arm { transform-origin: 40px -202px; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) { .wave-arm { animation: isy-wave 1.1s ease-in-out infinite alternate; } }
@keyframes isy-wave { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.see-controls { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-top: 1.1rem; }
.see-strength { align-items: center; }
.see-ctl-label { font-weight: 700; font-size: 0.95rem; margin-right: 0.25rem; color: var(--text-secondary); }
.see-distance { flex: 1 1 220px; display: grid; gap: 0.25rem; }
.see-distance label { font-weight: 700; font-size: 0.95rem; color: var(--navy); }
.see-distance input, .give-dial input[type="range"] { width: 100%; accent-color: var(--teal); height: 2rem; cursor: pointer; margin: 0; }
.see-caption { font-size: 1.35rem; font-weight: 800; color: var(--navy); margin: 1.1rem 0 0.5rem; min-height: 1.5em; }
.see-about h3 { font-size: 1.05rem; margin: 0 0 0.25rem; color: var(--teal); }
.see-about p { margin: 0; max-width: 46rem; color: var(--text-secondary); }
.see-note { font-size: max(0.85rem, 13.5px); color: var(--text-tertiary); margin: 1rem 0 0; }
section.see-give { background: var(--navy); color: #fff; }
.see-give .section-label { color: #7fd6d3; }
.see-give h2 { color: #fff; }
.give-dial { max-width: 40rem; }
.give-dial > label { font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.give-amount { font-size: clamp(3rem, 9vw, 5.25rem); font-weight: 800; line-height: 1; margin: 0.25rem 0 0.5rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.give-dial input[type="range"] { accent-color: var(--gold); }
.give-quick { margin: 0.75rem 0 1.5rem; }
.give-quick button { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.give-quick button:hover { background: rgba(255, 255, 255, 0.1); }
.give-results { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; background: rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 1.1rem 1.25rem; }
.give-results p { margin: 0; font-size: 1.05rem; color: rgba(255, 255, 255, 0.9); }
.give-results strong { display: block; font-size: 1.6rem; color: #fff; }
.give-or { color: rgba(255, 255, 255, 0.6) !important; font-weight: 700; }
.see-give .see-note { color: rgba(255, 255, 255, 0.65); }
.see-give .btn { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.see-give .btn.ghost { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
section.see-strip { background: var(--navy); color: #fff; }
.see-strip .section-label { color: #7fd6d3; }
.see-strip h2 { color: #fff; max-width: 24ch; }
.see-strip .lead { color: rgba(255, 255, 255, 0.85); max-width: 40rem; }
.see-strip .btn { background: var(--gold); border-color: var(--gold); color: var(--navy); }
@media (max-width: 640px) { .give-results { grid-template-columns: 1fr; text-align: left; } .see-sim { padding: 0.75rem; } .see-caption { font-size: 1.15rem; } }

/* Stage 2a: real help requests, tracking page, care queue, my requests */
.req-need { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.req-need legend, .req-consent { font-weight: 700; color: var(--navy); font-size: 0.95rem; margin-bottom: 0.35rem; }
.req-need label, .req-consent { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; cursor: pointer; }
.req-need input, .req-consent input { width: 1.15rem; height: 1.15rem; accent-color: var(--teal); flex: none; }
.req-consent { font-weight: 400; margin-top: 0.5rem; }
.req-hint { margin-top: 0.35rem; }
.req-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.req-screened { background: var(--wash); border-left: 4px solid var(--teal); padding: 0.75rem 1rem; border-radius: 8px; font-weight: 700; margin: 0 0 1rem; }
.req-done h3 { margin-top: 0; font-size: 1.4rem; }
.req-num strong { font-size: 1.25rem; letter-spacing: 0.04em; }
.req-link { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; background: var(--wash); border-radius: 10px; padding: 0.75rem 1rem; margin: 0.5rem 0; }
.req-link a { word-break: break-all; font-weight: 700; }
.track-inner { max-width: 760px; }
.track-inner .app-frame + .app-frame { margin-top: 1.25rem; }
.track-status { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-bottom: 1.25rem; }
.track-status p { margin: 0; color: var(--text-secondary); }
.track-badge { display: inline-block; font-weight: 800; font-size: 0.95rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--teal); color: #fff; }
.track-badge.st-cant_reach { background: #c8423b; }
.track-badge.st-closed, .track-badge.st-fitted { background: var(--leaf); }
.track-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: st; }
.track-steps li { position: relative; padding: 0.55rem 0 0.55rem 2.4rem; color: var(--text-tertiary); counter-increment: st; }
.track-steps li::before { content: counter(st); position: absolute; left: 0; top: 0.4rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--border); background: #fff; font-size: 0.8rem; font-weight: 800; display: grid; place-items: center; color: var(--text-tertiary); }
.track-steps li::after { content: ""; position: absolute; left: calc(0.85rem - 1px); top: 2.15rem; bottom: -0.45rem; width: 2px; background: var(--border); }
.track-steps li:last-child::after { display: none; }
.track-steps li.done { color: var(--navy); }
.track-steps li.done::before { content: "✓"; background: var(--teal); border-color: var(--teal); color: #fff; }
.track-steps li.done::after { background: var(--teal-bright); }
.track-steps li.current { font-weight: 800; }
.track-steps li.current::before { box-shadow: 0 0 0 4px rgba(0, 168, 168, 0.22); }
.track-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.track-messages li { background: var(--wash); border-radius: 10px; padding: 0.75rem 1rem; }
.track-messages p, .cq-history p { margin: 0.25rem 0 0; }
.track-when { display: block; font-size: 0.85rem; color: var(--text-tertiary); }
.cq-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.cq-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.cq-filters select, .cq-filters input[type="search"] { font: inherit; font-size: 0.95rem; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--navy); }
.cq-filters input[type="search"] { flex: 1 1 200px; }
.cq-mine { display: flex; gap: 0.4rem; align-items: center; font-weight: 700; }
.cq-row { cursor: pointer; }
.cq-row:hover td, .cq-row:focus td { background: var(--wash); }
.cq-row:focus { outline: 3px solid var(--gold); outline-offset: -3px; }
.pri { display: inline-block; font-size: 0.8rem; font-weight: 800; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1.5px solid var(--border); }
.pri-urgent { background: #c8423b; border-color: #c8423b; color: #fff; }
.pri-soon { border-color: var(--gold); color: #8a5a00; background: #fff6e0; }
.pri-routine { color: var(--text-secondary); }
.cq-detail { margin-top: 1.5rem; border: 2px solid var(--teal-bright); }
.cq-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cq-detail-head h3 { margin: 0; }
.cq-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 1rem 0 1.25rem; }
.cq-facts dt { font-weight: 700; color: var(--text-secondary); }
.cq-facts dd { margin: 0; overflow-wrap: anywhere; }
.cq-hist-title { margin: 1.5rem 0 0.5rem; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.cq-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.cq-history li { border-left: 3px solid var(--border); padding-left: 0.75rem; }
.pp-list { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.pp-card { display: block; text-decoration: none; color: var(--navy); margin-top: 0 !important; }
.pp-card:hover { border-color: var(--teal); }
.pp-card h3 { margin: 0.6rem 0 0.25rem; }
.pp-card p { margin: 0.25rem 0 0; color: var(--text-secondary); }
.pp-msg { font-style: italic; }
@media (max-width: 700px) { .cq-stats { grid-template-columns: repeat(2, 1fr); } .cq-facts { grid-template-columns: 1fr; } .cq-facts dd { margin-bottom: 0.5rem; } }

/* ---------- Check your eyes (eye-check.html, stage 2b) ---------- */
.ec-banner { border-left: 4px solid var(--teal); background: var(--wash); padding: 0.9rem 1.1rem; border-radius: 0 8px 8px 0; margin: 0 0 1.5rem; line-height: 1.55; }
.ec-progress { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: ec; }
.ec-progress li { counter-increment: ec; font-size: 0.8125rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.8rem; color: var(--text-secondary); background: var(--white); }
.ec-progress li::before { content: counter(ec) ". "; }
.ec-progress li.now { border-color: var(--navy); background: var(--navy); color: #fff; }
.ec-progress li.done { border-color: var(--leaf); color: var(--leaf); }
.ec-frame h3 { margin: 0 0 0.75rem; }
.ec-frame p { line-height: 1.6; }
.ec-small { font-size: 0.875rem; color: var(--text-secondary); }
.ec-list { padding-left: 1.25rem; line-height: 1.7; }
.ec-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.ec-urgent { border: 2px solid #c8423b; border-radius: 10px; padding: 1rem 1.2rem; margin-top: 1rem; background: #fff6f5; }
.ec-dist, .ec-q { border: 0; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.5rem; }
.ec-dist legend, .ec-q legend { font-weight: 700; margin-bottom: 0.5rem; }
.ec-cal-rect { width: 320px; flex-shrink: 0; height: 202px; border: 2px solid var(--black); border-radius: 6px; background: var(--white); display: flex; align-items: flex-end; justify-content: center; }
.ec-cal-rect span { font-size: 0.75rem; color: var(--text-tertiary); padding: 0.5rem; }
.ec-eye-label { font-weight: 700; text-align: center; }
.ec-e-stage { background: #fff; border: 1px solid var(--border); border-radius: 10px; min-height: 45vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ec-e-stage svg { display: block; shape-rendering: crispEdges; }
.ec-arrows { display: grid; grid-template-columns: repeat(4, minmax(56px, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.ec-arrow, .ec-ct-choice { font: inherit; font-size: 1.6rem; font-weight: 700; padding: 0.6rem 0; border: 2px solid var(--navy); border-radius: 10px; background: var(--white); color: var(--navy); cursor: pointer; min-height: 56px; }
.ec-arrow:hover, .ec-ct-choice:hover, .ec-arrow:focus-visible, .ec-ct-choice:focus-visible { background: var(--navy); color: #fff; }
.ec-dial-wrap, .ec-amsler-wrap { display: flex; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1rem; }
.ec-dial { width: 320px; height: 320px; max-width: 100%; }
.ec-amsler { position: relative; display: grid; grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(20, 1fr); border: 1px solid #000; background: #fff; max-width: 100%; aspect-ratio: 1; }
.ec-amsler span { border-right: 1px solid #000; border-bottom: 1px solid #000; cursor: pointer; }
.ec-amsler span:nth-child(20n) { border-right: 0; }
.ec-amsler span:nth-child(n+381) { border-bottom: 0; }
.ec-amsler span.marked { background: rgba(200, 66, 59, 0.45); }
.ec-amsler-dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #000; pointer-events: none; }
.ec-ct-stage { background: #fff; border: 1px solid var(--border); border-radius: 10px; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.ec-ct-letter { font-weight: 700; line-height: 1; font-family: Arial, Helvetica, sans-serif; }
.ec-ct-choices { display: grid; grid-template-columns: repeat(4, minmax(56px, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.ec-verdict { border-radius: 10px; padding: 1.1rem 1.3rem; border: 2px solid var(--border); }
.ec-verdict ul { margin: 0.6rem 0 0; padding-left: 1.2rem; line-height: 1.6; }
.ec-verdict.ec-urgent { border-color: #c8423b; background: #fff6f5; }
.ec-verdict.ec-soon { border-color: #b7791f; background: #fffaf0; }
.ec-verdict.ec-routine { border-color: var(--leaf); background: #f3faf0; }
.ec-facts { margin-top: 1.25rem; }

/* ---------- Providers (stage 3): provider portal, network, referrals in the queue ---------- */
.pv-status { border-left: 4px solid var(--teal); background: var(--wash); padding: 0.9rem 1.1rem; border-radius: 0 8px 8px 0; margin-bottom: 1.25rem; line-height: 1.55; }
.pv-status.pv-draft, .pv-status.pv-needs_info { border-left-color: var(--gold); background: #fff6e0; }
.pv-status.pv-paused { border-left-color: #c8423b; background: #fff6f5; }
.pv-status.pv-verified { border-left-color: var(--leaf); background: #f3faf0; }
.pv-note { margin: 0.5rem 0 0; font-weight: 700; }
.pv-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.pv-tab { font: inherit; font-weight: 700; padding: 0.55rem 1rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--white); color: var(--navy); cursor: pointer; }
.pv-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pv-count { display: inline-block; min-width: 1.4em; padding: 0 0.35em; margin-left: 0.25rem; border-radius: 999px; background: #c8423b; color: #fff; font-size: 0.8rem; text-align: center; }
.pv-refs { display: grid; gap: 1rem; }
.pv-card { margin-top: 0 !important; }
.pv-card.pv-offered { border: 2px solid var(--teal-bright); }
.pv-card h3 { margin: 0.6rem 0 0.25rem; }
.pv-card-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pv-due { font-weight: 700; color: #8a5a00; }
.pv-sub { margin: 1.25rem 0 0.5rem; }
.pv-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.pv-inline input, .pv-inline select, .pv-row input, .pv-row select { font: inherit; padding: 0.5rem 0.65rem; border: 1.5px solid var(--border); border-radius: 8px; background: var(--white); min-height: 44px; }
.pv-inline input[type="text"] { flex: 1 1 14rem; }
.pv-rows { display: grid; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.pv-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pv-services { border: 0; padding: 0; }
.pv-services legend { font-size: 0.95rem; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; }
.pv-services #pv-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.35rem 1rem; }
.pv-past { color: var(--text-secondary); line-height: 1.7; }
.pv-pill { display: inline-block; font-size: 0.8rem; font-weight: 800; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1.5px solid var(--border); white-space: nowrap; }
.pv-pill.pv-verified { border-color: var(--leaf); color: var(--leaf); }
.pv-pill.pv-pending { background: #fff6e0; border-color: var(--gold); color: #8a5a00; }
.pv-pill.pv-needs_info { border-color: var(--gold); color: #8a5a00; }
.pv-pill.pv-paused { border-color: #c8423b; color: #c8423b; }
.cq-refer { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 0.5rem; }
.cq-ref { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 0.6rem; }
.cq-ref.cq-ref-active { border: 2px solid var(--teal-bright); }
.cq-ref p { margin: 0.3rem 0 0.5rem; color: var(--text-secondary); }
.cq-suggest { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.cq-sug { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; }
.cq-sug p { margin: 0.2rem 0 0; color: var(--text-secondary); }
.cq-sug .cq-why { font-size: 0.875rem; }
.cq-sug-off { opacity: 0.6; }
.track-provider { border: 2px solid var(--teal-bright); }

/* ---------- Running the work (stage 4): team home, glasses bank, outreach, volunteering, jobs ---------- */
.th-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
a.portal-stat { text-decoration: none; color: inherit; }
a.portal-stat:hover { border-color: var(--teal); }
.th-follow, .th-events, .or-signups { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.5rem; }
.th-fu, .or-signup, .pv-event { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; }
.th-fu p, .or-signup p, .pv-event p { margin: 0.2rem 0 0; }
.th-fu-act { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.or-signup.in { border-color: var(--leaf); background: #f3faf0; }
.th-events li { line-height: 1.6; }
.th-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.th-links .tool-card h3 { margin: 0 0 0.35rem; }
.gb-readers { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gb-reader { display: flex; flex-direction: column; align-items: center; min-width: 5rem; border: 1.5px solid var(--border); border-radius: 10px; padding: 0.5rem 0.75rem; background: var(--white); }
.gb-reader strong { font-size: 1.15rem; color: var(--navy); }
.gb-outbox { border-left: 4px solid var(--gold); background: #fff6e0; padding: 0.7rem 1rem; border-radius: 0 8px 8px 0; font-weight: 700; }
#gb-video { width: 100%; max-width: 420px; border-radius: 10px; margin-top: 0.75rem; background: #000; }
.gb-pair { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 0.75rem; }
.gb-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; }
.gb-label { display: flex; gap: 0.6rem; align-items: center; border: 1px dashed var(--gray-400); padding: 0.4rem; border-radius: 6px; background: #fff; break-inside: avoid; }
.gb-label img { width: 72px; height: 72px; image-rendering: pixelated; }
.gb-label div { display: flex; flex-direction: column; font-size: 0.8rem; line-height: 1.3; }
.gb-label strong { font-size: 1rem; letter-spacing: 0.04em; }
@media print {
  body.gb-printing * { visibility: hidden; }
  body.gb-printing #gb-labels, body.gb-printing #gb-labels * { visibility: visible; }
  body.gb-printing #gb-labels { position: absolute; left: 0; top: 0; width: 100%; }
}
.vo-events, .jb-list { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.vo-event, .jb-job { margin-top: 0 !important; }
.vo-event h4, .jb-job h3 { margin: 0 0 0.3rem; }
.vo-when { font-weight: 700; color: var(--teal); margin: 0 0 0.5rem; }
.cq-book { border: 2px solid var(--teal-bright); border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.cq-slot-day { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.cq-slot-day strong { min-width: 6.5rem; padding-top: 0.35rem; }
.cq-slot-times { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cq-slot-times .btn[disabled] { opacity: 0.45; text-decoration: line-through; }

/* ---------- Help box on every page: about this page, AI helper, comments and bugs; ⓘ popups ---------- */
.isy-help-fab { position: fixed; left: 16px; bottom: 16px; z-index: 900; display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-weight: 800; padding: 0.55rem 0.95rem 0.55rem 0.6rem; border-radius: 999px; border: 2px solid var(--navy); background: var(--white); color: var(--navy); cursor: pointer; box-shadow: 0 6px 18px -8px rgba(13, 43, 94, 0.5); }
.isy-help-fab:hover, .isy-help-fab:focus-visible { background: var(--navy); color: #fff; }
.isy-help-i, .isy-info { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--teal); color: #fff; font: italic 800 0.9rem/1 Georgia, serif; flex-shrink: 0; }
body.is-staging .isy-help-fab { bottom: 64px; }
.isy-help { position: fixed; left: 16px; bottom: 16px; z-index: 950; width: min(420px, calc(100vw - 32px)); max-height: min(78vh, 640px); display: flex; flex-direction: column; background: var(--white); color: var(--text-primary); border: 2px solid var(--navy); border-radius: 14px; box-shadow: 0 18px 50px -18px rgba(13, 43, 94, 0.55); }
body.is-staging .isy-help { bottom: 64px; max-height: min(70vh, 600px); }
.isy-help-head { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); color: var(--navy); }
.isy-help-x { font: inherit; font-size: 1.4rem; line-height: 1; border: 0; background: none; cursor: pointer; color: var(--navy); padding: 0.1rem 0.4rem; min-width: 44px; min-height: 44px; }
.isy-help-tabs { display: flex; gap: 0.25rem; padding: 0.5rem 0.6rem 0; flex-wrap: wrap; }
.isy-help-tabs button { font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.45rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--white); color: var(--navy); cursor: pointer; }
.isy-help-tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.isy-help-body { padding: 0.75rem 0.9rem 0.9rem; overflow-y: auto; font-size: 0.95rem; line-height: 1.55; }
.isy-help-body h4 { margin: 0.9rem 0 0.35rem; font-size: 0.95rem; color: var(--navy); }
.isy-help-body ol { padding-left: 1.2rem; margin: 0; }
.isy-help-feature { border-top: 1px solid var(--border); padding: 0.5rem 0; }
.isy-help-feature p { margin: 0.2rem 0; }
.isy-help-link { font: inherit; font-size: 0.85rem; border: 0; background: none; color: var(--teal); text-decoration: underline; cursor: pointer; padding: 0; }
.isy-help-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.isy-help-note { color: var(--text-secondary); font-size: 0.85rem; }
.isy-help-about-feature { font-weight: 700; color: var(--teal); margin: 0 0 0.4rem; }
.isy-help-log { display: grid; gap: 0.45rem; margin-bottom: 0.6rem; }
.isy-help-me, .isy-help-ai { margin: 0; padding: 0.5rem 0.7rem; border-radius: 10px; white-space: pre-wrap; }
.isy-help-me { background: var(--wash); justify-self: end; max-width: 88%; }
.isy-help-ai { background: #f4f6fb; border: 1px solid var(--border); }
.isy-help-wait { color: var(--text-secondary); font-style: italic; }
.isy-help-err { color: #b3261e; }
.isy-help-form, .isy-help-send { display: grid; gap: 0.45rem; }
.isy-help-form textarea, .isy-help-send textarea, .isy-help-send input[type="text"] { font: inherit; padding: 0.55rem 0.65rem; border: 1.5px solid var(--border); border-radius: 8px; width: 100%; box-sizing: border-box; }
.isy-help-kinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.isy-help-kinds legend { font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; }
.isy-help-ok { color: var(--leaf); font-weight: 700; margin: 0; }
.isy-help-mine { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.isy-help-mine li, .th-help-item { border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; }
.isy-help-mine p, .th-help-item p { margin: 0.3rem 0 0; }
.isy-help-mine-top { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; }
.isy-help-pill { font-size: 0.75rem; font-weight: 800; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1.5px solid var(--border); }
.isy-help-pill.st-new { border-color: var(--gold); color: #8a5a00; background: #fff6e0; }
.isy-help-pill.st-planned { border-color: var(--teal); color: var(--teal); }
.isy-help-pill.st-fixed, .isy-help-pill.st-done { border-color: var(--leaf); color: var(--leaf); }
.isy-help-reply { border-left: 3px solid var(--teal); padding-left: 0.6rem; font-weight: 600; }
.th-help-item { display: block; }
.th-help-sug { white-space: pre-wrap; font: inherit; font-size: 0.9rem; background: #f4f6fb; border: 1px dashed var(--teal); border-radius: 8px; padding: 0.55rem 0.7rem; margin: 0.5rem 0 0; }
.isy-info { border: 0; cursor: pointer; margin-left: 0.4rem; vertical-align: middle; width: 1.35rem; height: 1.35rem; font-size: 0.82rem; position: relative; }
.isy-info::after { content: ""; position: absolute; inset: -10px; }
.isy-info:hover, .isy-info:focus-visible { background: var(--navy); outline: 2px solid var(--teal-bright); outline-offset: 1px; }
.isy-info-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--teal); margin: 0 0 0.4rem; }
.isy-info-row .isy-info { margin-left: 0; }
.isy-pop { box-sizing: border-box; position: absolute; z-index: 960; background: var(--white); color: var(--text-primary); border: 2px solid var(--teal); border-radius: 12px; padding: 0.8rem 2.6rem 0.8rem 0.9rem; box-shadow: 0 14px 40px -16px rgba(13, 43, 94, 0.5); line-height: 1.5; }
.isy-pop strong { color: var(--navy); }
.isy-pop p { margin: 0.35rem 0 0; font-size: 0.93rem; }
.isy-pop .isy-help-x { position: absolute; top: 0.2rem; right: 0.2rem; }
.isy-help-flash { outline: 3px solid var(--gold); outline-offset: 4px; transition: outline-color 0.4s; }
@media print { .isy-help-fab, .isy-help, .isy-pop, .isy-info, .isy-info-row { display: none !important; } }