/* ============================================================
   TECH HELP WITH Q — Base design system
   Faithful reconstruction of the live Durable-hosted site.
   Tokens pixel-confirmed against techhelpwithq.ca — see
   docs/superpowers/reference/tokens.md for evidence per value.
   One brand blue, flat fills (no card borders/shadows), dark
   feature/pricing cards, generous senior-friendly spacing.
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subset) — Phase-2 type system ----------
   Headings: Bricolage Grotesque (variable 200–800) — a warm, slightly irregular
   humanist grotesque with real character (soft terminals, a hand-cut feel) that
   echoes the hand-drawn leaf mark far better than default Roboto.
   Body: Hanken Grotesk (variable 100–900) — open apertures, tall x-height, high
   legibility at the 18px senior-friendly base. The two pair on a contrast axis
   (display grotesque vs. neutral text grotesque), not two lookalike Google sans.
   The legacy Roboto/Poppins faces from the pre-Phase-2 type system are gone —
   nothing in this stylesheet references them any more. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/bricolage-grotesque.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/hanken-grotesk.woff2) format('woff2')}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h, 6.5rem) + 1rem)}
body{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

/* ---------- Tokens ---------- */
:root{
  /* color — Phase-2 warm system (designed in OKLCH; hexes are sRGB fallbacks).
     Re-anchored on the leaf's warmth: a warm-red hue (~35–45) carries identity
     via a terracotta primary + a faint blush paper; the old brand blue is
     DEMOTED to a secondary/focus accent. Contrast verified (see
     .superpowers/sdd/phase2-slice-report.md): ink 14.5:1, body 11.8:1,
     muted 7.5:1 (AAA), white-on-primary 5.2:1, white-on-warm-deep 13:1. */
  --bg:#fff8f6;              /* oklch(.985 .008 40) — warm blush paper, brand-hue tint, NOT cream */
  --surface:#f8edea;         /* oklch(.955 .013 40) — soft warm panel / hero band */
  --surface-2:#f2e5e0;       /* oklch(.93 .016 40) — warmer card fill */
  --border:#e6d8d2;          /* oklch(.87 .012 40) — warm hairline */
  --ink:#31231c;             /* oklch(.27 .025 45) — warm charcoal, headings */
  --body:#3f322c;            /* oklch(.33 .022 45) — warm charcoal, body copy */
  --muted:#5c4f4a;           /* oklch(.44 .02 45) — de-emphasized meta; clears 7:1 AAA on --bg */
  --primary:#b8492e;         /* oklch(.55 .15 35) — terracotta/brick from the leaf; identity + buttons (white 5.2:1) */
  --primary-strong:#a33e25;  /* oklch(.50 .14 35) — button hover / footer band (white 6.4:1) */
  --primary-wash:#fee0d8;    /* oklch(.93 .035 36) — pale terracotta wash for icon badges (features/concerns) */
  --warm-deep:#4c271a;       /* oklch(.32 .06 40) — rich deep warm tone; replaces cold black cards */
  --surface-inverse:var(--warm-deep); /* dark feature/pricing cards now warm, not #0a0a0a */
  --input-fill:#f4e9e5;      /* oklch(.945 .013 40) — warm form field fill */

  /* type — Phase-2: headings Bricolage Grotesque (600/700), body Hanken Grotesk
     (400/500/600). 18px body base kept for senior legibility; heading clamps
     unchanged so the section rhythm holds while the faces swap. */
  --font:'Hanken Grotesk',system-ui,sans-serif;        /* body / lead / prose */
  --head-font:'Bricolage Grotesque',system-ui,sans-serif;
  --sub-font:'Hanken Grotesk',system-ui,sans-serif;
  --fs-h1:clamp(2.25rem, 1.41rem + 3.43vw, 4.5rem);   /* 36px mobile -> 72px desktop, live-confirmed both */
  --fs-h2:clamp(1.875rem, 1.46rem + 1.71vw, 3rem);    /* 30px mobile -> 48px desktop, live-confirmed both */
  --fs-h3:clamp(1.375rem, 1.14rem + 0.95vw, 2rem);    /* ~22px mobile -> 32px desktop, live-confirmed desktop */
  --fs-h4:clamp(1.125rem, 0.99rem + 0.57vw, 1.5rem);  /* 18px -> 24px, inferred: no live <h4>, matches Durable's 4th heading-size tier */
  --fs-lead:clamp(1.125rem, 0.99rem + 0.57vw, 1.5rem); /* 18px mobile -> 24px desktop, live-confirmed both */

  /* spacing scale */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;

  /* shape / elevation */
  --radius:.75rem;
  --radius-pill:999px;       /* buttons are full pill shape, pixel-confirmed */
  --shadow:0 1px 3px oklch(0.32 0.06 40 / .07),0 8px 24px oklch(0.32 0.06 40 / .06); /* warm-tinted ambient shadow (was neutral black) -- matches the oklch(0.32 0.06 40) family already used by every photo-frame/chip shadow */
  --shadow-lift:0 4px 12px oklch(0.32 0.06 40 / .14),0 20px 38px oklch(0.32 0.06 40 / .16); /* hover-elevated card shadow -- same warm family, one step deeper */

  /* motion — Phase-2 6b: one shared gentle ease-out for every interactive
     transition sitewide (buttons/cards/links/FAQ/carousel/nav), reusing the
     exact curve the hero entrance already established below. Calm and
     senior-safe on purpose: no bounce/elastic, everything lands in the
     150-250ms band, and it's the same curve everywhere so no control feels
     like it belongs to a different system. */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --transition:.2s var(--ease-out);

  /* z-index scale — a small, explicit set of stacking layers instead of
     ad-hoc 9999s. Everything else in the page (hero/about/contact media
     clusters, the page-hero glow, etc.) uses isolation:isolate for a
     *local* 0–3 stacking order that never needs to compare against this
     global scale. */
  --z-header:100;            /* sticky site header */
  --z-header-dropdown:110;   /* mobile #nav-menu flyout, nested inside the header */
  --z-skip-link:1000;        /* skip-to-content link — must clear the sticky header */
}

/* ---------- Base elements ---------- */
body{
  font-family:var(--font);
  font-size:1.125rem;            /* 18px — live prose base */
  color:var(--body);
  background:var(--bg);
  line-height:1.55;              /* live prose 28/18 */
  -webkit-font-smoothing:antialiased;
}

