/* ═══════════════════════════════════════════════════════════════════════
   Koadi site stylesheet — styles the shared class vocabulary used by the
   marketing/SEO templates and the client/tech portal, on top of the token
   set in koadi-ds.css. Load order: koadi-ds.css then this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Site nav: floating glass pill (marketing pages) ─────────────────── */
.site-nav, .nav {
  position: sticky; top: 12px; z-index: 50;
  max-width: 1100px; margin: 12px auto 0; padding: 0 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 8px 30px -12px rgba(16,24,40,.18);
}
@media (max-width: 1140px) { .site-nav, .nav { margin-left: 14px; margin-right: 14px; } }
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-nav-inner, .topbar-inner {
  margin: 0 auto; padding: 0 14px 0 18px;
  display: flex; align-items: center; gap: 26px; height: 60px;
}
.topbar-inner { max-width: 1140px; padding: 0 20px; height: 64px; }
.site-brand, .nav-brand, .topbar-brand {
  display: flex; align-items: center; gap: 10px;
  font: 700 18px/1 var(--font); color: var(--text) !important;
  text-decoration: none !important;
}
.site-brand img, .nav-brand img, .topbar-brand img { height: 34px; width: auto; }
/* .footer-brand keeps its own color (white, on the dark footer background)
   defined further below - only match its layout and logo size here. */
.footer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.footer-brand img { height: 34px; width: auto; }
.site-brand .blue, .brand-blue { color: var(--brand); }
.site-brand .orange, .orange { color: var(--action); }
.blue { color: var(--brand); }
.site-nav-links, .nav-links, .topbar-nav {
  display: flex; gap: 20px; align-items: center; margin-left: auto;
  list-style: none; padding: 0; margin-top: 0; margin-bottom: 0;
}
.site-nav-links a, .nav-links a, .topbar-nav a {
  font: 500 14px/1 var(--font); color: var(--text-2); text-decoration: none;
  padding: 8px 2px;
}
.site-nav-links a:hover, .nav-links a:hover, .topbar-nav a:hover { color: var(--text); }
.site-nav-links a.active, .nav-links a.active, .topbar-nav a.active { color: var(--brand); font-weight: 600; }
/* Current-page marker on the marketing nav: an accent underline under the
   active link, so visitors can always see where they are. (The admin
   topbar has its own active treatment and is deliberately excluded.) */
.site-nav-links a.active, .nav-links a.active { position: relative; }
.site-nav-links a.active::after, .nav-links a.active::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--action);
}
.site-nav-cta { margin-left: 12px; }
.topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* Mobile hamburger: checkbox toggle, no JS. Markup order inside the nav
   inner wrapper must be: brand, input.nav-toggle, label.nav-burger, links. */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }
/* Burger takes over at 1120px, not 760px: with seven links (Services, FAQ,
   About, Contact, Guides, For techs, Sign in) plus brand and CTA, the row
   ran out of space around 1000px and wrapped onto two lines, which looked
   broken. Keep this in sync with home.html's own nav media query. */
@media (max-width: 1120px) {
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; padding: 12px 6px; cursor: pointer;
  }
  .nav-burger span {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--text); transition: transform .15s, opacity .15s;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
  .site-nav-links, .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 6px 20px 18px;
    background: var(--surface);
    border-bottom: 1.5px solid var(--border-strong);
    box-shadow: 0 14px 30px -18px rgba(16,24,40,.35);
  }
  .nav-toggle:checked ~ .site-nav-links, .nav-toggle:checked ~ .nav-links { display: flex; }
  .site-nav-links a:not(.btn), .nav-links a:not(.btn) {
    display: block; padding: 13px 2px; font-size: 15px;
    border-bottom: 1px solid var(--border);
  }
  .site-nav-cta { margin: 14px 0 0; width: 100%; justify-content: center; }
}

