/* Self-hosted so the site keeps its promise of loading nothing from
   third-party servers, and so the CSP can stay at font-src 'self'.
   Downloaded from Google Fonts 09/03/2026. Both families are licensed
   under the SIL Open Font License; see assets/fonts/LICENSES.md. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-300-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-300-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Understory. See BRAND.md for the full system and the two directions
     that were not adopted. Every ratio below is measured against the
     surface the color actually sits on.

     The accent is aspen gold, not the madrone red first proposed. Color
     analysis of the practice's own fall photographs came back 39.6% gold
     and 38.6% sky blue, with no red at all, so the palette follows the
     photographs rather than fighting them. See BRAND.md. */

  --ground: #EBEDE6;        /* lichen, page ground */
  --surface: #F7F8F4;       /* cards and raised surfaces */
  --band: #E1E5DA;          /* alternating section bands */
  --ink: #17231C;           /* fir shadow, body text      13.8:1 on ground */
  --muted: #4A574E;         /* wet stone, secondary        6.4:1 on ground */
  --fir: #1F3A2E;           /* headings, primary button   10.5:1 on ground */
  --field: #14342A;         /* the fir field, crisis block */
  --aspen: #7A5510;         /* the single accent           5.7:1 on ground */
  --aspen-deep: #5F410C;    /* hover                       7.9:1 on ground */
  --gold-on-field: #D9A63F; /* aspen gold, field only      6.1:1 on field */
  --field-ink: #F2F4EF;     /* text on the fir field      12.2:1 */
  --field-muted: #C3D0C4;   /* secondary on the field      8.5:1 */
  --rule: #D3D8CC;          /* hairlines */
  --note: #F0EAD8;          /* build-time placeholder note, removed at launch */
  --focus: #7A5510;

  --measure: 34rem;
  --wrap: 58rem;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(23, 35, 28, 0.05), 0 8px 24px rgba(23, 35, 28, 0.06);

  /* Self-hosted, see the @font-face block above. Fraunces carries the
     headings; Atkinson Hyperlegible, drawn by the Braille Institute to be
     readable at low vision, carries everything meant to be read. */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  color: var(--fir);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: 0 0 0.6em; }
h2[id], h3[id] { scroll-margin-top: 6rem; }
h2 { font-size: clamp(1.4rem, 2.8vw, 1.8rem); margin: 1.45em 0 0.5em; }
h3 { font-size: 1.15rem; margin: 1.15em 0 0.35em; color: var(--field); }

p, li { max-width: var(--measure); }
p { margin: 0 0 0.85em; }

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

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.35rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fir);
  color: var(--field-ink);
  padding: 0.7rem 1.1rem;
  z-index: 50;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Masthead ---------- */

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.75rem;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--fir);
  padding-block: 0.45rem;
  line-height: 1;
}
/* The emblem is watercolor artwork on a near-white ground (#F9F6F0), which
   sits invisibly on the masthead surface (#F7F8F4). It holds down to about
   40px tall and turns to mush below that, which is why the favicon keeps the
   geometric mark instead. */
