/*
  Shared styling for the static content pages in public/.

  These pages sit OUTSIDE the React app on purpose: the app renders
  client-side and its planning pages are behind authentication, so a
  crawler that does not run JavaScript sees nothing of them. wrangler
  serves a real file in dist/ directly and only falls back to the app
  for unmatched paths, so these are plain HTML with no bundle involved.

  ── This file mirrors the landing page, deliberately ──────────────────
  The landing page is React + Tailwind; these are hand-written CSS. They
  must still look like one site, so the values below are copied from what
  src/routes/index.tsx actually renders rather than invented:

    header   sticky, background/90 + blur, 1px bottom border, 48px mark,
             the two-colour "Legacy" + "Nest" wordmark, Home / Tools /
             Switch guidance, and the page's own tool as the solid primary
             button on the right (25 Sep 2026; it was "Help me get started")
    hero     the SAME washed-out wide illustration the landing page uses
             (src/assets/landing_page_hero.png -> /hero-bg.webp), laid in
             as a faint background with the subject to the right and a
             left-to-right scrim over it, headline sitting on top
    cards    rounded-2xl (1rem), white, 1px --border, and on hover the
             border warms to primary/40 with a small shadow
    footer   solid #C05621 with white text, four columns, darker bottom bar

  Colour tokens are the "Compassionate Legacy" palette from src/styles.css,
  written here as the hex equivalents of its oklch() values (the comments
  in that file give the same hexes). src/styles.css is the source of truth
  — if the brand changes there, update these to match.
*/

:root {
  --background: #fff8f5;
  --foreground: #241910;
  --surface-low: #fff1e8;
  --surface-container: #ffeadb;
  --surface-high: #f3dfd0;
  --card: #ffffff;
  --border: #e0c0b1;
  --primary: #9d4300;
  --primary-soft: #f97316;
  --muted-foreground: #584237;
  /* Darkened from #c05621 / #a8481b. On #c05621 the footer text failed WCAG
     AA: the brand line at rgba(255,255,255,.85) measured 3.76:1 and the
     column headings at .75 measured 3.26:1, against the 4.5 minimum. Nothing
     below solid white passes on that shade, so the surface had to darken.
     These now match the landing page footer exactly — keep them in sync. */
  --footer: #9a4018;
  --footer-deep: #6e2e10;

  --shell: 80rem; /* max-w-7xl */
  --prose: 48rem; /* readable measure for running text */
  --radius: 0.75rem;
  --radius-lg: 1rem; /* rounded-2xl */
  --ring: 0 0 0 3px rgba(249, 115, 22, 0.35);
  --shadow-sm: 0 1px 2px rgba(87, 46, 10, 0.06), 0 1px 3px rgba(87, 46, 10, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(87, 46, 10, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  /* iOS inflates text when a page is rotated to landscape unless this is
     pinned. The -webkit- form is the one Safari actually honours. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Long words and URLs must not force a sideways scroll on a narrow phone. */
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(157, 67, 0, 0.12);
}

a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 0.4rem;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  /* env() keeps content clear of the notch and home indicator in landscape.
     max() means the normal padding still applies where there is no inset.
     Requires viewport-fit=cover, which every page sets. */
  padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
}

/* ── Header ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 248, 245, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(224, 192, 177, 0.5);
}

/* Brand and the tool button share the first row; the Home / Tools / Switch
   guidance row wraps under them until 64rem, where all three sit on one line.
   Position: relative so the guidance panel can span the header on a phone. */
.header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.25rem;
  padding-block: 0.75rem 0.35rem;
}

/* The landing page's BrandMark (src/components/public/BrandMark.tsx): "Legacy"
   in the foreground, "Nest" in the brand orange, a raised ™, 24px beside a
   36px mark on a phone and 32px beside 48px from 40rem. */
a.brand {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--foreground);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark span {
  color: var(--primary);
}