/* ── Buttons (extends koadi-ds) ──────────────────────────────────────── */
.cta-btn, .btn-orange, .cta-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--font); border-radius: 999px;
  padding: 14px 28px; border: 1px solid transparent; cursor: pointer;
  background: var(--action); color: #fff !important;
  text-decoration: none !important; white-space: nowrap;
  transition: background .15s, transform .05s;
  box-shadow: 0 6px 20px -6px rgba(247,148,29,.55);
}
.cta-btn:hover, .btn-orange:hover, .cta-primary:hover { background: var(--action-pressed); }
.cta-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--font); border-radius: 999px;
  padding: 14px 28px; cursor: pointer;
  background: transparent; color: var(--brand) !important;
  border: 1.5px solid var(--border-strong);
  text-decoration: none !important; white-space: nowrap;
}
.cta-secondary:hover { border-color: var(--brand); background: var(--brand-soft); }
.btn-success { background: var(--green-500); color: #fff !important; }
.btn-success:hover { background: var(--green-700); }

/* ── Page heroes (About / Services / Contact / interior pages) ───────── */
.page-hero { padding: 64px 0 56px; position: relative; }
.page-hero h1 { max-width: 720px; }
.page-hero .lead { font-size: clamp(15.5px, 2vw, 18px); color: var(--text-2); max-width: 640px; }
.page-hero .accent { color: var(--action); }
.page-breadcrumb { font-size: 13px; color: var(--text-3); margin-bottom: 14px; }
.page-breadcrumb a { color: var(--text-2); text-decoration: none; }
.page-hero-eyebrow {
  display: inline-block; font: 600 12px/1 var(--font); letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
  background: var(--brand-soft); padding: 6px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.page-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.page-hero-grid { position: relative; z-index: 1; }

/* Photo-backed heroes: dark blue overlay over a brand photo, white text. */
.page-hero--bg { color: #fff; display: flex; align-items: center; }
.page-hero--bg > .container { width: 100%; }
/* Uniform height on desktop so every top-level page's hero is the same
   band regardless of how much copy it holds; heroes with more content
   still grow past it. Left natural on small screens, where a 500px band
   would push the page content below the fold. */
@media (min-width: 900px) { .page-hero--bg { min-height: 560px; } }
.page-hero--bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.page-hero--bg::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, rgba(9,40,65,.93) 22%, rgba(13,58,94,.82) 55%, rgba(13,58,94,.55));
}
/* One photo per top-level page. Swapping a page's image is a one-line
   change here — no template edit needed. */
.page-hero--bg[data-bg="about"]::before { background-image: url("/assets/images/about-hero-bg.webp"); }
.page-hero--bg[data-bg="contact"]::before { background-image: url("/assets/images/contact-hero-bg.webp"); }
.page-hero--bg[data-bg="services"]::before { background-image: url("/assets/images/home-hero-bg.webp"); }
.page-hero--bg[data-bg="faq"]::before { background-image: url("/assets/images/tech-2.webp"); }
.page-hero--bg[data-bg="technicians"]::before { background-image: url("/assets/images/hero-tech.webp"); }
.page-hero--bg[data-bg="guides"]::before { background-image: url("/assets/images/services-hero-bg.webp"); }
.page-hero--bg h1, .page-hero--bg h2 { color: #fff; }
.page-hero--bg .lead { color: rgba(255,255,255,.82); }
/* Inline links in a photo hero's lead (phone, email, "ask us") would
   otherwise render in link-blue on a dark navy wash. */
.page-hero--bg .lead a { color: #fff; text-decoration: underline; }
.page-hero--bg .lead a:hover { color: var(--action); }
.page-hero--bg .page-breadcrumb, .page-hero--bg .page-breadcrumb a { color: rgba(255,255,255,.65); }
.page-hero--bg .page-hero-eyebrow { background: rgba(255,255,255,.14); color: #fff; }
.page-hero--bg .btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.35); }
.page-hero--bg .btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ── Guides: blog index + article ────────────────────────────────────── */
.guides-toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
#guideSearch {
  flex: 1 1 240px; max-width: 400px; box-sizing: border-box;
  padding: 11px 14px; border: 1.5px solid var(--ink); border-radius: 10px;
  font: 500 14.5px/1.2 var(--font); background: #fff; color: var(--text);
}
#guideSearch:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.guides-count { font: 600 13px/1 var(--font); color: var(--text-3); white-space: nowrap; }
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .guides-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .guides-grid { grid-template-columns: 1fr; } }
.guide-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  text-decoration: none !important; color: inherit; height: 100%;
}
.guide-card .guide-cat {
  font: 700 11px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--action);
}
.guide-card h3 { font-size: 17px; line-height: 1.3; margin: 0; }
.guide-card p { color: var(--text-2); font-size: 14px; line-height: 1.55; margin: 0; }
.guide-card .guide-more { margin-top: auto; padding-top: 10px; font: 600 13.5px/1 var(--font); color: var(--brand); }
/* Full-bleed to the card edge — the card's own 20px padding is cancelled out,
   so the picture reads as part of the card rather than a framed inset. */
.guide-card .guide-thumb {
  width: calc(100% + 40px); margin: -20px -20px 6px; height: 130px; display: block;
  object-fit: cover; border-radius: 12px 12px 0 0; background: var(--surface-sunken);
}
/* Category chips + grouped sections — at 70 guides one undifferentiated
   grid stopped being navigable. Chips filter, sections give the page a
   spine, and every card stays in the server-rendered HTML for crawlers. */
