/* ============================================================================
   "While you wait" campaign landing pages — /while-you-wait/adhd/ and /autism/
   Created 2026-10-30. Shared by both pages so they are literally siblings
   rather than two pages that resemble each other. Requirement 6 of
   Website/REQUEST_2026-10-30_adhd_autism_while_you_wait_pages.md.

   Loaded AFTER css/style.css, which supplies the nav, footer, buttons, type
   scale and brand tokens. Nothing here redefines a token.

   ⛔ The reading order is load-bearing, not a layout preference. The free,
   useful content is complete and visible before anything about HumanUp. These
   pages are judged on whether a trusted advocate will put their name behind
   the link, so a product pitch arriving before the help breaks the only job
   the page has. Do not move the bridge above the free section.
   ============================================================================ */

.wyw main { padding-top: 0; }
.wyw-wrap { max-width: 820px; margin: 0 auto; padding: 0 5%; }

/* ---------- Hero ---------- */
.wyw-hero { padding: 150px 5% 8px; max-width: 880px; margin: 0 auto; text-align: center; }
/* ⚠️ .headline in style.css is sized for the homepage H1, three short words at
   up to 4.2rem. These campaign headlines are ten words and at that size the
   autism one set SIX lines on a phone and swallowed the whole fold. Resized
   here rather than shortening the copy, which is not ours to re-draft.
   H1:H2 is 1.44 at 390px and 1.41 at 1440, clear of the 1.35 minimum in
   MOBILE_VISUAL_STANDARD. Re-measure that ratio if either value changes. */
.wyw-hero .headline { font-size: clamp(2.3rem, 6.2vw, 3.1rem); margin-bottom: 20px; text-wrap: balance; }
.wyw-hero p {
  max-width: 640px; margin: 0 auto;
  font-size: 1.125rem; line-height: 1.6; color: var(--text-secondary);
}
.wyw-hero p + p { margin-top: 14px; }
.wyw-cta-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: 30px;
}

/* ---------- Secondary button ----------
   ⚠️ .btn-secondary is defined in professional.css, which these pages do NOT
   load. Without this it rendered as a bare underlined blue link next to the
   amber primary, which is what looking at the page caught. Defined here so the
   pages stay self-contained rather than pulling in a stylesheet built for the
   pediatrician and educator pages. */
.wyw .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 28px; border-radius: 999px;
  background: var(--bg-white); border: 1.5px solid rgba(21,25,43,0.18);
  color: var(--text-primary); font-family: var(--font-sans);
  font-size: 1rem; font-weight: 700; text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.wyw .btn-secondary:hover { border-color: rgba(21,25,43,0.42); background: var(--bg-light); }
.wyw .btn-secondary:focus-visible { outline: 3px solid var(--accent-amber); outline-offset: 3px; }

/* ---------- Section rhythm ---------- */
.wyw-section { padding: 56px 0 0; }
.wyw-section h2 {
  font-family: var(--font-serif); font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.2; color: var(--text-primary); margin: 0 0 10px; text-wrap: balance;
}
.wyw-section > p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.65; margin: 0 0 8px; }
.wyw-anchor { scroll-margin-top: 110px; }