.wordmark-emblem {
  height: 46px;
  width: auto;
  flex: none;
  mix-blend-mode: multiply;
}
.wordmark-text { display: inline-flex; flex-direction: column; align-items: center; }
.wordmark-name {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wordmark-sub {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.34rem;
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.wordmark-sub::before, .wordmark-sub::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.wordmark-sub span { padding-left: 0.32em; }

/* On a phone the lockup has to share the bar with the Menu button, or the
   sticky masthead grows a second row and eats the screen. */
@media (max-width: 30rem) {
  .wordmark { gap: 0.45rem; }
  .wordmark-emblem { height: 32px; }
  .wordmark-name { font-size: 0.95rem; letter-spacing: 0.04em; }
  .wordmark-sub { font-size: 0.5rem; letter-spacing: 0.22em; margin-top: 0.25rem; }
  .wordmark-sub::before, .wordmark-sub::after { display: none; }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--band);
  border: 1px solid var(--rule);
  color: var(--fir);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1rem;
  height: 2px;
  background: currentColor;
  content: "";
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -5px; }
.nav-toggle-bars::after { position: absolute; top: 5px; }

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* Back to 1.25rem. The 0.85rem squeeze existed only to fit Provider Login
     as a seventh item; that link now lives in the footer, and six items at
     the comfortable spacing fit the row with "Contact/Book" in it. Measure
     before adding a seventh: the usable width is about 591px. */
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
}
.site-nav li { max-width: none; }
.site-nav a {
  display: block;
  padding: 0.45rem 0;
  color: var(--fir);
  text-decoration: none;
  font-size: 0.97rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--aspen); color: var(--aspen-deep); }
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--fir);
  font-weight: 600;
}

/* 45.99rem, not 46rem: a max-width and a min-width query at the same
   breakpoint BOTH match at exactly that width, which would put the
   hamburger and the two-column card grid on screen together. */
@media (max-width: 45.99rem) {
  .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.open { display: block; }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
    padding-bottom: 0.75rem;
  }
  .site-nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--fir); }
}

/* ---------- Sections ---------- */

.hero {
  background: linear-gradient(180deg, var(--band) 0%, var(--ground) 100%);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.1rem, 5vw, 3.4rem);
}
.hero p.lede { font-size: 1.2rem; color: var(--muted); max-width: 34rem; }
.hero h1 { max-width: 36rem; text-wrap: balance; }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--aspen);
  font-weight: 600;
  margin: 0 0 0.9rem;
}

.section { padding-block: clamp(1.7rem, 4vw, 2.6rem); }
.section + .section { border-top: 1px solid var(--rule); }
.section.on-sand { background: var(--band); border-top: 1px solid var(--rule); }
.section > .wrap > h2:first-child { margin-top: 0; }

.lede { font-size: 1.12rem; }

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

/* margin-bottom because .actions is no longer always the last thing in a
   section: the Mentaya benefits check sits mid-flow on the fees page. */
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 1.6rem; }

/* On a phone the pair wraps, and two buttons of different natural widths
   stacked left-aligned read as ragged. Below the phone breakpoint they
   stack to a single full-width column instead. 29.99rem, not 30rem, so
   this and the min-width: 30rem rules never both match. */
@media (max-width: 29.99rem) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { text-align: center; }
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--fir); color: var(--surface); }
.btn-primary:hover { background: var(--field); color: var(--surface); }
.btn-secondary {
  background: var(--surface);
  color: var(--fir);
  border-color: var(--rule);
}
.btn-secondary:hover { border-color: var(--fir); color: var(--field); }

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}

/* Four cards in a three-column grid orphan the fourth on its own row.
   Anything with four items gets an explicit 2x2 instead. */
@media (min-width: 46rem) {
  .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.2rem 1.25rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card p, .card li { max-width: none; }

/* ---------- Definition rows (fees, hours) ---------- */

.rows { border-top: 1px solid var(--rule); margin-top: 1.1rem; max-width: 44rem; }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.68rem 0;
  border-bottom: 1px solid var(--rule);
}
.row dt, .row .row-label { font-weight: 600; color: var(--fir); margin: 0; }
/* Short values shrink to their text and space-between pushes them to the right
   edge, which is the ledger look. A value too long to sit beside its label
   wraps onto its own line and fills the row, so it reads as left-aligned prose
   rather than a right-aligned block with one word dangling on the last line. */
.row dd, .row .row-value { margin: 0; color: var(--muted); text-align: left; text-wrap: pretty; }

@media (max-width: 34rem) {
  .row { display: block; padding: 0.85rem 0; }
  .row dd, .row .row-value { margin-top: 0.15rem; }
}

/* A line that earns standing alone. Used sparingly: three or four per page
   at most, or it stops meaning anything. */