h1,.h1,h2,.h2,h3,.h3{
  margin:0 0 var(--space-4);
  font-family:var(--head-font);
  font-weight:600;                 /* Bricolage 600 — confident display weight */
  color:var(--ink);
  letter-spacing:-0.018em;         /* modest negative tracking; stays senior-legible */
  text-wrap:balance;
}
h1,.h1{font-size:var(--fs-h1);line-height:1.08;font-weight:700}
h2,.h2{font-size:var(--fs-h2);line-height:1.15}
h3,.h3{font-size:var(--fs-h3);line-height:1.25}
h4{margin:0 0 var(--space-3);font-family:var(--head-font);font-weight:600;font-size:var(--fs-h4);line-height:1.33;letter-spacing:-0.01em;color:var(--ink);text-wrap:balance}

p{margin:0 0 var(--space-4);max-width:70ch}
.lead{font-family:var(--sub-font);font-size:var(--fs-lead);font-weight:400;line-height:1.5;letter-spacing:normal;color:var(--body);max-width:70ch}
small,.text-sm{font-size:.875rem}
.text-muted{color:var(--muted)}

/* ---------- Layout ---------- */
.container{max-width:1120px;margin-inline:auto;padding-inline:var(--space-6)}
.section{padding-block:var(--space-24)}
.section-surface{background:var(--surface)} /* full-bleed band, e.g. "Save More" */

.grid{display:grid;gap:var(--space-8)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font);font-weight:600;font-size:1rem;line-height:1;
  padding:.9em 1.6em;border-radius:var(--radius-pill);border:2px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--transition),border-color var(--transition),color var(--transition),transform var(--transition),box-shadow var(--transition);
}
/* Soft lift on hover/focus, gentle press on click -- the same pill-lift
   language reused on every button-shaped control sitewide (header-call,
   contact-trust-link, carousel controls, nav-toggle). Small and calm on
   purpose: 2px, one shared warm shadow, never a bounce. */
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 4px 12px oklch(0.32 0.06 40 / .16)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-strong);border-color:var(--primary-strong)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}

/* ---------- Cards ---------- */
/* Light card — flat surface fill, no stroke/shadow (testimonials, etc.) */
.card{
  background:var(--surface-2);
  border-radius:var(--radius);
  padding:var(--space-8) var(--space-6);
  text-align:center;
}

/* Dark card — pricing tiers only (Phase-2: features moved to light
   .feature-card, see Content sections below, so this is no longer shared
   between two grids of identical dark boxes). overflow:hidden clips the
   optional photo background to match the card radius. */
.card-dark{
  background:var(--surface-inverse);
  color:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow var(--transition),transform var(--transition);
}
.card-dark:hover{transform:translateY(-4px);box-shadow:0 20px 40px oklch(0.32 0.06 40 / .28)}
.card-dark__body{padding:var(--space-8) var(--space-6);text-align:center}
.card-dark h2,.card-dark h3,.card-dark h4{color:#fff}
.card-dark p{color:rgba(255,255,255,.85)}

/* ---------- Header (Phase-2 polish: sticky + wayfinding) ----------
   Sticky so the phone + Book CTA — and now the section anchor nav — stay
   reachable on a ~12,000px page without scrolling back to the top. Flush
   with the page at rest (no border/shadow baked in, matching the original
   flat design); a soft shadow only grows in once the page has actually
   scrolled (.is-scrolled, toggled by a small passive scroll listener in
   main.js), so the header reads as "lifted above the content" rather than
   a permanent hard-edged bar. */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--bg);
  box-shadow:0 0 0 transparent;
  transition:box-shadow var(--transition);
}
.site-header.is-scrolled{box-shadow:var(--shadow)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding-block:var(--space-6);
}
.logo{display:inline-flex}
.logo-img{height:52px;width:auto}

/* Skip-to-content link — the first focusable element in the document.
   position:fixed (not absolute) so it's reachable regardless of scroll
   position; parked off-screen at rest and pulled into view on focus.
   Sits above the sticky header (--z-skip-link > --z-header) so the header
   never covers it. */
.skip-link{
  position:fixed;top:-4rem;left:var(--space-4);z-index:var(--z-skip-link);
  background:var(--primary);color:#fff;
  padding:.85em 1.4em;border-radius:var(--radius);
  font-weight:700;font-size:1rem;text-decoration:none;
  box-shadow:var(--shadow-lift);
  transition:top var(--transition);
}
.skip-link:focus{top:var(--space-4)}

/* Section anchor nav (Services / Pricing / About / Contact) — lives
   inside #nav-menu so it inherits the existing responsive split for
   free: always visible alongside LinkedIn in .site-nav on desktop,
   folded into the hamburger dropdown below 860px. */
.nav-link{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);font-weight:600;font-size:.9375rem;text-decoration:none;
  padding:.25rem 0;
  transition:color var(--transition);
}
.nav-link:hover,.nav-link:focus-visible{color:var(--primary)}

.nav-toggle{
  display:none;
  background:none;border:0;padding:var(--space-2);margin:0;cursor:pointer;color:var(--ink);
  border-radius:var(--radius);
  transition:background-color var(--transition),color var(--transition);
}
.nav-toggle:hover,.nav-toggle:focus-visible{background:var(--surface);color:var(--primary)}
.nav-toggle:active{transform:translateY(1px)}
.nav-toggle svg{display:block;width:26px;height:26px}

.header-right{display:flex;align-items:center;gap:var(--space-6)}
.site-nav{display:flex;align-items:center;gap:var(--space-6)}
.nav-social{display:inline-flex;color:var(--ink);transition:color var(--transition)}
.nav-social:hover,.nav-social:focus-visible{color:var(--primary)}
.nav-social svg{width:24px;height:24px}

/* Always-visible header actions — click-to-call + Book, reachable at
   every width WITHOUT opening the hamburger (critique P0: primary
   action was hidden inside the mobile menu). Only LinkedIn (low
   priority) still lives inside the collapsible .site-nav. */
.header-actions{display:flex;align-items:center;gap:var(--space-4)}
.header-call{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-width:44px;min-height:44px;padding:.4rem .65rem;margin:0;
  border-radius:var(--radius-pill);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.9375rem;white-space:nowrap;
  transition:background-color var(--transition),color var(--transition),transform var(--transition);
}
.header-call:hover,.header-call:focus-visible{background:var(--surface);color:var(--primary);transform:translateY(-2px)}
.header-call:active{transform:translateY(0)}
.header-call svg{width:22px;height:22px;flex:none;color:var(--primary)}
.header-book-short{display:none}

