/*
Theme Name: Core MB
Theme URI: https://coremb.com
Author: Core MB
Author URI: https://coremb.com
Description: Custom theme for Core MB — credentialing, medical billing and revenue cycle management, website development, digital marketing and HIPAA-compliant virtual assistants. Includes a live client portal showcase, auto-created pages and redirects from the previous site's URLs.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coremb
*/

/* ==========================================================================
   Core MB — stylesheet
   Palette : deep petrol ink / paper-green ground / amber (paid) / sea (clean)
   Type    : Spectral (display) + IBM Plex Sans (body & UI)
   ========================================================================== */

:root {
  --ink:        #12263f;
  --ink-deep:   #0c1a2c;
  --ink-soft:   #2b4460;
  --paper:      #f2f6f3;
  --surface:    #ffffff;
  --rule:       #dbe3e0;
  --rule-soft:  #ebf0ed;
  --muted:      #56697c;

  --green:      #4f9130;
  --green-dk:   #3a6f22;
  --green-lt:   #6bae3e;
  --green-wash: #edf6e6;

  --blue:       #1b70b8;
  --blue-dk:    #17418c;
  --blue-wash:  #e7f1fa;

  /* legacy aliases kept so older rules resolve to the brand palette */
  --amber:      #4f9130;
  --amber-deep: #3a6f22;
  --amber-wash: #edf6e6;
  --sea:        #1b70b8;
  --sea-wash:   #e7f1fa;

  --display: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gut: 24px;
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  --shadow-lift: 0 18px 40px -24px rgba(11, 32, 40, .45);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- type scale ---------- */
.t-hero   { font-size: clamp(2.1rem, 4.5vw, 3.35rem); line-height: 1.12; font-weight: 600; }
.t-page   { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.14; font-weight: 600; }
.t-sect   { font-size: clamp(1.55rem, 2.6vw, 2.1rem); line-height: 1.2; font-weight: 600; }
.t-sub    { font-size: clamp(1.18rem, 1.9vw, 1.45rem); line-height: 1.3; }
.lede { font-size: clamp(1.06rem, 1.55vw, 1.2rem); line-height: 1.62; color: var(--ink-soft); max-width: 62ch; }
.small { font-size: .875rem; line-height: 1.55; }
.dim { color: var(--muted); }

/* A small sentence-case label that carries real information, not decoration */
.tag-note {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--amber-deep);
  background: var(--amber-wash);
  padding: 3px 10px;
  border-radius: 999px;
}
.tag-note.is-sea { color: #1f5e4f; background: var(--sea-wash); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-tight { max-width: 860px; }

.band { padding: clamp(56px, 8vw, 104px) 0; }
.band-sm { padding: clamp(40px, 5vw, 64px) 0; }
.band-paper { background: var(--paper); }
.band-surface { background: var(--surface); }
.band-ink { background: var(--ink); color: #e9efec; }
.band-ink h1, .band-ink h2, .band-ink h3 { color: #fff; }
.band-ink .lede { color: #b9cbc9; }
.band-ink .dim { color: #93aaa9; }

.rule-top { border-top: 1px solid var(--rule); }

.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack-sm > * + * { margin-top: 10px; }
.stack > * + * { margin-top: 18px; }
.stack-lg > * + * { margin-top: 32px; }

.sect-head { max-width: 680px; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; }
.sect-head .t-sect + p { margin-top: 12px; }
.sect-head .lede { margin-left: auto; margin-right: auto; }
.sect-head.is-left { margin-left: 0; text-align: left; }
.sect-head.is-left .lede { margin-left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: .96rem; font-weight: 600; line-height: 1;
  padding: 15px 26px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green-dk); border-color: var(--green-dk); }
.btn-blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-blue:hover { background: var(--blue-dk); border-color: var(--blue-dk); }
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-deep); border-color: var(--ink-deep); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-line:hover { border-color: var(--ink); background: var(--surface); }
.band-ink .btn-line { color: #fff; border-color: rgba(255,255,255,.32); }
.band-ink .btn-line:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-quiet {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .94rem; text-decoration: none;
  color: var(--ink); border-bottom: 2px solid var(--green);
  padding-bottom: 2px; transition: color .16s ease, border-color .16s ease;
}
.link-quiet:hover { color: var(--amber-deep); }
.band-ink .link-quiet { color: #fff; }
.band-ink .link-quiet:hover { color: var(--green-lt); }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar {
  background: var(--ink-deep);
  color: #b9cbc9;
  font-size: .82rem;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.topbar a { color: #dfe8e5; text-decoration: none; }
.topbar a:hover { color: var(--green-lt); }
.topbar-contact { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar-social { display: flex; gap: 14px; align-items: center; }
.topbar-social a { display: inline-flex; }
.topbar-social svg { width: 15px; height: 15px; fill: currentColor; }

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 86px; }

.brand { text-decoration: none; flex-shrink: 0; }
.brand-mark {
  font-family: var(--display); font-size: 1.62rem; font-weight: 600;
  letter-spacing: -.03em; color: var(--ink);
}
.brand-mark em { font-style: normal; color: var(--amber-deep); }
.brand-sub { font-size: .72rem; color: var(--muted); letter-spacing: .01em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav button {
  font-family: var(--sans); font-size: .94rem; font-weight: 500; color: var(--ink);
  text-decoration: none; padding: 9px 13px; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer; line-height: 1.4;
}
.nav a:hover, .nav button:hover { background: var(--paper); }
.nav a[aria-current="page"] { color: var(--amber-deep); font-weight: 600; }

.has-menu { position: relative; }
.has-menu > button { display: inline-flex; align-items: center; gap: 6px; }
.has-menu > button svg { width: 11px; height: 11px; transition: transform .18s ease; }
.has-menu > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift); padding: 8px; list-style: none;
  display: none;
}
.has-menu > button[aria-expanded="true"] + .menu { display: block; }
.menu a { display: block; padding: 10px 12px; border-radius: var(--r-sm); font-size: .92rem; }
.menu a span { display: block; font-size: .79rem; color: var(--muted); font-weight: 400; margin-top: 1px; }

/* .nav a resets background/border, so re-assert it for the CTA button */
.nav a.btn { padding: 12px 22px; border-radius: var(--r-md); }
.nav a.btn-primary { background: var(--green); color: #fff; border: 1px solid var(--green); font-weight: 600; }
.nav a.btn-primary:hover { background: var(--green-dk); border-color: var(--green-dk); }

.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; }

/* ---------- mobile nav ---------- */
@media (max-width: 1080px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sans); font-size: .92rem; font-weight: 600;
    padding: 11px 16px; border: 1px solid var(--rule); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink); cursor: pointer;
  }
  .nav-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
  /* The masthead's backdrop-filter makes it the containing block for positioned
     descendants, so the panel is anchored to the header rather than the viewport.
     This also keeps it correct when the top bar wraps to two rows. */
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 96px); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-top: 1px solid var(--rule);
    box-shadow: var(--shadow-lift);
    padding: 10px var(--gut) 32px;
  }
  .nav.is-open { display: flex; }
  .nav a, .nav button { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--rule-soft); border-radius: 0; text-align: left; }
  .has-menu { position: static; }
  .has-menu > button { width: 100%; justify-content: space-between; }
  .menu { position: static; border: 0; box-shadow: none; padding: 0 0 8px 14px; min-width: 0; }
  .menu a { border-bottom: 0; font-size: .96rem; padding: 11px 4px; }
  .nav-cta { margin: 18px 0 0; }
  .btn.nav-cta { justify-content: center; }
}