.pull {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--fir);
  max-width: 30rem;
  margin: 1.15rem 0 1.35rem;
  padding-left: 1rem;
  border-left: 2px solid var(--aspen);
}

/* ---------- Callout ---------- */

.callout {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--aspen);
  border-radius: var(--radius);
  padding: 1.05rem 1.25rem;
  margin: 1.2rem 0;
  max-width: 44rem;
}
.callout h3 { margin-top: 0; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout p, .callout li { max-width: none; }

.placeholder-note {
  background: var(--note);
  border: 1px dashed var(--aspen);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  max-width: 44rem;
}
.placeholder-note p, .placeholder-note li { max-width: none; }
.placeholder-note p:last-child { margin-bottom: 0; }

/* ---------- Prose lists ---------- */

.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 0.9em; }
.prose li { margin-bottom: 0.3em; }

.checklist { list-style: none; padding-left: 0; }
.checklist li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.42em;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--aspen);
}

/* ---------- Portrait ---------- */

/* 144px is 1.5in at CSS resolution. Squared with the same small radius and
   hairline as the cards, rather than a circle: nothing else in this identity
   is round. */
.about-head {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.about-head-text { flex: 1 1 22rem; min-width: 0; }
.portrait { margin: 0; flex: none; }
.portrait img {
  display: block;
  width: 144px;
  height: 144px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.portrait figcaption {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 144px;
  line-height: 1.35;
}

/* ---------- Logo banner ---------- */

/* The practice logo is a 768x512 raster with its text burned in. It is shown
   at native size and never upscaled, because there is no larger original.
   The page heading below it carries the real, readable text. */
.logo-banner {
  margin: 0 0 1.6rem;
  max-width: 768px;
}
.logo-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

/* ---------- Photograph band ---------- */

/* One photograph, mid-page, lazy-loaded so it never delays first paint.
   Deliberately not a hero backdrop: text over photography is where
   contrast promises quietly break. */
.photo-band {
  margin: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--band);
}
.photo-band img {
  display: block;
  width: 100%;
  height: clamp(13rem, 32vw, 22rem);
  object-fit: cover;
}
.photo-band figcaption {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.75rem 1.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Inquiry form ---------- */

.inquiry { max-width: 34rem; margin-top: 1.2rem; }
.fld { margin-bottom: 0.9rem; }
.fld label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fir);
  margin-bottom: 0.3rem;
}
.fld label .opt {
  font-weight: 400;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  margin-left: 0.4rem;
}
.fld input, .fld textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
}
.fld textarea { resize: vertical; min-height: 5.5rem; }
.fld input:focus-visible, .fld textarea:focus-visible {
  outline: 2px solid var(--aspen);
  outline-offset: 1px;
  border-color: var(--aspen);
}
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: #9C3A20; }

.fld-pair { display: grid; gap: 0 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .fld-pair { grid-template-columns: 1fr 1fr; } }

