/* ============================================================
   MyWave · website_v4 · care.css
   ------------------------------------------------------------
   MyWave Care is a MyWave Help membership aimed at the adult
   child buying peace of mind for a parent. It is the page the
   postcards, the YouTube end-screens, and the referral cards
   point to — and its audience is in a different emotional
   register than the rest of the site.

   So Care gets its own surface: warm cream paper under navy
   ink, with the brand coral carrying the emotional weight and
   the handwriting faces (already soft) reading as a personal
   note instead of a tech treatment. The dark teal masthead and
   footer stay — they're the brand bookends that say "still
   MyWave." Everything in here is scoped to `.page-care` so it
   cannot leak onto the other pages.

   Softness comes from color temperature, light, and air —
   never from glass, blobs, gradient text, or soft-UI pills.
   ============================================================ */

.page-care {
  /* — Paper (warm cream — the caring surface, inverted from the dark site) — */
  --care-paper:      #f6f0e6;  /* warm cream page base                         */
  --care-surface:    #fffdf8;  /* lifted warm-white for content blocks         */
  --care-surface-2:  #efe6d6;  /* warmer tone for emphasis blocks              */

  /* — Ink (the brand navy, softened slightly for warmth on cream) — */
  --care-ink:        #1a2d3d;  /* primary text (brand navy eased warm)        */
  --care-ink-soft:   #546571;  /* secondary text — warm blue-grey             */
  --care-ink-faint:  #8593a0;  /* captions, meta                              */

  /* — Accent (brand coral, with a deeper tone for legible text on cream) — */
  --care-coral:      #c96a4e;  /* coral text / links — deep enough to read    */
  --care-coral-soft: #FFA781;  /* brand coral, for fills / hairlines          */
  --care-coral-tint: #f7e3d8;  /* warm coral wash for the hero trust band     */

  /* — Secondary accent (Harbor teal, used sparingly) — */
  --care-teal:       #097288;  /* Harbor teal — brand tie-in, used on details */

  /* — Lines — */
  --care-line:       #e0d6c5;  /* warm hairline rule                          */
  --care-line-soft:  #ece4d4;  /* even softer divider                         */

  /* — Type — reuses the brand faces loaded by style.css.
       Patrick Hand SC leads the section headings (warmer);
       Permanent Marker is reserved for emotional peaks — the
       hero, the price, the closing CTA — so emphasis reads
       as a hand-written note, not a marketing shout. */

  background-color: var(--care-paper);
  background-image: none;        /* override the dark sea bg from style.css   */
  color: var(--care-ink);
  font-family: var(--font-body);
}

/* ============================================================
   Layout — care-main is the full-bleed cream surface between
   the dark masthead and the dark footer. One reading column,
   generous breathing room. One idea per block.
   ============================================================ */

.care-main {
  background: var(--care-paper);
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) clamp(3.5rem, 2rem + 4vw, 6rem);
}

.care-container {
  max-width: 44rem;             /* a touch wider than the site measure for air */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Each content block is a breathable section */
.care-block {
  margin-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.care-block:first-of-type { margin-top: 0; }

/* ============================================================
   Hero
   ============================================================ */

.care-hero {
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.care-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--care-coral);
  margin: 0 0 1rem;
  font-weight: 400;
}

.care-hero-title {
  font-family: var(--font-display);        /* Permanent Marker — the emotional peak */
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--care-ink);
  margin: 0 0 1rem;
  max-width: 20ch;
}

.care-hero-sub {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--care-ink-soft);
  max-width: 38ch;
  margin-bottom: 1.75rem;
}

/* Hero trust line — a quiet coral-washed band, like a margin note */
.care-hero-trust {
  margin-top: 1.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--care-coral-tint);
  border-left: 3px solid var(--care-coral-soft);
  border-radius: 2px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--care-ink);
  max-width: 42ch;
}

/* ============================================================
   The CTA link — coral, hand-written, arrowed. Not a button.
   The brand discipline (no pill buttons) holds; the warmth
   comes from the coral and the display face, not from chrome.
   ============================================================ */

.care-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
  color: var(--care-coral);
  border-bottom: 2px solid var(--care-coral);
  padding-bottom: 2px;
  margin-bottom: 0.5rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.care-cta:hover {
  color: var(--care-teal);
  border-bottom-color: var(--care-teal);
}
.care-cta:focus-visible {
  outline: 2px solid var(--care-coral);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ============================================================
   Section headings — Patrick Hand SC, warm and human
   ============================================================ */

.care-h2 {
  font-family: var(--font-body);           /* Patrick Hand SC — the softer voice */
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--care-ink);
  margin: 0 0 0.9em;
  font-weight: 600;
}

/* Body prose inside blocks */
.care-block p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--care-ink);
  margin: 0 0 1.1em;
  max-width: 38rem;
}
.care-block p:last-child { margin-bottom: 0; }

/* Emphasis — style.css sets `strong` to foam (#eef6f8), which is invisible on
   the cream surface. Restore it to ink across the whole Care page. */
.page-care strong { color: var(--care-ink); }

/* ============================================================
   Pull quote — the emotional anchors
   A coral-marked line in the display face. Replaces the dark
   site's `.pull` with a warmer, lighter treatment.
   ============================================================ */

.care-pull {
  margin: 1.75rem 0;
  padding: 0.3em 0 0.3em 1.2rem;
  border-left: 3px solid var(--care-coral);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--care-ink);
  max-width: 36rem;
}

