/* ==========================================================================
   Kristen I. Speer, LPC, LLC - kristenspeerlpc.com
   insurance.css - page-specific block for /insurance/ ONLY.

   Loaded AFTER /styles.css. Contract (CONVERSION.md, agent C):
     - every selector in this file starts with a .ki- class. Exactly three
       name a ks- class, and only ever as a descendant of a ki- one:
       .ki-top__cta .ks-btn, .ki-top__call .ks-link and
       .ki-out .ks-mark__line. (.ki-top a:focus-visible reaches a bare <a>,
       likewise only inside a ki- block.) Nothing here redefines a token, a
       bare ks- selector or a shared component.
     - the shared shell (header, sticky bar, footer) and the shared components
       this page reuses (.ks-btn, .ks-sec__head, .ks-faq/.ks-qa, .ks-start,
       .ks-prose, .ks-mark) are styled entirely by /styles.css
   Mobile-first: base = 375px, then min-width 720px, then min-width 1080px -
   the same two breakpoints as the rest of the site, and no others.

   Section grounds alternate so no two neighbours share one:
     ki-top (ink) -> ki-carriers (sand) -> ki-band (ink, photo) ->
     ki-out (cream) -> ki-pay (sand) -> ks-faq (cream, shared) ->
     ks-start (sand, shared) -> ks-footer (ink)

   MOTION: this file adds none. The only animated thing on the page is the
   shared [data-ks-reveal] opacity fade and the shared control hovers, both of
   which already live inside @media (prefers-reduced-motion: no-preference) in
   /styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE HEAD BAND

   The shared header is absolutely positioned with cream type - it was drawn
   to sit on the homepage photograph - so an interior page has to hand it a
   dark ground. This band is that ground, and it carries the page's label,
   h1, lede, a CTA pair and a context row rather than being a wall of colour
   (BRAND.md PINNED REFERENCE rule 2).

   COMPOSITION: centred stack, same as the EMDR hero, ending on the same CTA
   grammar (.ke-hero__cta): one pill, then "or call" and the number. The h1
   takes the interior-page ramp verbatim from /emdr.css so the two interior
   pages open at one size. The three-cell context row keeps the band's lower
   edge.

   No photograph here on purpose: the band is the first paint on the page, so
   an image in it would be the LCP element and could not be lazy-loaded. The
   page's one photograph carries the superbill band further down, lazily. The
   gradient is the homepage band's idiom (a pine wash plus a clay breath),
   never animated.

   MEASURED CONTRAST (method: the two radial layers composited over --ink at
   their brightest point, which is rgb(61,82,71); text set at an alpha was
   flattened onto that same pixel before the ratio was taken):
     .ki-top__label   .90 cream ..... 6.79:1
     .ki-top__title   --cream ....... 7.82:1
     .ki-top__lede    .90 cream ..... 6.79:1
     .ki-top__call    .93 cream ..... 7.13:1
     phone link       #CFE0D4 ....... 5.94:1
     context lead     --cream ....... 7.82:1   (11.22:1 where the row sits)
     context note     .80 cream ..... 5.51:1   ( 7.91:1 where the row sits)
   The .ks-btn--light pill is cream ground with --ink type: 11.22:1 inside the
   pill, and the pill itself clears 3:1 against every pixel of this ground.
   The context row sits below the wash's reach, so its real ratios are the
   flat-ink figures in brackets; the worst case is quoted anyway.
   -------------------------------------------------------------------------- */
.ki-top {
  position: relative;
  isolation: isolate;
  /* Clears the absolutely positioned header: 16 + 44 + 16 = 76px of chrome
     at this width, so 96 leaves 20px of air above the label. */
  padding-top: 96px;
  background-color: var(--ink);
  background-image:
    radial-gradient(115% 85% at 50% 34%, rgba(46, 91, 82, .52) 0%, rgba(46, 91, 82, 0) 70%),
    radial-gradient(60% 55% at 84% 12%, rgba(196, 116, 77, .14) 0%, rgba(196, 116, 77, 0) 62%);
}

.ki-top__inner {
  padding-bottom: 34px;
  text-align: center;
}

/* The same 46rem column the EMDR hero holds its stack in. */
.ki-top__content {
  max-width: 46rem;
  margin: 0 auto;
}

/* The homepage band's small pill label, in her palette. */
.ki-top__label {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 14px;
  border: 1px solid rgba(250, 246, 239, .30);
  border-radius: var(--ks-radius-pill);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .90);
}

/* The interior-page h1 ramp, identical to .ke-hero__title (director ruling:
   the two interior pages open at the same size). */