.wordmark sup {
  font-size: 0.5em;
  line-height: 0;
  vertical-align: super;
}

/* logo-mark.png has a real alpha channel, so unlike the landing page's
   logo.jpg it needs no mix-blend-mode: multiply to fake transparency. */
a.brand img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

@media (min-width: 40rem) {
  a.brand {
    font-size: 2rem;
  }

  a.brand img {
    width: 3rem;
    height: 3rem;
  }
}

.header-nav {
  order: 3;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: -0.6rem;
  font-size: 0.9rem;
}

.header-nav > a,
.guide-switch > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.6rem;
  border-radius: 999px;
  color: rgba(36, 25, 16, 0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.header-nav > a:hover,
.header-nav > a:focus-visible,
.guide-switch > summary:hover {
  color: var(--foreground);
}

@media (min-width: 64rem) {
  .header-inner {
    flex-wrap: nowrap;
    padding-block: 0.85rem;
  }

  .header-nav {
    order: 2;
    flex-basis: auto;
    margin-left: auto;
    gap: 0.75rem;
  }
}

/* "Switch guidance" — a <details> disclosure so it works with no script. */
.guide-switch > summary {
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--foreground);
  border: 1px solid var(--border);
}

.guide-switch > summary::-webkit-details-marker {
  display: none;
}

.guide-switch > summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin: -0.2rem 0.1rem 0 0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.guide-switch[open] > summary::after {
  margin-top: 0.2rem;
  transform: rotate(-135deg);
}

.guide-switch[open] > summary,
.guide-switch > summary:focus-visible {
  background: var(--surface-low);
}

.guide-switch-panel {
  position: absolute;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  top: 100%;
  z-index: 40;
  margin-top: 0.25rem;
  padding: 0.9rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px -8px rgba(87, 46, 10, 0.25);
}

@media (min-width: 64rem) {
  .guide-switch {
    position: relative;
  }

  .guide-switch-panel {
    left: auto;
    right: 0;
    width: 21rem;
  }
}

.guide-switch-panel p {
  margin: 0 0 0.35rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.guide-switch-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-switch-panel li {
  margin: 0;
}

.guide-switch-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
  border-radius: 0.6rem;
  color: var(--foreground);
  font-weight: 500;
  text-decoration: none;
}

.guide-switch-panel a:hover,
.guide-switch-panel a:focus-visible {
  background: var(--surface-low);
}

.guide-switch-panel a[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
}

.guide-switch-panel a.guide-switch-all {
  margin-top: 0.4rem;
  border-top: 1px solid rgba(224, 192, 177, 0.6);
  border-radius: 0 0 0.6rem 0.6rem;
  color: var(--primary);
  font-weight: 600;
}

.header-actions {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 64rem) {
  .header-actions {
    order: 3;
  }
}

/* The page's own tool, named in full once there is room for it. */
.header-tool .label-short {
  display: none;
}

@media (max-width: 40rem) {
  .header-tool .label-long {
    display: none;
  }

  .header-tool .label-short {
    display: inline;
  }
}

/* 320px phones: brand + "Open tool" only fit if both give a little. */
@media (max-width: 23rem) {
  a.brand {
    font-size: 1.25rem;
    gap: 0.35rem;
  }

  a.brand img {
    width: 2rem;
    height: 2rem;
  }
}

/* Sign in sits beside the primary action, deliberately at a lower weight:
   these pages are the public, no-account half of the product, and the tools
   they open need no account at all. Hidden on narrow screens, where the
   primary action has to keep the room — it stays reachable from the footer.
   Added 11 Sep 2026 with public web V2 (review finding W02). */
.header-signin {
  display: none;
  color: rgba(36, 25, 16, 0.7);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.header-signin:hover,
.header-signin:focus-visible {
  color: var(--foreground);
}

@media (min-width: 48rem) {
  .header-signin {
    display: inline;
  }
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  /* Apple's minimum comfortable tap target. */
  min-height: 44px;
  padding: 0.7rem 1.5rem;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #8a3b00;
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.8);
  color: var(--foreground);
  border: 1px solid var(--border);
  font-weight: 500;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: #fff;
  border-color: var(--primary);
}