@media (max-width:860px){
  .header-inner{position:relative;flex-wrap:wrap;gap:var(--space-2)}
  .logo-img{height:44px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .header-right{gap:.4rem}
  .header-actions{gap:.4rem}
  .header-call-text{display:none}
  .header-call{padding:.4rem;min-width:44px}
  .header-book-full{display:none}
  .header-book-short{display:inline}
  .header-book{padding:.75em 1.1em;font-size:.9375rem}
  .site-nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;z-index:var(--z-header-dropdown);
    flex-direction:column;align-items:stretch;gap:var(--space-4);
    background:var(--bg);padding:var(--space-6);
    box-shadow:var(--shadow);border-radius:0 0 var(--radius) var(--radius);
  }
  .site-nav.open{display:flex}
  .nav-link{justify-content:center;padding:.6rem 0;font-size:1.0625rem;border-radius:var(--radius)}
  .nav-link:hover,.nav-link:focus-visible{background:var(--surface)}
  .nav-social{justify-content:center}
}

/* ---------- Hero (Phase-2 redesign) ----------
   Replaces the flat full-bleed washed-photo + centered thin H1 (no CTA) with an
   art-directed, asymmetric split: warm-panel band, left-aligned display copy +
   a clear terracotta CTA, and a warmly-framed photo tilted off-axis with a
   hand-drawn leaf, an offset brand-red shape, and an overlapping credo chip.
   The old gimmicky diagonal clip-path is gone; the transition into #features is
   now a calm warm-band step (surface -> paper). */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  padding-block:clamp(2.5rem, 1.4rem + 4.4vw, 5rem) clamp(3rem, 2rem + 5vw, 6rem);
}
/* soft warm glow for depth (no photo wash over the faces) */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 55% at 84% 18%, oklch(0.9 0.06 45 / .5), transparent 70%),
    radial-gradient(46% 48% at 4% 96%, oklch(0.92 0.035 40 / .5), transparent 72%);
}
.hero-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(2rem, 1rem + 5vw, 4.5rem);
}
.hero-copy{max-width:34rem}
.hero-title{
  font-size:clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);
  line-height:1.03;
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--ink);
  margin-bottom:var(--space-6);
  text-wrap:balance;
}
/* accented last word + hand-drawn terracotta underline */
.hero-accent{position:relative;color:var(--primary);white-space:nowrap}
.hero-underline{
  position:absolute;left:-.03em;bottom:-.22em;width:calc(100% + .06em);height:.4em;
  color:var(--primary);overflow:visible;
}
.hero-lead{
  font-size:clamp(1.2rem, 1.04rem + 0.62vw, 1.5rem);
  line-height:1.5;
  color:var(--body);
  margin-bottom:var(--space-8);
  max-width:32rem;
  text-wrap:pretty;
}
.hero-actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-4) var(--space-6);
  margin-bottom:var(--space-8);
}
.btn-lg{font-size:1.125rem;padding:1.05em 1.9em;box-shadow:0 2px 6px oklch(0.5 0.14 35 / .22),0 12px 24px oklch(0.5 0.14 35 / .22)}
.btn-lg:hover{box-shadow:0 2px 6px oklch(0.5 0.14 35 / .28),0 16px 30px oklch(0.5 0.14 35 / .26)}
.hero-secondary{
  display:inline-block;
  margin:0;
  font-family:var(--font);font-weight:600;font-size:1.0625rem;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--primary);
  text-underline-offset:.28em;text-decoration-thickness:2.5px;
  transition:color var(--transition),text-decoration-color var(--transition);
}
.hero-secondary:hover,.hero-secondary:focus-visible{color:var(--primary-strong);text-decoration-color:var(--primary-strong)}
.hero-trust{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  margin:0;max-width:none;
  font-size:1.0625rem;font-weight:500;color:var(--body);
}
.hero-trust svg{flex:none;width:1.35rem;height:1.35rem;color:var(--primary-strong)}
.hero-trust .sep{color:oklch(0.55 0.15 35 / .8);font-weight:700} /* 3.3:1 vs --surface, plus aria-hidden in markup (decorative) */
.hero-trust-phone{
  color:var(--ink);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--primary);text-underline-offset:.22em;
  text-decoration-thickness:2.5px;
  transition:color var(--transition),text-decoration-color var(--transition);
}
.hero-trust-phone:hover,.hero-trust-phone:focus-visible{color:var(--primary-strong);text-decoration-color:var(--primary-strong)}

/* framed photo cluster */
.hero-media{position:relative;isolation:isolate}
/* offset brand-red shape peeking behind the photo */
.hero-media::before{
  content:"";position:absolute;z-index:0;
  right:-1.25rem;bottom:-1.35rem;width:60%;height:66%;
  background:var(--primary);opacity:.16;
  border-radius:2.5rem;transform:rotate(4deg);
}
.hero-media-frame{
  position:relative;z-index:1;
  border-radius:2rem 2rem 2rem 2.75rem;   /* subtle organic asymmetry */
  overflow:hidden;
  border:6px solid var(--bg);
  box-shadow:0 2px 8px oklch(0.32 0.06 40 / .12),0 26px 50px oklch(0.32 0.06 40 / .2);
  transform:rotate(-1.4deg);
}
.hero-media-frame img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:center 32%;display:block}
/* hand-drawn leaf motif — the identity seed, present in the hero */
.hero-leaf{
  position:absolute;z-index:2;top:-1.15rem;left:-1.3rem;
  width:clamp(3rem, 2rem + 3vw, 4.5rem);height:auto;color:var(--primary);
  transform:rotate(-14deg);
  filter:drop-shadow(0 4px 8px oklch(0.32 0.06 40 / .22));
}
/* overlapping credo chip — brand voice, breaks the grid, reads human */
.hero-chip{
  position:absolute;z-index:3;left:-0.9rem;bottom:1.1rem;
  display:flex;align-items:center;gap:.65rem;
  max-width:15.5rem;
  background:var(--bg);color:var(--ink);
  padding:.8rem 1.05rem;border-radius:1rem;
  box-shadow:0 2px 6px oklch(0.32 0.06 40 / .12),0 16px 32px oklch(0.32 0.06 40 / .18);
  font-size:.95rem;line-height:1.3;font-weight:600;
}
.hero-chip svg{flex:none;width:1.6rem;height:1.6rem;color:var(--primary)}