/* ==========================================================================
   Hero — signature element: the claim lifecycle
   ========================================================================== */
.hero { background: var(--surface); border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero .wrap {
  display: grid; gap: clamp(38px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  padding-top: clamp(52px, 7vw, 88px); padding-bottom: clamp(52px, 7vw, 88px);
}
.hero h1 { max-width: 19ch; text-wrap: balance; }
.hero .lede { margin-top: 20px; }
.hero .btn-row { margin-top: 30px; }

.hero-proof {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; gap: 30px; flex-wrap: wrap; align-items: center;
}
.hero-proof p { font-size: .85rem; color: var(--muted); margin: 0; max-width: 30ch; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Ledger band — real performance figures
   ========================================================================== */
.ledger { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); }
.ledger div { padding: 26px 20px 26px 0; border-right: 1px solid var(--rule); }
.ledger div:last-child { border-right: 0; }
.ledger div:not(:first-child) { padding-left: 22px; }
.ledger b { display: block; font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 500; line-height: 1; color: var(--ink); }
.ledger span { display: block; margin-top: 8px; font-size: .84rem; color: var(--muted); }
.band-ink .ledger { border-color: rgba(255,255,255,.16); }
.band-ink .ledger div { border-color: rgba(255,255,255,.16); }
.band-ink .ledger b { color: var(--green-lt); }
.band-ink .ledger span { color: #a8bdba; }

@media (max-width: 860px) { .ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger div { border-bottom: 1px solid var(--rule); }
  .ledger div:nth-child(2n) { border-right: 0; }
  .band-ink .ledger div { border-bottom-color: rgba(255,255,255,.16); }
}
@media (max-width: 420px) { .ledger { grid-template-columns: 1fr; }
  .ledger div { border-right: 0; padding-left: 0 !important; }
}

/* ==========================================================================
   Practice lines — deliberately not four identical cards
   ========================================================================== */
.line-lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px); align-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--green);
  border-radius: var(--r-lg); padding: clamp(26px, 3.6vw, 44px);
}
.line-lead h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 12px 0 14px; }
.line-lead ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 18px; }
.line-lead li { font-size: .92rem; color: var(--ink-soft); padding-left: 18px; position: relative; }
.line-lead li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sea);
}
@media (max-width: 820px) { .line-lead, .line-lead ul { grid-template-columns: 1fr; } }

