/* Well-Being Behavior · shared UI layer
   ---------------------------------------------------------------
   One file, loaded after each page's own inline <style>, carrying the
   things that were missing everywhere rather than on one page.

   It exists because there are three separate CSS payloads on this site and
   they had already drifted: two page templates were loading no webfonts at
   all, only one page defined a :focus style, and no page had a coarse
   pointer block. Anything that should be true on every page belongs here,
   so the next fix is one edit rather than sixty-four.

   Loaded last on purpose. Everything below is an override or an addition,
   never a redefinition of a page's own layout.
   ---------------------------------------------------------------
   7 August 2026 */


/* ============================================================ 1. FOCUS
   :focus-visible appeared zero times across the whole site. The browser
   default ring was at least never suppressed, so this is a gap rather than
   an outright failure, but keyboard and switch users had no affordance on
   any link, button or card.

   Purple measures 5.46:1 on cream and 5.83:1 on white. It is invisible on
   the teal capture band at 1.28:1, so that band gets a white ring instead. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #7B52A6;
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible,
header nav a.cta:focus-visible,
.door:focus-visible {
  outline: 3px solid #7B52A6;
  outline-offset: 3px;
  border-radius: inherit;
}
/* On the dark band the purple ring disappears. White is 7.45:1 there. */
.capture :where(a, button, input):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
/* .door lifts on hover and did not on keyboard focus, so the card gave
   sighted keyboard users no feedback that it was the active target. */
.door:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30, 45, 44, .10);
}


/* ====================================================== 2. SKIP TO CONTENT
   There was no skip link on any page. On the catalog that meant tabbing
   past the header and nine category blocks before reaching anything. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: #215E5C;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-size: 15px;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}


/* ========================================================== 3. CONTRAST
   Measured, not estimated. Every value below was failing WCAG AA for body
   text at its previous color.

   The capture band is the single most valuable block on the site, because
   list growth is the number the whole strategy turns on, and it held three
   of the worst failures at once:

     .capture .note   #BFDCDA on #2D7D7B = 3.34:1
     .eyebrow inline  #BFDCDA on #2D7D7B = 3.34:1
     .capture .lead   #DCEDEC on #2D7D7B = 4.01:1

   Darkening the panel from #2D7D7B to #215E5C fixes all three at once
   without touching the text colors, which are set inline in places and
   would otherwise need chasing across sixty-four files:

     .capture .note   #BFDCDA on #215E5C = 5.13:1
     .capture .lead   #DCEDEC on #215E5C = 6.16:1
     white            #ffffff on #215E5C = 7.45:1 */
.capture {
  background: #215E5C;
}
/* #2D7D7B on #E8F2F1 was 4.25:1. #215E5C is 6.52:1. These are the
   "FREE" and "FOR PARENTS" chips, 10.5px, so they need the headroom. */
.tag.t {
  color: #215E5C;
}


/* =================================================== 4. TOUCH AND POINTER
   No page had a coarse pointer block. Header links computed to 23.9px tall,
   footer links 23.9px, the catalog links 25.6px and breadcrumbs 23.1px,
   against a 44px minimum. Most of this site's traffic is meant to arrive
   from Pinterest, on a phone. */
@media (pointer: coarse) {
  header nav a,
  footer .cols a,
  footer .fine a,
  .small a,
  ul.ticks li a,
  .crumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  header nav a.cta,
  .btn,
  button,
  input[type="submit"] {
    min-height: 44px;
  }
  /* The brand link computed to 32px, the height of the logo image. It is
     the home link on every page and was the last target under the line. */
  header .brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* Below 16px iOS zooms the page on focus and does not zoom back out.
     Desktop keeps whatever the page set. */
  input, select, textarea {
    font-size: 16px;
  }
  /* The newsletter radios were UA-default 13px squares inside a 20.6px
     label, which is not a target anyone can reliably hit. */
  .aud-row label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .aud-row input[type="radio"] {
    width: 20px;
    height: 20px;
  }
  /* The catalog filter chips measured 41px. Close is not the line. */
  .cat-chip, .cat-search {
    min-height: 44px;
  }
}


/* ================================================= 5. MOTION AND ANCHORS
   scroll-behavior:smooth was set on every page and never guarded, and the
   one prefers-reduced-motion block on the homepage was empty. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
/* The header is sticky at 57px and section padding gave only 7px clearance,
   so an in-page jump or a tab landed underneath it. */
section[id], [id]:target {
  scroll-margin-top: 78px;
}


/* ====================================================== 6. THE NAV DRAWER
   Below 820px the three audience links were hidden with nothing put in
   their place, so on a phone there was no route from any interior page to
   /for-parents or /for-behavior-analysts at all. The homepage survived on
   its "Which one are you?" cards. Nothing else did.

   The button only exists below 820px, which is the same breakpoint that
   hides the links, so the two can never disagree. */