/* gentle staggered entrance — base state is fully visible, so the global
   prefers-reduced-motion rule (animation:none) leaves everything shown. */
@keyframes hero-rise{from{opacity:0;transform:translateY(1.1rem)}to{opacity:1;transform:none}}
@keyframes hero-media-in{from{opacity:0;transform:translateY(1.4rem)}to{opacity:1;transform:none}}
.hero-copy>*{animation:hero-rise .55s var(--ease-out) backwards}
.hero-copy>*:nth-child(1){animation-delay:.03s}
.hero-copy>*:nth-child(2){animation-delay:.09s}
.hero-copy>*:nth-child(3){animation-delay:.15s}
.hero-copy>*:nth-child(4){animation-delay:.21s}
.hero-copy>*:nth-child(5){animation-delay:.27s}
.hero-media{animation:hero-media-in .6s var(--ease-out) .08s backwards}
/* The primary CTA is the highest-intent target on the page — it must
   render as a solid, fully-opaque button immediately, never mid-fade. */
.hero-copy>.hero-actions{animation:none;opacity:1;transform:none}

@media (max-width:880px){
  .hero-inner{grid-template-columns:1fr;gap:clamp(2.25rem, 1rem + 6vw, 3.25rem)}
  .hero-copy{max-width:40rem}
  .hero-media{max-width:34rem}
  .hero-media-frame{transform:rotate(-1deg)}
}
@media (max-width:420px){
  .hero-actions .btn-lg{width:100%}
  .hero-chip{max-width:13.5rem;font-size:.9rem}
  /* the phone number wraps to its own line at this width — drop the
     "·" so it doesn't strand itself at the end of line 1 */
  .hero-trust .sep{display:none}
}

/* ---------- Content sections (features / services / pricing / concerns) ----------
   Live site centers every heading + paragraph in these sections and lets body
   copy span close to the full container width (not the base p{max-width:70ch}
   restriction, which is only correct for narrower single-column prose). */
.text-center{text-align:center}
.text-center p{max-width:none}

/* Heading + short intro paragraph, grouped and centered (features/pricing/concerns).
   Live renders these at close to the full container width, not a narrow
   column -- confirmed by pixel-measuring the features h2 (1020px, fits one
   line in the 1072px content area). */
.section-intro{margin:0 auto var(--space-16)}
.section-intro>:last-child{margin-bottom:0}

/* Services checklist ("✔ " glyph is literal copy, not a generated bullet).
   Base reset shared with #communities/#workshops -- do not add per-section
   visual opinions here, use a modifier class instead (see .services-checklist). */
.check-list{list-style:none;margin:0 0 var(--space-8);padding:0}
.check-list li{margin-bottom:var(--space-2)}

/* ---------- Features (Phase-2: light, icon-led benefit cards) ----------
   Replaces 3 identical dark cards with empty grey/brown ".card-dark__media"
   placeholder strips (nothing ever filled them). Warm surface fill (not the
   dark tier color pricing uses below -- keeping these two grids visually
   distinct was the whole point) + a hand-drawn-style terracotta line icon in
   an organic asymmetric badge (same radius logic as .hero-media-frame,
   scaled down), so the icon reads as this brand's own shape language rather
   than a generic template icon-in-a-circle. */
.feature-card{
  background:var(--surface-2);
  border-radius:1.5rem 1.5rem 1.5rem 2rem;
  padding:var(--space-8) var(--space-6);
  text-align:center;
  box-shadow:var(--shadow);
  transition:box-shadow var(--transition),transform var(--transition);
}
.feature-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.feature-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:4.25rem;height:4.25rem;margin-bottom:var(--space-6);
  border-radius:1.1rem 1.1rem 1.1rem 1.6rem;
  background:var(--primary-wash);
  color:var(--primary);
}
.feature-icon svg{width:2rem;height:2rem}
.feature-card strong{color:var(--primary-strong)}

/* ---------- Services (Phase-2: de-walled from one centered text column) ----------
   Left-aligned prose, the checklist restyled into a warm chip grid (own
   modifier class, base .check-list reset above stays untouched for
   #communities/#workshops), and the three statement/answer beats given real
   visual weight instead of floating as equal-weight paragraphs. */
.services-intro{max-width:42rem;margin-bottom:var(--space-8)}
.services-intro .lead{margin-bottom:0}

.services-checklist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--space-3);margin:0 0 var(--space-12);padding:0;max-width:58rem;
}
.services-checklist li{
  display:flex;align-items:flex-start;gap:.6rem;
  background:var(--surface-2);border-radius:1rem;
  padding:.9rem 1.15rem;margin:0;
  font-weight:500;color:var(--ink);
}
.services-checklist .check-mark{color:var(--primary-strong);font-weight:700;flex:none;line-height:1.5}

.qa-list{display:grid;gap:var(--space-6);max-width:58rem}
.qa-item{background:var(--surface);border-radius:1.25rem;padding:var(--space-6) var(--space-8);transition:box-shadow var(--transition),transform var(--transition)}
.qa-item:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.qa-item .qa-q{margin-bottom:var(--space-2);font-size:var(--fs-h4)}
.qa-item .qa-a{margin-bottom:0;color:var(--body)}

/* ---------- Pricing (Phase-2: rate-card typography, distinct from Features) ----------
   Tiers stay on the warm-deep dark card (already visually distinct from the
   now-light .feature-card above) and get real price typography -- large
   Bricolage numerals + small supporting labels -- instead of three flat
   paragraphs, so the section reads like a rate card, not a repeat of the
   features grid. Every <span> below wraps existing copy verbatim; no words,
   prices, or punctuation were added or removed, only marked up for styling. */
.price-line{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.3em;color:rgba(255,255,255,.85);
}
.price-amount{font-family:var(--head-font);font-weight:700;font-size:1.75rem;color:#fff;letter-spacing:-0.01em}
.price-note{color:rgba(255,255,255,.7);font-size:.9375rem}
.price-line--sub{padding-top:var(--space-3);margin-top:var(--space-3);border-top:1px solid rgba(255,255,255,.2)}
.price-region{color:rgba(255,255,255,.75);font-size:.9375rem}

/* Pricing tier cards: no media strip, content vertical-centered in the
   grid-stretched card height (matches live: cards share one row height). */
.card-dark__body--middle{height:100%;display:flex;flex-direction:column;justify-content:center}
/* "Surrounding Communities" tier is the only pricing card with a background
   photo on live (pixel-confirmed: cards 1 + 3 are flat #0a0a0a, std-dev 0
   across sampled regions; card 2 shows real photo texture under the same
   rgba(0,0,0,.8) overlay used sitewide for photo cards). */
.card-dark--photo{background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),url(../img/pricing-surrounding.jpg) center/cover}