.guide-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 30px; }
.guide-chip {
  font: 600 13px/1 var(--font); color: var(--text-2); background: var(--surface);
  border: 1.5px solid var(--divider); border-radius: 999px; padding: 9px 14px; cursor: pointer;
}
.guide-chip:hover { border-color: var(--ink); color: var(--text); }
.guide-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.guide-chip .n { opacity: .55; margin-left: 4px; }
.guides-section { margin-bottom: 42px; }
.guides-section-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.guides-section-head h2 { font-size: 21px; margin: 0; }
.guides-section-head .n { font: 600 13px/1 var(--font); color: var(--text-3); }

/* width/height are on the tag too, so the page does not jump as it loads. */
.guide-hero {
  width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; display: block;
  border-radius: 14px; margin: 6px 0 28px; background: var(--surface-sunken);
}

/* Article + sticky sidebar. The article has no max-width of its own — it
   fills its grid column, so it's as wide as the layout allows. */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 44px; align-items: start; }
@media (max-width: 980px) { .guide-layout { grid-template-columns: 1fr; gap: 32px; } }
.guide-article { min-width: 0; }
.guide-meta { font-size: 13px; color: var(--text-3); margin: 6px 0 22px; }
.guide-aside { position: sticky; top: 88px; }
@media (max-width: 980px) { .guide-aside { position: static; } }
.guide-aside-back { display: inline-block; font: 600 13.5px/1 var(--font); color: var(--brand); text-decoration: none; margin-bottom: 18px; }
.guide-aside h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; }
.guide-aside > a:not(.guide-aside-back):not(.btn) {
  display: block; padding: 10px 0; border-bottom: 1px solid var(--divider);
  font-size: 14px; line-height: 1.4; color: var(--text-2); text-decoration: none;
}
.guide-aside > a:not(.guide-aside-back):not(.btn):hover { color: var(--brand); }
.guide-aside-cta { margin-top: 24px; padding: 18px; border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--surface); }
.guide-aside-cta strong { display: block; font-size: 15px; margin-bottom: 4px; }
.guide-aside-cta p { font-size: 13.5px; color: var(--text-2); margin: 0 0 12px; }

/* ── Hero & sections (marketing) ─────────────────────────────────────── */
/* Both are used with content placed DIRECTLY inside them on the local
   coverage pages (city/state/service-city/industry) — without a width cap
   the text ran edge-to-edge on wide screens while every other page sat in
   a 1140px column. Cap them to match .container. */
.hero { padding: 68px 24px 52px; max-width: 1180px; margin: 0 auto; }
.hero h1 { max-width: 780px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero p { max-width: 760px; }
.section { padding: 54px 24px; max-width: 1180px; margin: 0 auto; }
.section-label {
  display: inline-block; font: 600 12px/1 var(--font); letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
  background: var(--brand-soft); padding: 6px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.section-title { font-size: clamp(22px, 3.5vw, 30px); font-weight: 700; margin-bottom: 8px; }
.section-sub { color: var(--text-2); max-width: 640px; margin-bottom: 28px; }
.page-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; margin: 0 0 4px; }
.page-subtitle { color: var(--text-2); margin-bottom: 24px; }

/* ── Cards: services, trust, steps, features, pain points ────────────── */
.svc-card, .trust-card, .step-card, .feature-card, .pain-card, .price-card,
.use-case, .stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 24px;
}
.svc-card { transition: box-shadow .15s, border-color .15s; }
.svc-card:hover { box-shadow: var(--shadow-raised); border-color: var(--border-strong); text-decoration: none; }
.svc-icon, .pain-icon, .feature-icon, .cat-icon, .uc-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 14px;
}
.svc h3, .svc-card h3, .pain-card h3, .feature-card h3 { font-size: 17px; margin-bottom: 6px; }
.svc-card p, .pain-card p, .feature-card p, .use-case p { color: var(--text-2); font-size: 14.5px; margin: 0; }
.svc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--action); display: inline-block; margin-right: 8px; }
.step-num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand);
  color: #fff; font: 700 15px/34px var(--font); text-align: center; margin-bottom: 12px;
}
.trust-card { text-align: center; }
.trust-stat { font: 700 30px/1.15 var(--font); color: var(--text); letter-spacing: -0.02em; }
.trust-label { font-size: 13px; color: var(--text-2); margin-top: 6px; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 12px;
}
.faq-q { font-weight: 600; margin-bottom: 6px; }
.faq-a { color: var(--text-2); font-size: 14.5px; }
.faq-a p:last-child { margin-bottom: 0; }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.price-tag { color: var(--brand); font-weight: 700; white-space: nowrap; }
.range { color: var(--brand); font-weight: 700; }
.price-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--surface); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
.price-table th {
  text-align: left; font: 600 12px/1.2 var(--font); text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-2); background: var(--surface-sunken);
  padding: 11px 16px; border-bottom: 1px solid var(--border);
}
.price-table td { padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.price-table tr:last-child td { border-bottom: none; }
.factor-item, .factors-grid > div {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px;
}
.factors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .factors-grid { grid-template-columns: 1fr; } }