.line-rows { list-style: none; margin-top: 20px; border-top: 1px solid var(--rule); }
.line-row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.35fr) auto;
  gap: clamp(16px, 2.6vw, 32px); align-items: center;
  padding: clamp(22px, 3vw, 30px) 0; border-bottom: 1px solid var(--rule);
}
.line-row .ico {
  width: 46px; height: 46px; border-radius: 12px; background: var(--sea-wash);
  display: grid; place-items: center;
}
.line-row .ico svg { width: 23px; height: 23px; stroke: var(--sea); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.line-row h3 { font-size: 1.28rem; }
.line-row p { font-size: .94rem; color: var(--muted); margin: 0; }
@media (max-width: 820px) {
  .line-row { grid-template-columns: 46px 1fr; gap: 8px 16px; }
  .line-row .ico { grid-row: span 2; align-self: start; }
  .line-row p { grid-column: 2; }
  .line-row .link-quiet { grid-column: 2; margin-top: 6px; }
}

/* ==========================================================================
   Cards & panels (used sparingly, with varied treatment)
   ========================================================================== */
.panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: clamp(22px, 2.8vw, 30px);
  box-shadow: 0 1px 2px rgba(18,38,63,.04);
}
.panel h3 { font-size: 1.14rem; margin-bottom: 9px; }
.panel p { font-size: .93rem; color: var(--muted); }
.panel .ico { width: 40px; height: 40px; margin-bottom: 16px; }
.panel .ico svg { width: 40px; height: 40px; stroke: var(--amber-deep); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* value list — rules instead of boxes */
.values { list-style: none; display: grid; gap: 0; }
.value-item { padding: 24px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0,.36fr) minmax(0,1fr); gap: clamp(14px,3vw,36px); }
.value-item:first-child { border-top: 1px solid var(--rule); }
.value-item h3 { font-size: 1.3rem; }
.value-item p { font-size: .95rem; color: var(--muted); margin: 0; }
.band-ink .value-item, .band-ink .value-item:first-child { border-color: rgba(255,255,255,.15); }
.band-ink .value-item p { color: #a8bdba; }
@media (max-width: 700px) { .value-item { grid-template-columns: 1fr; gap: 6px; } }

/* numbered process — genuinely a sequence, so numbering is meaningful */
.steps { list-style: none; counter-reset: s; display: grid; gap: 0; }
.step { counter-increment: s; display: grid; grid-template-columns: 46px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.step:first-child { border-top: 1px solid var(--rule); }
.step::before {
  content: counter(s); font-family: var(--display); font-size: 1.35rem; color: var(--amber-deep);
  width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%;
  display: grid; place-items: center; background: var(--surface);
}
.step h3 { font-size: 1.15rem; margin-bottom: 5px; }
.step p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ---------- chip cloud (specialties) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; }
.chips li {
  font-size: .89rem; padding: 8px 15px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink-soft);
}
.band-ink .chips li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.17); color: #dbe6e3; }