/* "Save More" full-bleed band directly below the pricing cards */
#pricing{padding-bottom:0}
#pricing .section-surface{padding-block:var(--space-16)}
/* Single "Book a session" CTA -- the free 15-minute consult button now
   lives only in the header; every other booking touchpoint on the page
   points to the general Calendly event list. */
.pricing-cta-group{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4)}

/* ---------- Concerns (Phase-2: unified icon treatment for all 6) ----------
   Previously only item 1 had a photo (img/concern-tablet.jpg) and items 2-6
   were bare text, which read as broken/unfinished. All 6 now get the same
   left-icon + text row: a small round terracotta-wash badge (round, not the
   asymmetric feature-card badge shape, so this grid doesn't visually double
   the features grid above) plus heading/body -- calmer and less "card-like"
   than a boxed grid, which fits addressing a senior's private anxieties. */
.concerns-grid{align-items:start}
.concern-item{display:flex;gap:var(--space-4);text-align:left}
.concern-icon{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:3.25rem;height:3.25rem;border-radius:50%;
  background:var(--primary-wash);color:var(--primary);
}
.concern-icon svg{width:1.6rem;height:1.6rem}
.concern-text h3{font-size:var(--fs-h4);margin-bottom:var(--space-2)}
.concern-text p{margin-bottom:0;color:var(--body)}

/* ---------- [hidden] safeguard — belt-and-suspenders for the FAQ JS toggle
   contract (Task 8); no current rule overrides display on these elements,
   but this guards against future additions doing so silently. ---------- */
[hidden]{display:none!important}

/* Generic hidden utility — backs the contact form's botcheck honeypot
   field (class="hidden"), which previously relied on an inline
   style="display:none" with no supporting class rule behind it. */
.hidden{display:none}

/* ---------- Testimonials -> Google reviews link block ----------
   The quote cards + sliding carousel were removed at the owner's
   request; the section is now a compact, centered trust moment that
   sends visitors straight to the real reviews on Google instead of
   curating quotes on-site. */

/* Small leaf flourish above "What Clients Are Saying" -- testimonials are
   a trust/warmth moment, the same emotional register as About/Contact,
   where the hand-drawn leaf mark already recurs. */
.testimonials-leaf{
  display:block;width:2.25rem;height:auto;color:var(--primary);
  margin:0 auto var(--space-4);transform:rotate(9deg);
  filter:drop-shadow(0 4px 8px oklch(0.32 0.06 40 / .18));
}

/* Centered stack: the "5.0 on Google" badge, a short warm reassurance
   line, then a button out to the real reviews. Deliberately its own
   small component rather than a reuse of the muted .chip ("last
   updated" style) -- a trust badge needs to read as a confident
   brand-tinted pill, not a de-emphasised meta label. Stars reuse
   --primary (terracotta) rather than a new "gold" token, matching the
   single-accent system used everywhere else. */
.reviews-panel{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-4);max-width:30rem;margin-inline:auto;
}
.reviews-badge{
  display:inline-flex;align-items:center;gap:.45rem;margin:0;max-width:none;
  background:var(--primary-wash);color:var(--primary-strong);
  font-weight:700;font-size:1rem;
  padding:.55rem 1.25rem;border-radius:var(--radius-pill);
}
.reviews-badge-rating{font-family:var(--head-font)}
.reviews-badge-stars{color:var(--primary);letter-spacing:.1em}
.reviews-tagline{margin:0;color:var(--body)}

/* ---------- About (Phase-2: warm portrait frame, echoes the hero) ----------
   This is the "trust/human peak" moment, so it gets the full hero-echo
   treatment: .about-media mirrors .hero-media (offset terracotta shape +
   tilted bg-matting frame + soft shadow + hand-drawn leaf), reusing the
   exact leaf path from the hero at a smaller scale. Portrait crop (4/5,
   taller than wide) tightens the frame onto Q's face/shoulders from the
   wider source photo, replacing the previous forced 1/1 crop. The matting
   border uses --surface-2 (not --bg, which the hero uses) because #about
   sits on plain --bg -- a --bg border there would be invisible. Two lines
   of the bio (opening + closing) get a warmer, larger head-font treatment
   ("greeting"/"signoff") so the section reads as personal, not a wall of
   equal-weight paragraphs; the rest of the bio is untouched left-aligned
   prose (no .text-center on this section, so it was already left-aligned). */
.about-grid{align-items:center}
.about-media{position:relative;isolation:isolate;max-width:26rem;margin-inline:auto}
.about-media::before{
  content:"";position:absolute;z-index:0;
  left:-1.1rem;bottom:-1.2rem;width:58%;height:56%;
  background:var(--primary);opacity:.16;
  border-radius:2.25rem;transform:rotate(-4deg);
}
.about-photo-frame{
  position:relative;z-index:1;
  border-radius:2rem 2rem 2.75rem 2rem;
  overflow:hidden;
  border:6px solid var(--surface-2);
  box-shadow:0 2px 8px oklch(0.32 0.06 40 / .12),0 26px 50px oklch(0.32 0.06 40 / .2);
  transform:rotate(1.3deg);
}
.about-photo{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.about-leaf{
  position:absolute;z-index:2;top:-1.1rem;right:-1.1rem;
  width:clamp(2.75rem, 2rem + 2vw, 3.75rem);height:auto;color:var(--primary);
  transform:rotate(18deg);
  filter:drop-shadow(0 4px 8px oklch(0.32 0.06 40 / .22));
}
.about-greeting{
  font-family:var(--head-font);font-weight:600;color:var(--primary-strong);
  font-size:var(--fs-h4);margin-bottom:var(--space-4);
}
.about-signoff{
  font-family:var(--head-font);font-weight:600;color:var(--primary-strong);
  font-size:var(--fs-h4);margin-bottom:0;
}

/* ---------- FAQ (Phase-2: terracotta accordion, gentle dividers) ----------
   Same [aria-expanded]/[hidden] JS contract as before (Task 8) — restyled
   only, no markup changes. Each row gets a hairline top divider (skipped on
   the first item) and a warm hover/focus fill. The existing circle+plus SVG
   (unchanged markup) now carries the feature/concern badge wash on its
   circle at rest; expanding (or hovering) deepens the terracotta, and the
   already-existing 45deg rotation still turns the "+" into an "x". */
.faq-list{max-width:860px;margin-inline:auto;text-align:left}
.faq-item{border-top:1px solid var(--border)}
.faq-item:first-child{border-top:0}
.faq-q{
  display:flex;align-items:center;gap:var(--space-4);width:100%;
  background:none;border:0;border-radius:1rem;
  padding:var(--space-6) var(--space-4);margin:0;cursor:pointer;
  font:inherit;color:var(--ink);text-align:center;
  transition:background-color var(--transition);
}
.faq-q:hover,.faq-q:focus-visible{background:var(--surface)}
.faq-q-text{flex:1;font-size:var(--fs-h4);transition:color var(--transition)}
.faq-q:hover .faq-q-text{color:var(--primary-strong)}
.faq-icon{flex-shrink:0;color:var(--primary);transition:transform var(--transition),color var(--transition)}
.faq-icon circle{fill:var(--primary-wash);transition:fill var(--transition)}
.faq-q:hover .faq-icon{color:var(--primary-strong)}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg);color:#fff}
.faq-q[aria-expanded="true"] .faq-icon circle{fill:var(--primary)}
.faq-a{padding:0 var(--space-4) var(--space-6);text-align:center}
.faq-a p{margin-bottom:var(--space-4)}
.faq-a p:last-child{margin-bottom:0}
/* One plain inline link lives inside an FAQ answer ("book your session").
   Same treatment as .legal-content a, for a link that otherwise had zero
   hover/focus feedback of its own. */