/* ---------- The free actions. The thing being forwarded. ---------- */
.wyw-steps { display: grid; gap: 16px; margin-top: 26px; counter-reset: wyw; }
.wyw-step {
  position: relative; background: var(--bg-white); border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-card); padding: 22px 24px 22px 64px;
  box-shadow: 0 8px 24px -18px rgba(2,4,8,0.2);
}
.wyw-step::before {
  counter-increment: wyw; content: counter(wyw);
  position: absolute; left: 22px; top: 22px;
  width: 28px; height: 28px; border-radius: 50%;
  /* ⚠️ WAS amber (#d97706) with near-black text, 2026-11-06.
     ⭐ AND IT PASSED AA AT 5.47:1. Jason looked at it and could barely read it,
     which is the point: two dark, saturated tones at 13.6px measure fine and
     read as mud. A ratio is not a legibility test.

     ⛔ The obvious fix, WHITE on amber, is worse: 3.19:1, a real AA failure. It
     looks punchier at a glance, which is exactly how that one gets shipped.

     This is --accent-apricot-hover used as a solid fill, not as a hover state.
     Deliberate: plain --accent-apricot (#FFCF99) is the button colour Jason
     asked for and the numeral on it is beautiful, but a 28px disc of it on a
     white card sits at 1.43:1 and looks washed out. This is the same family,
     one step deeper, so the badge holds its shape at small size.
     Near-black on it measures 12.1:1. Swap the two tokens if the lighter one
     is preferred; both are legible, only the disc weight changes. */
  background: var(--accent-apricot-hover); color: #020408;
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.wyw-step h3 {
  font-family: var(--font-sans); font-size: 1.02rem; font-weight: 700;
  color: var(--text-primary); margin: 0 0 6px; line-height: 1.35;
}
.wyw-step p { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }

/* Unnumbered variant, for the autism paths where the items are not a sequence. */
.wyw-steps--plain { counter-reset: none; }
.wyw-steps--plain .wyw-step { padding-left: 24px; }
.wyw-steps--plain .wyw-step::before { content: none; }

/* ---------- Path chooser (autism page) ----------
   Requirement 7: the two paths must be separately navigable, because a reader
   must not skim into the wrong half. These are real anchor links; if they ever
   stop being clickable, the "Which wait are you in?" heading has to go too. */
.wyw-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.wyw-path {
  display: block; text-decoration: none;
  background: var(--bg-white); border: 1px solid rgba(0,0,0,0.09);
  border-radius: var(--radius-card); padding: 22px 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wyw-path:hover, .wyw-path:focus-visible {
  transform: translateY(-2px); border-color: rgba(217,119,6,0.45);
  box-shadow: 0 14px 30px -20px rgba(2,4,8,0.3);
}
.wyw-path strong {
  display: block; font-family: var(--font-serif); font-size: 1.15rem;
  color: var(--text-primary); margin-bottom: 6px;
}
.wyw-path span { display: block; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; }
.wyw-path em {
  display: block; margin-top: 10px; font-style: normal;
  color: #92400E; font-size: 0.82rem; font-weight: 700;
}

/* ---------- Region note ---------- */
.wyw-region {
  margin-top: 26px; padding: 18px 20px;
  border-left: 3px solid var(--accent-amber); background: #FFF7ED;
  color: #44403c; font-size: 1rem; line-height: 1.62; border-radius: 0 12px 12px 0;
}
.wyw-region strong { color: var(--text-primary); }

/* ---------- Inline links in body copy ----------
   style.css does not style a bare <a> inside these sections, so a citation link
   inherited the browser default blue-and-underlined. These pages carry source
   links in three places (the CDC attribution line, inside step cards, and the
   Canada note), so they need one consistent treatment. Amber-brown rather than
   the amber token, which fails AA on white at body size. Underlined on purpose:
   these are references, and a reference that does not look clickable is not
   doing its job. */
.wyw-section > p a,
.wyw-step p a,
.wyw-region a {
  color: #92400E; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.wyw-section > p a:hover,
.wyw-step p a:hover,
.wyw-region a:hover,
.wyw-sources a:hover { color: #7C2D12; }
.wyw-section > p a:focus-visible,
.wyw-step p a:focus-visible,
.wyw-region a:focus-visible,
.wyw-sources a:focus-visible { outline: 3px solid var(--accent-amber); outline-offset: 2px; border-radius: 2px; }

/* ---------- Bridge ----------
   ⚠️ UNUSED as of 2026-10-30c. The bridge section was absorbed into the
   conversation section's framing paragraph when the page order changed, so no
   page currently has a .wyw-bridge. Kept rather than deleted because the
   copywriter pass may well want a card-styled interstitial back. ⛔ If it is
   still unused after that review, delete it rather than leaving dead CSS. */
.wyw-bridge {
  margin-top: 56px; padding: 34px clamp(22px, 4vw, 38px);
  background: var(--bg-white); border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-card); box-shadow: 0 10px 30px -20px rgba(2,4,8,0.22);
}
.wyw-bridge h2 { margin-bottom: 12px; }
.wyw-bridge p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.65; margin: 0 0 10px; }
.wyw-bridge p:last-child { margin-bottom: 0; }

/* ---------- What HumanUp is ---------- */
.wyw-about { margin-top: 48px; }
.wyw-about h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.wyw-about p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.68; margin: 0 0 14px; }
.wyw-about .wyw-scope {
  font-size: 1rem; color: var(--text-secondary);
  border-top: 1px solid rgba(0,0,0,0.08); padding-top: 14px; margin-top: 18px;
}

.wyw-expert {
  display: flex; align-items: flex-start; gap: 14px; margin: 22px 0 6px;
  padding: 16px 18px; background: var(--bg-light);
  border: 1px solid rgba(0,0,0,0.07); border-radius: 16px;
}
.wyw-expert-face {
  width: 58px; height: 58px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  border: 2px solid var(--accent-amber); background: var(--bg-white);
}
.wyw-expert-face img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 18%; transform: scale(1.22); transform-origin: 50% 10%;
}
.wyw-expert-name { margin: 0; font-weight: 700; color: var(--text-primary); font-size: 1rem; }
.wyw-expert-role { margin: 2px 0 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.45; }