/* ---------- checklist ---------- */
.checks { list-style: none; display: grid; gap: 11px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .96rem; color: var(--ink-soft); }
.checks li::before {
  content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: var(--sea-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d6b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.band-ink .checks li { color: #cfdcd9; }

.cols-2 { columns: 2; column-gap: 40px; }
@media (max-width: 640px) { .cols-2 { columns: 1; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--display); font-size: clamp(1.05rem, 1.9vw, 1.28rem); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 15px; height: 15px; margin-top: -7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312303a' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 clamp(20px, 6vw, 90px) 24px 0; color: var(--muted); font-size: .97rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 38px);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.field .req { color: var(--amber-deep); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 13px 15px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  transition: border-color .15s ease, background-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); border-color: var(--ink-soft); }
.field textarea { min-height: 128px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.choice-row { display: flex; gap: 22px; flex-wrap: wrap; }
.choice { display: inline-flex; align-items: center; gap: 9px; font-size: .95rem; cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--sea); flex-shrink: 0; padding: 0; }

.consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; margin: 22px 0; }
.consent input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--sea); }
.consent p { font-size: .8rem; color: var(--muted); line-height: 1.55; }
.consent a { color: var(--ink); }

.field-error { display: block; margin-top: 6px; font-size: .82rem; color: #a3341c; font-weight: 500; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #a3341c; }

.form-status { margin-top: 18px; padding: 15px 18px; border-radius: var(--r-md); font-size: .93rem; display: none; }
.form-status.is-shown { display: block; }
.form-status.is-ok { background: var(--sea-wash); color: #1c5747; border: 1px solid #b9d9d0; }
.form-status.is-bad { background: #fbeae6; color: #8c2c16; border: 1px solid #f0c7bd; }

/* ==========================================================================
   Contact rail
   ========================================================================== */
.contact-rail { list-style: none; display: grid; gap: 0; }
.contact-rail li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.contact-rail li:first-child { border-top: 1px solid var(--rule); }
.contact-rail svg { width: 21px; height: 21px; stroke: var(--amber-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 3px; }
.contact-rail b { display: block; font-size: .82rem; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.contact-rail a { text-decoration: none; font-size: 1.05rem; }
.contact-rail a:hover { color: var(--amber-deep); }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.pagehead { background: var(--ink); color: #dbe6e3; padding: clamp(48px, 6.5vw, 84px) 0 clamp(44px, 6vw, 72px); }
.pagehead h1 { color: #fff; max-width: 18ch; }
.pagehead .lede { color: #b9cbc9; margin-top: 18px; }
.crumb { font-size: .84rem; color: #8ea5a4; margin-bottom: 20px; }
.crumb a { color: #b9cbc9; text-decoration: none; }
.crumb a:hover { color: var(--green-lt); }

/* ==========================================================================
   CTA strip
   ========================================================================== */
.cta-strip {
  background: var(--ink); color: #fff; border-radius: var(--r-lg);
  padding: clamp(30px, 4.5vw, 54px);
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center;
}
.cta-strip h2 { color: #fff; }
.cta-strip p { color: #b9cbc9; margin: 10px 0 0; max-width: 52ch; }
.cta-strip .btn-line { color: #fff; border-color: rgba(255,255,255,.34); }
.cta-strip .btn-line:hover { border-color: #fff; background: rgba(255,255,255,.09); }
@media (max-width: 780px) { .cta-strip { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--ink-deep); color: #a8bdba; padding: clamp(48px, 6vw, 72px) 0 0; }
.foot h3 { color: #fff; font-family: var(--sans); font-size: .95rem; font-weight: 600; margin-bottom: 16px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: clamp(26px, 4vw, 46px); }
.foot ul { list-style: none; }
.foot li { margin-bottom: 10px; font-size: .92rem; }
.foot a { color: #cfdcd9; text-decoration: none; }
.foot a:hover { color: var(--green-lt); }
.foot .brand-mark { color: #fff; }
.foot .brand-mark em { color: var(--green-lt); }
.foot-blurb { font-size: .9rem; margin: 14px 0 20px; max-width: 34ch; }
.foot-seal { background: #fff; border-radius: 6px; padding: 6px; display: inline-block; margin-top: 6px; }
.foot-seal img { width: 130px; height: auto; }
.foot-sub { margin-top: 44px; border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem; }
.foot-sub a { color: #a8bdba; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

.newsletter { display: flex; gap: 8px; margin-top: 12px; }
.newsletter input {
  flex: 1; min-width: 0; padding: 12px 14px; font-family: var(--sans); font-size: .92rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-md); color: #fff;
}
.newsletter input::placeholder { color: #7d9391; }
.newsletter button { padding: 12px 18px; font-size: .9rem; }

/* ---------- utility ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  .g-3, .g-4 { grid-template-columns: 1fr; }
  .g-2 { grid-template-columns: 1fr; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
}

/* one orchestrated reveal on page load, nothing else */
@media (prefers-reduced-motion: no-preference) {
  .flow-step { opacity: 0; animation: flow-in .5s ease forwards; }
  .flow-step:nth-child(1) { animation-delay: .15s; }
  .flow-step:nth-child(2) { animation-delay: .3s; }
  .flow-step:nth-child(3) { animation-delay: .45s; }
  .flow-step:nth-child(4) { animation-delay: .6s; }
  .flow-step:nth-child(5) { animation-delay: .75s; }
  .flow-step:nth-child(6) { animation-delay: .9s; }
}
@keyframes flow-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .masthead, .topbar, .foot, .cta-strip, .nav-toggle { display: none !important; }
  body { background: #fff; }
}


/* ==========================================================================
   Brand imagery
   ========================================================================== */
.hero-figure { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.hero-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px clamp(20px, 3vw, 30px);
  color: #fff; font-size: .95rem; line-height: 1.5;
  background: linear-gradient(transparent, rgba(9,22,38,.72));
}
.hero-figure figcaption b { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 500; margin-bottom: 4px; }

.media { border-radius: var(--r-lg); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.media-tall img { aspect-ratio: 5 / 6; }

/* ==========================================================================
   Logo lockup
   ========================================================================== */
.brand { display: flex; align-items: center; }
.brand img { height: 48px; width: auto; display: block; }
@media (max-width: 480px) { .brand img { height: 40px; } }
.foot-logo { background: #fff; border-radius: 10px; padding: 10px 14px; display: inline-block; }
.foot-logo img { height: 38px; width: auto; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.price-grid { display: grid; gap: clamp(16px, 2.2vw, 22px); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .price-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .price-grid { grid-template-columns: 1fr; } }

.price {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: clamp(22px, 2.6vw, 28px); display: flex; flex-direction: column;
}
.price h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: var(--muted); }
.price .amount {
  font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.35rem); font-weight: 500;
  line-height: 1.05; color: var(--ink); margin: 12px 0 4px;
}
.price .unit { font-size: .86rem; color: var(--muted); }
.price p { font-size: .92rem; color: var(--muted); margin: 16px 0 0; }
.price .price-foot { margin-top: auto; padding-top: 20px; }
.price.is-feature { border-color: var(--green); border-width: 2px; }
.price.is-feature .amount { color: var(--green-dk); }

.note-line {
  background: var(--blue-wash); border-left: 3px solid var(--blue);
  padding: 16px 20px; border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .92rem; color: var(--ink-soft);
}

/* ==========================================================================
   Portfolio links
   ========================================================================== */
.portfolio { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 860px) { .portfolio { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .portfolio { grid-template-columns: 1fr; } }
.portfolio a {
  display: block; padding: 15px 18px; text-decoration: none; font-size: .94rem; font-weight: 500;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  transition: border-color .15s ease, color .15s ease;
}
.portfolio a:hover { border-color: var(--green); color: var(--green-dk); }
.band-ink .portfolio a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #e6eef4; }
.band-ink .portfolio a:hover { border-color: var(--green-lt); color: #fff; }

/* ==========================================================================
   Credentialing portal mockup — the site's signature element
   ========================================================================== */
.portal {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -30px rgba(12, 26, 44, .35);
  overflow: hidden;
  font-size: .85rem;
}
.portal-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.portal-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.portal-chrome span {
  margin-left: 10px; flex: 1; text-align: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  padding: 4px 14px; color: var(--muted); font-size: .76rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 0;
}
.portal-head b { font-family: var(--sans); font-size: .98rem; }
.portal-head .tag-note { font-size: .72rem; }
.portal-list { list-style: none; padding: 8px 20px 6px; }
.portal-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
}
.portal-row:last-child { border-bottom: 0; }
.portal-row .pv {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: .78rem; color: #fff;
}
.portal-row .pn b { display: block; font-size: .87rem; font-weight: 600; }
.portal-bar { display: block; height: 5px; border-radius: 99px; background: var(--rule-soft); margin-top: 6px; max-width: 190px; }
.portal-bar i { display: block; height: 100%; border-radius: 99px; }
.pill {
  font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.pill-ok   { background: var(--green-wash); color: var(--green-dk); }
.pill-go   { background: var(--blue-wash);  color: var(--blue-dk); }
.pill-wait { background: #fdf2e3; color: #92550c; }
.portal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; border-top: 1px solid var(--rule); background: var(--paper);
}
.portal-foot span { color: var(--muted); font-size: .8rem; }
.portal-foot b { color: var(--blue); font-size: .82rem; }

/* dark-band variant used in the portal feature section */
.band-ink .portal { border-color: rgba(255,255,255,.14); box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }

/* portal feature list */
.feature-list { list-style: none; display: grid; gap: 22px; }
.feature-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.feature-list .fi {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.09); color: var(--green-lt);
}
.feature-list .fi svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feature-list b { display: block; font-size: 1.02rem; margin-bottom: 3px; color: #fff; }
.feature-list p { font-size: .92rem; color: #b9cbc9; margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .hero .portal { animation: settle .7s cubic-bezier(.2,.7,.3,1) both; }
}

/* ==========================================================================
   Real portal screenshots in a browser frame
   ========================================================================== */
.shot {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -30px rgba(12, 26, 44, .35);
  overflow: hidden;
  color: var(--ink);
}
.shot img { display: block; width: 100%; height: auto; }
.band-ink .shot { border-color: rgba(255,255,255,.14); box-shadow: 0 40px 70px -40px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: no-preference) {
  .hero .shot { animation: settle .7s cubic-bezier(.2,.7,.3,1) both; }
}

/* ==========================================================================
   Design v3 — refinement layer
   ========================================================================== */

/* ---------- buttons: pill, depth, motion ---------- */
.btn {
  border-radius: 999px;
  padding: 15px 28px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn-primary, .nav a.btn-primary {
  background: linear-gradient(180deg, #57a136, var(--green) 55%, #468428);
  border-color: var(--green-dk);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 18px -8px rgba(58,111,34,.55);
}
.btn-primary:hover, .nav a.btn-primary:hover {
  background: linear-gradient(180deg, #4d9430, var(--green-dk) 60%, #35661f);
  border-color: var(--green-dk);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 12px 22px -8px rgba(58,111,34,.6);
}
.btn-blue {
  background: linear-gradient(180deg, #2a7fc6, var(--blue) 55%, #175f9e);
  border-color: var(--blue-dk);
  box-shadow: 0 8px 18px -8px rgba(23,65,140,.5);
}
.btn-blue:hover { transform: translateY(-1px); }
.btn-line:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.nav a.btn { border-radius: 999px; }

/* ---------- section heads: centered accent bar ---------- */
.sect-head .t-sect { position: relative; padding-bottom: 18px; }
.sect-head .t-sect::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 46px; height: 4px; margin-left: -23px; border-radius: 99px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}
.sect-head.is-left .t-sect::after { left: 0; margin-left: 0; }

/* ---------- hero: brand wash, dot grid, floating chips ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(52rem 30rem at 86% -12%, rgba(27,112,184,.10), transparent 62%),
    radial-gradient(46rem 30rem at -8% 108%, rgba(79,145,48,.10), transparent 60%),
    var(--surface);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(18,38,63,.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(38rem 26rem at 78% 40%, #000 15%, transparent 72%);
          mask-image: radial-gradient(38rem 26rem at 78% 40%, #000 15%, transparent 72%);
}
.hero .wrap { position: relative; }
.hero-stage { position: relative; }
.hero-stage .shot { position: relative; z-index: 1; }
.float-chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 11px 16px; font-size: .84rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 18px 34px -16px rgba(12,26,44,.35);
  white-space: nowrap;
}
.float-chip .dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
}
.float-chip .dot svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.float-chip small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; }
.chip-approved { top: 52px; right: -22px; }
.chip-approved .dot { background: var(--green); }
.chip-message { bottom: -22px; left: -18px; }
.chip-message .dot { background: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .chip-approved { animation: chip-in .8s .35s cubic-bezier(.2,.7,.3,1) both; }
  .chip-message  { animation: chip-in .8s .55s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes chip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 900px) {
  .chip-approved { top: 46px; right: 4px; }
  .chip-message { bottom: -16px; left: 6px; }
}

/* ---------- trust row under hero CTAs ---------- */
.trust-row {
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--rule);
  display: flex; gap: 26px; flex-wrap: wrap;
}
.trust-row li { list-style: none; display: flex; align-items: center; gap: 9px; font-size: .87rem; font-weight: 500; color: var(--ink-soft); }
.trust-row svg { width: 17px; height: 17px; stroke: var(--green-dk); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- panels: hover lift, icon tiles ---------- */
.panel { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.panel:hover {
  transform: translateY(-4px);
  border-color: #c7d6cd;
  box-shadow: 0 20px 38px -22px rgba(18,38,63,.25);
}
.panel .ico {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--green-wash), #f2f9ec);
  border: 1px solid #d9ead0;
}
.panel .ico svg { width: 25px; height: 25px; stroke: var(--green-dk); stroke-width: 1.7; }
.grid .panel:nth-child(2n) .ico, .svc-grid .panel:nth-child(2n+1):not(.panel-feature) .ico {
  background: linear-gradient(135deg, var(--blue-wash), #f0f6fc);
  border-color: #cfe2f3;
}
.grid .panel:nth-child(2n) .ico svg, .svc-grid .panel:nth-child(2n+1):not(.panel-feature) .ico svg { stroke: var(--blue); }

/* ---------- values: editorial 2-col grid ---------- */
.values { grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(26px,3.5vw,44px) clamp(30px,4vw,56px); }
.value-item, .value-item:first-child {
  display: block; border: 0; border-top: 3px solid var(--green); padding: 20px 0 0;
}
.value-item:nth-child(2n) { border-top-color: var(--blue); }
.value-item h3 { font-size: 1.35rem; margin-bottom: 8px; }
.band-ink .value-item, .band-ink .value-item:first-child { border-top-color: var(--green-lt); }
@media (max-width: 700px) { .values { grid-template-columns: 1fr; } }

/* ---------- steps: filled markers ---------- */
.step::before {
  background: var(--green-wash); border-color: #cfe3c2; color: var(--green-dk);
  font-weight: 600;
}

/* ---------- dark bands: depth glows ---------- */
.band-ink {
  background:
    radial-gradient(44rem 26rem at 88% 0%, rgba(27,112,184,.22), transparent 60%),
    radial-gradient(40rem 26rem at 0% 100%, rgba(79,145,48,.16), transparent 60%),
    var(--ink);
}
.pagehead {
  background:
    radial-gradient(46rem 26rem at 90% -20%, rgba(27,112,184,.25), transparent 62%),
    radial-gradient(40rem 24rem at -6% 120%, rgba(79,145,48,.18), transparent 60%),
    var(--ink);
}

/* ---------- CTA strip ---------- */
.cta-strip {
  position: relative; overflow: hidden; border-radius: 22px;
  background:
    radial-gradient(30rem 18rem at 92% 8%, rgba(27,112,184,.35), transparent 60%),
    radial-gradient(26rem 16rem at 4% 100%, rgba(79,145,48,.28), transparent 58%),
    var(--ink);
}

/* ---------- chips ---------- */
.chips li { transition: border-color .16s ease, transform .16s ease; }
.chips li:hover { border-color: var(--green); transform: translateY(-2px); }

/* ---------- FAQ ---------- */
.faq summary { transition: color .15s ease; }
.faq summary:hover { color: var(--green-dk); }
.faq .faq-body { max-width: 68ch; }

/* ---------- forms ---------- */
.field input, .field select, .field textarea { border-radius: 12px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(79,145,48,.14);
}
.form-card { box-shadow: 0 24px 48px -28px rgba(12,26,44,.28); }

/* ---------- footer ---------- */
.topbar-social a, .foot .topbar-social a {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  transition: border-color .16s ease, background-color .16s ease;
}
.topbar-social a:hover { border-color: var(--green-lt); background: rgba(255,255,255,.06); }
.topbar .topbar-social a { width: 26px; height: 26px; border-color: rgba(255,255,255,.16); }
.newsletter input { border-radius: 999px; padding-left: 18px; }
.newsletter button { border-radius: 999px; }
.foot-seal { border-radius: 12px; }

/* ---------- masthead ---------- */
.masthead { box-shadow: 0 1px 0 var(--rule), 0 8px 24px -18px rgba(18,38,63,.18); border-bottom: 0; }

/* ---------- portal frame ---------- */
.shot { border-radius: 18px; }
.shot .portal-chrome span { font-size: .78rem; }

/* ---------- hero type ---------- */
.t-hero { font-size: clamp(2.2rem, 4.8vw, 3.6rem); letter-spacing: -.02em; }
.hero .lede { font-size: clamp(1.08rem, 1.6vw, 1.22rem); }

/* ---------- flagship service card ---------- */
.svc-grid { display: grid; gap: clamp(18px, 2.4vw, 26px); grid-template-columns: repeat(4, minmax(0,1fr)); }
.panel-feature {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: 20px clamp(18px,2.5vw,30px);
  align-items: center;
  border-left: 4px solid var(--green);
}
.panel-feature h3 { font-size: 1.3rem; }
.panel-feature .ico { margin-bottom: 0; }
.panel-feature p { max-width: 74ch; }
.panel-feature .tag-note { margin-bottom: 8px; }
@media (max-width: 1020px) { .svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; }
  .panel-feature { grid-template-columns: 50px minmax(0,1fr); }
  .panel-feature .btn { grid-column: 1 / -1; justify-self: start; }
}


/* ---------- client login button in the nav ---------- */
.nav a.btn-line { border: 1px solid var(--rule); background: transparent; }
.nav a.btn-line:hover { background: var(--surface); border-color: var(--ink); }
@media (max-width: 1080px) { .nav a.btn { justify-content: center; } }


/* ---------- balanced five-card grid (3 + 2 centered) ---------- */
.svc-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
.svc-grid .panel { grid-column: span 2; }
.svc-grid .panel:nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 1020px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .svc-grid .panel, .svc-grid .panel:nth-child(4) { grid-column: auto; }
}
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- alternating service feature rows ---------- */
.feat-rows > .feat {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(22px, 4vw, 60px); align-items: center;
  padding: clamp(30px, 4vw, 48px) 0; border-top: 1px solid var(--rule);
}
.feat-rows > .feat:first-child { border-top: 0; padding-top: 8px; }
.feat-rows > .feat:last-child { padding-bottom: 0; }
.feat h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.feat .lede { margin-top: 12px; font-size: 1.02rem; }
@media (min-width: 821px) {
  .feat:nth-child(2n) > div:first-child { order: 2; }
}
@media (max-width: 820px) {
  .feat-rows > .feat { grid-template-columns: 1fr; }
}


/* outline buttons on the dark page header */
.pagehead .btn-line { color: #fff; border-color: rgba(255,255,255,.34); }
.pagehead .btn-line:hover { border-color: #fff; background: rgba(255,255,255,.09); }


/* ==========================================================================
   Generic WordPress content (terms, privacy, legacy pages)
   ========================================================================== */
.prose { max-width: 760px; }
.prose h2, .prose h3 { margin: 1.6em 0 .5em; }
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.25rem; }
.prose ul, .prose ol { margin: 0 0 1.1em 1.3em; }
.prose li { margin-bottom: .45em; }
.prose a { color: var(--green-dk); }
.prose img { border-radius: var(--r-md); }
.prose blockquote { border-left: 3px solid var(--green); margin: 1.2em 0; padding: .3em 0 .3em 1.2em; color: var(--muted); }