/* The pricing reframe — the single most important line on the page.
   Gets a warm surface block to anchor it visually. */
.care-price-pull {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--care-surface-2);
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  line-height: 1.3;
  color: var(--care-ink);
  max-width: 32rem;
}

/* ============================================================
   Inclusions list — what's in the membership
   Plain list, bold lead-in per item, warm hairline dividers.
   ============================================================ */

.care-includes {
  list-style: none;
  padding: 0;
  margin: 1.4em 0;
  max-width: 40rem;
}
.care-includes li {
  padding: 0.85em 0;
  border-top: 1px solid var(--care-line);
  margin: 0;
  line-height: 1.6;
}
.care-includes li:last-child { border-bottom: 1px solid var(--care-line); }
.care-includes strong {
  font-family: var(--font-body);
  color: var(--care-ink);
  font-weight: 600;
}

/* Muted aside / note */
.care-note {
  font-size: 0.96rem;
  color: var(--care-ink-soft);
  font-style: italic;
  margin-top: 1.2rem;
}

/* ============================================================
   How it works — numbered steps
   Big warm coral numerals, generous gutters.
   ============================================================ */

.care-steps {
  list-style: none;
  counter-reset: carestep;
  padding: 0;
  margin: 1.4em 0;
  max-width: 40rem;
}
.care-steps li {
  counter-increment: carestep;
  padding: 1em 0 1em 3.25rem;
  border-top: 1px solid var(--care-line);
  position: relative;
  margin: 0;
  line-height: 1.6;
}
.care-steps li:last-child { border-bottom: 1px solid var(--care-line); }
.care-steps li::before {
  content: counter(carestep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.05em;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--care-coral);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.care-steps strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--care-ink);
  margin-bottom: 0.1em;
}

/* ============================================================
   Trust standards — the four verifiable promises
   Coral marker dash + bold lead-in, like the site's `.promise`
   but restated for the light surface.
   ============================================================ */

.care-promise {
  list-style: none;
  padding: 0;
  margin: 1.4em 0;
  max-width: 40rem;
}
.care-promise li {
  padding: 0.9em 0 0.9em 1.75em;
  border-top: 1px solid var(--care-line);
  position: relative;
  margin: 0;
  line-height: 1.6;
}
.care-promise li:last-child { border-bottom: 1px solid var(--care-line); }
.care-promise li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 0.8rem;
  height: 2px;
  background: var(--care-coral);
}
.care-promise strong {
  font-family: var(--font-body);
  color: var(--care-ink);
  font-weight: 600;
}

/* ============================================================
   Pricing — simple, stated once, in the display face
   ============================================================ */

.care-price {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem);
  line-height: 1.15;
  color: var(--care-ink);
  margin: 0.3em 0 0.4em;
}

/* ============================================================
   FAQ — proper definition list, warm and scannable
   ============================================================ */

.care-faq {
  margin: 1.2em 0;
  padding: 0;
  max-width: 40rem;
}
.care-faq dt {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--care-ink);
  padding-top: 1.1em;
  border-top: 1px solid var(--care-line);
  line-height: 1.4;
}
.care-faq dt:first-child { border-top: 0; padding-top: 0; }
.care-faq dd {
  margin: 0.4em 0 0;
  padding-bottom: 1.1em;
  color: var(--care-ink-soft);
  line-height: 1.65;
  font-size: 1rem;
}

/* ============================================================
   Closing CTA block
   A warm lifted surface to land the conversion ask gently.
   ============================================================ */

.care-cta-block {
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  background: var(--care-surface);
  border: 1px solid var(--care-line);
  border-radius: 4px;
  max-width: 44rem;
}
.care-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.2;
  color: var(--care-ink);
  margin: 0 0 0.8rem;
  max-width: 22ch;
}
.care-cta-note {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--care-ink-faint);
  font-style: italic;
}

/* ============================================================
   Soft cross-sell to Harbor — one line, no push
   ============================================================ */

.care-aside {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--care-line-soft);
  font-size: 0.96rem;
  color: var(--care-ink-soft);
  line-height: 1.65;
  max-width: 38rem;
}
.care-aside a {
  color: var(--care-teal);
  border-bottom: 1px solid color-mix(in srgb, var(--care-teal) 40%, transparent);
}
.care-aside a:hover { border-bottom-color: var(--care-teal); }

/* Link defaults on the cream surface — coral, calmer than the dark site */
.page-care .care-block a,
.page-care .care-hero a,
.page-care .care-faq a {
  color: var(--care-coral);
  border-bottom: 1px solid color-mix(in srgb, var(--care-coral) 35%, transparent);
}
.page-care .care-block a:hover,
.page-care .care-hero a:hover,
.page-care .care-faq a:hover {
  border-bottom-color: var(--care-coral);
}
.page-care .care-block a:focus-visible,
.page-care .care-hero a:focus-visible {
  outline: 2px solid var(--care-coral);
  outline-offset: 0.2em;
  border-radius: 1px;
}

/* ============================================================
   Masthead/colophon continuity
   The dark brand chrome from style.css still applies — same
   masthead, same footer — but the page-care body sits between
   them on warm cream. Nothing to override; this comment exists
   so a future reader knows the bookends are intentional.
   ============================================================ */

/* ============================================================
   Reduced motion + responsive
   ============================================================ */

@media (max-width: 480px) {
  .care-hero-trust { padding: 0.8rem 0.9rem; }
  .care-cta-block { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .care-cta, .page-care a {
    transition-duration: 0.001ms !important;
  }
}