/* ---------- Example excerpt ----------
   Rebuilt 2026-10-30d. It WAS chat bubbles. Jason killed that, and he was right:

     "When we show an example conversation in this kind of chat-like form, it
      kind of just reduces HumanUp to look like a Q&A chatbot. It's so much
      more. It builds a profile of the child, continues the relationship, and
      learns about your child. It's much more longitudinal."

   ⛔ The problem was the FORM, not the proof. Chat bubbles say "chatbot"
   louder than any copy on the page can say otherwise, and a single cold
   question-and-answer is literally the vending machine the strategy rejects.
   But the excerpt is still the only thing on the page an advocate can judge,
   so removing it would leave "here are tips you already give, plus an app,
   trust us."

   So: a quoted excerpt, not a chat log, and the longitudinal note below it
   does the job the excerpt cannot. The reader's takeaway should be "it helped,
   and it keeps going", never "it answered a question".
   ⛔ Do not reintroduce speech bubbles, avatars facing each other, typing
   indicators, send buttons, or anything else that reads as a messaging UI.

   ⭐ The genuinely strongest version is still out of reach today: a reply that
   visibly ALREADY KNOWS the child. Prod's Prompt Tester writes no memory, so
   every run is a cold first turn and anything longitudinal would have to be
   invented, which would make the "real output" label untrue. The DEV Prompt
   Tester with an internal account that has a real family and children is the
   route. Worth doing before these pages have to work hard. */
.wyw-excerpt {
  margin-top: 26px; padding: 26px clamp(20px, 3.5vw, 30px);
  background: var(--bg-white); border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-card); box-shadow: 0 12px 32px -24px rgba(2,4,8,0.3);
}
.wyw-excerpt-label {
  display: inline-block; margin-bottom: 16px;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: #92400E;
  background: #FFF7ED; border: 1px solid rgba(217,119,6,0.3);
  border-radius: 999px; padding: 5px 12px;
}

/* The parent's situation, set as context rather than as a message. */
.wyw-excerpt-ask {
  margin: 0 0 18px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: var(--text-secondary); font-size: 1rem; line-height: 1.6;
}
.wyw-excerpt-ask strong {
  display: block; font-family: var(--font-sans); font-size: 0.75rem;
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 7px;
}

/* ⚠️ flex-start, not center. When the attribution name wraps to two lines (it
   does at 390px for "Based on the work of Ned Hallowell, MD"), centring drops
   the face beside the second line and it reads as detached from the name.
   Same defect that hit the expert card earlier the same day. */
.wyw-excerpt-from { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.wyw-excerpt-face {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  border: 2px solid var(--accent-amber); background: var(--bg-white);
}
.wyw-excerpt-face img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 18%; transform: scale(1.22); transform-origin: 50% 10%;
}
/* ⛔ Static expert-derived editorial content: "Based on the work of [Name]",
   never any AI language. Nothing is generated in front of this reader, so
   there is nothing to disclose, and "AI" puts many parents off. The live
   interaction disclosure is a different rule for a different surface. */
.wyw-excerpt-from span {
  font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.4;
  color: var(--text-secondary);
}
.wyw-excerpt-from span b { display: block; color: var(--text-primary); font-size: 0.98rem; font-weight: 700; }

.wyw-excerpt-body p { margin: 0 0 12px; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.65; }
.wyw-excerpt-body p:last-child { margin-bottom: 0; }
.wyw-excerpt-body strong { color: var(--text-primary); font-weight: 700; }

/* The quotable script. This is the moment that earns the section its space:
   a blog post cannot hand a parent words to say tonight. */
.wyw-script {
  margin: 16px 0 0; padding: 15px 19px;
  background: #FFFBEB; border-left: 3px solid var(--accent-amber);
  border-radius: 0 12px 12px 0;
}
.wyw-script span {
  display: block; font-family: var(--font-sans); font-size: 0.75rem;
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #92400E; margin-bottom: 7px;
}
.wyw-script q {
  display: block; quotes: none; font-family: var(--font-serif);
  font-size: 1.1rem; line-height: 1.5; color: var(--text-primary);
}

.wyw-excerpt-note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08);
  color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55;
}
.wyw-excerpt-note em { font-style: normal; color: var(--text-primary); font-weight: 600; }