.btn-sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.875rem;
  min-height: 40px;
}

/* "Back to Home" now sits at the END of the page, not in the header. In the
   header it was a third control competing with the brand and the primary
   action, and on a phone it squeezed the wordmark out entirely — which is
   why "LegacyNest" had gone missing there. */
.back-home {
  display: block;
  width: fit-content;
  margin: 3rem auto 0;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.back-home:hover,
.back-home:focus-visible {
  border-color: var(--primary);
  background: var(--surface-low);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Needed for the multiply below to have anything to blend WITH. isolate
     starts a fresh stacking context whose backdrop is transparent, so
     without an explicit colour here the artwork multiplied against nothing
     and the white box stayed visible. */
  background: var(--background);
}

/* Sized to the ARTWORK, not to the hero box: height:100% + width:auto makes
   the <img> element exactly as wide as the picture it paints, and flex pins
   it to the right. That matters for the mask below — a mask is resolved in
   element coordinates, so if the element were stretched to the full hero
   width the fade would land in empty space and miss the artwork's real edge
   entirely. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* The whole illustration, uncropped — the landing page shows the complete
   shield and these pages have to match it. An earlier attempt used
   object-fit: cover, which filled the box and killed the seam but zoomed in
   and cut the top of the shield, so the same artwork read as a different,
   clumsier image than the one on the home page.

   The seam that cover was working around is handled by the mask instead. It
   cannot be handled by blending: the artwork's backdrop is not white but a
   warm cream (252,243,230 at mid-left), so mix-blend-mode: multiply against
   the page cream DARKENS that region and deepens the very edge it was meant
   to dissolve. */
.hero-art img {
  height: 100%;
  width: auto;
  max-width: none;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%);
  mask-image: linear-gradient(to right, transparent 0%, #000 46%);
}

/* The scrim is what keeps the headline readable over the artwork, and why
   the illustration can be a background here instead of a boxed image. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--background) 0%,
    rgba(255, 248, 245, 0.92) 38%,
    rgba(255, 248, 245, 0.55) 60%,
    rgba(255, 248, 245, 0) 82%
  );
}

.hero-inner {
  position: relative;
  padding-block: 2.5rem 2.75rem;
}

.hero-copy {
  max-width: 36rem;
}

/* The landing page's "The Eternal Banyan Approach" chip. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  border-radius: 999px;
  background: var(--surface-container);
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary);
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 1rem 0 0;
  max-width: 15ch;
}

.lede {
  margin: 0.85rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  max-width: 30rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* Below the point where the artwork would sit behind the text rather than
   beside it, fade it right back and let the words win. */
/* On a phone there is no room beside the headline, so the artwork moves under
   it: full width, pinned to the bottom, and faded from the top instead of
   from the left. */
@media (max-width: 48rem) {
  .hero-art {
    align-items: flex-end;
    justify-content: center;
  }

  .hero-art img {
    width: 100%;
    height: auto;
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  }

  .hero-scrim {
    background: linear-gradient(
      to bottom,
      var(--background) 0%,
      rgba(255, 248, 245, 0.82) 55%,
      rgba(255, 248, 245, 0.6) 100%
    );
  }
}

/* ── Content ──────────────────────────────────────────────────────────
   Two columns on a wide screen. Measured before changing anything: the
   prose is capped at 48rem for readability inside an 80rem shell, which
   left a dead 512px strip down the right of every desktop viewport —
   about a third of the page, empty, on every one of these pages. Widening
   the prose to fill it would have pushed the line length past 120
   characters, which is the wrong fix; the column earns its keep instead.

   Below 64rem this collapses to one column and the aside is dropped
   entirely (see .side) — on a phone its contents would only duplicate the
   closing CTA and the footer's own guidance nav. */
.content-wrap {
  display: grid;
  gap: 3.5rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .content-wrap {
    /* minmax(0,1fr), not 1fr: a bare 1fr has min-width:auto, so one long
       unbreakable string in the prose would push the grid wider than the
       shell instead of wrapping. */
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.content {
  padding-block: 0.5rem 3rem;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.side {
  display: none;
}

@media (min-width: 64rem) {
  .side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Follows the reader down a long page. 5.5rem clears the sticky
       header, which is ~4.5rem tall. */
    position: sticky;
    top: 5.5rem;
    padding-top: 0.5rem;
  }
}

/* The aside is navigation ONLY — deliberately no call to action in here.
   It briefly carried a "Start your plan" card, which was a mistake: being
   sticky, it was on screen at the same time as BOTH the hero's CTA row and
   the closing one, so a reader could see the same two buttons three times
   over (five counting the header's "Get Started"). The page now asks twice,
   at the two moments where asking makes sense — once at the top, once when
   you have finished reading — and the sidebar just helps you get somewhere
   else. */
.side-nav {
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.side-nav h2 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.75rem;
}

.side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-nav li {
  margin: 0;
}

.side-nav a {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 192, 177, 0.4);
  transition: color 0.15s ease;
}

.side-nav li:last-child a {
  border-bottom: 0;
}

.side-nav a:hover,
.side-nav a:focus-visible {
  color: var(--primary);
}

/* h2 carries a 3rem top margin to separate sections, but the first element
   here already sits below the hero's own bottom padding — stacking both left
   a ~110px dead gap under the CTAs. */
.content > :first-child {
  margin-top: 0;
}

/* Running text keeps a readable measure; the tile grids below break out
   to the full shell so they can run three and four across like the
   landing page's "Everything your child's future needs" strip. */
.content > p,
.content > h2,
.content > h3,
.content > ul:not(.grid),
.content > ol:not(.steps),
.part > p,
.part > h2,
.part > h3,
.part > ul:not(.grid),
.part > ol:not(.steps) {
  max-width: var(--prose);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0.75rem;
}

h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 0.35rem;
}

p,
li {
  color: var(--muted-foreground);
}

strong {
  color: var(--foreground);
  font-weight: 600;
}

.content > ul:not(.grid),
.part > ul:not(.grid) {
  padding-left: 1.15rem;
}

li {
  margin-bottom: 0.5rem;
}

/* ── Cards and tiles — the landing page's card vocabulary ─────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  margin: 1.75rem 0;
  max-width: var(--prose);
  box-shadow: var(--shadow-sm);
}

.card p:last-child {
  margin-bottom: 0;
}

.card h3 {
  font-size: 1rem;
}

/* The landing page marks its emphasis cards with a 4px top rule rather
   than a different fill (.legacy-card-accent-top in src/styles.css). */
.card.accent {
  border-top: 4px solid var(--primary-soft);
  background: var(--surface-low);
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.grid li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grid li:hover {
  border-color: rgba(157, 67, 0, 0.4);
  box-shadow: var(--shadow-sm);
}

.grid li p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ── Guidance page enhancements ──────────────────────────────────────
   Additive on top of .card/.grid, not a replacement for them — see the
   note above pages.css's own header comment. Referenced against the
   supplied desktop mockups (LegacyNestAndroid/resources/, outside this
   repo — they used to sit in public/ and were publicly fetchable), but the
   mockups invent specifics that are not true of this product — a fake
   "ISO 27001" badge, "Zero-Knowledge Care Crypts", named example
   families, a wrong company name and registered office. Only the
   layout/component shapes came from them; every string of text below
   is either already-published copy or the same PRIVACY_POINTS used
   throughout the app (src/lib/guide-content.ts). */

/* A card whose top border marks it as a highlighted pillar in a .grid,
   the same visual language .card.accent already uses (a 4px rule
   rather than a colour fill — see that rule's own comment). */
.grid.accented li {
  border-top: 4px solid var(--primary-soft);
}

/* The generated parent-question pages (scripts/build-question-pages.mjs)
   link their grid headings; the six hand-written guides do not, so this
   rule only ever applies there.

   Without it the heading link is a 19px-tall tap target on a phone, well
   under the 44px everyone's accessibility guidance asks for — measured on
   staging, not assumed. Padding rather than min-height so the whole
   comfortable area is genuinely clickable, not just visually tall. */
.grid li h3 a {
  display: block;
  padding: 0.7rem 0;
  margin: -0.7rem 0 0;
  min-height: 44px;
  box-sizing: border-box;
}

/* The small "11-Point Check" / "12-Point Check" style chip used on the
   residential page's safety-audit cards. */
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-container);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.5rem;
}