/* ── Link pills & cards (cities, states, industries, services) ───────── */
.city-link-card, .state-link, .svc-link-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 13px 16px;
  color: var(--text) !important; text-decoration: none !important;
  font-size: 14.5px; transition: border-color .15s, box-shadow .15s;
}
.city-link-card:hover, .state-link:hover, .svc-link-card:hover {
  border-color: var(--brand); box-shadow: var(--shadow-card);
}
.city-link-name { font-weight: 600; }
.city-link-state { color: var(--text-3); font-size: 12.5px; margin-left: auto; }
.svc-link-icon { font-size: 20px; }
.svc-link-arrow { margin-left: auto; color: var(--text-3); }
.industry-pill, .svc-pill, .related-pill, .other-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 13.5px/1 var(--font); color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px; margin: 0 8px 8px 0;
  text-decoration: none !important;
}
.industry-pill:hover, .svc-pill:hover, .related-pill:hover, .other-pill:hover {
  border-color: var(--brand); color: var(--brand);
}

/* ── CTA block ───────────────────────────────────────────────────────── */
.cta-block {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  border-radius: var(--radius-xl); padding: 48px 32px; text-align: center;
  color: #fff; margin: 40px 0;
}
.cta-block h2, .cta-block h3 { color: #fff; }
.cta-block p { color: rgba(255,255,255,.75); max-width: 560px; margin: 0 auto 24px; }

/* ── Forms (marketing + portal) ──────────────────────────────────────── */
.form-field, .form-group { margin-bottom: 18px; }
.form-label, .form-group label {
  display: block; font: 600 13px/1.2 var(--font); color: var(--text-2); margin-bottom: 6px;
}
/* .form-textarea and the .form-field descendants are listed explicitly: the
   contact form wraps fields in .form-field (not .form-group) and its textarea
   carried only .form-textarea, so it matched none of these rules and fell back
   to browser defaults — monospace, ~20 characters wide, no padding. */
.form-input, .form-control, .form-textarea,
.form-group input, .form-group select, .form-group textarea,
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select, .form-field textarea {
  width: 100%; font: 400 15px/1.4 var(--font); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 11px 14px; outline: none;
  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.form-input:focus, .form-control:focus, .form-textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.form-field select:focus, .form-field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.hint { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }

/* ── Flash messages ──────────────────────────────────────────────────── */
.flash {
  border-radius: var(--radius-md); padding: 13px 16px; font-size: 14px;
  margin-bottom: 18px; border: 1px solid;
}
.flash-success { background: var(--green-50); border-color: #A6F4C5; color: var(--green-700); }
.flash-error { background: var(--red-50); border-color: #FECDCA; color: var(--red-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flash-success { background: rgba(18,183,106,.12); border-color: rgba(18,183,106,.3); color: #6CE9A6; }
  :root:not([data-theme="light"]) .flash-error { background: rgba(240,68,56,.12); border-color: rgba(240,68,56,.3); color: #FDA29B; }
}

/* ── Portal: job cards ───────────────────────────────────────────────── */
.job-cards { display: grid; gap: 16px; }
.job-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 20px 22px; transition: box-shadow .15s, border-color .15s;
}
.job-card:hover { box-shadow: var(--shadow-raised); border-color: var(--border-strong); }
.job-card-title { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.job-card-title a { color: var(--text); text-decoration: none; }
.job-card-title a:hover { color: var(--brand); }
.job-card-desc { color: var(--text-2); font-size: 14px; margin: 6px 0 12px; }
.job-card-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--text-3); }
.job-card-price { font-weight: 700; color: var(--brand); font-size: 16px; }
.job-card-footer { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* ── Portal: detail views ────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-items: start; }
.detail-field { background: var(--surface-sunken); border-radius: var(--radius-md); padding: 10px 12px; }
/* Stacked fields inside a column need breathing room — without this the
   boxes sit flush and read as one overlapping blob. */
.detail-field + .detail-field { margin-top: 10px; }
/* A full-width field following the grid (e.g. Bio under Joined/Status) was
   flush against the grid's last row — same overlapping-blob effect. */
.detail-grid + .detail-field { margin-top: 14px; }
.detail-value { overflow-wrap: anywhere; }
.detail-label { font: 600 11.5px/1.2 var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 4px; }
.detail-value { font-size: 14.5px; color: var(--text); }
.callout {
  background: var(--brand-soft); border: 1px solid var(--blue-200);
  border-radius: var(--radius-md); padding: 14px 16px; font-size: 14px; margin: 14px 0;
}
.callout-title { font-weight: 600; color: var(--brand-strong); margin-bottom: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .callout { border-color: rgba(66,147,210,.3); }
}
.back-link { font-size: 13.5px; color: var(--text-2); display: inline-block; margin-bottom: 14px; }

/* ── Portal: stats ───────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { text-align: center; padding: 18px 12px; }
.stat-value { font: 700 26px/1.15 var(--font); color: var(--text); }
.stat-label { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }

/* ── Portal: chat ────────────────────────────────────────────────────── */
.chat-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  height: 60vh; min-height: 380px;
}
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg, .chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; }
.chat-msg.mine, .chat-bubble.mine { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.theirs, .chat-bubble.theirs { align-self: flex-start; background: var(--surface-sunken); color: var(--text); border-bottom-left-radius: 4px; }
.chat-meta { font-size: 10.5px; opacity: .65; margin-top: 3px; display: block; }
.chat-empty { text-align: center; color: var(--text-3); padding: 40px 16px; }
.chat-form { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--border); background: var(--surface); }
.chat-form input { flex: 1; }