.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line, #E4DDD0);
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  margin-left: 4px;
}
.menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--dark, #2E2E2E);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.drawer[data-open="true"] { display: block; }
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(30, 45, 44, .38);
}
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: var(--cream, #FAF7F2);
  box-shadow: -8px 0 30px rgba(30, 45, 44, .16);
  padding: calc(14px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
@media (prefers-reduced-motion: no-preference) {
  .drawer[data-open="true"] .drawer__panel { animation: drawer-in .22s ease-out; }
  @keyframes drawer-in { from { transform: translateX(14px); opacity: .6 } to { transform: none; opacity: 1 } }
}
.drawer__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.drawer__close {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--dark, #2E2E2E);
  border-radius: 11px;
}
.drawer h2 {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #6B6560);
  margin: 18px 0 6px;
  font-family: var(--sans, inherit);
  font-weight: 500;
}
.drawer h2:first-of-type { margin-top: 4px; }
.drawer a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 0;
  color: var(--dark, #2E2E2E);
  text-decoration: none;
  font-size: 16.5px;
  border-bottom: 1px solid var(--line, #E4DDD0);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer .drawer__cta {
  justify-content: center;
  background: #215E5C;
  color: #fff;
  border-radius: 999px;
  border: 0;
  margin-top: 18px;
  font-weight: 500;
  min-height: 50px;
}
body.drawer-open { overflow: hidden; }

@media (max-width: 820px) {
  .menu-btn { display: inline-flex; }
}
/* Belt and braces. If the stylesheet loads but the script does not, the
   button would be a dead control, so it is hidden until the script marks
   the document as ready. */
html:not(.wbb-ui-ready) .menu-btn { display: none !important; }


/* ============================================ 6b. THE HEADER, ON A PHONE
   A regression I introduced on 7 August and did not catch, because I checked
   that the drawer opened rather than measuring the bar it sits in.

   Adding the 44px menu button pushed the header over the available width, so
   the nav wrapped. Then the coarse-pointer block in section 4 gave every
   wrapped row a 44px minimum, which turned a wrap into three stacked rows.

   Measured on the live CSS, at a 1x viewport:

       320px   header 219px   nav on 3 rows
       390px   header 197px   nav on 3 rows
       414px   header 133px   nav on 2 rows
       560px   header  69px   nav on 1 row

   197px of a 844px iPhone viewport is 23 percent of the screen, occupied by a
   sticky header, on every one of the 64 pages, on the device most of this
   site's traffic is meant to arrive on.

   The fix is to make the bar fit rather than to let it wrap. Nothing here
   touches the desktop header. */
@media (max-width: 560px) {
  header .bar {
    gap: 10px;
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Without this the brand refuses to give up any width, because it is
     white-space:nowrap, and the nav is the only thing left to squeeze. */
  header .brand {
    font-size: 15.5px;
    gap: 7px;
    min-width: 0;
  }
  header .brand img { width: 26px; height: 26px; }
  header nav {
    flex-wrap: nowrap;
    gap: 6px;
    margin-left: auto;
  }
  header nav a.cta { padding: 9px 15px; }
}

/* Below this the bar cannot hold both a sign-in link and a buy button. Log in
   goes, because it is the first item in the drawer and because "Start free"
   already lands on the same screen. */
@media (max-width: 430px) {
  header nav a[href="/app/"]:not(.cta) { display: none; }
}

/* The smallest phones still in use, an SE at 320 and a Zenfone at 360. One
   more notch and they hold a single row too. */
@media (max-width: 374px) {
  header .brand { font-size: 14px; gap: 6px; }
  header .brand img { width: 23px; height: 23px; }
  header nav a.cta { padding: 9px 13px; font-size: 14.5px; }
  header .bar { gap: 8px; padding-left: 13px; padding-right: 13px; }
  .menu-btn { margin-left: 0; }
}


/* ================================================ 7. THE PRICE, ON SCREEN
   The Practitioner Toolkit page is 2,900px tall and had exactly one CTA, in
   a card at the top right, with roughly 1,400px of empty column beneath it.
   The section most likely to convert a behavior analyst, "The data
   collection", sits about two thirds down, and a reader persuaded there had
   to scroll back to the top to act.

   Three answers, in increasing order of intrusiveness:
     a. the card rides down the empty column it already sits in
     b. the price and button repeat at the end of the body copy
     c. on a phone, a bar appears once the card has scrolled away

   The .split grid only becomes two columns at 860px, so the card only
   becomes sticky at 860px. Sticking it while the layout is stacked would
   park it on top of the copy. */
@media (min-width: 860px) {
  .pricebox {
    position: sticky;
    top: 78px;
  }
}

/* The repeated CTA that briefly lived here is gone. On desktop the card is
   sticky and already on screen, and on a phone the stacked grid puts the card
   immediately after the copy, so a second price block landed directly above
   the real one. Two prices touching is worse than one in the right place. */

#wbb-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 247, 242, .97);
  border-top: 1px solid var(--line, #E4DDD0);
  box-shadow: 0 -4px 18px rgba(30, 45, 44, .08);
  transform: translateY(110%);
  visibility: hidden;
}
#wbb-buybar.is-on {
  transform: none;
  visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
  #wbb-buybar { transition: transform .2s ease-out, visibility .2s; }
}
#wbb-buybar .bb-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted, #6B6560);
}
#wbb-buybar .bb-name strong {
  display: block;
  font-size: 15px;
  color: var(--dark, #2E2E2E);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#wbb-buybar a {
  flex: 0 0 auto;
  background: #215E5C;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* Above the split breakpoint the sticky card is doing this job. */
@media (min-width: 860px) {
  #wbb-buybar { display: none; }
}

/* ============================================================
   9 · The free front door, in the header and the drawer
   Added 13 August 2026 with the Option B navigation.

   Set in --teal-deep rather than --teal, and this is a brand kit rule
   rather than a preference. Header nav is 14.5px and the kit puts teal
   type below about 16px on the deeper value: 4.54:1 against 6.97:1.
   The same applies in the drawer, which is 14.5px too.

   Weight rather than color alone does the separating, so it still reads
   as distinct for anyone who cannot see the hue difference.
   ============================================================ */
header nav a.nav-free,
.drawer__panel a.nav-free {
  color: #215E5C;
  font-weight: 600;
}
header nav a.nav-free:hover,
.drawer__panel a.nav-free:hover {
  color: #7B52A6;
}