/* ---------- What the excerpt cannot show ----------
   ⛔ This block is the whole reason the excerpt is allowed to exist. It is
   what turns one answer into evidence of something ongoing. If it is ever
   removed, remove the excerpt with it.
   ⛔ Never "building a picture of your child" here: it reads as profiling to
   exactly this audience. Approved phrase: "remembers the context you share". */
.wyw-continues {
  margin-top: 20px; padding: 20px clamp(20px, 3.5vw, 26px);
  background: var(--bg-light); border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-card);
}
.wyw-continues h3 {
  margin: 0 0 8px; font-family: var(--font-serif); font-size: 1.2rem;
  color: var(--text-primary); line-height: 1.3;
}
.wyw-continues p { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.62; }

/* ---------- Source citations ----------
   Added 2026-10-30b. These are what turn the practical sections from our own
   summary of federal law into signposting toward the authority that states it.
   ⛔ Primary government sources only. Never a blog, an advocacy group or a law
   firm, however accurate: the whole point is that the reader can check it
   against the body that decides. Re-verify the URLs before any redeploy. */
.wyw-sources {
  margin-top: 26px; padding: 16px 20px;
  background: var(--bg-light); border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
}
.wyw-sources strong {
  display: block; font-family: var(--font-sans); font-size: 0.78rem;
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 8px;
}
.wyw-sources ul { margin: 0; padding-left: 18px; }
.wyw-sources li { font-size: 1rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 7px; }
.wyw-sources li:last-child { margin-bottom: 0; }
.wyw-sources a { color: #92400E; font-weight: 600; }

/* ---------- Store-button context ----------
   A parent reading an article should not be surprised to land in the App Store.
   ⛔ Remove this line the day an Android build ships: a stale platform note is
   worse than none. */
.wyw-cta-note {
  align-self: center; color: var(--text-secondary);
  font-family: var(--font-sans); font-size: 0.9rem;
}

/* ---------- Stage note on the autism example ----------
   ⛔ Load-bearing, not decoration. The autism excerpt is from a parent whose
   child is already diagnosed, but the page also serves families waiting for an
   evaluation. Without this line they can feel the page is not for them, or
   read the excerpt as HumanUp helping to diagnose. It sits OUTSIDE the sample
   because the sample itself is immutable.
   ⛔ If the excerpt is ever swapped for a pre-evaluation one, update this line
   rather than deleting it. */
.wyw-stage-note {
  margin: 14px 0 0; padding: 12px 16px;
  background: var(--bg-light); border-left: 3px solid rgba(21,25,43,0.18);
  border-radius: 0 10px 10px 0;
  color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; font-style: italic;
}

/* ---------- Trust ----------
   ⚠️ Deliberately ONE concrete sentence, not a block. 2026-10-30b.

   It was three paragraphs, and Jason was right that it read as defensive: no
   other landing page argues its privacy at that length, and CLAUDE.md's own
   rule says to concentrate the promise because repeating it "starts to read as
   defensive." His proposed replacement was the tagline "Designed for privacy",
   which the same rule retires: a vague adjective parents gloss over. So this
   keeps the single concrete auditable fact and drops everything else.

   ⛔ The user-request exception travels with the claim, always. An unqualified
   "never" with an unstated exception is how a strong claim becomes a false one;
   one support request would falsify it. ⛔ No encryption or deletion claim here
   either: the live Privacy Notice documents neither. */
.wyw-trust {
  margin-top: 52px; padding: 22px clamp(20px, 3.5vw, 28px);
  background: var(--bg-light); border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-card);
  display: flex; gap: 14px; align-items: flex-start;
}
.wyw-trust svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--accent-amber); }
.wyw-trust p { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.62; }
.wyw-trust p strong { color: var(--text-primary); font-weight: 600; }
/* ⛔ The privacy sentence gets its own line. It was merged with the corporate
   sentence into one dense block, which buries the only part a parent is
   actually weighing. The PBC line is context, so it sits quieter and after. */
.wyw-trust .wyw-trust-org { margin-top: 10px; font-size: 0.95rem; opacity: 0.9; }

/* ---------- Blocked sections ----------
   ⛔ These three are NOT ready: the example conversation (product), the autism
   rights language and the Canada note (legal). The request is explicit that the
   pages may ship with them stubbed but must never ship with them faked, so the
   stub is deliberately loud. If this styling ever looks subtle, it has failed. */