/* ── Portal: notifications ───────────────────────────────────────────── */
.notif-bell { position: relative; font-size: 20px; color: var(--text-2); text-decoration: none !important; }
.notif-badge, .notif-dot {
  position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px;
  background: var(--red-500); color: #fff; border-radius: 999px;
  font: 700 10px/16px var(--font); text-align: center; padding: 0 4px;
}
.notif-item {
  display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px;
}
.notif-item.unread { border-left: 3px solid var(--action); }
.notif-icon { font-size: 20px; }
.notif-title { font-weight: 600; font-size: 14.5px; }
.notif-body { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.notif-time { color: var(--text-3); font-size: 12px; margin-top: 4px; }

/* ── Portal: profile ─────────────────────────────────────────────────── */
.profile-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 18px; }
.profile-row, .profile-item { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 14.5px; }
.profile-row:last-child, .profile-item:last-child { border-bottom: none; }

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(16,24,40,.55); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
  padding: 26px; max-width: 440px; width: 100%;
  max-height: 88vh; overflow-y: auto;
}
.modal-box h3 { font-size: 17px; }
.modal-box .form-group { margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.hidden { display: none !important; }

/* ── Footer (marketing) ──────────────────────────────────────────────── */
.site-footer, .footer { background: var(--gray-900); color: var(--gray-400); padding: 52px 0 30px; margin-top: 72px; font-size: 14px; }
.site-footer a, .footer a { color: var(--gray-300); text-decoration: none; }
.site-footer a:hover, .footer a:hover { color: #fff; }
.site-footer-col h4, .footer h4 { color: #fff; font-size: 14px; margin: 0 0 14px; }
.site-footer-cols, .footer-links { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer-col li { margin-bottom: 9px; }
.site-footer-bottom, .site-footer-legal, .footer-copy {
  max-width: 1180px; margin: 36px auto 0; padding: 22px 24px 0;
  border-top: 1px solid var(--gray-800); font-size: 13px; color: var(--gray-500);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
}
.footer-brand { color: #fff; font-weight: 700; font-size: 16px; }
@media (max-width: 800px) { .site-footer-cols, .footer-links { grid-template-columns: 1fr 1fr; } }

/* ── Interior pages: About / Services / Contact ──────────────────────── */
.page, .about-main, .contact-main { padding: 40px 0 20px; }
.intro-text { color: var(--text-2); line-height: 1.75; max-width: 760px; margin-bottom: 1em; }
.mission-block, .how-block, .escrow-block, .states-section { margin: 44px 0; }
.values-grid, .who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0; }
@media (max-width: 860px) { .values-grid, .who-grid { grid-template-columns: 1fr; } }
.value-card, .who-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 24px;
}
.value-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 12px;
}
.who-card.client { border-top: 3px solid var(--brand); }
.who-card.tech { border-top: 3px solid var(--action); }
.steps-list { margin: 20px 0; }
.step-row { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--divider); }
.step-row:last-child { border-bottom: none; }
.step-n {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: #fff; font: 700 14px/32px var(--font); text-align: center;
}
.step-content h3, .step-content h4 { margin-bottom: 3px; font-size: 15.5px; }
.step-content p { color: var(--text-2); font-size: 14px; margin: 0; }
.escrow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 800px) { .escrow-steps { grid-template-columns: 1fr; } }
.escrow-step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px;
}
.e-icon { font-size: 24px; margin-bottom: 8px; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.card-icon {
  width: 42px; height: 42px; border-radius: 11px; background: var(--brand-soft);
  display: inline-flex; align-items: center; justify-content: center; font-size: 21px;
}
.card-title { font-size: 16.5px; font-weight: 700; }
.card-tagline { font-size: 13px; color: var(--text-3); }
.card-link { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px/1 var(--font); color: var(--brand); text-decoration: none; margin-top: 12px; }
.card-link:hover { text-decoration: underline; }
.cta-strip {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  border-radius: var(--radius-xl); color: #fff; padding: 40px 32px; margin: 48px 0;
}
.cta-strip h2, .cta-strip h3 { color: #fff; margin: 0; }
.cta-strip p { color: rgba(255,255,255,.75); margin: 0; max-width: 60ch; }
/* Heading and blurb stack in one column, buttons sit beside them. The old rule
   put all three in a single space-between flex row, so on a wide screen the
   blurb was flung to the far right and the buttons wrapped underneath the
   heading — leaving a block of dead space under the text. */
.cta-strip-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 32px; align-items: center;
}
.cta-strip-inner > h2, .cta-strip-inner > h3, .cta-strip-inner > p { grid-column: 1; }
.cta-strip-row {
  grid-column: 2; grid-row: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
@media (max-width: 820px) {
  .cta-strip { padding: 32px 24px; }
  .cta-strip-inner { grid-template-columns: 1fr; gap: 14px; }
  .cta-strip-row { grid-column: 1; grid-row: auto; }
}
.btn-on-dark { background: #fff; color: var(--blue-800) !important; }
.btn-on-dark:hover { background: var(--gray-100); }
.states-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 16px; }
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; margin: 32px 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px;
}
.form-sub { color: var(--text-2); font-size: 14px; margin-bottom: 18px; }
.form-textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
.info-side { display: flex; flex-direction: column; gap: 14px; }
.info-item {
  display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px;
}
.info-icon, .info-icon-blue, .info-icon-green, .info-icon-orange {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--brand-soft);
}
.info-icon-green { background: var(--green-50); }
.info-icon-orange { background: var(--action-soft); }
.info-detail { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 800px) { .site-footer-grid { grid-template-columns: 1fr 1fr; } }
.site-footer-brand { color: #fff; font-weight: 700; font-size: 16px; }
.is-active { color: var(--brand) !important; font-weight: 600; }

/* ── Misc structural classes used across templates ───────────────────── */
main.main, .main { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.services-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .services-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .services-list { grid-template-columns: 1fr; } }
.cat {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 12px; text-align: center;
  font-size: 13.5px; color: var(--text-2);
}
.use-case { display: flex; gap: 14px; align-items: flex-start; }
.uc-text { flex: 1; }
.uc-text h3, .uc-text h4 { margin-bottom: 4px; font-size: 15.5px; }
.svc { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--divider); }
.svc:last-child { border-bottom: none; }