/* A secondary insight panel that sits beside or after the hero copy —
   the "spotlight card" pattern from the mockups' two-column heroes,
   built from .card rather than a new visual language. Content is a
   short lead-in plus a small checklist, no icon font required. */
.spotlight {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.65rem;
  box-shadow: var(--shadow-sm);
  max-width: var(--prose);
}

.spotlight h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.spotlight ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.spotlight li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
}

.spotlight li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: rgba(157, 67, 0, 0.12);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

/* A pull-quote — the visual weight the mockups give a single sentence
   worth sitting with, distinct from a plain .card. */
.quote-block {
  position: relative;
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  margin: 2rem 0;
  max-width: var(--prose);
  text-align: center;
}

.quote-block::before {
  content: "\201C";
  position: absolute;
  top: 0.25rem;
  left: 1.25rem;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(157, 67, 0, 0.15);
  font-family: Georgia, serif;
}

.quote-block blockquote {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: var(--foreground);
}

.quote-block cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

ol.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 1.5rem 0 0;
  max-width: var(--prose);
}

ol.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.35rem;
}

ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
  background: rgba(157, 67, 0, 0.1);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  /* Longhand rather than `place-items`, which older Safari ignores in
     grid containers — the digit would sit top-left instead of centred. */
  display: grid;
  align-items: center;
  justify-items: center;
}

