/* Orevant design system — "Clear Water" (Aug 2026 redesign)
   Palette: Abyss/Deepwater navy, Tide teal, Shallows accent, Mist ground.
   Typography: Fraunces display, Public Sans body, IBM Plex Mono data. */

:root {
  /* Clear Water brand tokens */
  --abyss: #06202f;
  --deepwater: #0b3a53;
  --tide: #0e7c86;
  --tide-pressed: #0a5a62;
  --shallows: #3ec1cc;
  --mist: #f2f5f4;
  --foam: #ffffff;
  /* semantic (compliance states only) */
  --crit: #b42318;   --crit-bg: #fbe9e7;
  --warn-c: #b45309; --warn-bg: #fbf0dc;
  --ok-c: #166534;   --ok-bg: #e1f2e7;
  --info-c: #1d4ed8; --info-bg: #e3edfb;
  --unv-c: #4b5a68;  --unv-bg: #edeff2;
  /* legacy token names remapped to Clear Water values (keeps all templates working) */
  --navy-950: #06202f;
  --navy-900: #0b3a53;
  --navy-800: #0d4a5c;
  --navy-700: #135a74;
  --teal-800: #0a5a62;
  --teal-600: #0e7c86;
  --teal-500: #129aa6;
  --blue-500: #41586c;
  --blue-300: #9cc3cc;
  --blue-100: #d6e7ec;
  --paper: #f2f5f4;
  --paper-2: #e7edeb;
  --ink: #0a1d2f;
  --ink-soft: #41586c;
  --ink-faint: #5c7386;
  --ink-1: #0a1d2f;
  --ink-2: #41586c;
  --ink-3: #5c7386;
  --teal-700: #0a5a62;
  --line: #e2e9e7;
  --green-600: #166534;
  --green-100: #e1f2e7;
  --amber-600: #9a4a08;
  --amber-100: #fbf0dc;
  --red-600: #b42318;
  --red-100: #fbe9e7;
  --radius: 12px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(10,29,47,.06), 0 8px 24px -12px rgba(10,29,47,.14);
  --shadow-float: 0 24px 60px -24px rgba(7,32,47,.45);
  --font-sans: "Public Sans", "Segoe UI", -apple-system, system-ui, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --maxw: 1180px;
  --tap-min: 44px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.site-header {
  background: var(--navy-950);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 32px; height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 19px; letter-spacing: .3px; }
.brand:hover { text-decoration: none; }
.brand svg { display: block; }
.nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav a { color: var(--blue-100); font-size: 14.5px; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav .btn { margin-left: 8px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; margin-left: 4px; flex-direction: column; gap: 4px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--blue-100); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; }
.mobile-menu a { display: block; padding: 13px 20px; color: var(--blue-100); font-size: 15px; border-top: 1px solid rgba(255,255,255,.08); min-height: 44px; }
.mobile-menu a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.04); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, transform .1s ease;
  font-family: var(--font-sans);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--tide); color: #fff; box-shadow: 0 2px 0 var(--tide-pressed); }
.btn-primary:hover { background: #0c7a80; }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--tide-pressed); }
.btn-outline { border: 1.5px solid rgba(214,231,236,.55); color: var(--blue-100); background: transparent; }
.btn-outline:hover { border-color: #fff; color: #fff; }
.btn-outline-dark { border: 1.5px solid #c8d6d3; color: var(--ink); background: #fff; }
.btn-outline-dark:hover { border-color: var(--tide); color: var(--tide-pressed); }
.btn-lg { padding: 15px 26px; font-size: 15.5px; border-radius: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(900px 420px at 80% -20%, rgba(62,193,204,.30), transparent 60%),
    linear-gradient(178deg, var(--abyss) 0%, var(--deepwater) 70%, #0d4a5c 100%);
  color: #fff; padding: 84px 0 92px;
  position: relative; overflow: hidden;
}
.hero::after {
  /* subtle contour lines, engineering-drawing feel */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 46px, #8fb3cd 46px, #8fb3cd 47px);
}
.hero .wrap { position: relative; z-index: 1; max-width: 860px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.14; letter-spacing: -.5px;
  margin-bottom: 22px;
}
.hero p.lead { font-size: 18.5px; color: var(--blue-100); max-width: 640px; margin-bottom: 28px; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .cta-note { margin-top: 14px; font-size: 13.5px; color: var(--blue-300); }

/* hero inline lookup widget */
.hero-search-panel { max-width: 680px; }
.hero-search-row { display: flex; gap: 10px; }
.hero-search-row input[type=text] {
  flex: 1; padding: 13px 16px; border: 1.5px solid rgba(143,179,205,.35);
  border-radius: 6px; font-size: 15px; background: rgba(255,255,255,.08);
  color: #fff; outline: none;
}
.hero-search-row input[type=text]::placeholder { color: var(--blue-300); }
.hero-search-row input[type=text]:focus { border-color: var(--teal-400); background: rgba(255,255,255,.13); }
.hero-search-row .btn { white-space: nowrap; }
#hero-results { margin-top: 14px; }
#hero-results .result-item {
  background: rgba(255,255,255,.09); border: 1px solid rgba(143,179,205,.25);
  border-radius: 6px; padding: 12px 16px; margin-bottom: 8px; cursor: pointer;
}
#hero-results .result-item:hover { background: rgba(255,255,255,.15); }
#hero-results .result-name { font-weight: 600; color: #fff; font-size: 15px; }
#hero-results .result-meta { font-size: 13px; color: var(--blue-300); margin-top: 3px; }
#hero-results .result-risk-high { color: #f87171; font-weight: 600; }
#hero-results .result-risk-elevated { color: #fbbf24; font-weight: 600; }
#hero-results .result-risk-lower { color: #6ee7b7; }
#hero-results .result-warning {
  font-size: 13px; color: #fbbf24; background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.35); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 8px;
}
#hero-results .result-warning a { color: #fbbf24; text-decoration: underline; }

/* ---------- sections ---------- */
section.band { padding: 72px 0; }
section.band.tint { background: var(--paper-2); }
section.band.dark { background: var(--navy-900); color: #fff; }
.kicker {
  text-transform: uppercase; letter-spacing: 2px; font-size: 12.5px;
  color: var(--teal-600); font-weight: 700; margin-bottom: 12px;
}
.dark .kicker { color: var(--blue-300); }
h2.section-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1.2; margin-bottom: 16px;
  max-width: 720px;
}
.section-sub { color: var(--ink-soft); max-width: 640px; margin-bottom: 40px; font-size: 17px; }
.dark .section-sub { color: var(--blue-100); }

/* three problems */
.col3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.col3 h3 { font-size: 18px; margin-bottom: 10px; }
.col3 p { color: var(--ink-soft); font-size: 15px; }
.col3 .num {
  font-family: var(--font-display); font-size: 15px; color: var(--teal-600);
  border-top: 2px solid var(--teal-600); padding-top: 14px; margin-bottom: 14px;
  display: block; font-weight: 600;
}

/* steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.step { position: relative; padding-top: 18px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -18px; left: 0;
  font-family: var(--font-display); font-size: 44px; color: var(--blue-100);
  font-weight: 500; line-height: 1;
}
.dark .step::before { color: var(--navy-700); }
.step h4 { font-size: 15.5px; margin-bottom: 6px; position: relative; }
.step p { font-size: 13.5px; color: var(--ink-soft); position: relative; }
.dark .step p { color: var(--blue-100); }

/* pricing */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 880px; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px;
}
.price-card.feature { border-top: 4px solid var(--teal-600); }
.price-card h3 { font-size: 17px; margin-bottom: 4px; }
.price-card .amount { font-family: var(--font-display); font-size: 40px; margin: 12px 0 2px; }
.price-card .per { color: var(--ink-faint); font-size: 14px; margin-bottom: 20px; }
.scan-urgency-note { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: 12px 0 0; opacity: 0.85; }
.price-card ul { list-style: none; margin: 0 0 26px; }
.price-card li { padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; color: var(--ink-soft); border-bottom: 1px solid var(--paper-2); }
.price-card li::before {
  content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 7px;
  border-left: 2px solid var(--green-600); border-bottom: 2px solid var(--green-600);
  transform: rotate(-45deg);
}

/* search */
.search-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; max-width: 760px;
}
.search-row { display: flex; gap: 10px; }
.search-row input[type=text] {
  flex: 1; padding: 12px 14px; font-size: 16px; border: 1px solid var(--line);
  border-radius: var(--radius); font-family: var(--font-sans);
}
.search-row select {
  padding: 12px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; background: #fff;
}
.search-row input:focus, .search-row select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--teal-500); outline-offset: 1px;
}
.result-item {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 4px; border-bottom: 1px solid var(--paper-2);
}
.result-item .meta { font-size: 13px; color: var(--ink-faint); }
.result-item strong { font-size: 15.5px; }
.hint { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }

/* ---------- compliance risk banner (free lookup) ---------- */
.risk-banner {
  font-size: 13.5px; line-height: 1.55; border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px; border: 1px solid;
}
.risk-banner .risk-score { font-weight: 700; }
.risk-banner .risk-deadline { display: block; margin: 7px 0 5px; font-size: 13.5px; }
.risk-banner .risk-deadline strong { font-weight: 700; }
.risk-banner a { font-weight: 600; text-decoration: underline; }
.risk-banner.r-low      { color: #1f6b3b; background: #eaf6ee; border-color: #bfe3cb; }
.risk-banner.r-low a    { color: #1f6b3b; }
.risk-banner.r-moderate { color: #8a5a00; background: #fdf3dd; border-color: #f0d9a0; }
.risk-banner.r-moderate a { color: #8a5a00; }
.risk-banner.r-elevated { color: #a34a00; background: #fdeedc; border-color: #f5c79a; }
.risk-banner.r-elevated a { color: #a34a00; }
.risk-banner.r-high    { color: #9b1c1c; background: #fdeaea; border-color: #f2b8b8; }
.risk-banner.r-high a  { color: #9b1c1c; }
/* dark hero surface overrides */
#hero-results .risk-banner {
  color: #e6eef5; background: rgba(255,255,255,.10); border-color: rgba(143,179,205,.3);
}
#hero-results .risk-banner.r-low .risk-score      { color: #6ee7b7; }
#hero-results .risk-banner.r-moderate .risk-score { color: #fbbf24; }
#hero-results .risk-banner.r-elevated .risk-score { color: #fb923c; }
#hero-results .risk-banner.r-high .risk-score     { color: #f87171; }
#hero-results .risk-banner a { color: #8fb3cd; }

/* ---------- email-gated risk card (free lookup) ---------- */
.risk-gate {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 14px 16px; margin-bottom: 10px;
}
.risk-gate-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.risk-gate-flag { color: var(--amber-600); font-size: 16px; line-height: 1; }
.risk-gate-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.risk-gate-form { display: flex; gap: 8px; flex-wrap: wrap; }
.risk-gate-form input {
  flex: 1 1 220px; padding: 9px 11px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
}
.risk-gate-form input:focus { outline: 2px solid var(--teal-500); outline-offset: 1px; }
.risk-gate-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; }
.risk-gate-err {
  background: var(--red-100); color: var(--red-600); font-size: 13px;
  padding: 8px 12px; border-radius: 4px; margin-top: 8px;
}
/* dark hero surface */
#hero-results .risk-gate {
  background: rgba(255,255,255,.10); border-color: rgba(143,179,205,.3);
}
#hero-results .risk-gate.hero .risk-gate-title { color: #e6eef5; }
#hero-results .risk-gate.hero .risk-gate-sub { color: #9fb3c8; }
#hero-results .risk-gate.hero input { background: rgba(255,255,255,.12); border-color: rgba(143,179,205,.3); color: #fff; }
#hero-results .risk-gate.hero input::placeholder { color: #9fb3c8; }

/* ---------- free "What we already see" preview hook (lookup -> scan) ---------- */
.preview-hook {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 14px 16px; margin-bottom: 12px;
}
.preview-hook .ph-head {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tide-pressed); margin-bottom: 10px;
}
.preview-hook .ph-list { list-style: none; margin: 0 0 10px; padding: 0; }
.preview-hook .ph-list li {
  display: flex; gap: 14px; padding: 7px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45;
}
.preview-hook .ph-list li:last-child { border-bottom: 0; }
.preview-hook .ph-k { flex: 0 0 122px; font-weight: 600; color: var(--ink); }
.preview-hook .ph-v { color: var(--ink); }
.preview-hook .ph-note { font-size: 13px; color: var(--ink-faint); margin: 0 0 12px; }

/* ---------- forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; max-width: 460px; margin: 60px auto;
}
.form-card h1 { font-family: var(--font-display); font-size: 26px; margin-bottom: 20px; font-weight: 500; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; font-size: 15px; border: 1px solid var(--line);
  border-radius: var(--radius); font-family: var(--font-sans);
}
.error-box {
  background: var(--red-100); color: var(--red-600); border-radius: var(--radius);
  padding: 12px 14px; font-size: 14px; margin-bottom: 16px;
}
.notice-box {
  background: var(--blue-100); color: var(--navy-800); border-radius: var(--radius);
  padding: 12px 14px; font-size: 14px; margin-bottom: 16px;
}

/* ---------- app shell ---------- */
.app-shell { display: flex; min-height: calc(100vh - 64px); }
.side {
  width: 218px; flex-shrink: 0; background: var(--navy-950); color: var(--blue-100);
  padding: 22px 0;
}
.side a {
  display: block; padding: 10px 24px; color: var(--blue-100); font-size: 14.5px;
}
.side a:hover { background: var(--navy-800); text-decoration: none; color: #fff; }
.side a.active { background: var(--navy-800); color: #fff; border-left: 3px solid var(--teal-500); padding-left: 21px; }
.side .side-label { padding: 18px 24px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--blue-300); }
.main { flex: 1; padding: 36px 40px; max-width: 1080px; }
.main h1 { font-family: var(--font-display); font-weight: 500; font-size: 27px; margin-bottom: 6px; }
.main .sub { color: var(--ink-soft); margin-bottom: 28px; font-size: 15px; }

/* cards & tables */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; }
.card h2 { font-size: 16px; margin-bottom: 14px; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-faint); padding: 8px 10px; border-bottom: 2px solid var(--paper-2); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--paper-2); vertical-align: top; }

/* status pills — never color alone: always text label */
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; }
.pill-ok { background: var(--green-100); color: var(--green-600); }
.pill-warn { background: var(--amber-100); color: var(--amber-600); }
.pill-bad { background: var(--red-100); color: var(--red-600); }
.pill-muted { background: var(--paper-2); color: #44545f; }

/* stat blocks */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.stat .v { font-family: var(--font-display); font-size: 30px; }
.stat .k { font-size: 13px; color: var(--ink-faint); }

/* footer */
.site-footer { background: var(--navy-950); color: var(--blue-300); padding: 44px 0 36px; margin-top: 0; font-size: 14px; }
.site-footer .cols { display: flex; gap: 60px; flex-wrap: wrap; }
.site-footer a { color: var(--blue-300); display: block; padding: 3px 0; }
.site-footer a:hover { color: #fff; }
.site-footer .foot-brand { color: #fff; font-weight: 600; margin-bottom: 8px; }
/* Section labels for the 4 footer columns. On desktop the columns already
   read as separate groups from the flex gap; once they stack to one column
   on mobile (below) that spatial cue disappears, so the columns need a real
   label — without one, ~24 links read as one undifferentiated list. */
.site-footer .foot-head {
  color: var(--shallows, #3ec1cc); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(156,195,204,.18);
}
.site-footer .foot-more { color: var(--shallows, #3ec1cc); font-weight: 600; margin-top: 2px; }
.site-footer .foot-more:hover { color: #fff; }
.site-footer .legal { margin-top: 28px; font-size: 12.5px; color: var(--blue-300); }

/* tools */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tool-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.tool-card h3 { font-size: 15.5px; margin-bottom: 6px; }
.tool-card p { font-size: 13.5px; color: var(--ink-soft); }
.tool-card a { font-size: 14px; font-weight: 600; display: inline-block; margin-top: 12px; }

/* converter */
.conv-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; max-width: 640px; }
.conv-eq { font-family: var(--font-display); font-size: 24px; padding-bottom: 12px; color: var(--ink-faint); }
.conv-out { font-family: var(--font-display); font-size: 26px; margin-top: 18px; }

/* scroll-reveal motion is enhancement-only: content is visible before JS loads */
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity .42s ease, transform .42s ease; }
.motion-ready .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* month-grid calendar */
.cal-toggle { display:flex; gap:8px; margin-bottom:16px; }
.calgrid-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.calgrid-head strong { font-family:var(--font-display); font-size:19px; }
.calgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
/* 1fr tracks still grow to min-content: one long task pill made Wednesday
   245px wide and pushed Thu-Sat outside an overflow:hidden box. */
.calgrid > * { min-width: 0; }
.calgrid .cal-task, .calgrid a, .calgrid span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.calgrid-dow { background:var(--navy-950); color:var(--blue-100); font-size:11px; text-transform:uppercase; letter-spacing:1px; padding:7px 6px; text-align:center; }
.calgrid-cell { background:#fff; min-height:86px; padding:5px 6px; font-size:12px; }
.calgrid-cell.empty { background:var(--paper-2); }
.calgrid-cell.today { background:var(--blue-100); }
.calgrid-cell .daynum { font-weight:600; color:var(--ink-faint); font-size:12px; display:block; margin-bottom:3px; }
.calgrid-cell.today .daynum { color:var(--navy-800); }
.calitem { display:block; background:var(--green-100); color:var(--green-600); border-radius:3px; padding:2px 5px; margin-bottom:3px; font-size:11.5px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calitem:hover { text-decoration:none; filter:brightness(.95); }
.calitem-overdue { background:var(--red-100); color:var(--red-600); }
.calitem-done { background:var(--paper-2); color:var(--ink-faint); text-decoration:line-through; }
@media (max-width:900px){ .calgrid-cell{min-height:64px;} .calitem{font-size:10.5px;} }

/* task list */
.task-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--paper-2); }
.task-row .meta { font-size:13px; color:var(--ink-faint); margin-top:2px; }
.task-status-form select { padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius); font-size:13.5px; background:#fff; max-width:190px; }
.tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* app topbar (standalone portal chrome) */
.app-topbar {
  background: var(--navy-950); display: flex; align-items: center;
  justify-content: space-between; padding: 0 24px; height: 60px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.app-topbar .brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; font-size:18px; }
.app-topbar .brand:hover { text-decoration:none; }
.topbar-right { display:flex; align-items:center; gap:18px; }
.topbar-right a { color: var(--blue-100); font-size:14px; }
.topbar-right a:hover { color:#fff; text-decoration:none; }
.topbar-email { color: var(--blue-300); font-size:13px; }
.impersonation-bar {
  background: var(--amber-100); color: var(--amber-600); font-size: 14px;
  font-weight: 600; text-align: center; padding: 8px 16px;
}
.impersonation-bar a { color: var(--amber-600); text-decoration: underline; margin-left: 8px; }

/* value-stack ticks */
.tick::before {
  content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px;
  border-left: 2px solid var(--green-600); border-bottom: 2px solid var(--green-600);
  transform: rotate(-45deg);
}

/* FAQ */
.faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 16px; padding: 14px 28px 14px 0;
  position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 12px;
  font-family: var(--font-display); font-size: 22px; color: var(--teal-600);
}
.faq[open] summary::after { content: "\2212"; }
.faq p { padding: 0 0 16px; font-size: 15px; color: var(--ink-soft); max-width: 680px; }
.faq p a { font-weight: 600; }

/* touch targets */
button, .btn, select, input[type=submit] { min-height:40px; }
.side a { min-height:40px; display:flex; align-items:center; }
.mobile-more { display:none !important; }

/* action-first dashboard */
.dash-head,.section-row { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.quick-actions { display:flex; gap:8px; flex-wrap:wrap; }
.section-row h2 { margin:0; }
.section-row > a { font-size:13px; font-weight:600; white-space:nowrap; }
.attention-panel { background:#fff; border:1px solid var(--line); border-left:4px solid var(--teal-600); border-radius:var(--radius); padding:20px 22px; margin-bottom:20px; }
.attention-panel h2 { font-size:18px; margin:3px 0 14px; }
.action-list { border-top:1px solid var(--paper-2); }
.action-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--paper-2); color:var(--ink); }
.action-item:hover { text-decoration:none; }
.action-item small,.compact-row small { display:block; color:var(--ink-faint); margin-top:3px; font-size:12.5px; }
.action-arrow { color:var(--teal-600); font-size:20px; }
.calm-state,.empty-inline,.empty-mini { background:var(--green-100); color:var(--green-600); border-radius:var(--radius); padding:13px 14px; font-size:14px; }
.empty-inline { background:var(--blue-100); color:var(--navy-800); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.empty-mini { background:var(--paper-2); color:var(--ink-soft); }
.empty-action { max-width:680px; }
.daily-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.priority-card { min-height:210px; }
.compact-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--paper-2); color:var(--ink); }
a.compact-row:hover { text-decoration:none; }
.status-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:20px; }
.status-strip > div { background:#fff; padding:15px 16px; }
.status-strip strong,.status-strip a,.status-label { display:block; }
.status-strip strong { margin:3px 0; font-size:14px; }
.status-strip a { font-size:12.5px; font-weight:600; }
.status-label { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-faint); }
.supporting-details summary { cursor:pointer; font-weight:600; }
.more-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:820px; }
.more-link { display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:17px 18px; color:var(--ink); }
.more-link:hover { text-decoration:none; border-color:var(--teal-500); }
.more-link span { display:block; color:var(--ink-faint); font-size:13px; margin-top:4px; }

@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 34px 20px; }
}

@media (max-width: 900px) {
  .col3, .tool-grid, .stats, .cards2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .price-grid,.daily-grid,.more-grid { grid-template-columns: 1fr; }
  .dash-head { align-items:flex-start; }
  .status-strip { grid-template-columns:1fr; }
  .app-shell { flex-direction: column; }
  .side { width: 100%; display: flex; flex-wrap: nowrap; padding: 7px 8px; gap: 2px; position:sticky; top:0; z-index:40; overflow-x:auto; }
  .side .side-label,.side a:nth-of-type(n+6) { display: none; }
  .side a, .side a.active { padding: 9px 10px; border-left: none; border-radius: var(--radius); flex:1 1 0; min-width:0; justify-content:center; font-size:13px; }
  .side a.active { background: var(--navy-800); }
  .side .mobile-more { display:flex !important; }
  .main { padding: 24px 18px; }
  .nav { gap: 14px; }
  .nav .hide-m { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu:not([hidden]) { display: block; background: var(--navy-800, #0e1f33); }
  .hero { padding: 56px 0 64px; }
  .stats[style] { grid-template-columns: 1fr 1fr !important; }
  .tool-grid[style] { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 640px) {
  html { font-size: 15px; }
  body { overflow-x: hidden; }
  .app-topbar { padding: 0 14px; height: 54px; }
  .app-topbar .brand { font-size: 16px; }
  .topbar-email { display: none; }
  .wrap { padding: 0 16px; }
  .site-header .wrap { height: auto; min-height: 56px; gap: 10px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .brand { font-size: 16px; gap: 7px; }
  .brand svg { width: 22px; height: 22px; }
  .nav { gap: 10px; margin-left: auto; }
  .nav a { font-size: 13.5px; }
  .nav .btn { padding: 8px 12px; font-size: 13px; margin-left: 0; }
  section.band { padding: 48px 0; }
  .hero h1 { font-size: 30px; }
  .hero p.lead { font-size: 16.5px; }
  .hero .cta-row { flex-direction: column; }
  .hero .cta-row .btn { text-align: center; }
  .hero-search-row { flex-direction: column; }
  .hero-search-row .btn { width: 100%; text-align: center; }
  .hero-search-panel { max-width: 100%; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .search-row { flex-direction: column; }
  .search-row .btn { width: 100%; }
  .result-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .result-item .btn { width: 100%; text-align: center; }
  .form-card { margin: 24px 16px; padding: 24px 20px; }
  .conv-row { grid-template-columns: 1fr; }
  .conv-eq { display: none; }
  .task-row { flex-direction: column; align-items: stretch; }
  .task-status-form select { max-width: none; width: 100%; }
  .stats, .stats[style] { grid-template-columns: 1fr !important; }
  .tool-grid[style] { grid-template-columns: 1fr !important; }
  .site-footer .cols { gap: 26px; flex-direction: column; }
  .tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: 7px 6px; }
  .main h1 { font-size: 23px; }
  .price-card { padding: 26px 20px; }
  /* tables that would overflow scroll horizontally */
  .card { overflow-x: auto; }
}

/* ===== Blog article typography (prose) ===== */
.article-body { font-size: 17px; line-height: 1.85; color: var(--ink-1); }
.article-body p { margin: 0 0 1.4em; }
.article-body h2 { font-size: 25px; line-height: 1.3; font-weight: 700; color: var(--navy-900); margin: 2.1em 0 0.7em; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--navy-900); margin: 1.7em 0 0.55em; }
.article-body ul, .article-body ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.article-body li { margin-bottom: 0.55em; }
.article-body li::marker { color: var(--teal-600); font-weight: 700; }
.article-body strong { color: var(--navy-900); font-weight: 700; }
.article-body a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-body a:hover { color: var(--teal-700); }
.article-body blockquote { margin: 0 0 1.4em; padding: 4px 0 4px 20px; border-left: 3px solid var(--teal-500); color: var(--ink-2); font-style: italic; }
.inline-cta { margin: 2.2em 0; border-left: 4px solid var(--teal-600); background: var(--paper-2); padding: 24px 26px; border-radius: var(--radius); }
.inline-cta h2, .inline-cta h3 { margin: 0 0 8px; font-size: 19px; color: var(--navy-900); }
.inline-cta p { margin: 0 0 16px; color: var(--ink-2); }
.article-tags { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.article-tags .tag-label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.article-tags .tag { display: inline-block; margin: 0 8px 8px 0; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--teal-600); font-size: 13.5px; font-weight: 600; }


/* ============================================================
   CLEAR WATER additions (Aug 2026 redesign)
   ============================================================ */

/* pill: uppercase compliance-state alphabet */
.pill { font-family: var(--font-sans); letter-spacing: .04em; }
.pill-crit { background: var(--crit-bg); color: var(--crit); }
.pill-info { background: var(--info-bg); color: var(--info-c); }
.pill-unv { background: var(--unv-bg); color: var(--unv-c); }

/* data face: PWSIDs, citations, dates */
.data, .mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* hero scorecard preview */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.scorecard {
  background: var(--foam); border-radius: 18px; padding: 22px 22px 18px; color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(2,20,30,.7); border: 1px solid rgba(255,255,255,.6);
}
.scorecard .sc-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #e7edeb; padding-bottom: 12px; margin-bottom: 14px; gap: 10px; }
.scorecard .sys { font-weight: 600; font-size: 14px; }
.scorecard .pwsid { font-family: var(--font-data); font-size: 11.5px; color: var(--ink-faint); }
.ringrow { display: flex; gap: 18px; align-items: center; }
.ring { width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(var(--tide) 0 78%, #e3ebe9 78% 100%); display: grid; place-items: center; flex: none; }
.ring > div { width: 70px; height: 70px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 650 24px var(--font-display); flex-direction: column; text-align: center; }
.ring small { display: block; font: 600 9px/1 var(--font-sans); letter-spacing: .08em; color: var(--ink-faint); }
.sc-items { flex: 1; display: grid; gap: 8px; }
.sc-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sc-item .pill { flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; }
.ring-caption { font-size: 11px; color: var(--ink-faint); margin-top: 12px; }

/* trust band under hero */
.trust-band { display: flex; gap: 34px; justify-content: center; align-items: center; padding: 18px 30px; background: #0b2233; color: #8fb4c6; font-size: 13px; flex-wrap: wrap; }
.trust-band b { color: #d6e7ec; font-weight: 600; }

/* eyebrow labels */
.kicker { font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tide-pressed); margin-bottom: 12px; }

/* icon chips on cards */
.card-ic { width: 34px; height: 34px; border-radius: 9px; background: #e5f2f3; color: var(--tide-pressed); display: grid; place-items: center; font-size: 16px; margin-bottom: 12px; }

/* social proof */
.proof-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; }
.quote { font-family: var(--font-display); font-size: 21px; line-height: 1.45; font-weight: 500; }
.quote footer { font: 500 13px var(--font-sans); color: var(--ink-soft); margin-top: 12px; }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.stat-card b { display: block; font: 650 26px var(--font-display); font-variant-numeric: tabular-nums; }
.stat-card span { font-size: 12px; color: var(--ink-faint); }

/* pricing: three doors */
.price-grid3 { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.price-card.feature { border: 2px solid var(--tide); box-shadow: 0 20px 44px -24px rgba(14,124,134,.45); position: relative; }
.price-flag { position: absolute; top: -12px; left: 22px; background: var(--tide); color: #ecfeff; font: 600 10.5px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; }
.price-card .amount { font: 650 38px var(--font-display); letter-spacing: -.01em; }
.price-card .amount small { font: 500 13px var(--font-sans); color: var(--ink-faint); letter-spacing: 0; }
.price-card ul { list-style: none; margin: 8px 0 14px; padding: 0; font-size: 13.5px; color: #2a3f52; }
.price-card .btn { margin-top: auto; text-align: center; }
.guarantee { display: flex; gap: 12px; align-items: center; background: #edf7f2; border: 1px solid #cbe7d8; border-radius: 12px; padding: 13px 16px; font-size: 13.5px; color: #14532d; margin-top: 18px; }
.bill-toggle { display: inline-flex; background: #e7edeb; border-radius: 999px; padding: 4px; font: 600 12.5px var(--font-sans); margin-bottom: 20px; cursor: pointer; user-select: none; }
.bill-toggle span { padding: 7px 14px; border-radius: 999px; color: var(--ink-soft); }
.bill-toggle .on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10,29,47,.15); }

/* citation line component */
.cite-line { font-family: var(--font-data); font-size: 12px; letter-spacing: .02em; color: var(--tide-pressed); text-transform: uppercase; margin-top: 8px; }

/* app bottom tab bar (PWA, <=900px only) */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #ffffff; border-top: 1px solid var(--line);
    padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
  }
  .tabbar .tab { display: grid; justify-items: center; gap: 3px; font: 600 9.5px var(--font-sans); color: var(--ink-faint); text-align: center; text-decoration: none; min-height: var(--tap-min); }
  .tabbar .tab:hover { text-decoration: none; }
  .tabbar .tab.on { color: var(--tide-pressed); }
  .tabbar .tic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; }
  .tabbar .tab.on .tic { background: #e5f2f3; }
  .tabbar .tab.scan .tic { width: 42px; height: 42px; border-radius: 50%; background: var(--tide); color: #fff; font-size: 17px; margin-top: -22px; box-shadow: 0 6px 16px -6px rgba(14,124,134,.7); border: 3px solid var(--mist); }
  body.has-tabbar .main { padding-bottom: 92px; }
  body.has-tabbar .side { display: none; }
}

/* skip link */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--tide); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; }
.skip-link:focus { left: 0; }

/* focus rings */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }
.hero a:focus-visible, .hero button:focus-visible, .hero input:focus-visible { outline-color: var(--shallows); }

/* hero scorecard motion: one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .scorecard { animation: sc-rise .6s ease-out both; }
  @keyframes sc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .price-grid3 { grid-template-columns: 1fr; }
  .tools-intro { grid-template-columns: 1fr; }
  .tools-intro > div:last-child { max-width: 420px; }
}

/* Inactive-system badge on lookup results (mirror returns deactivated systems, labeled) */
.badge-inactive { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:1px 8px; border-radius:99px; background:#f3e8e8; color:#8a3434; vertical-align:2px; }

/* ---- document generators (BSSP / ERP / public notice / survey prep) ---- */
.gen-layout { display:grid; grid-template-columns: 400px minmax(0,1fr); gap:28px; align-items:start; }
.gen-layout > * { min-width:0; }
@media (max-width: 960px) { .gen-layout { grid-template-columns: minmax(0,1fr); } }
.gen-form { position:sticky; top:80px; max-height:calc(100vh - 100px); overflow-y:auto; padding-right:4px; }
.gen-form .field { margin-bottom:12px; }
.gen-form h3 { font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3,#5b6673); margin:20px 0 8px; }
.gen-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gen-rows .gen-row { display:grid; grid-template-columns: 1fr 2fr auto; gap:8px; margin-bottom:8px; align-items:center; }
.gen-rows .gen-row input { min-width:0; }
.gen-row .rm { background:none; border:1px solid var(--line,#d9dee5); border-radius:6px; cursor:pointer; padding:6px 10px; }
.gen-doc { background:#fff; border:1px solid var(--line,#d9dee5); box-shadow:0 2px 14px rgba(10,22,38,.07); padding:44px 48px; font-family:Georgia,'Times New Roman',serif; color:#1c2530; line-height:1.5; font-size:13.5px; }
.gen-doc h1 { font-size:22px; font-weight:normal; margin:0 0 2px; }
.gen-doc h2 { font-size:15px; font-family:'Public Sans','Segoe UI',sans-serif; text-transform:uppercase; letter-spacing:.1em; border-bottom:2px solid #0a1626; padding-bottom:4px; margin:26px 0 10px; }
.gen-doc h3 { font-size:13.5px; font-family:'Public Sans','Segoe UI',sans-serif; margin:14px 0 6px; }
.gen-doc table { width:100%; border-collapse:collapse; font-size:12.5px; margin:8px 0; }
.gen-doc th { text-align:left; font-family:'Public Sans','Segoe UI',sans-serif; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#5b6673; border-bottom:2px solid #0a1626; padding:5px 8px; }
.gen-doc td { border-bottom:1px solid #d9dee5; padding:6px 8px; vertical-align:top; }
.gen-doc .docmeta { color:#5b6673; font-size:12px; margin-bottom:4px; }
.gen-doc .sig-line { display:inline-block; border-bottom:1px solid #1c2530; min-width:260px; height:18px; }
.gen-doc .fill { border-bottom:1px dotted #8a93a0; padding:0 4px; min-width:80px; display:inline-block; }
.gen-doc .callout { border:1px solid #d9dee5; border-left:4px solid #2a7d85; padding:10px 14px; margin:10px 0; font-size:12.5px; }
.gen-doc .warn-callout { border-left-color:#a33025; }
.gen-doc ol, .gen-doc ul { padding-left:22px; margin:6px 0; }
.gen-doc li { margin:4px 0; }
.gen-actions { display:flex; gap:10px; margin:14px 0; flex-wrap:wrap; }
.gen-note { font-size:12.5px; color:var(--ink-3,#5b6673); max-width:640px; }
@media print {
  header, footer, .gen-form, .gen-actions, .gen-note, .site-header, .site-footer, .gen-hide-print { display:none !important; }
  .gen-layout { display:block; }
  .gen-doc { border:none; box-shadow:none; padding:0; font-size:12px; }
  .band { padding:0 !important; }
  body { background:#fff !important; }
}


/* ---- QA round 4: responsive + a11y + print corrections (must stay last) ---- */
@media (max-width: 960px) {
  .gen-form { position: static; max-height: none; overflow-y: visible; }
}
@media (max-width: 640px) {
  .gen-doc { padding: 22px 16px; }
  .gen-doc .sig-line { min-width: 170px; }
  .gen-doc .fill-wide { min-width: 120px; }
}
.gen-doc .fill-wide { min-width: 280px; }
.gen-form h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3,#5b6673); margin: 20px 0 8px; font-weight: 600; }
.gen-doc .doc-title { font-size: 22px; font-weight: normal; margin: 0 0 2px; font-family: Georgia,'Times New Roman',serif; text-transform: none; letter-spacing: 0; border: none; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print {
  body[data-tool] .kicker, body[data-tool] .section-title, body[data-tool] .section-sub { display: none !important; }
  #orv-toolgate-bar, #orv-toolgate-overlay { display: none !important; }
}


/* ================= Funding / grants funnel ================= */
.gf-hero { background: linear-gradient(160deg, #0a1626 0%, #123043 100%); color:#eaf2f6; padding:56px 0 60px; }
.gf-hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:44px; align-items:start; }
.gf-kicker { color:#7fc2c8 !important; }
.gf-h1 { font-family: var(--font-display, Georgia, serif); font-size: clamp(30px, 4.4vw, 45px);
  line-height:1.12; margin:8px 0 16px; text-wrap:balance; font-weight:600; color:#fff; }
.gf-sub { color:#c3d6e2; font-size:16.5px; line-height:1.6; margin:0 0 14px; max-width:62ch; }
.gf-sub strong { color:#fff; }
.gf-search { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.gf-search input { flex:1 1 260px; min-width:0; padding:14px 16px; font-size:16px;
  border:1px solid #2b4a5f; border-radius:6px; background:#0d1f2e; color:#fff; }
.gf-search input::placeholder { color:#7e97a8; }
.gf-search-center { justify-content:center; max-width:640px; margin:22px auto 0; }
.gf-search-hint { font-size:13.5px; color:#9fbccd; margin-top:10px; }
.gf-search-hint a, .gf-alert a { color:#7fc2c8; }
.gf-alert { margin-top:12px; background:#3a2418; border:1px solid #7a4a2c; color:#ffd9c2;
  padding:10px 14px; border-radius:6px; font-size:14px; }
.gf-trust { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px;
  font-size:13.5px; color:#9fbccd; }
.gf-trust li::before { content:"✓"; color:#7fc2c8; margin-right:7px; font-weight:700; }

.gf-deadline-card { background:#0d2233; border:1px solid #24455c; border-radius:10px; padding:22px 24px; }
.gf-dc-head { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#7fc2c8;
  font-weight:700; margin-bottom:12px; }
.gf-dc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.gf-dc-list li { display:flex; flex-direction:column; gap:3px; }
.gf-dc-date { font-weight:700; color:#fff; font-size:14.5px; }
.gf-dc-what { color:#b8ccd9; font-size:13.5px; line-height:1.5; }
.gf-feed { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.gf-feed li { display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  border-bottom:1px solid #1c3a4e; padding-bottom:8px; }
.gf-feed-title { color:#dbe8f0; font-size:13px; }
.gf-feed-days { font-size:11.5px; color:#9fbccd; white-space:nowrap; }
.gf-feed-days.urgent { color:#ffb27a; font-weight:700; }
.gf-feed-src { font-size:11.5px; color:#7e97a8; margin-top:10px; }

.gf-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; align-items:stretch; }
.gf-tier { border:1px solid var(--line,#d9dee5); border-radius:10px; padding:24px 22px; background:#fff;
  display:flex; flex-direction:column; }
.gf-tier.feature { border:2px solid var(--teal,#2a7d85); box-shadow:0 10px 30px rgba(10,22,38,.10); }
.gf-tier-tag { font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--teal-700,#155057); margin-bottom:8px; }
.gf-tier h3 { font-size:20px; margin:0 0 8px; }
.gf-tier-value { font-size:14.5px; color:var(--ink-soft,#4b5763); margin-bottom:14px; }
.gf-tier-list { list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:8px; }
.gf-tier-list li { font-size:14px; padding-left:24px; position:relative; line-height:1.45; }
.gf-tier-list li.yes::before { content:"✓"; position:absolute; left:0; color:#1e6b3c; font-weight:700; }
.gf-tier-list li.no { color:#8a93a0; }
.gf-tier-list li.no::before { content:"🔒"; position:absolute; left:0; font-size:12px; }
.gf-tier-price { font-size:20px; font-weight:700; margin:auto 0 14px; }
.gf-tier-price span { font-size:13px; font-weight:400; color:var(--ink-3,#5b6673); }
.gf-tier-alt { font-size:12.5px; color:var(--ink-3,#5b6673); margin-top:10px; }
.gf-fineprint { font-size:13.5px; color:var(--ink-3,#5b6673); margin-top:20px; max-width:70ch; }

.gf-cases { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }
.gf-case { border:1px solid var(--line,#d9dee5); border-left:4px solid var(--teal,#2a7d85);
  border-radius:8px; padding:20px; background:#fff; }
.gf-case-tag { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:#8a6d1a; background:#faf3dc; display:inline-block; padding:2px 9px; border-radius:99px; margin-bottom:10px; }
.gf-case h3 { font-size:16.5px; margin:0 0 10px; }
.gf-case p { font-size:14px; margin:8px 0; line-height:1.5; }

.gf-final { background:#0a1626; color:#fff; padding:56px 0; }
.gf-final-h { font-family:var(--font-display,Georgia,serif); font-size:clamp(26px,3.4vw,36px); margin:0 0 10px; color:#fff; }
.gf-final-sub { color:#c3d6e2; font-size:16px; margin:0; }
.gf-final-note { font-size:12.5px; color:#8fa9bb; margin-top:14px; }

/* results page */
.gf-res-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.gf-res-meta { font-size:14px; color:var(--ink-3,#5b6673); }
.gf-res-score { text-align:center; border:1px solid var(--line,#d9dee5); border-radius:10px; padding:14px 22px; }
.gf-res-count { font-size:38px; font-weight:700; color:var(--teal-700,#155057); line-height:1; }
.gf-res-count-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3,#5b6673); margin-top:6px; }
.gf-banner { margin:22px 0; padding:14px 18px; border-radius:8px; background:#eef6f7;
  border-left:4px solid var(--teal,#2a7d85); font-size:14.5px; }
.gf-banner.unlocked { background:#e9f5ee; border-left-color:#1e6b3c; }
.gf-dac { margin:0 0 18px; font-size:13.5px; color:var(--ink-soft,#4b5763);
  background:#f6f7f5; border:1px solid var(--line,#d9dee5); border-radius:8px; padding:12px 16px; }
.gf-dac-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-3,#5b6673); font-weight:700; margin-bottom:4px; }

.gf-list { display:flex; flex-direction:column; gap:16px; }
.gf-prog { border:1px solid var(--line,#d9dee5); border-radius:10px; padding:22px; background:#fff; }
.gf-prog-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.gf-prog-name { font-size:19px; margin:0 0 3px; }
.gf-prog-agency { font-size:13px; color:var(--ink-3,#5b6673); }
.gf-prog-kind { font-size:11.5px; font-weight:700; background:#eef3f4; color:#155057;
  padding:4px 11px; border-radius:99px; white-space:nowrap; }
.gf-prog-why { font-size:15px; margin:12px 0; line-height:1.55; }
.gf-prog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0;
  padding:12px 0; border-top:1px solid var(--line,#d9dee5); border-bottom:1px solid var(--line,#d9dee5); }
.gf-prog-grid .k, .gf-prog-reasons .k, .gf-agency-card .k {
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3,#5b6673); font-weight:700; margin-bottom:3px; }
.gf-prog-grid > div { font-size:13.5px; }
.gf-prog-reasons ul { margin:4px 0 0; padding-left:20px; font-size:13.5px; }
.gf-prog-reasons li { margin:3px 0; }
.gf-prog-now, .gf-prog-step { font-size:14px; margin-top:12px; line-height:1.5; }
.gf-prog-foot { display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line,#d9dee5); flex-wrap:wrap; }
.gf-src { font-size:13.5px; font-weight:600; color:var(--teal-700,#155057); text-decoration:none; }
.gf-src:hover { text-decoration:underline; }

.gf-locked-wrap { margin-top:36px; }
.gf-locked-h { font-size:22px; margin:0 0 6px; }
.gf-locked-sub { font-size:14.5px; color:var(--ink-3,#5b6673); margin:0 0 16px; max-width:70ch; }
.gf-locked-list { list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:9px; }
.gf-locked-list li { display:grid; grid-template-columns:26px 1.7fr 1fr auto; gap:12px; align-items:center;
  border:1px solid var(--line,#d9dee5); border-radius:8px; padding:12px 16px; background:#fbfbfa; }
.gf-lock-name { font-weight:600; font-size:14.5px; }
.gf-lock-agency, .gf-lock-kind { font-size:12.5px; color:var(--ink-3,#5b6673); }
.gf-locked-detail { border:1px solid var(--line,#d9dee5); border-radius:10px; padding:20px; background:#fff; }
.gf-locked-hidden { font-size:13.5px; color:var(--ink-3,#5b6673); margin:10px 0 0; }

.gf-unlock { border:2px solid var(--teal,#2a7d85); border-radius:12px; padding:26px; background:#fff; }
.gf-unlock-h { font-size:21px; margin:0 0 16px; }
.gf-unlock-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.gf-unlock-card { border:1px solid var(--line,#d9dee5); border-radius:10px; padding:20px; display:flex; flex-direction:column; }
.gf-unlock-card.feature { border:2px solid var(--teal,#2a7d85); background:#f7fbfb; }
.gf-unlock-tag { font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:700;
  color:var(--teal-700,#155057); margin-bottom:6px; }
.gf-unlock-card h4 { font-size:18px; margin:0 0 8px; }
.gf-unlock-card p { font-size:14px; line-height:1.5; margin:0 0 14px; }
.gf-unlock-price { font-size:24px; font-weight:700; margin:auto 0 12px; }
.gf-unlock-price span { font-size:13px; font-weight:400; color:var(--ink-3,#5b6673); }
.gf-unlock-note { font-size:12.5px; color:var(--ink-3,#5b6673); margin-top:10px; }

.gf-feed-block { margin-top:36px; }
.gf-feed-full { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.gf-feed-full li { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:baseline;
  border-bottom:1px solid var(--line,#d9dee5); padding:9px 0; font-size:13.5px; }
.gf-feed-full .gf-feed-title { color:var(--ink,#1c2530); }
.gf-feed-full .gf-feed-agency { color:var(--ink-3,#5b6673); font-size:12.5px; }
.gf-feed-full .gf-feed-days { color:var(--ink-3,#5b6673); }
.gf-feed-full .gf-feed-days.urgent { color:#a33025; font-weight:700; }

.gf-agency-card { margin-top:32px; border:1px solid var(--line,#d9dee5); border-left:4px solid var(--teal,#2a7d85);
  border-radius:8px; padding:18px 20px; background:#fff; }
.gf-agency-name { font-size:16px; font-weight:600; margin:2px 0 4px; }
.gf-agency-note { font-size:13.5px; color:var(--ink-3,#5b6673); margin:8px 0 0; }
.gf-disclaimer { font-size:12.5px; color:var(--ink-3,#5b6673); margin-top:26px; max-width:78ch; line-height:1.6; }
.gf-back { margin-top:22px; font-size:14px; }
.gf-packet-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.gf-packet-list li { font-size:13.5px; color:#c3d6e2; padding-left:20px; position:relative; line-height:1.45; }
.gf-packet-list li::before { content:"✓"; position:absolute; left:0; color:#7fc2c8; font-weight:700; }
.gf-recent { list-style:none; padding:0; margin:10px 0 0; }
.gf-recent li { display:flex; justify-content:space-between; border-bottom:1px solid var(--line,#d9dee5);
  padding:8px 0; font-size:14px; }
.gf-recent span { color:var(--ink-3,#5b6673); font-size:13px; }

@media (max-width: 960px) {
  .gf-hero-grid { grid-template-columns:1fr; gap:30px; }
  .gf-tiers { grid-template-columns:1fr; }
  .gf-cases { grid-template-columns:1fr; }
  .gf-unlock-grid { grid-template-columns:1fr; }
  .gf-prog-grid { grid-template-columns:1fr; }
  .gf-locked-list li { grid-template-columns:22px 1fr; }
  .gf-lock-agency, .gf-lock-kind { grid-column:2; }
  .gf-feed-full li { grid-template-columns:1fr; gap:3px; }
}
@media (max-width: 640px) {
  .gf-hero { padding:36px 0 40px; }
  .gf-res-head { flex-direction:column; }
  .gf-search input, .gf-search .btn { width:100%; }
}
@media print {
  .gf-hero, .gf-final, .gf-unlock, .gf-locked-wrap { display:none !important; }
}

.gf-lock-icon { font-size:13px; opacity:.75; }
.gf-caveats { margin:6px 0 0; padding-left:20px; font-size:13px; color:#8a6d1a; }
.gf-caveats li { margin:3px 0; }

.gf-cite { display:block; margin-top:6px; font-size:12.5px; color:#8fa9bb; }

.gf-agency-card a, .gf-prog-foot a, .gf-feed-title { overflow-wrap:anywhere; }

@media print { .gf-recent-wrap { display: none !important; } }
/* iOS Safari zooms any focused input under 16px; that lands on the paid
   checkout forms and the packet builder (QA round 4, P2-11). */
.field input, .field select, .field textarea { font-size: 16px; }

/* The billing toggle is <button> now, for keyboard and screen-reader use. */
.bill-toggle button { padding: 7px 14px; border-radius: 999px; color: var(--ink-soft);
  background: transparent; border: 0; font: inherit; cursor: pointer; }
.bill-toggle button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10,29,47,.15); }

/* ---- Photography ------------------------------------------------------
   CSS background-image, not <img>: a file that has not been dropped in yet
   renders as the fallback colour instead of a broken-image icon, so the
   pages stay shippable while the photo library is filled in. */
.photo-band { position: relative; min-height: 300px; background: var(--navy-700) center/cover no-repeat;
  display: flex; align-items: flex-end; }
.photo-band::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,29,47,.15) 0%, rgba(10,29,47,.78) 100%); }
.photo-band .wrap { position: relative; z-index: 1; padding: 34px 20px; }
.photo-band h2, .photo-band p { color: #fff; }
.photo-band p { max-width: 620px; margin: 6px 0 0; font-size: 15px; color: var(--blue-100); }
/* photo-hero intentionally has no background-image (2026-09-03): the prior
   file (hero-landing-07.jpg) had its own fake headline and dashboard mockup
   baked into the JPEG pixels, which visually collided with this section's
   real HTML heading rendered on top of it. Falls back to .photo-band's navy
   gradient below until real photography replaces it — that fallback was the
   original designed behavior per the comment at the top of this block. */
.photo-plant { background-image: url("/static/img/brand/ad-scene-20.jpg"); }
.photo-desk  { background-image: url("/static/img/brand/dashboard-14.jpg"); }
.photo-walk  { background-image: url("/static/img/brand/hero-saas-06.jpg"); }
.photo-crew  { background-image: url("/static/img/brand/ad-wide-16.jpg"); }
.photo-card { height: 172px; border-radius: 10px 10px 0 0; margin: -20px -20px 16px;
  /* longhand, not the `background` shorthand: a shorthand here resets
     background-image to none on any element also carrying .photo-plant/
     .photo-desk/etc, since this rule is declared after theirs and both are
     single-class selectors of equal specificity. That silently wiped both
     card images on /how-it-works (confirmed via network log: the image
     requests never fired). */
  background-color: var(--paper-2); background-position: center; background-size: cover; background-repeat: no-repeat; }
@media (max-width: 640px) { .photo-band { min-height: 220px; } .photo-card { height: 132px; } }

/* ================================================================== */
/* ONE OREVANT — WARM REBUILD (2026-09-03)                             */
/* One product, one price. Appended last so these token overrides win  */
/* at equal specificity. Direction: warm cream ground, pill buttons,   */
/* generous radii, amber accent, bigger friendlier type for            */
/* non-technical and older users. Legacy var names are remapped so     */
/* every existing template inherits the warm palette automatically.    */
/* ================================================================== */
:root {
  --mist: #faf6ee;            /* ground: warm cream, was cool gray-green */
  --paper-1: #fffdf8;
  --paper-2: #f3ecdf;
  --line: #e6dcc8;
  --ink: #24333c; --ink-1: #2c3d47; --ink-2: #52636d; --ink-3: #5d6f7a;
  /* AA: the lighter teal measured 3.90:1 as link text and 3.70 behind
     button labels. #0b6e73 clears 4.5 on white AND with white on top. */
  --tide: #0b6e73; --tide-pressed: #095a5e;
  /* --teal-600 styles every default link; at #0f8f95 it measured 3.62:1
     on cream. It must track --tide, not diverge from it. */
  --teal: #0f8f95; --teal-600: #0b6e73;
  --shallows: #ffc46b;        /* accent on dark: warm amber, was aqua */
  --sun: #f2a541;             /* new warm accent for light surfaces */
  --abyss: #0d3440; --deepwater: #14495c;
  --navy-950: #0d3440; --navy-700: #17546b;
  --blue-300: #a9c6cd; --blue-100: #ddeef0;
}
body { background: var(--mist); font-size: 17px; line-height: 1.65; }
.btn { border-radius: 999px; }
.btn-lg { border-radius: 999px; padding: 16px 30px; }
.btn-primary { background: var(--tide); }
.btn-primary:hover { background: var(--tide-pressed); }
.card, .price-card, .tool-card, .notice-box, .form-card, .gf-deadline-card {
  border-radius: 18px; }
input[type=text], input[type=email], input[type=password], input[type=number],
select, textarea { border-radius: 12px; font-size: 16px; }
.site-header { background: var(--abyss); }
.site-footer { background: var(--abyss); }
.site-footer .foot-head { color: var(--shallows); border-bottom-color: rgba(255,196,107,.25); }
.site-footer .foot-more { color: var(--shallows); }
.nav .btn-primary { border-radius: 999px; }

/* ---------- homepage (ovh-*) ---------- */
.ovh-hero { background: var(--mist); padding: 64px 0 44px; }
.ovh-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.ovh-hero h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.12; color: var(--ink);
  letter-spacing: -.01em; margin: 0 0 16px; }
.ovh-sub { font-size: 19px; color: var(--ink-2); max-width: 34em; margin: 0 0 26px; }
.ovh-search { display: flex; gap: 10px; flex-wrap: wrap; max-width: 560px; }
.ovh-search input { flex: 1 1 260px; min-height: 54px; padding: 0 20px;
  border: 2px solid var(--line); background: #fff; }
.ovh-search input:focus { border-color: var(--tide); outline: 2px solid var(--tide); outline-offset: 2px; }
.ovh-search .btn { min-height: 54px; }
.ovh-trust { margin-top: 18px; font-size: 14.5px; color: var(--ink-3); max-width: 36em; }
.ovh-kicker { display: inline-block; background: #fdeed3; color: #8a5a12;
  border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; margin-bottom: 18px; }

/* Homepage overview film. Occupies the hero's right column, where the CSS
   dashboard mock used to sit, and is deliberately NOT a modal - the player is
   part of the page.

   Sizing is width-driven inside a fixed aspect-ratio box, so one rule covers
   every screen: the hero grid already collapses to a single column at 900px
   and the video simply becomes full-width. No separate mobile player, no JS
   resize handling, and no layout shift while the file loads, because the box
   reserves its height before the first byte arrives. */
.ovh-video { margin: 0; }
.ovh-video-el {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9;                 /* holds height before metadata loads */
  background: #0b1f2e;                  /* brand ground, not black, while buffering */
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 24px 60px -30px rgba(36,51,60,.35);
}
.ovh-video-el:focus-visible {
  outline: 3px solid var(--teal-600); outline-offset: 2px;
}
.ovh-video-cap { font-size: 12.5px; color: var(--ink-3); text-align: right; margin-top: 8px; }

/* Older Safari ignores aspect-ratio; a padding box keeps those in shape. */
@supports not (aspect-ratio: 16 / 9) {
  .ovh-video { position: relative; padding-top: 56.25%; margin-bottom: 26px; }
  .ovh-video-el { position: absolute; inset: 0; height: 100%; }
  .ovh-video-cap { position: absolute; right: 0; bottom: -24px; }
}

/* Phones: ease the corner radius and let the caption sit left under the frame. */
@media (max-width: 560px) {
  .ovh-video-el { border-radius: 14px; }
  .ovh-video-cap { font-size: 12px; text-align: left; margin-top: 6px; }
}

/* Respect a reduced-motion preference by not implying autoplay affordances. */
@media (prefers-reduced-motion: reduce) {
  .ovh-video-el { scroll-behavior: auto; }
}

/* A printed page showing one video frame is just a grey box. */
@media print { .ovh-video { display: none; } }

.ovh-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.ovh-outcome { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.ovh-outcome .ic { width: 42px; height: 42px; border-radius: 999px; background: #eef6f3;
  color: var(--tide-pressed); display: grid; place-items: center; font-size: 19px; margin-bottom: 12px; }
.ovh-outcome h3 { margin: 0 0 6px; font-size: 17px; }
.ovh-outcome p { margin: 0; font-size: 15px; color: var(--ink-2); }

.ovh-photo { position: relative; min-height: 380px; background: var(--abyss) center/cover no-repeat;
  border-radius: 26px; overflow: hidden; display: flex; align-items: flex-end; }
.ovh-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,52,64,.05) 30%, rgba(13,52,64,.82) 100%); }
.ovh-photo .inner { position: relative; z-index: 1; padding: 34px; color: #fff; }
.ovh-photo h2 { color: #fff; margin: 0 0 8px; }
.ovh-photo p { color: var(--blue-100); max-width: 46em; margin: 0; }

.ovh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ovh-step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.ovh-step .n { width: 40px; height: 40px; border-radius: 999px; background: var(--sun);
  color: #4a3005; font-weight: 700; display: grid; place-items: center; font-size: 18px; margin-bottom: 12px; }

.ovh-chips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 900px; }
.ovh-chip { background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; font-size: 14.5px; color: var(--ink-1); }
.ovh-chip::before { content: "✓ "; color: var(--tide); font-weight: 700; }

.ovh-price { max-width: 520px; margin: 0 auto; background: #fff; border: 2px solid var(--tide);
  border-radius: 24px; padding: 38px 36px; text-align: center;
  box-shadow: 0 24px 60px -30px rgba(15,143,149,.35); }
.ovh-price .amount { font-family: 'Fraunces', Georgia, serif; font-size: 54px; font-weight: 600; color: var(--ink); }
.ovh-price .amount small { font-size: 20px; color: var(--ink-3); font-family: 'Public Sans', sans-serif; }
.ovh-price ul { list-style: none; padding: 0; margin: 20px 0 26px; text-align: left; }
.ovh-price li { padding: 6px 0 6px 28px; position: relative; font-size: 15.5px; }
.ovh-price li::before { content: "✓"; position: absolute; left: 4px; color: var(--tide); font-weight: 700; }
.ovh-gov { font-size: 14px; color: var(--ink-3); margin-top: 14px; }

.ovh-avatars { display: flex; gap: 14px; margin-top: 18px; }
.ovh-avatars img { width: 84px; height: 84px; border-radius: 999px; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 6px 18px -8px rgba(36,51,60,.4); }

@media (max-width: 900px) {
  .ovh-grid { grid-template-columns: 1fr; gap: 30px; }
  .ovh-outcomes { grid-template-columns: 1fr; }
  .ovh-steps { grid-template-columns: 1fr; }
  .ovh-photo { min-height: 300px; }
}

/* Pricing section value panel (owner request 2026-09-04): full feature/tool
   inventory on the LEFT of the price card, symmetrical two-column layout.
   Both cards share radius/border/height; the list mirrors the card's kicker. */
.ovh-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: stretch; max-width: 1040px; margin: 0 auto; }
.ovh-price-grid .ovh-price { max-width: none; margin: 0; display: flex;
  flex-direction: column; justify-content: center; }
.ovh-value { background: #fff; border: 2px solid var(--line); border-radius: 24px;
  padding: 38px 36px; }
.ovh-value .kicker { margin-bottom: 6px; }
.ovh-value h2, .ovh-value h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: 26px; margin: 0 0 16px; color: var(--ink); }
.ovh-value ul { list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: 26px; }
.ovh-value li { padding: 5px 0 5px 26px; position: relative; font-size: 14.5px;
  break-inside: avoid; color: var(--ink-1); }
.ovh-value li::before { content: "✓"; position: absolute; left: 2px;
  color: var(--tide); font-weight: 700; }
@media (max-width: 900px) {
  .ovh-price-grid { grid-template-columns: 1fr; }
  .ovh-value ul { columns: 1; }
}

/* Everything-included chips (owner request 2026-09-04): was a ragged
   flex-wrap cloud; now a symmetric grid — equal-width, equal-height,
   centered chips. 16 items = perfect 4x4 desktop and 2x8 tablet. */
.ovh-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 1080px; margin: 0 auto; }
.ovh-chip { display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 58px; padding: 10px 14px; }
@media (max-width: 1000px) { .ovh-chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ovh-chips { grid-template-columns: 1fr; } .ovh-chip { min-height: 46px; } }

/* ---------- About page editorial redesign (2026-09-04) ---------- */
.abt-hero { background: var(--mist); padding: 60px 0 50px; }
.abt-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.abt-hero h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(32px, 4.4vw, 46px); line-height: 1.14; color: var(--ink);
  letter-spacing: -.01em; margin: 0 0 14px; }
.abt-photo { border-radius: 26px; overflow: hidden; box-shadow: 0 26px 60px -28px rgba(36,51,60,.4); }
.abt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.abt-quote { max-width: 780px; margin: 0 auto; text-align: center; }
.abt-quote p { font-family: 'Fraunces', Georgia, serif; font-size: clamp(22px, 3vw, 30px);
  line-height: 1.4; color: var(--ink); margin: 0; }
.abt-quote .mark { color: var(--sun); font-size: 1.4em; line-height: 0; }
.abt-sources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.abt-source { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.abt-source h3 { margin: 0 0 6px; font-size: 16.5px; }
.abt-source p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.abt-source .cite { display: inline-block; margin-top: 10px; font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; color: var(--tide-pressed); background: #eef6f3; border-radius: 6px; padding: 3px 8px; }
.abt-rules { position: relative; border-radius: 26px; overflow: hidden;
  background: var(--abyss) center/cover no-repeat; padding: 46px 40px; }
.abt-rules::before { content: ""; position: absolute; inset: 0; background: rgba(13,52,64,.86); }
.abt-rules > * { position: relative; z-index: 1; }
.abt-rules h2 { color: #fff; margin: 0 0 22px; }
.abt-rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.abt-rule { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 22px; }
.abt-rule .n { width: 36px; height: 36px; border-radius: 999px; background: var(--sun);
  color: #4a3005; font-weight: 700; display: grid; place-items: center; margin-bottom: 12px; }
.abt-rule h3 { color: #fff; margin: 0 0 6px; font-size: 16px; }
.abt-rule p { color: var(--blue-100); margin: 0; font-size: 14px; }
.abt-not { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: center; }
@media (max-width: 900px) {
  .abt-hero-grid, .abt-not { grid-template-columns: 1fr; gap: 26px; }
  .abt-sources { grid-template-columns: 1fr; }
  .abt-rules { padding: 30px 22px; }
  .abt-rules-grid { grid-template-columns: 1fr; }
}

/* ---------- Pricing page editorial redesign (2026-09-04) ---------- */
/* No images by design — typography, spacing, and the warm palette carry it. */
.prc-hero { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.prc-hero h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(34px, 4.6vw, 50px); line-height: 1.1; color: var(--ink);
  letter-spacing: -.01em; margin: 0 0 14px; }
.prc-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 1080px; margin: 0 auto; }
.prc-quote { background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 28px 26px; display: flex; flex-direction: column; }
.prc-quote .qmark { font-family: 'Fraunces', Georgia, serif; font-size: 46px;
  line-height: .6; color: var(--sun); margin-bottom: 14px; }
.prc-quote p { font-family: 'Fraunces', Georgia, serif; font-size: 18.5px;
  line-height: 1.5; color: var(--ink); margin: 0 0 18px; flex: 1; }
.prc-quote .attr { font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line);
  padding-top: 12px; }
.prc-quote .attr strong { display: block; color: var(--ink-1); font-size: 13.5px; }
.prc-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 900px; margin: 0 auto; }
.prc-strip .item { text-align: center; padding: 18px 14px; }
.prc-strip .item .big { font-family: 'Fraunces', Georgia, serif; font-size: 22px;
  font-weight: 600; color: var(--tide-pressed); margin-bottom: 4px; }
.prc-strip .item .small { font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 900px) {
  .prc-quotes { grid-template-columns: 1fr; }
  .prc-strip { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- How It Works: sales-101 rebuild (2026-09-04) ---------- */
.hiw-hero { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.hiw-hero h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(34px, 4.6vw, 50px); line-height: 1.1; color: var(--ink);
  letter-spacing: -.01em; margin: 0 0 14px; }
.hiw-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* product tour (slideshow) */
.hiw-tour { max-width: 880px; margin: 0 auto; }
.hiw-stage { position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 22px; box-shadow: 0 24px 60px -30px rgba(36,51,60,.3);
  padding: 26px; min-height: 380px; }
.hiw-slide { display: none; }
.hiw-slide.on { display: block; animation: hiwFade .45s ease; }
@keyframes hiwFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hiw-slide.on { animation: none; } }
.hiw-cap { text-align: center; margin-top: 18px; }
.hiw-cap .t { font-weight: 600; font-size: 17px; color: var(--ink); }
.hiw-cap .d { font-size: 14.5px; color: var(--ink-2); max-width: 46em; margin: 4px auto 0; }
.hiw-dots { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.hiw-dot { width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--line);
  background: #fff; color: var(--ink-2); font-weight: 700; font-size: 14px; cursor: pointer; }
.hiw-dot.on { background: var(--tide); border-color: var(--tide); color: #fff; }
.hiw-note { text-align: right; font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }

/* mock atoms inside slides */
.hiw-search { display: flex; gap: 10px; max-width: 520px; margin: 24px auto 18px; }
.hiw-search .box { flex: 1; border: 2px solid var(--tide); border-radius: 12px;
  padding: 13px 16px; font-size: 15.5px; color: var(--ink); background: #fff; }
.hiw-search .go { border-radius: 999px; background: var(--tide); color: #fff;
  padding: 0 22px; display: grid; place-items: center; font-weight: 600; font-size: 14.5px; }
.hiw-result { max-width: 520px; margin: 0 auto; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; display: flex; justify-content: space-between;
  align-items: center; gap: 10px; background: var(--paper-1); }
.hiw-finding { max-width: 560px; margin: 6px auto 0; }
.hiw-finding .row { display: grid; grid-template-columns: 128px 1fr; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.hiw-finding .row .k { font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tide-pressed); padding-top: 2px; }
.hiw-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 560px; margin: 10px auto 0; }
.hiw-cal .c { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; color: var(--ink-3); display: grid; place-items: center; position: relative; }
.hiw-cal .c.due { background: #fdf1dc; border-color: var(--sun); color: var(--ink); font-weight: 700; }
.hiw-cal .c.due2 { background: #eef6f3; border-color: var(--tide); color: var(--ink); font-weight: 700; }

/* graphs */
.hiw-graphs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1000px; margin: 0 auto; }
.hiw-graph { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.hiw-graph h3 { margin: 0 0 4px; font-size: 17px; }
.hiw-graph .src { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; }
.hiw-timeline { background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 26px; max-width: 1000px; margin: 0 auto; overflow-x: auto; }

/* self-serve answers */
.hiw-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hiw-answer { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.hiw-answer h3 { margin: 0 0 6px; font-size: 15.5px; }
.hiw-answer p { margin: 0; font-size: 14px; color: var(--ink-2); }

@media (max-width: 900px) {
  .hiw-graphs { grid-template-columns: 1fr; }
  .hiw-answers { grid-template-columns: 1fr; }
  .hiw-stage { padding: 18px; min-height: 0; }
  .hiw-finding .row { grid-template-columns: 1fr; gap: 2px; }
}

/* ================================================================== */
/* PORTAL WARM (2026-09-04) — signed-in app restyle. Appended last so   */
/* these override the legacy portal styles at equal specificity.       */
/* ================================================================== */
body.portal { background: var(--mist); }
body.portal .app-topbar { background: var(--abyss); border-bottom: none;
  box-shadow: 0 6px 24px -14px rgba(13,52,64,.5); }
body.portal .app-topbar .brand { color: #fff; font-weight: 700; letter-spacing: .01em; }
body.portal .topbar-right { display: flex; align-items: center; gap: 14px; }
body.portal .topbar-email { color: var(--blue-300); font-size: 13px; }
body.portal .app-topbar a { color: var(--blue-100); }
.role-chip { background: rgba(255,255,255,.12); color: var(--blue-100);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.plan-chip.on { background: #2a6f46; color: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.plan-upgrade { margin: 0; }
.btn-sm { padding: 8px 16px; font-size: 13.5px; border-radius: 999px; }

body.portal .side { background: #fff; border-right: 1px solid var(--line);
  border-radius: 0 18px 18px 0; padding-top: 14px; }
body.portal .side a { border-radius: 999px; margin: 2px 10px; padding: 9px 16px;
  color: var(--ink-1); font-size: 14.5px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; }
body.portal .side a:hover { background: var(--paper-2); }
body.portal .side a.active { background: var(--tide); color: #fff; font-weight: 600; }
body.portal .side .side-label { color: #5a6b76; font-size: 11px;
  letter-spacing: .1em; margin: 18px 0 6px 26px; text-transform: uppercase; }
.lock-chip { background: #fdf1dc; color: #8a5a12; border-radius: 999px;
  padding: 2px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; flex: 0 0 auto; }
body.portal .side a.active .lock-chip { background: rgba(255,255,255,.25); color: #fff; }

body.portal .main .card { border-radius: 18px; border-color: var(--line); }
body.portal .main h1, body.portal .main h2 { font-family: 'Fraunces', Georgia, serif; }
/* The tab bar's labels were picked for the white ground the base rule sets,
   then this line flipped the ground to --abyss and the colours stayed: the
   inactive labels measured 2.69:1 and the ACTIVE one 1.67:1 at 9.5px - the
   current-page indicator was the least readable thing in the phone-first
   primary nav. Re-picked against --abyss: 7.12:1 and 8.88:1. */
body.portal .tabbar { background: var(--abyss); }
body.portal .tabbar .tab { color: #a8c2ce; }
body.portal .tabbar .tab.on { color: #7fe3e8; }
body.portal .tabbar .tab.on .tic { background: rgba(127, 227, 232, .16); }

/* locked-feature panel (in-app, replaces marketing redirects) */
.locked-panel { max-width: 560px; margin: 40px auto; background: #fff;
  border: 2px solid var(--line); border-radius: 24px; padding: 40px 38px; text-align: center; }
.locked-panel .lock-ic { width: 64px; height: 64px; border-radius: 999px;
  background: #fdf1dc; display: grid; place-items: center; font-size: 26px; margin: 0 auto 18px; }
.locked-panel h1 { font-family: 'Fraunces', Georgia, serif; font-size: 28px; margin: 0 0 10px; }
.locked-panel ul { list-style: none; padding: 0; margin: 16px 0 22px; text-align: left; }
.locked-panel li { padding: 5px 0 5px 26px; position: relative; font-size: 14.5px; }
.locked-panel li::before { content: "✓"; position: absolute; left: 2px; color: var(--tide); font-weight: 700; }

/* tools rendered inside the app shell */
.tool-in-app .band { padding: 10px 0 30px; }
.tool-in-app .kicker { display: none; }  /* "Free Tool" marketing kicker is noise in-app */
.tool-in-app .section-title { font-size: 26px; }

/* team management table */
.team-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.team-table th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); padding: 8px 10px; border-bottom: 2px solid var(--line); }
.team-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.team-table .role-tag { background: #eef6f3; color: var(--tide-pressed);
  border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 600; }
.team-table form { display: inline-block; margin: 0; }
.temp-pw { font-family: 'IBM Plex Mono', monospace; background: #fdf1dc;
  border: 1px dashed var(--sun); border-radius: 8px; padding: 6px 12px; font-size: 14px; }

/* ---------- CCCPH Hazard Survey tool (2026-09-05) ---------- */
.hz-head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.hz-formwrap > summary { list-style: none; cursor: pointer; display: inline-block; }
.hz-formwrap > summary::-webkit-details-marker { display: none; }
.hz-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
  margin-top: 14px; padding: 24px; }
.hz-form .field { margin-bottom: 10px; }
.hz-form select, .hz-form input, .hz-form textarea { width: 100%; min-height: 48px; }
.hz-form textarea { min-height: 64px; }
.hz-wide { grid-column: 1 / -1; }
.hz-list { display: flex; flex-direction: column; gap: 10px; }
.hz-row { background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px; display: flex; justify-content: space-between; gap: 14px; }
.hz-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hz-row-main strong { font-size: 16px; }
.hz-action { font-size: 13.5px; color: var(--tide-pressed); font-weight: 600; }
.hz-row-side { display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px; flex: 0 0 auto; }
.hz-row-actions { display: flex; gap: 8px; }
.hz-chip { border-radius: 999px; padding: 4px 14px; font-size: 12.5px;
  font-weight: 700; letter-spacing: .03em; }
.hz-chip.high { background: #fbeeed; color: #b3261e; }
.hz-chip.moderate { background: #fdf1dc; color: #8a5a12; }
.hz-chip.low { background: #e9f4ec; color: #2a6f46; }
@media (max-width: 700px) {
  .hz-form { grid-template-columns: 1fr; padding: 18px; }
  .hz-row { flex-direction: column; }
  .hz-row-side { flex-direction: row; align-items: center;
    justify-content: space-between; width: 100%; }
}

/* Portal print (2026-09-05): the LCRI document now renders inside the app
   shell — printing it must produce the clean document, not the chrome. */
@media print {
  body.portal .app-topbar, body.portal .side, body.portal .tabbar,
  body.portal .demo-bar, body.portal .impersonation-bar { display: none !important; }
  body.portal .app-shell { display: block; }
  body.portal .main { padding: 0; }
  body.portal { background: #fff; }
}

/* Phones: the chip band duplicates the price-card feature list — larger screens only */
@media (max-width: 760px){ .ovh-chipband{ display:none } }

/* Packet builder / generators: content can never force the column wider than the phone */
.gen-form select, .gen-form input, .gen-form textarea { max-width:100%; min-width:0; }
.gen-doc table { display:block; overflow-x:auto; max-width:100%; }
.gen-doc { overflow-wrap:break-word; word-break:break-word; }

/* Why-now band on pricing: honest anchor + the real LCRI deadline */
.prc-whynow{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:6px 0 30px }
@media (max-width:760px){ .prc-whynow{ grid-template-columns:1fr; gap:12px } }
.wn-card{ background:#fff; border:1px solid #e7e0d2; border-radius:18px; padding:18px 22px }
.wn-card p{ margin:6px 0 0; font-size:15.5px; line-height:1.6; color:var(--ink-2,#3d4852) }
.wn-deadline{ border-left:5px solid var(--sun,#f2a541) }
/* Sticky mobile CTA on the pricing page */
.prc-stickycta{ display:none }
@media (max-width:760px){
  .prc-stickycta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(250,246,238,.97); border-top:1px solid #e7e0d2; backdrop-filter:blur(6px) }
  .prc-stickycta .btn{ width:100% }
  .prc-stickycta + * { padding-bottom:0 }
  body:has(.prc-stickycta) footer, body:has(.prc-stickycta) .site-footer{ padding-bottom:92px }
}

/* Trust section: symmetric 3-card grid (replaces left-hanging avatar row) */
.ovh-trustgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; max-width:1020px; margin:0 auto }
.ovh-trustcard{ background:#fff; border:1px solid #e7e0d2; border-radius:20px; padding:26px 22px; text-align:center }
.ovh-trustcard img{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid #fff;
  box-shadow:0 2px 10px rgba(13,52,64,.18); margin:0 auto 14px; display:block }
.ovh-trustcard h3{ font-size:17.5px; margin:0 0 8px }
.ovh-trustcard p{ font-size:14.5px; line-height:1.55; color:var(--ink-2,#3d4852); margin:0 }
@media (max-width:860px){ .ovh-trustgrid{ grid-template-columns:1fr; gap:14px; max-width:440px } }

/* ---- Operator daily log (2026-09-05) ---- */
.ol-daybar{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.ol-daybar .ol-date{flex:1;text-align:center;font-size:16px}
.ol-daybar .ol-date strong{display:block}
.ol-nav{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  border:1px solid var(--line,#e3ded2);text-decoration:none;font-size:19px;color:var(--ink-2,#3d4852);flex:none}
.ol-nav.is-off{opacity:.35;pointer-events:none}
.ol-progress{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:13.5px;color:var(--ink-soft,#5b6673);margin:0 0 14px}
.ol-card{margin-bottom:14px}
.ol-group{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tide,#0b6e73);
  margin:0 0 12px;font-weight:700}
.ol-field{margin-bottom:12px}
.ol-field input,.ol-field textarea,.ol-field select{font-size:16px;min-height:46px}
.ol-unit{color:var(--ink-soft,#5b6673);font-weight:400;font-size:13px}
.ol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ol-checks{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.ol-checks label{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.4}
.ol-addrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ol-addrow .field{margin:0}
.ol-actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 20px}
.ol-actions .btn{flex:1 1 180px}
.ol-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ol-cal-wd{text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-soft,#5b6673);padding-bottom:4px}
.ol-cal-pad{aspect-ratio:1}
.ol-cal-day{aspect-ratio:1;min-height:44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;border-radius:12px;text-decoration:none;
  border:1px solid var(--line,#e3ded2);font-size:14px;color:var(--ink,#0d3440)}
.ol-cal-day .dot{width:7px;height:7px;border-radius:50%;background:transparent}
.ol-cal-day.is-logged{background:#e3f2e9;border-color:#bfe0cd}
.ol-cal-day.is-logged .dot{background:#2f8f5b}
.ol-cal-day.is-missing{background:#fdeceb;border-color:#f3cfcb}
.ol-cal-day.is-missing .dot{background:#bb3a2a}
.ol-cal-day.is-future{opacity:.45}
.ol-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13px;
  color:var(--ink-soft,#5b6673)}
.ol-legend span{display:flex;align-items:center;gap:6px}
.ol-legend i{width:12px;height:12px;border-radius:4px;display:inline-block;
  border:1px solid var(--line,#e3ded2)}
.ol-legend i.is-logged{background:#e3f2e9;border-color:#bfe0cd}
.ol-legend i.is-missing{background:#fdeceb;border-color:#f3cfcb}
.ol-legend i.is-future{background:#f2efe7}
.ol-exceptions{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.ol-exceptions li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.ol-h3{font-size:15px;margin:20px 0 8px}
.ol-notes{margin:8px 0 0;padding-left:20px;font-size:14.5px}
.ol-notes li{margin:5px 0}
@media (max-width:560px){ .ol-actions .btn{flex:1 1 100%} }

/* ---- CCR builder (2026-09-05) ---- */
.ccr-card{margin-bottom:16px}
.ccr-step{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ccr-step h2{margin:0;font-size:19px}
.ccr-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--tide,#0b6e73);color:#fff;font-size:13px;font-weight:700;flex:none}
.ccr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ccr-addrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ccr-addrow .field{margin:0}
.ccr-checks{display:flex;flex-direction:column;gap:9px}
.ccr-checks label{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.4}
.ccr-inline-check{display:flex;gap:7px;align-items:center;font-size:14px;white-space:nowrap}
.ccr-paper{background:#fff;border:1px solid var(--line,#e3ded2);border-radius:14px;
  padding:clamp(16px,4vw,38px);margin-top:18px}
@media print{
  .ccr-paper{border:none;padding:0;margin:0}
  .gen-hide-print{display:none !important}
}

/* Shared data tables (portal modules). Always scroll inside their own box so a
   wide table never makes the page scroll sideways. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0}
.data-table{border-collapse:collapse;width:100%;font-size:14px}
.data-table th,.data-table td{text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line,#e3ded2);vertical-align:top}
.data-table th{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft,#5b6673);font-weight:600;background:var(--paper-1,#faf6ee)}
.data-table tr:last-child td{border-bottom:none}

.tool-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tide,#0b6e73);background:#e2f0f0;border-radius:999px;
  padding:3px 10px;margin:0 0 8px}

.ol-cal-day.is-today{background:#eef4fa;border-color:#c3d7ea;font-weight:700}
.ol-cal-day.is-today .dot{background:#3a6ea5}
.ol-legend i.is-today{background:#eef4fa;border-color:#c3d7ea}
.ol-cal{gap:5px}

/* Printed MOR: the filed page must identify the system, and the exceptions and
   day grid must survive printing. */
.ol-print-head{display:none}
.ol-grid-wrap{overflow-x:auto;margin:0}
.ol-daygrid{display:table;border-collapse:collapse;width:100%;font-size:12.5px;min-width:560px}
.ol-daygrid th,.ol-daygrid td{border:1px solid var(--line,#e3ded2);padding:5px 7px;text-align:right;
  white-space:nowrap}
.ol-daygrid th{background:var(--paper-1,#faf6ee);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-soft,#5b6673);text-align:right}
.ol-daygrid td:first-child,.ol-daygrid th:first-child{text-align:left;font-weight:600}
.ol-daygrid tr.is-blank td{color:var(--ink-soft,#5b6673)}
.ol-sign{margin-top:22px;border-top:1px solid var(--line,#e3ded2);padding-top:14px}
.ol-sign .sig-row{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px}
.ol-sign .sig{flex:1 1 220px;border-top:1px solid #9aa6a4;padding-top:5px;font-size:12px;
  color:var(--ink-soft,#5b6673)}
@media print{
  .ol-print-head{display:block;margin-bottom:14px}
  .ol-report .card{border:none;box-shadow:none;padding:0;margin-bottom:16px}
  .ol-daygrid{font-size:8.5pt;min-width:0;table-layout:fixed;width:100%}
  .ol-daygrid th,.ol-daygrid td{padding:2px 3px;overflow:hidden}
  .ol-grid-wrap{overflow:visible}
  .ol-report .ol-exceptions{page-break-inside:avoid}
}
/* Seven 44px cells plus gaps need 326px. A phone gives 375px, so the
   calendar card gives up its own padding rather than the tap target. */
@media (max-width:430px){
  .ol-cal{gap:3px}
  .ol-cal-card{padding-left:6px;padding-right:6px}
  .ol-cal-day{min-height:44px;font-size:12.5px}
}

.ol-cal-day.is-offday{background:var(--paper-1,#faf6ee);color:var(--ink-soft,#8a949e);border-style:dashed}

/* Loop-4 mobile and print corrections. */
.ccr-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.ccr-counts label{display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.ccr-counts input{min-height:44px}

/* @page cannot be scoped by selector, so the landscape rule lives in the
   MOR and CCR templates themselves rather than forcing every other page
   sideways when printed. */

/* The day grid scrolls inside its own box, so say so rather than slicing a
   column mid-cell with no cue. */
.ol-grid-wrap{position:relative}
.ol-grid-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:22px;
  pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.10))}
@media print{ .ol-grid-wrap::after{display:none} }

/* 44px is the tap-target floor, and it was being missed by 3-4px almost
   everywhere outside the daily-entry form. */
@media (max-width:900px){
  .btn,.btn-sm{min-height:44px}
  .ccr-checks label,.ol-checks label,label:has(> input[type=checkbox]){min-height:44px;
    display:flex;align-items:center;gap:8px}
  input[type=checkbox]{width:20px;height:20px;flex:0 0 20px}
  select,input,textarea{font-size:16px}
}

/* Lane-10 a11y pass (2026-09-05). */

/* Topbar links measured 23px tall. */
.app-topbar .topbar-right a { min-height: 44px; display: inline-flex; align-items: center; }

/* Admin header identity was 1.79:1 on the dark topbar. */
.app-topbar .adm-who { color: #c9d6de; }
.app-topbar .adm-who .pill-muted { background: rgba(255,255,255,.14); color: #dfe9ee; }

/* Selects on the admin client page measured 40px at every width. */
.adm-band select { min-height: 44px; }

/* The demo banner scrolled away, taking every demo indicator with it. */
.demo-bar { position: sticky; top: 0; z-index: 40; }

/* Color was the only sighted cue between logged and missed days; the border
   style now carries it too. aria-labels already cover screen readers. */
.ol-cal-day.is-missing { border-style: dashed; }

/* Small text links used as row actions. */
.portal a.row-action, body.portal .card a { text-underline-offset: 2px; }

/* Mobile gets the ~31KB hero variants; desktop keeps the full images. CSS
   backgrounds ignore loading=lazy, so these were 216KB of eager JPEG at 375px. */
.bg-swap { background-image: var(--bg-m); }
@media (min-width: 768px) { .bg-swap { background-image: var(--bg-d); } }

/* Failed payment, still inside the retry window. Amber, not red: nothing is
   broken yet and nothing has been lost - but it is the one bar that must not
   be ignorable, because the alternative is a silent lockout in two weeks. */
.dunning-bar { background: #fdf1dc; color: #4a3208; border-bottom: 1px solid #e9d4a8;
  padding: 9px 16px; font-size: 13.5px; text-align: center; }
.dunning-bar a { color: #7a4a06; font-weight: 600; margin-left: 6px; }

/* Payment-failed chip: the topbar used to say "Active" while the dunning
   banner directly above it said the card had been declined. */
.plan-chip.warn { background:#fdf1dc; color:#6b4708; border:1px solid #e9d4a8;
  text-decoration:none; }
.plan-chip.warn:hover { background:#f8e6c8; text-decoration:none; }
/* The tab bar's remaining light-ground leftovers: a cream 1px rule and a
   near-white 3px ring were the two brightest things on a dark bar, louder
   than the active-tab indicator they sat next to. */
body.portal .tabbar { border-top-color: rgba(255,255,255,.14); }
body.portal .tabbar .tab.scan .tic { border-color: rgba(127,227,232,.45); }

/* The focus ring is --tide, which measures 2.21:1 on the dark header and
   topbar grounds - below the 3:1 that WCAG 1.4.11 requires for a focus
   indicator. The hero block already overrides this to --shallows (8.44:1);
   the two dark headers were the siblings that never got it. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.app-topbar a:focus-visible,
.app-topbar button:focus-visible,
body.portal .tabbar a:focus-visible {
  outline: 2px solid var(--shallows);
  outline-offset: 2px;
}