/* ── Programmatic SEO pages (service / state / city / industry / cost) ── */
/* service-city and industry pages nest .hero-inner inside .hero; both carry
   a max-width and horizontal padding, so the content was inset twice and
   sat 22px right of the logo. Inside .hero the inner wrapper is a no-op. */
.hero > .hero-inner { max-width: none; padding-left: 0; padding-right: 0; }
.hero-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.hero-icon, .svc-hero-icon {
  width: 58px; height: 58px; border-radius: 16px; background: var(--brand-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; margin-bottom: 16px;
}
.hero-sub, .hero-tagline, .tagline { color: var(--text-2); font-size: clamp(15px, 2vw, 17.5px); max-width: 660px; }
.hero-badge, .industry-badge, .local-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12.5px/1 var(--font); color: var(--brand);
  background: var(--brand-soft); border-radius: 999px; padding: 7px 14px; margin-bottom: 14px;
}
.breadcrumb { font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.breadcrumb a { color: var(--text-2); text-decoration: none; }
.highlight { color: var(--action); }
.local-intro, .svc-intro { color: var(--text-2); line-height: 1.75; max-width: 780px; }

.services-section, .how-section, .why-section, .trust-section, .faq-section,
.use-cases-section, .other-section, .state-link-section, .svc-features,
.svc-usecases, .svc-cities, .svc-industries, .svc-faq { padding: 44px 0; }
.services-inner, .how-inner, .use-cases-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.services-grid, .features-grid, .pain-grid, .use-cases-grid, .why-grid,
.trust-grid, .price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
@media (max-width: 900px) { .services-grid, .features-grid, .pain-grid, .use-cases-grid, .why-grid, .trust-grid, .price-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .services-grid, .features-grid, .pain-grid, .use-cases-grid, .why-grid, .trust-grid, .price-cards { grid-template-columns: 1fr; } }
.services-row, .cta-row, .related-row, .store-icons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Steps use the SAME 3-up grid as .trust-grid so the "How it works" cards
   and the "Why Koadi" cards below them line up column-for-column. As a flex
   row they sized to their content and wrapped onto two lines. */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; align-items: stretch; }