.ki-top__title {
  margin: 0 auto 16px;
  max-width: 22ch;
  font-size: clamp(2.125rem, 9.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cream);
}

.ki-top__lede {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(250, 246, 239, .90);
}

/* ---- the CTA pair ------------------------------------------------------
   .ke-hero__cta's grammar, with this page's label. MEASURED at 375px in
   Chrome: the pill renders 140px ("Get started" at 16px/600 plus 26px of
   padding either side and the 1px border), the phone line 145px at the
   compact size, and the 12px gap puts the row at 297px inside a 335px
   content box - one line, with 38px to spare (verified with the row's
   rendered height equal to the pill's, i.e. nothing wrapped). The phone line
   steps up to 16px at 720px, where there is room for it. */
.ki-top__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.ki-top__cta .ks-btn { flex: 0 0 auto; }

.ki-top__call {
  margin: 0;
  font-size: .9375rem;
  color: rgba(250, 246, 239, .93);
}

/* A standalone tap-to-call link carries a full 44px target, as it does in the
   homepage hero, the EMDR hero and the footer invite. */
.ki-top__call .ks-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --pine on a dark ground is invisible; the focus ring inverts here, the same
   way it does inside the header and the footer. */
.ki-top a:focus-visible { outline-color: var(--cream); }

/* ---- context row along the band's lower edge ---------------------------
   The three facts that let this page stand on its own in a search result:
   who she can see, what the first step costs, and that she is taking people
   on. Same hairline-rule idiom as the homepage's credential row. */
.ki-top__contextwrap {
  border-top: 1px solid rgba(250, 246, 239, .18);
}

/* This <ul> is also a .ks-shell, so its left/right margins must stay auto or
   the row stops being centred. Only the list's own top/bottom margin and its
   marker are being reset here. */
.ki-top__context {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
}

.ki-top__context-item {
  padding: 13px 0;
  border-top: 1px solid rgba(250, 246, 239, .14);
}

.ki-top__context-item:first-child { border-top: 0; }

.ki-top__context-lead {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cream);
}

.ki-top__context-note {
  display: block;
  margin-top: 3px;
  font-size: .75rem;
  line-height: 1.35;
  color: rgba(250, 246, 239, .80);
}

/* --------------------------------------------------------------------------
   IN NETWORK - the three carriers  (ground: --sand)

   Text treatment only. No carrier logo appears anywhere on this site: we have
   no license to use one, and a wordmark set in her own type is the honest
   version of the same signal.

   ONE list treatment (BRAND.md PINNED REFERENCE rule 3): hairline rows, the
   homepage's .ks-list grammar. Three bordered cream cards stood here, each
   stamped with an "IN NETWORK" tag - the card idiom styles.css:929-939 records
   as retired, plus the section's own heading phrase repeated three more times.
   The name carries the row; the note is only used where a carrier needs
   narrowing (BCBS is the Arkansas plan).
   -------------------------------------------------------------------------- */
.ki-carriers {
  padding: 56px 0 60px;
  background: var(--sand);
}

.ki-carriers__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ks-line);
}

/* The note sits against the name rather than out at the row's right edge:
   at 1120px "space-between" left about 640px of air between "Blue Cross Blue
   Shield" and the word that narrows it, which read as two unrelated things. */
.ki-carrier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 18px 0;
  border-top: 1px solid var(--ks-line);
}

.ki-carrier__name {
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}

.ki-carrier__note {
  font-size: .875rem;
  line-height: 1.4;
  color: var(--body);               /* 7.67:1 on --sand */
}

/* --------------------------------------------------------------------------
   HER WORDS - the page's held moment  (ground: --ink under a photograph)

   Full-bleed by construction: the section is a plain block child of <main>,
   which has no max-width, so the ink runs to both viewport edges; only the
   .ks-shell inside holds the reading column. Same construction as the
   homepage's .ks-band. Her sentence used to sit in a small sand panel inside
   the section below, where it read as a footnote rather than as her voice.

   MEASURED CONTRAST (method: interior.webp was drawn into a canvas at the
   band's real rendered size with the same object-fit/object-position, the
   scrim layers below were composited over it in source order, and the
   BRIGHTEST pixel inside each text element's box was taken - the worst case,
   not an average. Text set at an alpha was flattened onto that same pixel.)

     at 1905px wide (band 1905x560)
       .90 cream label ...... on rgb(56,82,73) ...... 6.76:1
       --cream quote ........ on rgb(63,91,82) ...... 6.89:1
       .82 cream cite ....... on rgb(54,83,77) ...... 5.88:1
     at 375px wide (band 360x436 - a tighter, slightly darker crop)
       .90 cream label ...... on rgb(57,82,74) ...... 6.74:1
       --cream quote ........ on rgb(62,90,82) ...... 6.99:1
       .82 cream cite ....... on rgb(50,80,74) ...... 6.14:1
     brightest pixel ANYWHERE in the band, either width: rgb(70,93,86)
       --cream ...................................... 6.58:1
       .90 cream .................................... 5.71:1
       .82 cream .................................... 5.06:1  <- worst pair

   Every pair clears 4.5:1 at both extremes, so no line of type on this
   photograph depends on which pixels the crop happens to put underneath.
   -------------------------------------------------------------------------- */