.faq-a a{
  color:var(--primary-strong);font-weight:600;
  text-decoration:underline;text-decoration-color:oklch(0.5 0.14 35 / .4);
  text-underline-offset:.18em;text-decoration-thickness:1.5px;
  transition:color var(--transition),text-decoration-color var(--transition);
}
.faq-a a:hover,.faq-a a:focus-visible{color:var(--warm-deep);text-decoration-color:currentColor}
/* "Ready to get started" band directly below the accordion — same pattern
   as #pricing's "Save More" band (T5). */
#faq{padding-bottom:0}
#faq .section-surface{padding-block:var(--space-16)}

/* ---------- Workshops (Phase-2 follow-up: warm typographic cards) ----------
   The two poster images are gone -- there are no real workshop photos yet,
   and the placeholders read as AI-generated. Replaced with confident
   typographic cards instead of leaving a photo-shaped hole. Each workshop
   is now a full-width warm panel (.workshop-card, same --surface-2 fill +
   organic radius + shadow language as .feature-card/.testimonial-card) led
   by an icon badge (feature/concern-icon vocabulary -- the "warm accent"
   standing in for a photo) and title, with the "What you'll learn"
   checklist promoted into its own lighter inset panel (.workshop-learn,
   --bg fill against the card's --surface-2, mirroring the chips-on-bg
   pattern #services' .services-checklist already uses) so it reads as the
   card's visual focus rather than a trailing list. */
.workshop-card{
  background:var(--surface-2);
  border-radius:1.5rem 1.5rem 1.5rem 2.5rem;
  padding:var(--space-12) var(--space-8);
  box-shadow:var(--shadow);
  transition:box-shadow var(--transition),transform var(--transition);
}
.workshop-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.workshop-card+.workshop-card{margin-top:var(--space-12)}
.workshop-card-header{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6)}
.workshop-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:4.25rem;height:4.25rem;
  border-radius:1.1rem 1.1rem 1.1rem 1.6rem;
  background:var(--primary-wash);color:var(--primary);
}
.workshop-icon svg{width:2rem;height:2rem}
.workshop-card-header h2{margin-bottom:0}
.workshop-learn{
  background:var(--bg);
  border-radius:1.25rem 1.25rem 1.25rem 1.75rem;
  padding:var(--space-6);
  margin:var(--space-2) 0 var(--space-6);
}
.workshop-learn-label{
  font-family:var(--head-font);font-weight:600;color:var(--primary-strong);
  font-size:var(--fs-h4);margin-bottom:var(--space-4);
}
.workshop-learn .workshop-checklist{margin-bottom:0}
.workshop-card .btn{margin-top:var(--space-2)}

/* ---------- Communities & Workshops checklists (Phase-2: warm chip grid) ----------
   Same visual treatment as #services' .services-checklist (--surface-2
   pills, own copy of the .check-mark color rule so nothing in the
   untouched #services block needs editing) — the base .check-list reset's
   existing comment already flagged these two sections as pending this
   exact modifier-class treatment. */
/* Small leaf flourish above "Tech Help for Communities" -- the practice
   reaching outward into the wider community, the same warm register as
   the leaf's other placements (hero/about/contact/footer/testimonials). */
.communities-leaf{
  display:block;width:2.25rem;height:auto;color:var(--primary);
  margin:0 auto var(--space-4);transform:rotate(-11deg);
  filter:drop-shadow(0 4px 8px oklch(0.32 0.06 40 / .18));
}
.communities-checklist,.workshop-checklist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--space-3);margin:var(--space-6) 0 var(--space-8);padding:0;max-width:58rem;
}
.communities-checklist{margin-inline:auto}
.communities-checklist li,.workshop-checklist li{
  display:flex;align-items:flex-start;gap:.6rem;
  background:var(--surface-2);border-radius:1rem;
  padding:.9rem 1.15rem;margin:0;
  font-weight:500;color:var(--ink);text-align:left;
}
.communities-checklist .check-mark,.workshop-checklist .check-mark{color:var(--primary-strong);font-weight:700;flex:none;line-height:1.5}
#communities strong,.workshop-body strong{color:var(--primary-strong)}