/* ── Footer — solid #C05621, as on the landing page ───────────────── */
.site-footer {
  background: var(--footer);
  color: #fff;
  margin-top: 3rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-block: 3rem;
}

.footer-brand {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.footer-grid p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin: 0;
}

.footer-grid h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 0.9rem;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li {
  margin-bottom: 0.15rem;
}

/* display:block + padding, so the tap target is the full row rather than just
   the glyph box. These were 14-16px tall, under the 24px WCAG 2.5.8 floor. */
.footer-grid a {
  display: block;
  padding: 0.45rem 0;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.15s ease;
}

.footer-grid a:hover,
.footer-grid a:focus-visible {
  opacity: 0.75;
  text-decoration: underline;
}

.footer-grid a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
}

/* Solid white, not .85 alpha: the white/.12 wash behind this box lifts the
   effective background enough that .85 measured 4.24:1, just under AA. */
/* Selector must out-specify `.footer-grid p` (0,1,1), which would otherwise
   keep this at .85 alpha — that measured 4.24:1 against the white/.12 wash
   behind the box, just under the 4.5 AA minimum. */
.footer-grid p.footer-note {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  color: #fff;
}

.footer-bottom {
  background: var(--footer-deep);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  margin-left: 1.25rem;
  /* inline-block + padding so these clear the 24px minimum target size */
  display: inline-block;
  padding: 0.35rem 0;
}

.footer-bottom a:first-child {
  margin-left: 0;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
}

@media (max-width: 30rem) {
  .btn-primary {
    padding-inline: 0.9rem;
  }

  .cta-row .btn {
    width: 100%;
  }
}