.ki-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 60px 0 64px;
  background: var(--ink);
}

/* The photograph, darkened, carrying the band (PINNED REFERENCE rule 2: a dark
   section holds a photo and real content, never flat colour). A decorative
   <img> rather than a background so it can be lazy-loaded and sized without a
   second network rule. */
.ki-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ki-band__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* Two jobs in one layer, as on the homepage band. (1) It holds the photograph
   far enough down that cream type clears 4.5:1 anywhere in the band. (2) The
   top and bottom stops are solid ink, so both seams resolve as ink meeting the
   neighbouring section and the photograph emerges inside the band instead of
   colliding with its edges. Never animated. */
.ki-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(46, 91, 82, .42) 0%, rgba(46, 91, 82, 0) 68%),
    radial-gradient(70% 60% at 78% 22%, rgba(196, 116, 77, .16) 0%, rgba(196, 116, 77, 0) 60%),
    linear-gradient(180deg,
      var(--ink) 0%,
      rgba(31, 59, 54, .90) 14%,
      rgba(31, 59, 54, .84) 50%,
      rgba(31, 59, 54, .90) 86%,
      var(--ink) 100%);
  pointer-events: none;
}

.ki-band__figure { margin: 0; }

/* The band's small pill label, the same one the head band and the EMDR page
   use. */
.ki-band__label {
  display: inline-block;
  margin: 0 0 20px;
  padding: 7px 14px;
  border: 1px solid rgba(250, 246, 239, .30);
  border-radius: var(--ks-radius-pill);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .90);
}

.ki-band__quote { margin: 0; }

/* One step below the homepage band's quote, on purpose: that one is 190
   characters and this one is 202 with a parenthesis in the middle, so it is
   set at reading-display scale rather than at the homepage's hero-adjacent
   scale. The measure has to live on the element that carries the display
   size - 1ch on the 16px figure would collapse the column. */
.ki-band__quote p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.375rem, 5.4vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--cream);
  text-wrap: pretty;
}

/* .82 rather than the homepage band's .74: this photograph is a warm interior
   and its brightest pixel under the scrim is lighter than the valley's, which
   costs the attribution about a point of ratio. */
.ki-band__cite {
  margin: 24px 0 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .82);
}

/* --------------------------------------------------------------------------
   OUT OF NETWORK / SUPERBILL  (ground: --cream)

   One reading column. The wrapper is given the prose face and size so that
   62ch here resolves to exactly the 62ch .ks-prose sets on itself, which is
   what makes the h2, the h3, the paragraphs and the closing line share one
   left and one right edge. The gutter is added back because .ks-shell's
   padding sits inside this max-width (border-box).
   -------------------------------------------------------------------------- */
.ki-out {
  padding: 56px 0 60px;
  background: var(--cream);
}

.ki-out__body {
  max-width: calc(62ch + var(--ks-gutter) * 2);
  font-size: 1.0625rem;
}

/* The h3 inside a section that already has an h2. Inherits Fraunces, weight
   and colour from the global heading rule; only the size is set here. */
.ki-sub {
  margin: 0 0 10px;
  font-size: 1.125rem;
  line-height: 1.3;
}

/* The site's signature clay underline, used ONCE on this page (index.html
   uses it on the hero's "deserve" and on "good reasons" in the band). The
   shared .ks-mark / .ks-mark__line mechanism does the drawing; the only thing
   set here is the drop, because this heading's marked word sits on the last
   line above a 24px margin rather than at the end of a display line.
   The stroke is --clay #C4744D on --cream: 3.28:1, clear of the 3:1 floor for
   a non-text graphic. It is decoration - the sentence reads identically with
   the SVG removed, and the SVG is aria-hidden. */
.ki-out .ks-mark__line { bottom: -.10em; }