/* ---------- Contact (Phase-2: warm frame + trust block + legible fields) ----------
   Photo left (tall portrait crop, matches live's cover-cropped Getty photo)
   + heading/intro/form right, reusing the sitewide grid-2 photo+text pairing
   (see About/Workshop). align-items:start keeps the photo top-aligned with
   the heading, matching live.

   The photo now gets the same hero-echo warm frame as About (organic
   radius, --surface-2 matting -- #contact sits on plain --bg like #about,
   so the --bg-bordered hero treatment would be invisible here too), an
   offset terracotta shape, and the hand-drawn leaf -- but geometry mirrors
   the HERO's arrangement (shape bottom-right, leaf top-left) rather than
   About's (shape bottom-left, leaf top-right), so the three photo-moment
   sections read as an alternating rhythm down the page instead of two
   near-identical treatments back to back.

   .contact-trust is the critique's #1 trust fix: a warm --surface-2 panel
   between the intro copy and the form holding large, icon-badged tel:/
   mailto: pills (badge vocabulary reused verbatim from .feature-icon/
   .concern-icon) -- a visitor who'd rather call or text never has to
   touch the form. Resting-state pill uses the --border hairline (contact
   info is already legible via bold --ink text + the icon badge); hover/
   focus fills solid --primary for an unambiguous, high-contrast state.

   Form fields: the old 1px transparent border + near-white --input-fill
   was a low-vision barrier (fields were only distinguishable from the
   page by a few % of luminance). Border is now 1.5px solid --muted
   (6.6:1 against --input-fill -- clearly visible at rest, verified via
   the project's contrast script), with a dedicated terracotta focus
   treatment (border flips to --primary + a soft ring) scoped to
   .form-field only, so the sitewide blue :focus-visible ring elsewhere
   on the page is untouched. min-height:44px on every control (textarea
   already clears it via its own 150px min-height) keeps every field a
   comfortable tap target. */
.contact-grid{align-items:start}

.contact-media{position:relative;isolation:isolate;max-width:26rem;margin-inline:auto}
.contact-media::before{
  content:"";position:absolute;z-index:0;
  right:-1.1rem;bottom:-1.2rem;width:58%;height:56%;
  background:var(--primary);opacity:.16;
  border-radius:2.25rem;transform:rotate(4deg);
}
.contact-photo-frame{
  position:relative;z-index:1;
  border-radius:2rem 2rem 2rem 2.75rem;
  overflow:hidden;
  border:6px solid var(--surface-2);
  box-shadow:0 2px 8px oklch(0.32 0.06 40 / .12),0 26px 50px oklch(0.32 0.06 40 / .2);
  transform:rotate(-1.2deg);
}
.contact-photo{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.contact-leaf{
  position:absolute;z-index:2;top:-1.1rem;left:-1.2rem;
  width:clamp(2.75rem, 2rem + 2vw, 3.75rem);height:auto;color:var(--primary);
  transform:rotate(-14deg);
  filter:drop-shadow(0 4px 8px oklch(0.32 0.06 40 / .22));
}

.contact-trust{
  background:var(--surface-2);
  border-radius:1.5rem 1.5rem 1.5rem 2rem;
  padding:var(--space-6);
  margin:0 0 var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-4);
}
.contact-trust-label{
  margin:0;font-family:var(--head-font);font-weight:600;color:var(--ink);
  font-size:var(--fs-h4);max-width:none;
}
.contact-trust-links{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4)}
.contact-trust-link{
  display:inline-flex;align-items:center;gap:.75rem;
  background:var(--bg);color:var(--ink);
  padding:.6rem 1.35rem .6rem .6rem;border-radius:var(--radius-pill);
  border:1.5px solid var(--border);
  font-weight:700;font-size:1.0625rem;text-decoration:none;white-space:nowrap;
  min-height:44px;
  transition:background-color var(--transition),border-color var(--transition),color var(--transition),transform var(--transition);
}
.contact-trust-link:hover,.contact-trust-link:focus-visible{
  background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-2px);
}
.contact-trust-link:active{transform:translateY(0)}
.contact-trust-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.35rem;height:2.35rem;border-radius:50%;
  background:var(--primary-wash);color:var(--primary);
  transition:background-color var(--transition),color var(--transition);
}
.contact-trust-icon svg{width:1.2rem;height:1.2rem}
.contact-trust-link:hover .contact-trust-icon,.contact-trust-link:focus-visible .contact-trust-icon{
  background:#fff;color:var(--primary-strong);
}