.wyw-todo {
  margin-top: 30px; padding: 20px 22px;
  background: repeating-linear-gradient(45deg, #FEF2F2, #FEF2F2 10px, #FEE2E2 10px, #FEE2E2 20px);
  border: 2px dashed #B91C1C; border-radius: 14px; color: #7F1D1D;
}
.wyw-todo strong { display: block; margin-bottom: 6px; font-size: 0.95rem; }
.wyw-todo span { font-size: 0.9rem; line-height: 1.6; }

.wyw-foot-note {
  margin: 48px 0 0; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.08);
  color: var(--text-secondary); font-size: 0.85rem; line-height: 1.65;
}

/* ---------- The Android link, beside the store button ---------- */
.wyw-cta-row .android-link { flex-basis: 100%; text-align: left; margin-top: 2px; }
@media (max-width: 760px) { .wyw-cta-row .android-link { text-align: center; } }


/* ===========================================================================
   REBUILD 2026-11-02. Sections added for the 7-section structure.
   Request: REQUEST_2026-11-02_rebuild_adhd_autism_pages.md
   ⛔ The order is load-bearing and the reasons are in the request:
      hero (says what HumanUp IS) → trio → how these answers work → example
      → try → steps → sharing.
   =========================================================================== */

/* ---------- The three-phone trio ----------
   ⛔ REUSED, NOT BUILT. .hero-stage / .hero-screen / .screen-left|center|right
   all come from css/style.css, which these pages already load, and it carries
   its own mobile block. Only the three <img src> values differ per page.
   ⛔ Do not copy the homepage's inline overrides here. They exist because the
   homepage hero is a two-column grid with an asymmetric nudge; this is a
   centred single column and the base CSS composes it correctly. */
.wyw-stage-wrap {
  position: relative;
  /* ⛔ The phones are position:absolute inside .hero-stage, which is height:100%
     of this wrapper, so THIS height is the only thing reserving room for them.
     .hero-screen is width:270px with aspect-ratio 9/19.5, so it is 585px tall on
     desktop and 433px tall at the 200px mobile width. An earlier value of 430px
     let the phones overflow and sit on top of the caption. Caught by looking at
     the render; no numeric check would have flagged it.
     ⛔ If the phone width ever changes, recompute: height = width * 19.5 / 9,
     plus ~35px of headroom for the rotation of the two flanking screens. */
  height: 620px;
  margin: 30px auto 0;
  display: flex; justify-content: center; align-items: center;
  /* ⚠️ ADDED 2026-11-06. Below about 362px the two flanking phones are pushed
     past both edges by their translateX, which made the whole DOCUMENT 342px
     wide at a 320px viewport and 362px at 360px: the page scrolled sideways and
     every section sat short of the right edge. Measured on /adhd/ and /autism/
     at 320 and 360, identical numbers on both, so it has been live since those
     pages shipped. The homepage never showed it because its hero column already
     clips. Found while building /every-family/, which loads the same component.
     ⛔ Clipping is the right fix, not shrinking: the flanking phones are meant
     to run off the edges, and a few pixels of bezel is what is lost. Horizontal
     scroll on a phone is not. */
  overflow: hidden;
}
.wyw-stage-caption {
  max-width: 620px; margin: 18px auto 0; text-align: center;
  color: var(--text-secondary); font-size: 1rem; line-height: 1.6;
}
@media (max-width: 760px) {
  /* style.css drops .hero-screen to 200px here -> 200 * 19.5/9 = 433px tall. */
  .wyw-stage-wrap { height: 470px; margin-top: 22px; }
}
@media (max-width: 420px) {
  .wyw-stage-wrap { height: 450px; }
}

/* ---------- How these answers work ----------
   ⛔⛔ THIS SECTION IS A DISCLOSURE, NOT DECORATION. It sits directly beneath
   the trio because text inside a screenshot cannot carry a disclosure.

   The centre phone shows "POWERED BY THE AI WISDOM OF" above an expert's name.
   The asset is 472px wide and renders at 200px on a phone, so that line comes
   out a few pixels tall: a grey smudge. What a parent CAN read at that size is
   a photograph of a doctor and his name in large type. Without this section, a
   parent could reasonably conclude a person answered them.

   ⛔ Do not move it below the example. Do not collapse it into an accordion.
   Do not reduce it to a footnote. On mobile it must remain adjacent to the
   trio, which is why it is a sibling block and not a column. */