/* The handoff to /emdr/, the page's one in-content cross-link. A link, not a
   pill: this section is an explainer, and a second button here would compete
   with the consult CTA. Same idiom as .ks-emdr__more on the homepage. */
/* No measure of its own: at 16px a 62ch rule would land 38px short of the
   17px paragraphs above it and break the column's right edge. The wrapper's
   62ch governs. */
.ki-out__more {
  margin: 22px 0 0;
  font-size: 1rem;          /* supporting tier - see BODY TYPE SCALE */
  line-height: 1.66;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   SELF-PAY AND WAYS TO PAY  (ground: --sand)

   No figure is printed in here. The self-pay rate is not published on this
   site until Kristen confirms it (PENDING.md #3); the HTML carries the slot
   comment where it would go.

   NOT a card. A bordered, shadowed cream panel stood here and pre-empted the
   booking card in #ki-start, which is this page's one boxed surface (the same
   rule the homepage and the EMDR page keep). The lead sits on the sand under
   the centred head; the chips and the reference note sit below a single
   hairline, left-aligned, because a centred wrap of seven labels rags into
   2/3/2 rows at 375px and reads as debris.
   -------------------------------------------------------------------------- */
.ki-pay {
  padding: 56px 0 60px;
  background: var(--sand);
}

.ki-pay__inner {
  max-width: 680px;
}

.ki-pay__lead {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 1rem;          /* supporting tier - see BODY TYPE SCALE */
  line-height: 1.66;
  color: var(--body);
  text-align: center;
}

.ki-pay__methods {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--ks-line);
}

/* Seven short labels, wrapped as chips. Not links and not controls, so the
   44px target floor does not apply to them - they are reference text. Cream
   ground, because the section's own ground is now sand and a sand chip on
   sand would be a border and nothing else. */
.ki-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ki-methods__item {
  padding: 8px 14px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-pill);
  background: var(--cream);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);                /* 11.83:1 on --cream */
}

/* Reference, not persuasion - so it sits last, under the same hairline the
   chips came in on. */
.ki-pay__note {
  margin: 22px 0 0;
  max-width: 52ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--body);
}

/* ==========================================================================
   720px and up
   ========================================================================== */
@media (min-width: 720px) {
  /* 22 + 44 + 22 = 88px of header chrome at this width. */
  .ki-top { padding-top: 124px; }

  .ki-top__inner { padding-bottom: 48px; }

  .ki-top__label { margin-bottom: 22px; }

  /* .ke-hero__title's 720px step, verbatim. */
  .ki-top__title { font-size: clamp(2.75rem, 5.6vw, 3.5rem); }

  .ki-top__lede { font-size: 1.125rem; }

  .ki-top__cta {
    gap: 14px 18px;
    margin-top: 30px;
  }

  .ki-top__call { font-size: 1rem; }

  /* Three across, divided by hairlines - the homepage's credential row. */
  .ki-top__context { grid-template-columns: repeat(3, 1fr); }

  .ki-top__context-item {
    padding: 20px 22px;
    border-top: 0;
  }

  .ki-top__context-item + .ki-top__context-item {
    border-left: 1px solid rgba(250, 246, 239, .22);
  }

  .ki-top__context-item:first-child { padding-left: 0; }
  .ki-top__context-item:last-child { padding-right: 0; }

  .ki-carriers,
  .ki-out,
  .ki-pay { padding: 84px 0 88px; }

  .ki-band { padding: 84px 0 88px; }

  .ki-carrier { padding: 22px 0; }

  .ki-carrier__name { font-size: 1.4375rem; }

  .ki-band__quote p { font-size: 2rem; }

  .ki-sub { font-size: 1.25rem; }

  .ki-pay__methods {
    margin-top: 36px;
    padding-top: 30px;
  }
}

/* ==========================================================================
   1080px and up
   ========================================================================== */
@media (min-width: 1080px) {
  .ki-top { padding-top: 136px; }

  .ki-top__inner { padding-bottom: 56px; }

  /* .ke-hero__title's 1080px step, verbatim. */
  .ki-top__title { font-size: 3.75rem; }

  .ki-top__context-item { padding: 24px 26px; }

  .ki-top__context-lead { font-size: .875rem; }

  .ki-carriers,
  .ki-out,
  .ki-pay { padding: 104px 0 108px; }

  .ki-band { padding: 104px 0 108px; }

  .ki-carrier { padding: 26px 0; }

  .ki-carrier__name { font-size: 1.5rem; }

  .ki-band__quote p { font-size: 2.25rem; }
}