@media (max-width: 900px) { .steps-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .steps-row { grid-template-columns: 1fr; } }
/* The trust band had no inner wrapper (unlike .how-section > .how-inner),
   so its cards ran full-bleed while the steps above sat in 1140px — and its
   heading only had text-align on the inline-block label itself, which
   centres the label's text but not the label. Fix both here so every page
   using this band inherits it. */
.trust-section { max-width: 1180px; margin: 0 auto; padding: 44px 24px; }
.trust-section > h2 { text-align: center; }
.trust-section > .section-label {
  display: block; width: fit-content; margin-left: auto; margin-right: auto;
}
.cities-grid, .other-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 18px; }
.why-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px;
}
.why-icon, .why-icon-blue, .why-icon-green, .why-icon-orange,
.svc-icon-blue, .svc-icon-green, .svc-icon-orange, .svc-icon-purple, .svc-icon-red {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 12px; background: var(--brand-soft);
}
.why-icon-green, .svc-icon-green { background: var(--green-50); }
.why-icon-orange, .svc-icon-orange { background: var(--action-soft); }
.svc-icon-purple { background: var(--indigo-50); }
.svc-icon-red { background: var(--red-50); }
.svc-features-sub, .svc-usecases-sub, .svc-cities-sub, .svc-industries-sub { color: var(--text-2); max-width: 640px; margin-bottom: 20px; }
/* FAQ blocks on the service and industry pages fill their column like every
   other section — they were capped at 760px while the rest of the page ran
   to 1180px, which read as a narrow strip inside a wide page. */
.faq-list { max-width: none; }
.svc-pills, .related-pills, .industry-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.industry-pill-pricing { font-weight: 700; color: var(--brand); }
.back-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; font-size: 14px; }
.cta-orange { background: var(--action); color: #fff !important; }
.cta-orange:hover { background: var(--action-pressed); }
.cta-wht, .cta-link { color: #fff !important; text-decoration: underline; }
.article { max-width: 760px; margin: 0 auto; }
.services-bg { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Mobile "coming soon" + small pages */
.coming-soon { max-width: 520px; margin: 0 auto; text-align: center; padding: 72px 20px; }
.store-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 18px;
}
.store-icon { font-size: 24px; }
.store-label { text-align: left; font-size: 13px; color: var(--text-2); }
.store-label strong { display: block; color: var(--text); font-size: 14.5px; }
.desktop-note { color: var(--text-3); font-size: 13px; margin-top: 18px; }
.btn-login { color: var(--brand) !important; }
.btn-register { background: var(--action); color: #fff !important; border-radius: var(--radius-sm); padding: 10px 18px; }
.brand { font-weight: 800; color: var(--text); }
.title { font-weight: 700; }
.message { color: var(--text-2); }
.sub { color: var(--text-3); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════
   PAPER & INK LAYER — site-wide identity, matching the homepage.
   Thin ink rules, hard offset shadows, signal-orange CTAs, paper canvas.
   Loaded last so it wins the cascade over the base component styles above.
   ═══════════════════════════════════════════════════════════════════════ */

/* Nav: thin ink-ruled bar (not a pill, not a shadow blur) */
.site-nav, .nav {
  position: sticky; top: 0; max-width: none; margin: 0; padding: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: none; border-bottom: 1.5px solid var(--ink); border-radius: 0;
  box-shadow: none;
}
@media (max-width: 1140px) { .site-nav, .nav { margin: 0; } }
.site-nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 66px; }
.site-brand, .nav-brand { font-family: var(--font-display); font-size: 20px; }
.site-brand .blue, .site-brand .orange { color: var(--text); }
.site-brand .orange { color: var(--action); }

/* Cards: ink borders + pressed offset shadows */
.card, .svc-card, .trust-card, .step-card, .feature-card, .pain-card, .price-card,
.use-case, .stat-card, .faq-item, .job-card, .value-card, .who-card, .escrow-step,
.info-item, .contact-form-card, .why-card, .auth-card {
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-card);
  /* Without this, a card containing a wide-content nested grid (e.g. the
     3-col .services-list) forces its own grid column to stretch beyond its
     1fr share to fit that content's min-content width — the classic CSS
     Grid "blowout" — leaving sibling columns uneven and the whole layout
     looking off-center. min-width: 0 lets the card shrink to its column's
     actual share; content wraps instead of blowing the column out. */
  min-width: 0;
}
.svc-card:hover, .job-card:hover, .card-hover:hover {
  box-shadow: var(--ink-shadow); border-color: var(--ink);
  transform: translate(-1px, -1px);
}

/* Buttons: signal orange with ink offset shadow (primary), ink outline (secondary) */
.btn { border-radius: 10px; }
.btn-primary, .cta-btn, .btn-orange, .cta-primary {
  border-radius: 10px; background: var(--action); border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); color: #fff !important;
  transition: transform .08s, box-shadow .08s, background .15s;
}
.btn-primary:hover, .cta-btn:hover, .btn-orange:hover, .cta-primary:hover {
  background: var(--action-pressed); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink);
}
.btn-brand { border-radius: 10px; background: var(--ink); border: 1.5px solid var(--ink); }
.btn-brand:hover { background: var(--blue-900); }
.btn-secondary, .cta-secondary {
  border-radius: 10px; border: 1.5px solid var(--ink); color: var(--ink) !important; background: transparent;
}
.btn-secondary:hover, .cta-secondary:hover { background: var(--surface-sunken); border-color: var(--ink); }