.wyw-how {
  max-width: 680px; margin: 26px auto 0;
  padding: 22px clamp(20px, 3.5vw, 28px);
  background: var(--bg-light);
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 3px solid var(--accent-amber);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.wyw-how h2 {
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 800;
  color: var(--text-primary); margin: 0 0 10px;
}
.wyw-how p { margin: 0 0 10px; color: var(--text-secondary); font-size: 1rem; line-height: 1.62; }
.wyw-how p:last-child { margin-bottom: 0; }
.wyw-how strong { color: var(--text-primary); font-weight: 600; }

/* ---------- The example, framed as PRODUCT ----------
   ⚠️ CHANGED 2026-11-02. It used to carry the expert's headshot above the
   reply, which is exactly what made a parent able to read it as "Ned Hallowell
   answered me". ⛔ The face is gone and is not coming back.

   The brief is that it must look like the product, not like an article
   pull-quote and not like a message from a person. So: a screen-like panel
   with its own small header bar, no human avatar anywhere, and the attribution
   stated as provenance ("Based on the work of") rather than as a sender. */
.wyw-screen {
  max-width: 620px; margin: 24px auto 0;
  background: var(--bg-white);
  border: 1px solid rgba(21,25,43,0.14);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 44px -28px rgba(2,4,8,0.38);
}
.wyw-screen-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  background: var(--bg-light);
  border-bottom: 1px solid rgba(21,25,43,0.10);
}
.wyw-screen-bar img { width: 19px; height: 19px; border-radius: 5px; display: block; }
.wyw-screen-bar span {
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary);
}
.wyw-screen-body { padding: 18px clamp(16px, 3vw, 22px) 20px; }

.wyw-ask {
  margin: 0 0 16px; padding: 13px 16px;
  background: #EEF1F6; border: 1px solid rgba(21,25,43,0.10);
  border-radius: 14px 14px 4px 14px;
  color: var(--text-primary); font-size: 1rem; line-height: 1.6;
}
.wyw-ask strong {
  display: block; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: 6px;
}
/* ⛔ Provenance, never a sender. No avatar, no "from", no reply-to affordance. */
.wyw-source {
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700;
  color: #92400E; letter-spacing: 0.02em; margin: 0 0 10px;
}
.wyw-reply p { margin: 0 0 11px; color: var(--text-secondary); font-size: 1rem; line-height: 1.64; }
.wyw-reply p:last-child { margin-bottom: 0; }
.wyw-reply strong { color: var(--text-primary); font-weight: 700; }

/* ---------- Sharing. Visually quiet, for the professional reading over the
     parent's shoulder. ⛔ Must not compete with "Get HumanUp". ---------- */