.form{margin-top:0;display:flex;flex-direction:column;gap:var(--space-6)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.form-field{display:flex;flex-direction:column;gap:var(--space-2)}
.form-field label{font-weight:600}
.form-field input,.form-field select,.form-field textarea{
  width:100%;background:var(--input-fill);border:1.5px solid var(--muted);
  border-radius:var(--radius);padding:.9em 1.05em;font:inherit;font-size:1rem;color:var(--ink);
  min-height:44px;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.form-field textarea{min-height:150px;resize:vertical}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:var(--body)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px oklch(0.55 0.15 35 / .25);
}
.form .btn{align-self:flex-start;margin-top:var(--space-2)}
/* inline validation message (e.g. hCaptcha not completed) — terracotta doubles
   as the brand's attention colour; hidden until JS reveals it */
.form-error{margin:0;color:var(--primary-strong);font-weight:600}

@media (max-width:640px){
  .form-row{grid-template-columns:1fr}
}

/* ---------- Footer ----------
   Warm human close, not a generic band: a deep-warm sign-off from Q
   (echoing the hero's hand-drawn leaf), tappable phone + email, then
   the tagline/copyright/legal trailing off in decreasing emphasis. */
.site-footer{
  background:var(--warm-deep);
  color:#fff;
  text-align:center;
  padding-block:var(--space-16);
}
.site-footer p{margin:0 0 var(--space-4);max-width:none}
.site-footer a{color:#fff}
/* Focus rings need their own color here: the sitewide accent blue only
   clears 2.7:1 against --warm-deep (fails the 3:1 non-text minimum). */
.site-footer :focus-visible{outline-color:#fff}

.footer-leaf{
  width:2.25rem;height:auto;color:rgba(255,255,255,.5);
  margin:0 auto var(--space-6);transform:rotate(-8deg);display:block;
}
.footer-signoff{
  font-family:var(--head-font);font-weight:600;letter-spacing:-0.01em;
  font-size:clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);line-height:1.35;
  max-width:34rem;margin:0 auto var(--space-6);color:#fff;
}
.footer-contact{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem 1.1rem;margin-bottom:var(--space-8);
}
.footer-contact a{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .2rem;margin:0;max-width:none;
  font-weight:600;font-size:1.0625rem;color:#fff;text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.45);
  transition:border-color var(--transition);
}
.footer-contact a:hover,.footer-contact a:focus-visible{border-color:#fff}
.footer-contact svg{width:1.2rem;height:1.2rem;flex:none}
.footer-contact .sep{color:rgba(255,255,255,.5);font-weight:700}
.footer-tagline{font-size:1.125rem;color:rgba(255,255,255,.92)}
.footer-copy{color:rgba(255,255,255,.85);font-size:.9375rem}
.footer-legal{margin-bottom:0}
.footer-legal a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:.2em}
.footer-legal a:hover,.footer-legal a:focus-visible{color:#fff}

/* Phone + email wrap to their own lines below ~480px — the "·" would
   otherwise strand itself at the end of the first line. */
@media (max-width:480px){
  .footer-contact .sep{display:none}
}

/* ---------- Legal / utility pages (privacy, terms, accessibility) ----------
   Phase-2: .page-hero gets the sitewide "identity seed" treatment -- a soft
   warm glow + the hand-drawn leaf, both reused verbatim from the home hero/
   about/contact moments -- instead of a bare centered h1+lead, so these
   pages read as part of the same warm system, not a leftover template page.
   Body copy stays left-aligned in .legal-content (long-form prose reads
   better left-aligned than centered) with the measure set to 70ch -- matches
   the sitewide p{max-width:70ch} convention -- for a comfortable,
   senior-legible line length. "The Short Version" (the plain-language
   TL;DR every page opens with) gets its own warm .legal-tldr panel, reusing
   the --surface-2 fill + organic-radius language already used by
   .feature-card/.qa-item, so an anxious or overwhelmed reader gets the gist
   at a glance before the numbered sections. The shared .chip component
   (warm pill + round icon badge, vocabulary reused from .feature-icon/
   .contact-trust-icon) marks the "last updated" line here, and is reused
   as-is for the 404 page's "Error 404" eyebrow below. */
.page-hero{position:relative;text-align:center;margin-bottom:var(--space-12)}
.page-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-1.5rem;left:0;right:0;bottom:-1.5rem;
  background:radial-gradient(55% 90% at 50% 10%, oklch(0.9 0.06 45 / .55), transparent 72%);
}
.page-hero>*{position:relative;z-index:1}
.page-hero-leaf{
  display:block;width:2.5rem;height:auto;color:var(--primary);
  margin:0 auto var(--space-4);transform:rotate(-10deg);
  filter:drop-shadow(0 4px 8px oklch(0.32 0.06 40 / .18));
}
.page-hero h1{margin-bottom:var(--space-6)}
.page-hero .lead{margin:0 auto;max-width:640px}

/* Shared warm pill: round icon badge + muted label. Used by .page-updated
   below and by .error-chip in the 404 section. */
.chip{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--surface-2);color:var(--muted);
  font-weight:600;font-size:.9375rem;line-height:1.2;
  padding:.5rem 1.15rem .5rem .5rem;border-radius:var(--radius-pill);
}
.chip-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--primary-wash);color:var(--primary);
}
.chip-icon svg{width:1rem;height:1rem}

.page-updated{margin-bottom:var(--space-8)}

.legal-content{max-width:70ch;margin-inline:auto}

.legal-tldr{
  background:var(--surface-2);
  border-radius:1.5rem 1.5rem 1.5rem 2rem;
  padding:var(--space-8);
  margin-bottom:var(--space-16);
}
.legal-tldr h2{margin-top:0;padding-bottom:0;border-bottom:0}
.legal-tldr p:last-child{margin-bottom:0}

.legal-content h2{margin-top:var(--space-16);padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}
.legal-content h3{margin-top:var(--space-8)}
.legal-content ul,.legal-content ol{margin:0 0 var(--space-4);padding-left:1.25em}
.legal-content li{margin-bottom:var(--space-2)}
.legal-content li:last-child{margin-bottom:0}
.legal-content ul>li::marker{color:var(--primary-strong)}

.legal-content a{
  color:var(--primary-strong);font-weight:600;
  text-decoration:underline;text-decoration-color:oklch(0.5 0.14 35 / .4);
  text-underline-offset:.18em;text-decoration-thickness:1.5px;
  transition:color var(--transition),text-decoration-color var(--transition);
}
.legal-content a:hover,.legal-content a:focus-visible{color:var(--warm-deep);text-decoration-color:currentColor}

/* Accessibility page only: "What I've Built In" restyled as a warm checklist
   -- a round primary-wash badge with a checkmark (CSS background-image, no
   markup change needed on each <li>) instead of a default disc bullet,
   echoing the feature/concern icon-badge vocabulary for a page that's
   specifically about the site's built-in accessibility affordances. */
.built-in-list{list-style:none;margin:0 0 var(--space-4);padding:0}
.built-in-list li{position:relative;padding-left:2.35rem;margin-bottom:var(--space-4)}
.built-in-list li:last-child{margin-bottom:0}
.built-in-list li::before{
  content:"";position:absolute;left:0;top:.05em;
  width:1.6rem;height:1.6rem;border-radius:50%;
  background-color:var(--primary-wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8492e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:.85rem;
}

/* ---------- 404 ---------- */
.error-page{position:relative;padding-block:var(--space-16);text-align:center}
.error-page::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-1rem;left:0;right:0;bottom:-1rem;
  background:radial-gradient(55% 85% at 50% 20%, oklch(0.9 0.06 45 / .55), transparent 72%);
}
.error-page>.container{position:relative;z-index:1}
.error-page .chip{margin-bottom:var(--space-6)}
.error-page h1{margin-bottom:var(--space-6)}
.error-page .lead{margin:0 auto var(--space-8);max-width:520px}
.error-page .btn{margin-top:var(--space-2)}
.error-page .text-sm{margin-top:var(--space-8);margin-bottom:0}
.error-page .text-sm a{
  color:var(--primary-strong);font-weight:600;
  text-decoration:underline;text-decoration-color:oklch(0.5 0.14 35 / .4);
  text-underline-offset:.18em;
  transition:color var(--transition);
}
.error-page .text-sm a:hover,.error-page .text-sm a:focus-visible{color:var(--warm-deep)}

/* ---------- Accessibility ----------
   Warm focus ring (Phase-2 polish): repointed from the old brand-blue
   accent to --primary-strong, which clears >=5:1 against every light
   surface the ring appears on (--bg, --surface, --surface-2,
   --input-fill, white) — comfortably above the 3:1 non-text minimum,
   and consistent with the terracotta hover/focus treatment already used
   sitewide (buttons, links, form fields). The footer keeps its own
   white override below, since --primary-strong doesn't clear 3:1 against
   its own --warm-deep background. */
:focus-visible{outline:2px solid var(--primary-strong);outline-offset:2px}

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