/* Honour the OS setting. The lifts and slides here are decoration; for
   anyone who has asked for less motion they are just noise. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Marks a section that describes the signed-in account rather than the
   no-account tool this page opens. Added 11 Sep 2026: several of these pages
   listed a secure vault, medication reminders and per-person sharing scopes
   directly above a call to action that opens a tool doing none of those
   things (review findings W01/W03). The sections are true — of the account —
   so they are labelled rather than deleted. */
.section-note {
  margin: -0.5rem 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--primary);
  background: rgba(192, 86, 33, 0.06);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(36, 25, 16, 0.75);
}

/* ── Three-part guidance pages (25 Sep 2026) ─────────────────────────
   Every guide is now: 1) general guidance — the answer someone would want
   from a search or an AI assistant, useful with or without LegacyNest;
   2) what the free no-login tool does; 3) what an account adds. The parts
   are <section>s with ids so the jump links and the sidebar can reach them. */
.content > ul.page-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.page-parts li {
  margin: 0;
}

.page-parts a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.35rem 0.95rem 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.page-parts a:hover,
.page-parts a:focus-visible {
  border-color: var(--primary);
  background: var(--surface-low);
}

/* On a phone the three sit side by side as small tiles rather than three
   full-width rows that push the guidance itself off the first screen. */
@media (max-width: 40rem) {
  .content > ul.page-parts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .page-parts a {
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    height: 100%;
    padding: 0.55rem 0.35rem;
    border-radius: 0.85rem;
    font-size: 0.78rem;
    line-height: 1.25;
    text-align: center;
  }
}

.part-num {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: rgba(157, 67, 0, 0.1);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.part {
  /* Clears the sticky header when a jump link lands here. */
  scroll-margin-top: 6.5rem;
}

.part + .part {
  margin-top: 3.5rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--border);
}

.part-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
}

.part-eyebrow + h2 {
  margin-top: 0.5rem;
  font-size: clamp(1.65rem, 3.4vw, 2.15rem);
}

.part > .part-intro {
  font-size: 1.05rem;
  color: var(--foreground);
}

/* The direct answer that opens part 1 — the paragraph a search result or an
   AI assistant would quote. */
.card.answer h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
}

.card.answer p {
  color: var(--foreground);
  font-size: 1rem;
}

/* Frequently asked questions: native <details>, so each answer is in the
   document for a crawler and still opens with no script. */
.faq {
  max-width: var(--prose);
  margin: 1.25rem 0 0;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  margin-bottom: 0.6rem;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--foreground);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--primary);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details > div {
  padding: 0 1rem 0.9rem;
}

.faq details p {
  margin: 0 0 0.6rem;
}

.faq details p:last-child {
  margin-bottom: 0;
}

.source-note {
  font-size: 0.85rem;
}

/* ── The guidance hub (/guidance/) ───────────────────────────────────
   Six guides as a 3×2 card grid, the same shape as /tools: one column on a
   phone, two from 40rem, three from 64rem. The heading link is stretched over
   the whole card, so there is one real anchor per card and no nested links. */
.hub-intro {
  padding-block: 2.25rem 0.5rem;
}

.hub-intro h1 {
  max-width: 22ch;
}

.hub-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hub-grid > li {
  position: relative;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hub-grid > li:hover,
.hub-grid > li:focus-within {
  border-color: rgba(157, 67, 0, 0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.hub-grid img {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 0.75rem;
  object-fit: cover;
}

.hub-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hub-card-body h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.hub-card-body h2 a {
  color: var(--foreground);
  text-decoration: none;
}

.hub-card-body h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.hub-card-body h2 a:focus-visible {
  box-shadow: none;
}

.hub-card-body h2 a:focus-visible::after {
  box-shadow: var(--ring);
}

.hub-card-body p {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.hub-card-cue {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}

.hub-parts {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.hub-parts li {
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.hub-parts li p {
  margin: 0;
  font-size: 0.9rem;
}