.wyw-share {
  max-width: 620px; margin: 44px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,0.08);
  color: var(--text-secondary); font-size: 0.97rem; line-height: 1.6;
}
.wyw-share strong { color: var(--text-primary); }
.wyw-share code {
  font-family: var(--font-sans); font-weight: 700; color: var(--text-primary);
  background: var(--bg-light); padding: 2px 7px; border-radius: 6px;
}
.wyw-copy {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: var(--bg-white); border: 1.5px solid rgba(21,25,43,0.18);
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; color: var(--text-primary);
}
.wyw-copy:hover { border-color: rgba(21,25,43,0.42); background: var(--bg-light); }
.wyw-copy:focus-visible { outline: 3px solid var(--accent-amber); outline-offset: 3px; }
.wyw-copy svg { width: 14px; height: 14px; }
.wyw-copy[data-done="1"] { border-color: rgba(217,119,6,0.5); background: #FFFBEB; }

/* ---------- Print: the steps, and nothing else ----------
   Added 2026-10-31. ⛔ This exists because the artefact that actually goes in a
   family's folder is PAPER. A practice manager handing something over on the way
   out hands over a sheet, not a URL, and the steps section is the part that needs
   no device, no diagnosis and no HumanUp at all.

   ⛔ A print stylesheet, NOT a separate PDF, on purpose: a PDF is a second copy of
   the same words that silently goes stale the next time the steps are edited. This
   cannot drift, because it IS the page.

   ⛔ Nothing dark, nothing reversed out, no background fills that matter. The whole
   point is surviving a cheap office printer with low toner. Backgrounds are dropped
   rather than lightened so a borrowed printer cannot make them grey mud.
   ⛔ The URL prints, because a family who wants the rest has to be able to type it. */
@media print {
  /* ⛔ Page margins are not optional. No consumer printer prints to the edge, so
     without these the first and last characters of every line are clipped. Found by
     looking at the rendered PDF, where the text started at x=0. */
  /* ⛔ NO `size` DECLARATION. It used to say A4. These sheets are printed in
     Kentucky on Letter, and naming a paper the tray does not hold makes the
     browser scale or clip. Margins only: the printer's own paper size wins. */
  @page { margin: 14mm 15mm; }

  /* Everything that is not the steps.
     ⛔ #example IS HIDDEN AS A WHOLE SECTION, not child by child. It used to
     list .wyw-screen only, which hid the conversation panel and left its
     HEADING and its "Illustrative parent question" note behind — so a family
     held a sheet opening with "When homework ends in a meltdown" and a
     disclaimer about a conversation that was not on the page. Hiding the
     section is also what stops the next child element reintroducing it. */
  .nav-wrapper, .mobile-menu-overlay, .site-footer,
  .wyw-hero, #conversation, .wyw-continues, .wyw-about,
  .wyw-trust, .wyw-region, .ea-modal-overlay, .wyw-print-btn,
  .wyw-stage-wrap, .wyw-stage-caption, .wyw-how,
  #example, .wyw-screen, .wyw-excerpt, .wyw-excerpt-note,
  .wyw-share, .wyw-try { display: none !important; }

  /* ⛔ And the section's own h2 goes too, because .wyw-print-head already carries the
     title. Both printed gave the sheet the same heading twice. */
  #what-you-can-do > h2 { display: none !important; }

  /* ⚠️ The brand fonts are requested with no media attribute, so they DO apply
     to print — when they have loaded. The outreach thread's reference printouts
     came out in Times and Arial, which is what a failed font load looks like.
     The stack is restated here with a real fallback so the worst case is a
     decent system sans, not Times. ⛔ Not a guarantee the webfont loads; it is
     a guarantee the fallback is not ugly. */
  html, body {
    background: #fff !important; color: #000 !important;
    font-family: var(--font-sans), 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  .wyw-print-head strong, .wyw-section h2 {
    font-family: var(--font-serif), Georgia, 'Times New Roman', serif;
  }
  /* ⭐ THE SHEET FILLS THE PAGE AND THE FOOTER SITS AT THE FOOT.
     It used to stop halfway down a sheet of paper, which looks like a mistake
     and wastes the one thing a printout has over a link: room.
     min-height + margin-top:auto on the footer is what pushes it down.
     ⚠️ 236mm is deliberately short of Letter's 251mm of usable height. A
     min-height that exceeds the page is how a one-page sheet silently becomes
     two, and the footer is the part that would land alone on page 2. */
  .wyw-wrap {
    max-width: 175mm; padding: 0; margin: 0;
    min-height: 242mm;
    display: flex; flex-direction: column;
  }
  .wyw-section { padding: 0; }

  /* ⭐ THE SHEET HAS TO LOOK LIKE HUMANUP. A helper hands this to a family, and
     until 2026-11-09 the only identity on it was a line of small grey text.
     The wordmark is the same asset the nav uses; brightness(0) forces it to
     pure black so it survives a photocopier and uses no colour.
     ⛔ An <img> prints even when the reader has "background graphics" switched
     off, which a CSS background-image would not. That is why it is markup. */
  .wyw-print-head { display: block !important; margin-bottom: 16pt; }
  .wyw-print-head img {
    display: block; height: 26pt; width: auto; margin: 0 0 14pt;
    filter: brightness(0);
  }
  .wyw-print-head strong { display: block; font-size: 21pt; line-height: 1.15; }
  .wyw-print-head span { display: block; font-size: 12pt; color: #333; margin-top: 5pt; }

  /* ⭐ Somewhere to go afterwards. A sheet with no way back to the site is a
     dead end for the family holding it. ⛔ Kept plain and small on purpose:
     the three steps are the point of this page, the address is the footnote.
     The /every-family/ sheet boxes its address at 18pt because there the
     address IS the point. Different job, different weight. */
  /* ⭐ THE NOTES AREA IS WHAT FILLS THE PAGE, and it earns its place rather
     than padding it: step 3 tells the parent to write down what they notice,
     and paper is the one format where we can hand them the lines to do it on.
     flex:1 makes the block absorb whatever height is left, and the lines
     inside stretch with it, so the sheet is full whether the steps run long
     or short. ⛔ Borders, never a background image — "background graphics" is
     off by default in print dialogs and the lines would not appear at all. */
  .wyw-print-notes {
    display: flex !important; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
    margin-top: 18pt;
  }
  .wyw-print-notes strong {
    display: block; font-size: 12pt; color: #000; margin-bottom: 4pt;
  }
  .wyw-print-notes span {
    display: block; flex: 1 1 24pt; min-height: 24pt;
    border-bottom: 0.75pt solid #666;   /* survives a photocopy; 0.5pt #999 did not */
  }

  /* ⭐ margin-top:auto is the whole trick: as the last flex items in a
     min-height column, these two get pushed to the bottom of the sheet. */
  .wyw-print-more {
    display: block !important;
    margin-top: auto; padding-top: 12pt;
    border-top: 0.75pt solid #000;
    font-size: 13pt; color: #000;
  }
  .wyw-print-more strong { display: block; margin-top: 3pt; font-size: 19pt; color: #000; }

  .wyw-section h2 { font-size: 15pt; margin: 0 0 6pt; color: #000; }
  .wyw-section > p { font-size: 13pt; color: #222; margin: 0 0 14pt; line-height: 1.4; }

  /* ⭐ EACH STEP GETS ITS OWN BOX, 2026-11-09. They used to print as a flat
     numbered list, which is dense to read and wasted the page.
     ⛔ OUTLINE ONLY, never a fill. These sheets get photocopied, and a tinted
     or dark panel comes back as a grey smear that swallows the text. A hairline
     black rule copies cleanly and uses almost no toner.
     ⛔ Keep break-inside: avoid — a step split across a page break is worse
     than a shorter sheet. */
  .wyw-steps { display: block; margin: 0; }
  .wyw-step {
    background: none !important; box-shadow: none !important;
    border: 0.75pt solid #000 !important;
    border-radius: 4pt !important;
    padding: 13pt 15pt !important;
    margin: 0 0 11pt !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .wyw-step:last-child { margin-bottom: 0 !important; }
  .wyw-step::before {
    background: none !important; color: #000 !important;
    position: static; width: auto; height: auto; display: inline;
    font-size: 14pt; font-weight: 800; content: counter(wyw) ". ";
  }
  .wyw-steps--plain .wyw-step::before { content: none; }
  /* ⚠️ 14pt headings and 12.5pt body, up from 10.5pt for both. The reader is a
     tired parent who may be reaching for reading glasses. ⛔ Do not shrink
     these to buy space — take a box out instead. */
  .wyw-step h3 { display: inline; font-size: 14pt; color: #000; line-height: 1.3; }
  .wyw-step p  { font-size: 12.5pt; color: #222; margin-top: 6pt; line-height: 1.45; }

  a[href]::after { content: none !important; }   /* no URL-after-every-link noise */
  /* ⛔ No rule here. .wyw-print-more already draws one directly above, and two
     horizontal rules a few lines apart read as a form, not a handout. */
  /* Smallest thing on the sheet by design, but 8.5pt was unkind. */
  .wyw-foot-note { font-size: 9.5pt; line-height: 1.4; color: #333; border-top: none; margin-top: 10pt; padding-top: 0; }
}

/* Hidden on screen, printed on the sheet. */
.wyw-print-head { display: none; }
.wyw-print-more { display: none; }
.wyw-print-notes { display: none; }

/* The control that gets someone to the sheet in the first place. */
.wyw-print-btn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding: 9px 16px;
  background: var(--bg-white); border: 1.5px solid rgba(21,25,43,0.18);
  border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
  color: var(--text-primary);
}
.wyw-print-btn:hover { border-color: rgba(21,25,43,0.42); background: var(--bg-light); }
.wyw-print-btn:focus-visible { outline: 3px solid var(--accent-amber); outline-offset: 3px; }
.wyw-print-btn svg { width: 15px; height: 15px; }

@media (max-width: 760px) {
  .wyw-hero { padding-top: 120px; }
  .wyw-paths { grid-template-columns: 1fr; }
  .wyw-cta-row .btn-primary, .wyw-cta-row .btn-secondary { width: 100%; max-width: 330px; text-align: center; }
  .wyw-cta-row { flex-direction: column; align-items: center; }
  .wyw-expert { flex-direction: row; }
}
@media (max-width: 420px) {
  .wyw-step { padding: 18px 18px 18px 56px; }
  .wyw-step::before { left: 18px; top: 18px; }
  .wyw-steps--plain .wyw-step { padding-left: 18px; }
  /* ⛔ Do NOT hide this with display:none. A display:none lazy image never
     loads, which silently breaks the avatar and makes every automated image
     check report it as broken. Shrink it instead. */
  /* ⛔ Do NOT hide the expert's face with display:none at any breakpoint. A
     display:none lazy image never loads, which silently breaks it and makes
     every automated image check report it as broken. Shrink it instead. */
  .wyw-excerpt-face { width: 32px; height: 32px; }
  .wyw-excerpt { padding: 22px 18px; }
  .wyw-script { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wyw-path { transition: none; }
  .wyw-path:hover, .wyw-path:focus-visible { transform: none; }
}