.fld-hint { font-size: 0.82rem; color: var(--muted); margin: -0.3rem 0 1rem; max-width: none; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but not positioned ones. Never focusable. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inquiry button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.inquiry button[disabled] { opacity: 0.6; cursor: default; }

.form-status { margin: 0.9rem 0 0; font-size: 0.95rem; max-width: none; }
.form-status.err { color: #9C3A20; font-weight: 600; }
.form-status.ok {
  color: var(--fir);
  font-weight: 600;
  border-left: 3px solid var(--aspen);
  padding-left: 0.8rem;
}

/* ---------- Crisis strip ---------- */

/* The fir field. One deep green band on every page, holding the crisis
   resources, so someone in distress finds 988 in the same fixed place
   whichever page they landed on. Borrowed from the Ridgeline direction. */
.crisis {
  background: var(--field);
  color: var(--field-ink);
  padding-block: 2.25rem;
}
.crisis h2 {
  color: var(--field-ink);
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
}
.crisis p, .crisis li { color: var(--field-muted); max-width: 46rem; }
.crisis a { color: var(--gold-on-field); }
.crisis-list { padding-left: 1.2rem; margin: 0; }
.crisis-list li { margin-bottom: 0.4em; }
.crisis strong { color: var(--gold-on-field); font-weight: 600; }

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

.footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding-block: 2.75rem 2rem;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}
.footer h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.8rem;
}
.footer-col p, .footer-col li { max-width: none; }
.footer-meta { color: var(--ink); line-height: 1.8; }
.footer-note { color: var(--muted); font-size: 0.87rem; margin-top: 0.9rem; }
.footer-links { list-style: none; padding: 0; margin: 0; line-height: 2; }
.footer-base {
  border-top: 1px solid var(--rule);
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  color: var(--muted);
  font-size: 0.87rem;
}
.footer-base p { max-width: 52rem; }
.footer-legal { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .masthead, .nav-toggle, .skip { display: none; }
  body { background: #FFFFFF; }
}

/* An inquiry form followed by the contact cards needs a real break between them. */
.inquiry + .cards {
  margin-top: 2.6rem;
}

/* Inheris badges, footer only. Two of them, on a row of their own under the
   footer columns, left aligned with the first column rather than centered:
   the grid's columns stop well short of the right edge, so a centered row
   floats away from everything above it.

   Both use the self-hosted mark rather than the supplied remote <img>, so no
   third party is contacted when someone reads a therapy website; that also
   means no CSP change was needed.

   The teal is #4C7F7D, not the supplied #85B6B4: white on the original is
   2.25:1, which fails WCAG AA for both the name and the smaller role line.
   Same hue, darkened until it clears 4.5:1 (it lands at 4.53:1). The navy is
   the supplied #213D51 unchanged, since white on it is already 10.9:1. */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 2.25rem;
}
.badge-inheris {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.3rem;
  border-radius: 16px;
  text-decoration: none;
}
.badge-inheris--portal { background: #4C7F7D; }
.badge-inheris--portal:hover { background: #3F6B69; }
.badge-inheris--ambassador { background: #213D51; }
.badge-inheris--ambassador:hover { background: #1A3041; }
.badge-inheris:focus-visible { outline: 2px solid var(--aspen); outline-offset: 3px; }
.badge-inheris img { display: block; width: 42px; height: 42px; flex-shrink: 0; }
.badge-inheris .badge-text { display: flex; flex-direction: column; gap: 0.25rem; }
.badge-inheris .badge-name {
  font-family: var(--sans);
  font-size: 1.15rem; font-weight: 800; line-height: 1; color: #fff;
}
.badge-inheris .badge-role {
  font-family: var(--sans);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  line-height: 1; color: #fff; text-transform: uppercase;
}

/* ---------- Mentaya partner badge ---------- */

/* The badge sits beside the out-of-network paragraph on the fees page rather
   than in the footer badge row. It reads "insurance friendly practice", which
   is only true in the narrow sense the surrounding copy explains: no plan is
   billed, and a superbill is filed by the client. Sitewide it would say the
   opposite of "this is a cash practice", so it stays next to the paragraph
   that qualifies it.

   Self-hosted, like every other asset. Mentaya supplies the badge as a hotlink
   to storage.googleapis.com, which would announce every visitor to Google and
   is blocked outright by the img-src 'self' CSP in infra/site-stack.yaml. */
.mentaya {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  margin: 1.2rem 0;
  max-width: 44rem;
}
.mentaya-body { flex: 1 1 auto; min-width: 0; }
.mentaya-body > :first-child { margin-top: 0; }
.mentaya-body .actions { margin-bottom: 0; }
.mentaya-badge {
  flex: 0 0 auto;
  align-self: center;
  display: block;
  border-radius: 50%;
}
.mentaya-badge:focus-visible { outline: 2px solid var(--aspen); outline-offset: 4px; }
.mentaya-badge img { display: block; width: 9.5rem; height: auto; }

/* Below this the 34rem measure and a 9.5rem badge stop sitting side by side
   without squeezing the paragraph, so the badge drops under the text. */
@media (max-width: 40rem) {
  .mentaya { display: block; }
  .mentaya-badge { margin-top: 1.3rem; }
  .mentaya-badge img { width: 8rem; }
}

/* ---------- Mentaya benefits checker ---------- */

/* The one third-party frame on the site, added 09/16/2026 at Miles's request,
   and it is click to load: the card below is all that ships, and site.js only
   inserts the iframe once a visitor asks for it. Loading Mentaya's page runs
   their analytics and ad tags, which is exactly what the privacy page says
   this site does not do, so keeping it behind a press is the whole point.
   Do not style this as though the frame were always present.

   The CSP in infra/site-stack.yaml names app.mentaya.com under frame-src and
   nothing else, so this stays a named exception rather than a general
   opening. */
.mentaya-widget {
  max-width: 600px;
  margin: 1.6rem 0 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.mentaya-widget-note {
  margin: 0 0 1rem;
  font-size: 0.94rem;
  color: var(--muted);
}
.mentaya-widget .actions { margin-bottom: 0; }

/* Two notes, one for each state, because the closed one explains a choice the
   visitor has already made once the frame is open. site.js adds .open. */
.mentaya-widget-note--open { display: none; }
.mentaya-widget.open .mentaya-widget-note--closed { display: none; }
.mentaya-widget.open .mentaya-widget-note--open { display: block; }

/* Once the frame is in, the card is just a frame: it brings its own edges, so
   the border and padding around it come off and the note sits underneath. */
.mentaya-widget.open { padding: 0; border: none; }
.mentaya-widget.open .mentaya-widget-note { margin: 0.8rem 0 0; }
.mentaya-widget iframe {
  display: block;
  width: 100%;
  height: 590px;
  border: none;
  border-radius: var(--radius);
}

/* Provider login. Not for visitors, so it is set apart from the client
   facing items rather than competing with them: pushed to the far right,
   quieter, and separated by a rule. It reaches the practice management
   console, which is a different origin behind Cognito with MFA enforced and
   no self-registration. Nothing about it is a form, and it collects
   nothing here. */
/* Provider Login moved out of the ribbon and into the footer on 09/15/2026,
   to make room for the longer "Contact/Book" nav label. It is a staff link
   behind Cognito with MFA, not a client-facing one, so the footer is where
   it belonged anyway. Muted, because nobody visiting this site for therapy
   needs to notice it. */
.footer-provider a { color: var(--muted); }
.footer-provider a:hover { color: var(--aspen-deep); }

/* ---------- Paying by card ---------- */

/* The trouble notes on /pay/ ship hidden and site.js reveals exactly one of
   them, chosen from a fixed set. Styled as a notice rather than an error:
   nothing was charged in any of these cases, and a red box would suggest
   otherwise. */
.pay-trouble {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--aspen);
  background: var(--sand);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.pay-custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
  margin: 1rem 0 0.6rem;
}
.pay-amount { display: flex; flex-direction: column; gap: 0.35rem; }
.pay-amount span { font-size: 0.9rem; color: var(--muted); }
.pay-amount input {
  width: 9rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: inherit;
}
.pay-amount input:focus-visible {
  outline: 2px solid var(--aspen);
  outline-offset: 1px;
}

/* An amount outside the bounds the function accepts. Dimmed rather than
   removed, so the button does not appear and disappear while typing. */
.btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

.pay-note { font-size: 0.92rem; color: var(--muted); }

/* The fee rows on /pay/ carry a button rather than a price, so they need to
   breathe more than the plain figures on the fees page do. */
.rows .row dd .btn { margin: 0.1rem 0; }