/* Section labels: kicker rule instead of pill */
.section-label, .page-hero-eyebrow {
  background: none; padding: 0; border-radius: 0;
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 12.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
.section-label::before, .page-hero-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--action); }
.page-hero--bg .page-hero-eyebrow { color: rgba(250,247,242,.85); }

/* Badges: outline ink style */
.badge { border: 1px solid currentColor; background: transparent !important; }

/* Pills & chips */
.pill, .industry-pill, .svc-pill, .related-pill, .other-pill, .city-link-card, .state-link, .svc-link-card {
  border: 1.5px solid var(--ink); background: var(--surface);
  transition: transform .08s, box-shadow .08s;
}
.industry-pill:hover, .svc-pill:hover, .related-pill:hover, .other-pill:hover,
.city-link-card:hover, .state-link:hover, .svc-link-card:hover {
  box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px,-1px);
  color: var(--text); border-color: var(--ink);
}

/* Footer: paper with ink rule (was dark) */
.site-footer, .footer {
  background: var(--bg); color: var(--text-2);
  border-top: 1.5px solid var(--ink); margin-top: 72px; padding: 46px 0 30px;
}
.site-footer a, .footer a { color: var(--text-2); }
.site-footer a:hover, .footer a:hover { color: var(--text); }
.site-footer-col h4, .footer h4, .site-footer-brand, .footer-brand {
  color: var(--text); font-family: var(--font-display);
}
.site-footer-bottom, .site-footer-legal, .footer-copy { border-top: 1px solid var(--divider); color: var(--text-3); }
.site-footer .footer-brand span, .footer-brand span { color: var(--text) !important; }

/* CTA blocks: full ink panels */
.cta-block, .cta-strip {
  background: var(--ink); border-radius: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-block, :root:not([data-theme="light"]) .cta-strip { background: var(--blue-900); }
}

/* Photo heroes keep their navy overlay — tint toward ink for consistency */
.page-hero--bg::after {
  background: linear-gradient(100deg, rgba(16,37,58,.93) 22%, rgba(16,37,58,.8) 55%, rgba(16,37,58,.5));
}

/* Tables */
.table-wrap, .price-table { border: 1.5px solid var(--ink); }
table.ds th, .price-table th { background: var(--surface-sunken); }

/* Forms */
.input, .select, .textarea, .form-input, .form-control, .form-textarea,
.form-group input, .form-group select, .form-group textarea,
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select, .form-field textarea {
  border: 1.5px solid var(--ink); border-radius: 10px; background: var(--surface);
}
.input:focus, .form-input:focus, .form-control:focus, .form-textarea:focus {
  border-color: var(--ink); box-shadow: 3px 3px 0 rgba(16,37,58,.15);
}

/* Step numerals */
.step-num, .step-n { background: var(--ink); }

/* Portal top bar joins the identity */
.topbar { background: color-mix(in srgb, var(--bg) 90%, transparent); border-bottom: 1.5px solid var(--ink); }
.topbar-brand { font-family: var(--font-display); }

/* ── Misc marketing helpers ──────────────────────────────────────────── */
.body-text { color: var(--text-2); line-height: 1.7; }
.green { color: var(--green-500); }
.grid { display: grid; gap: 20px; }
.grid-cols-2 { grid-template-columns: 1fr 1fr; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } }