/* ==========================================================================
   Amelio Services — site styles
   Layout concept: "Bloom". The logo's nine petal colors color-code the site's
   sections and show progress (journey steps, life areas). Content sits on a
   clean white page with soft tinted bands; key cards borrow the petal's
   pointed-corner shape. Type is rounded and friendly for headings (Fredoka)
   and built for legibility in body copy (Atkinson Hyperlegible).
   ========================================================================== */

:root {
  /* Color: neutrals */
  --paper: #ffffff;
  --band: #f1f7f5;
  --band-2: #f3f4fb;
  --surface: #ffffff;
  --surface-2: #f7faf9;
  --ink: #13232b;
  --ink-2: #3b4e59;
  --ink-3: #56676f;
  --line: #d6e2df;
  --line-strong: #a7bcb8;
  --shadow: 0 1px 2px rgba(19, 35, 43, .06), 0 8px 24px rgba(19, 35, 43, .07);

  /* Color: brand (from the wordmark gradient) */
  --green: #05683d;
  --teal: #08705f;
  --blue: #1b5ca2;
  --indigo: #29298e;
  --action: #0a6b57;
  --action-hover: #075646;
  --on-action: #ffffff;
  --link: #1b5ca2;
  --focus: #29298e;
  --focus-halo: #ffc20e;

  /* Color: petals (decorative fills) */
  --petal-yellow: #ffc20e;
  --petal-orange: #ff7a12;
  --petal-red: #ec2227;
  --petal-magenta: #ca1a93;
  --petal-purple: #6f2da1;
  --petal-indigo: #34359b;
  --petal-blue: #0a89da;
  --petal-sky: #1cb3e5;
  --petal-green: #7bbe2b;

  /* Text-safe petal inks and soft tints */
  --yellow-ink: #765600;  --yellow-tint: #fff4cc;
  --orange-ink: #9a4300;  --orange-tint: #ffe9d6;
  --red-ink: #a3171b;     --red-tint: #fce2e2;
  --magenta-ink: #8e1167; --magenta-tint: #fadff0;
  --purple-ink: #5b2486;  --purple-tint: #eee4f6;
  --indigo-ink: #2d2e86;  --indigo-tint: #e5e5f6;
  --blue-ink: #0b5f96;    --blue-tint: #dceffb;
  --sky-ink: #08678a;     --sky-tint: #dbf3fa;
  --green-ink: #3e690e;   --green-tint: #e9f5da;

  /* Semantic */
  --ok-ink: #1f6a2a;   --ok-tint: #e3f4e3;
  --warn-ink: #8a4b00; --warn-tint: #fff0d9;
  --bad-ink: #a3171b;  --bad-tint: #fce2e2;

  /* Type */
  --font-display: "Fredoka", "Nunito", "Varela Round", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif;
  --step--1: .889rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.44rem;
  --step-3: 1.728rem;
  --step-4: 2.074rem;
  --step-5: 2.488rem;
  --step-hero: clamp(2.1rem, 1.3rem + 3vw, 3.2rem);
  --leading: 1.6;
  --measure: 68ch;
  --letter: normal;
  --word: normal;

  /* Space & shape */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --petal-corner: 26px 6px 26px 6px; /* pointed corners like the logo's petals */
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 84px;

  /* Logo swap (theme-aware) */
  --logo-light: inline-block;
  --logo-dark: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1a1f; --band: #12242a; --band-2: #15192e; --surface: #142229; --surface-2: #182a31;
    --ink: #e9f1f0; --ink-2: #b9c9cc; --ink-3: #97aaae; --line: #263a40; --line-strong: #3c565d;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --green: #62cf9b; --teal: #4cc8b6; --blue: #8cbaf3; --indigo: #b1b2f7;
    --action: #4fd1a5; --action-hover: #79e0bd; --on-action: #06241b; --link: #8cbaf3; --focus: #ffd25c; --focus-halo: #0e1a1f;
    --yellow-ink: #ffd25c;  --yellow-tint: rgba(255, 194, 14, .14);
    --orange-ink: #ffa45e;  --orange-tint: rgba(255, 122, 18, .15);
    --red-ink: #ff8e90;     --red-tint: rgba(236, 34, 39, .16);
    --magenta-ink: #f287cf; --magenta-tint: rgba(202, 26, 147, .18);
    --purple-ink: #cda3ee;  --purple-tint: rgba(111, 45, 161, .26);
    --indigo-ink: #b1b2f7;  --indigo-tint: rgba(52, 53, 155, .32);
    --blue-ink: #7fc6f4;    --blue-tint: rgba(10, 137, 218, .18);
    --sky-ink: #7fd8f4;     --sky-tint: rgba(28, 179, 229, .16);
    --green-ink: #aedd72;   --green-tint: rgba(123, 190, 43, .16);
    --ok-ink: #8fe39b; --ok-tint: rgba(76, 175, 80, .16);
    --warn-ink: #ffc46b; --warn-tint: rgba(255, 152, 0, .16);
    --bad-ink: #ff8e90; --bad-tint: rgba(236, 34, 39, .16);
    --logo-light: none; --logo-dark: inline-block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1a1f; --band: #12242a; --band-2: #15192e; --surface: #142229; --surface-2: #182a31;
  --ink: #e9f1f0; --ink-2: #b9c9cc; --ink-3: #97aaae; --line: #263a40; --line-strong: #3c565d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --green: #62cf9b; --teal: #4cc8b6; --blue: #8cbaf3; --indigo: #b1b2f7;
  --action: #4fd1a5; --action-hover: #79e0bd; --on-action: #06241b; --link: #8cbaf3; --focus: #ffd25c; --focus-halo: #0e1a1f;
  --yellow-ink: #ffd25c;  --yellow-tint: rgba(255, 194, 14, .14);
  --orange-ink: #ffa45e;  --orange-tint: rgba(255, 122, 18, .15);
  --red-ink: #ff8e90;     --red-tint: rgba(236, 34, 39, .16);
  --magenta-ink: #f287cf; --magenta-tint: rgba(202, 26, 147, .18);
  --purple-ink: #cda3ee;  --purple-tint: rgba(111, 45, 161, .26);
  --indigo-ink: #b1b2f7;  --indigo-tint: rgba(52, 53, 155, .32);
  --blue-ink: #7fc6f4;    --blue-tint: rgba(10, 137, 218, .18);
  --sky-ink: #7fd8f4;     --sky-tint: rgba(28, 179, 229, .16);
  --green-ink: #aedd72;   --green-tint: rgba(123, 190, 43, .16);
  --ok-ink: #8fe39b; --ok-tint: rgba(76, 175, 80, .16);
  --warn-ink: #ffc46b; --warn-tint: rgba(255, 152, 0, .16);
  --bad-ink: #ff8e90; --bad-tint: rgba(236, 34, 39, .16);
  --logo-light: none; --logo-dark: inline-block;
  color-scheme: dark;
}

/* High contrast (reading tools) */
:root[data-contrast="high"] {
  --band: var(--paper); --band-2: var(--paper); --surface-2: var(--paper);
  --ink-2: var(--ink); --ink-3: var(--ink); --line: var(--ink); --line-strong: var(--ink);
  --shadow: none;
}
/* High contrast follows the color mode the page is actually showing */
:root[data-contrast="high"][data-theme="light"] { --ink: #000; --paper: #fff; --surface: #fff; --link: #0b3c8c; --action: #00452f; }
@media (prefers-color-scheme: light) {
  :root[data-contrast="high"]:not([data-theme="dark"]) { --ink: #000; --paper: #fff; --surface: #fff; --link: #0b3c8c; --action: #00452f; }
}
:root[data-contrast="high"][data-theme="dark"] { --ink: #fff; }
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) { --ink: #fff; }
}

/* Reading preferences */
:root { font-size: 112.5%; }
@media (max-width: 640px) { :root { font-size: 106.25%; } }
:root[data-text="2"] { font-size: 125%; }
:root[data-text="3"] { font-size: 140%; }
:root[data-text="4"] { font-size: 160%; }
:root[data-spacing="wide"] { --leading: 1.9; --letter: .04em; --word: .12em; }

/* ---------- Base ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading);
  letter-spacing: var(--letter);
  word-spacing: var(--word);
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, ul, ol, dl { margin: 0; }
p, li { max-width: var(--measure); }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: .35em; }
strong { font-weight: 700; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:root[data-links="underline"] a { text-decoration: underline !important; text-decoration-thickness: .14em !important; }
:root[data-contrast="high"] a { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
small, .small { font-size: var(--step--1); }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: 6px;
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
  background: var(--ink); color: var(--paper); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.icon-lg { width: 1.75em; height: 1.75em; }
.icon-xl { width: 2.4em; height: 2.4em; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 880px; }
.band { background: var(--band); }
.band-2 { background: var(--band-2); }
.section { padding-block: var(--space-8); }
.section-tight { padding-block: var(--space-7); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-s { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-l { display: flex; flex-direction: column; gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.grid { display: grid; gap: var(--space-5); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.split { display: grid; gap: var(--space-7); grid-template-columns: 1fr; align-items: start; }
.split > * { min-width: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .split-rev { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .split-side { grid-template-columns: 17rem minmax(0, 1fr); }
}
.section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); max-width: 46rem; }
.section-head p { color: var(--ink-2); font-size: var(--step-1); }
.lead { font-size: var(--step-1); color: var(--ink-2); max-width: 44rem; }

/* Section color coding: set --c (petal), --c-ink (text), --c-tint (soft bg) */
.c-yellow  { --c: var(--petal-yellow);  --c-ink: var(--yellow-ink);  --c-tint: var(--yellow-tint); }
.c-orange  { --c: var(--petal-orange);  --c-ink: var(--orange-ink);  --c-tint: var(--orange-tint); }
.c-red     { --c: var(--petal-red);     --c-ink: var(--red-ink);     --c-tint: var(--red-tint); }
.c-magenta { --c: var(--petal-magenta); --c-ink: var(--magenta-ink); --c-tint: var(--magenta-tint); }
.c-purple  { --c: var(--petal-purple);  --c-ink: var(--purple-ink);  --c-tint: var(--purple-tint); }
.c-indigo  { --c: var(--petal-indigo);  --c-ink: var(--indigo-ink);  --c-tint: var(--indigo-tint); }
.c-blue    { --c: var(--petal-blue);    --c-ink: var(--blue-ink);    --c-tint: var(--blue-tint); }
.c-sky     { --c: var(--petal-sky);     --c-ink: var(--sky-ink);     --c-tint: var(--sky-tint); }
.c-green   { --c: var(--petal-green);   --c-ink: var(--green-ink);   --c-tint: var(--green-tint); }

/* Eyebrow label with a petal marker */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body); font-weight: 700; font-size: var(--step--1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink, var(--teal));
}
.eyebrow::before {
  content: ""; width: .8em; height: 1.15em; flex: none;
  background: var(--c, var(--petal-green));
  border-radius: 100% 0 100% 0 / 100% 0 100% 0;
  transform: rotate(-20deg);
}

/* ---------- Header ---------- */
.utility {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.utility .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); }
.utility nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.utility nav li + li { margin: 0; }
.utility a { color: var(--ink-2); text-decoration: none; font-weight: 700; }
.utility a:hover { color: var(--ink); text-decoration: underline; }
.utility .util-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); padding-block: var(--space-2); }
.brand { display: inline-flex; align-items: center; flex: none; border-radius: 10px; }
.brand img { height: 64px; width: auto; }
.brand .logo-light { display: var(--logo-light); }
.brand .logo-dark { display: var(--logo-dark); }
@media (max-width: 640px) { .brand img { height: 52px; } :root { --header-h: 70px; } }

.primary-nav { margin-left: auto; }
.primary-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-1); align-items: center; }
.primary-nav li + li { margin: 0; }
.primary-nav a {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .55em .75em; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-weight: 700;
  border-bottom: 3px solid transparent;
}
.primary-nav a:hover { background: var(--c-tint, var(--band)); }
.primary-nav a[aria-current="page"] { background: var(--c-tint); box-shadow: inset 0 -3px 0 var(--c); border-radius: 12px 12px 4px 4px; }
.primary-nav a .dot { width: .55em; height: .8em; border-radius: 100% 0 100% 0 / 100% 0 100% 0; background: var(--c); transform: rotate(-20deg); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.site-header .menu-toggle { display: none; }

@media (max-width: 1239px) {
  .primary-nav { display: none; }
  .site-header .menu-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }
  .site-header.menu-open .primary-nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: calc(100vh - var(--header-h)); overflow: auto;
  }
  .site-header.menu-open .primary-nav ul { flex-direction: column; align-items: stretch; padding: var(--space-3) var(--gutter) var(--space-5); gap: var(--space-2); }
  .site-header.menu-open .primary-nav a { font-size: var(--step-1); padding: .8em 1em; background: var(--surface-2); border: 1px solid var(--line); }
}
@media (max-width: 480px) { .header-actions .btn-get-started .label-long { display: none; } }

/* Reading tools panel */
.reading-panel {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.reading-panel .wrap { padding-block: var(--space-5); display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.reading-panel h2 { font-size: var(--step-1); grid-column: 1 / -1; display: flex; align-items: center; gap: .5em; }
.pref-group { display: flex; flex-direction: column; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.pref-group legend, .pref-group .pref-label { font-weight: 700; padding: 0; margin-bottom: var(--space-2); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.seg button {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: .5em .9em; min-height: 44px; border-radius: 12px;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reading-panel .panel-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }

/* ---------- The lightbulb (draft 10, item 36): light and dark colors as a bulb on a pull chain ----------
   Lit = light colors, off = dark colors, so the bulb always shows the state the site is in. The small one lives in
   the utility bar on every page; the big one in the Accessibility panel, next to "Match my device". Outlines are
   currentColor so the off bulb reads on a dark page too. */
.bulb { display: inline-block; width: 1.5em; aspect-ratio: 64 / 100; vertical-align: middle; flex: none; color: inherit; }
.bulb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bulb-cord { stroke: currentColor; stroke-width: 3; opacity: .7; }
.bulb-cap { fill: #9aa3ad; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.bulb-glass { fill: color-mix(in srgb, currentColor 14%, transparent); stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; transition: fill .35s; }
.bulb-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .35; }
.bulb-fil { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .55; transition: stroke .35s, opacity .35s; }
.bulb-glow { fill: #ffd34f; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .35s; }
.bulb-beads { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-dasharray: 0 4.4; stroke-linecap: round; opacity: .8; }
.bulb-tab { fill: #9aa3ad; stroke: currentColor; stroke-width: 1.5; }
.bulb-chain { transform-box: fill-box; transform-origin: top center; }
.is-lit .bulb-glass { fill: #ffd34f; stroke: #23180f; }
.is-lit .bulb-shine { opacity: .75; }
.is-lit .bulb-fil { stroke: #fff6c2; opacity: 1; filter: drop-shadow(0 0 2px #ffb300); }
.is-lit .bulb-glow { opacity: .5; animation: bulb-breathe 3.8s ease-in-out infinite; }
@keyframes bulb-breathe { 50% { opacity: .28; transform: scale(.92); } }
.is-pulled .bulb-chain { animation: bulb-pull .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bulb-pull { 35% { transform: translateY(8px); } }
.bulb-btn { gap: .35em; }
.bulb-btn .bulb { width: 1.35em; margin-top: -.15em; }
.bulb-btn:hover .bulb-chain, .bulb-btn:focus-visible .bulb-chain { animation: bulb-sway 2.6s ease-in-out infinite; }
@keyframes bulb-sway { 50% { transform: translateY(3px); } }
.bulb-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.bulb-pull { display: inline-flex; align-items: center; gap: var(--space-3); padding: .4em .9em .4em .5em; min-height: 44px; border-radius: 14px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.bulb-pull .bulb { width: 2.6em; }
.bulb-pull .bulb-state { display: flex; flex-direction: column; line-height: 1.2; }
.bulb-pull .bulb-state b { font-size: var(--step-0); }
.bulb-pull .bulb-state small { color: var(--ink-2); font-size: var(--step--1, .85em); }
.bulb-pull:hover, .bulb-pull:focus-visible { border-color: var(--ink); }
.bulb-pull:hover .bulb-chain, .bulb-pull:focus-visible .bulb-chain { animation: bulb-sway 2.6s ease-in-out infinite; }
.bulb-pull:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .is-lit .bulb-glow, .is-pulled .bulb-chain, .bulb-btn:hover .bulb-chain, .bulb-pull:hover .bulb-chain, .bulb-btn:focus-visible .bulb-chain, .bulb-pull:focus-visible .bulb-chain { animation: none; } .bulb-glass, .bulb-fil, .bulb-glow { transition: none; } }
:root[data-motion="reduce"] :is(.is-lit .bulb-glow, .is-pulled .bulb-chain, .bulb-btn:hover .bulb-chain, .bulb-pull:hover .bulb-chain, .bulb-btn:focus-visible .bulb-chain, .bulb-pull:focus-visible .bulb-chain) { animation: none; }

/* Listen bar */
.listen-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--ink); color: var(--paper);
  padding: .6em .7em .6em 1.1em; border-radius: 999px; box-shadow: var(--shadow);
  max-width: calc(100% - 32px);
}
.listen-bar .btn { min-height: 40px; }
.reading-now { background: var(--yellow-tint); box-shadow: 0 0 0 6px var(--yellow-tint); border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .65em 1.15em;
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  border-radius: 14px; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); color: var(--on-action); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--band); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-quiet:hover { background: var(--band); border-color: var(--ink-3); }
.btn-ghost { background: transparent; color: inherit; border-color: transparent; }
.btn-ghost:hover { background: rgba(127, 127, 127, .12); }
.btn-small { min-height: 40px; padding: .4em .8em; font-size: var(--step--1); border-radius: 11px; }
.btn-large { min-height: 56px; padding: .8em 1.4em; font-size: var(--step-1); border-radius: 16px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .65; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Hero (home) ---------- */
.hero { padding-block: var(--space-7) var(--space-8); overflow: hidden; }
.hero .wrap { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero h1 { font-size: var(--step-hero); font-weight: 600; line-height: 1.08; }
.hero h1 .hl { color: var(--teal); }
.hero .lead { font-size: var(--step-1); }
.hero-points { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--ink-2); font-weight: 700; }
.hero-points li { display: inline-flex; align-items: center; gap: .45em; margin: 0; }
.hero-points .icon { color: var(--teal); }

/* The Bloom (interactive life areas) */
.bloom { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.bloom svg.bloom-art { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.bloom .petal-btn { cursor: pointer; }
.bloom .petal-shape { transition: transform .25s ease, filter .25s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.bloom .petal-btn:hover .petal-shape,
.bloom .petal-btn[aria-pressed="true"] .petal-shape { transform: scale(1.09); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.bloom .petal-btn:focus { outline: none; }
.bloom .petal-btn:focus-visible .petal-ring { stroke: var(--focus); stroke-width: 5; }
.bloom .petal-icon { color: #fff; pointer-events: none; }
.bloom-caption {
  width: 100%; max-width: 560px; min-height: 9.5rem;
  background: var(--surface); border: 2px solid var(--c, var(--line)); border-radius: var(--petal-corner);
  padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2);
}
.bloom-caption h3 { font-size: var(--step-1); display: flex; align-items: center; gap: .5em; color: var(--c-ink, var(--ink)); }
.bloom-caption .svc-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .bloom.animate .petal-grow { animation: petal-in .6s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 70ms); transform-box: fill-box; transform-origin: 50% 100%; }
}
@keyframes petal-in { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Cards & blocks ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.card h3 { font-size: var(--step-2); }
.card-link { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.card-link:hover { border-color: var(--c, var(--line-strong)); box-shadow: var(--shadow); transform: translateY(-2px); }
.card .more { margin-top: auto; font-weight: 700; color: var(--c-ink, var(--link)); display: inline-flex; align-items: center; gap: .35em; }

/* Audience doors */
.doors { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.door {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--c-tint); border-radius: var(--petal-corner);
  color: var(--ink); text-decoration: none; border: 2px solid transparent;
  transition: border-color .15s ease, transform .15s ease;
}
.door:hover { border-color: var(--c); transform: translateY(-3px); }
.door .door-icon {
  width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
  background: var(--c); color: #fff; border-radius: 100% 6px 100% 6px;
}
.door .door-icon .icon { width: 1.7rem; height: 1.7rem; }
.door h3 { font-size: var(--step-2); }
.door p { color: var(--ink-2); }
.door .go { margin-top: auto; font-weight: 700; color: var(--c-ink); display: inline-flex; align-items: center; gap: .4em; }

/* Service panel */
.service-panel {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--petal-corner);
  background: var(--surface); border: 2px solid var(--c); position: relative;
}
.service-panel .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.service-panel h3 { font-size: var(--step-3); }
.service-panel ul { display: grid; gap: .3em; }

/* Chips & badges */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .75em; border-radius: 999px;
  background: var(--c-tint, var(--band)); color: var(--c-ink, var(--ink));
  font-weight: 700; font-size: var(--step--1); line-height: 1.3;
}
.chip-outline { background: transparent; border: 1.5px solid var(--line-strong); color: var(--ink-2); }
.badge {
  display: inline-flex; align-items: center; gap: .35em; font-size: var(--step--1); font-weight: 700;
  padding: .15em .6em; border-radius: 8px; background: var(--band-2); color: var(--indigo-ink); font-variant-numeric: tabular-nums;
}
.city-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.city-list li { margin: 0; }

/* In short (Easy Read summary) */
.in-short {
  display: grid; gap: var(--space-4);
  background: var(--c-tint, var(--band)); border-radius: var(--petal-corner);
  padding: var(--space-5) var(--space-6);
}
.in-short-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.in-short h2 { font-size: var(--step-2); }
.in-short ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.in-short li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--space-3); align-items: center; font-size: var(--step-1); margin: 0; max-width: none; }
.in-short li .ico {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  background: var(--surface); color: var(--c-ink, var(--teal)); border-radius: 100% 6px 100% 6px;
}

/* Steps (real sequences only) */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-4); }
.steps > li {
  counter-increment: step; position: relative; margin: 0; max-width: none;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); align-items: start;
}
.steps > li::before {
  content: counter(step); width: 3rem; height: 3rem; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  background: var(--c, var(--petal-green)); color: #fff; border-radius: 100% 8px 100% 8px;
}
.steps h3 { font-size: var(--step-1); margin-bottom: .2em; }
.steps p { color: var(--ink-2); }
.steps-horizontal { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.steps-horizontal > li { grid-template-columns: 1fr; }

/* Petal-colored step sequence (each li sets its own color class) */
.steps.petals > li::before { background: var(--c); }

/* Callouts */
.callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-m);
  background: var(--band-2); border-left: 6px solid var(--indigo);
}
.callout > .icon { color: var(--indigo); margin-top: .15em; width: 1.5rem; height: 1.5rem; }
.callout-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.callout h3, .callout h4 { font-size: var(--step-1); }
.callout.ok { background: var(--ok-tint); border-left-color: var(--ok-ink); }
.callout.ok > .icon { color: var(--ok-ink); }
.callout.warn { background: var(--warn-tint); border-left-color: var(--warn-ink); }
.callout.warn > .icon { color: var(--warn-ink); }
.callout.safety { background: var(--bad-tint); border-left-color: var(--bad-ink); }
.callout.safety > .icon { color: var(--bad-ink); }

/* Key/value lists (e.g., service facts) */
.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 700; color: var(--ink-2); }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts > div { grid-template-columns: 1fr; gap: var(--space-1); } }

/* FAQ */
.faq { display: grid; gap: var(--space-3); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--space-4) var(--space-5);
  font-weight: 700; font-size: var(--step-1); display: flex; justify-content: space-between; gap: var(--space-4); align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform .2s ease; color: var(--ink-3); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); color: var(--ink-2); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: .7em .9em; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; background: var(--surface-2); color: var(--ink-2); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Page header (inner pages) */
.page-hero { padding-block: var(--space-7) var(--space-6); background: linear-gradient(180deg, var(--c-tint, var(--band)) 0%, var(--paper) 100%); }
.page-hero .wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.page-hero h1 { font-size: var(--step-5); max-width: 22ch; }
.page-hero .lead { font-size: var(--step-1); }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; font-size: var(--step--1); color: var(--ink-2); }
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: .4em; }
.breadcrumbs li + li::before { content: "›"; color: var(--ink-3); }
.breadcrumbs a { color: var(--ink-2); }

/* Sticky in-page table of contents */
.toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-2); }
.toc h2 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }
.toc ol { list-style: none; padding: 0; display: grid; gap: .15rem; border-left: 3px solid var(--line); }
.toc li { margin: 0; }
.toc a { display: block; padding: .35em .9em; color: var(--ink-2); text-decoration: none; border-left: 3px solid transparent; margin-left: -3px; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--c, var(--teal)); background: var(--c-tint, var(--band)); }
@media (max-width: 959px) { .toc { position: static; } }

.prose { display: flex; flex-direction: column; gap: var(--space-4); }
.prose h2 { margin-top: var(--space-6); font-size: var(--step-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-3); font-size: var(--step-2); }
.prose .plain { font-size: var(--step-1); font-weight: 700; color: var(--ink); }
.prose ul, .prose ol { display: grid; gap: .35em; }
.prose li + li { margin-top: 0; }
.source-note { font-size: var(--step--1); color: var(--ink-2); }

/* Tool cards */
.tool-card { position: relative; }
.tool-icon {
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 14px;
  background: var(--c-tint); color: var(--c-ink);
}
.tool-card .who { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Form embeds */
.form-embed { display: flex; flex-direction: column; gap: var(--space-3); }
.form-embed iframe { width: 100%; border: 0; border-radius: var(--radius-m); background: #fff; min-height: 480px; }
.form-card {
  display: grid; gap: var(--space-4); grid-template-columns: auto minmax(0, 1fr); align-items: start;
  padding: var(--space-5); border-radius: var(--petal-corner); background: var(--surface); border: 2px dashed var(--line-strong);
}
.form-card .form-icon { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; background: var(--action); color: var(--on-action); border-radius: 100% 8px 100% 8px; }
.form-fallback { font-size: var(--step--1); color: var(--ink-2); }

/* Contact strip */
.contact-line { display: inline-flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.copy-btn { font: inherit; font-size: var(--step--1); font-weight: 700; padding: .25em .6em; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 32px; }
.copy-btn:hover { background: var(--band); }

/* Promise list */
.promises { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.promise { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 4px solid var(--c); }
.promise h3 { font-size: var(--step-1); display: flex; gap: .5em; align-items: center; }
.promise h3 .icon { color: var(--c-ink); }
.promise p { color: var(--ink-2); }

/* CTA band */
.cta-band { background: var(--ink); color: var(--paper); border-radius: var(--radius-l); padding: var(--space-7) var(--space-6); display: grid; gap: var(--space-5); position: relative; overflow: hidden; }
.cta-band h2 { color: var(--paper); font-size: var(--step-4); max-width: 22ch; }
.cta-band p { color: color-mix(in srgb, var(--paper) 82%, var(--ink)); font-size: var(--step-1); max-width: 40rem; }
.cta-band .btn-secondary { background: transparent; color: var(--paper); border-color: var(--paper); }
.cta-band .btn-secondary:hover { background: rgba(255, 255, 255, .12); }
.cta-band .btn-primary { background: var(--petal-yellow); color: #1a1400; }
.cta-band .btn-primary:hover { background: #ffd34d; color: #1a1400; }
.cta-band .petal-deco { position: absolute; right: -40px; bottom: -60px; width: 340px; opacity: .9; pointer-events: none; }
@media (max-width: 720px) { .cta-band .petal-deco { width: 220px; right: -60px; bottom: -70px; opacity: .45; } }

/* Team */
.team-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.person { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border-radius: var(--petal-corner); background: var(--surface); border: 1px solid var(--line); }
.person .avatar { width: 6rem; height: 6rem; flex: none; border-radius: 100% 10px 100% 10px; display: grid; place-items: center; font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; background: var(--c-tint); color: var(--c-ink); overflow: hidden; }
.person .avatar img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: var(--step-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-2); border-top: 1px solid var(--line); margin-top: var(--space-8); }
.site-footer .wrap { padding-block: var(--space-7) var(--space-5); display: grid; gap: var(--space-6); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.footer-grid h2 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: var(--space-3); }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: .35em; }
.footer-grid li { margin: 0; }
.footer-grid a { color: var(--ink); text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-brand img { height: 84px; width: auto; }
.footer-brand .logo-light { display: var(--logo-light); }
.footer-brand .logo-dark { display: var(--logo-dark); }
.footer-safety { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-2); font-size: var(--step--1); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; font-size: var(--step--1); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--space-4); }

/* ---------- Form controls (tools) ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field label, .field .label { font-weight: 700; }
.field .help { font-size: var(--step--1); color: var(--ink-2); }
input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="date"], input[type="time"], select, textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: 12px;
  padding: .6em .8em; min-height: 48px; width: 100%;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 700; padding: 0; }
.check-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.check-list li { margin: 0; max-width: none; }
.check {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--space-3); align-items: start;
  padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line);
  cursor: pointer;
}
.check:hover { border-color: var(--line-strong); }
.check input { width: 1.4rem; height: 1.4rem; margin: .15em 0 0; accent-color: var(--action); }
.check:has(input:checked) { border-color: var(--action); background: color-mix(in srgb, var(--action) 8%, var(--surface)); }
.choice-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice-chips label { position: relative; }
.choice-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-chips span {
  display: inline-flex; align-items: center; gap: .45em; cursor: pointer;
  padding: .5em .9em; min-height: 44px; border-radius: 999px; border: 2px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-weight: 700;
}
.choice-chips input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice-chips input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Tool layouts ---------- */
.tool-shell { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
.tool-shell > * { min-width: 0; }
@media (min-width: 1000px) { .tool-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tool-shell.wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.panel h2 { font-size: var(--step-2); }
.sticky-panel { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
@media (max-width: 999px) { .sticky-panel { position: static; } }
.example-flag { display: inline-flex; align-items: center; gap: .4em; font-size: var(--step--1); font-weight: 700; color: var(--warn-ink); background: var(--warn-tint); padding: .2em .7em; border-radius: 999px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.status { min-height: 1.5em; font-weight: 700; color: var(--ok-ink); }
.meter { height: 14px; background: var(--band); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.meter > span { display: block; height: 100%; background: var(--action); border-radius: 999px; transition: width .4s ease; }
.meter.over > span { background: var(--bad-ink); }

/* Journey */
.journey-bloom { width: 100%; max-width: 520px; margin-inline: auto; display: block; }
.journey-steps { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.journey-steps > li { margin: 0; max-width: none; }
.jstep { border: 2px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.jstep[data-done="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.jstep summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); }
.jstep summary::-webkit-details-marker { display: none; }
.jstep .jnum { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 100% 8px 100% 8px; background: var(--c-tint); color: var(--c-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); }
.jstep[data-done="true"] .jnum { background: var(--c); color: #fff; }
.jstep .jtitle { font-weight: 700; font-size: var(--step-1); }
.jstep .jprog { font-size: var(--step--1); color: var(--ink-2); white-space: nowrap; }
.jstep .jbody { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

/* Spending plan */
.plan-lines { display: grid; gap: var(--space-3); }
.plan-line { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(7.5rem, auto); align-items: end; padding: var(--space-4); border: 1.5px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.plan-line > div.field:first-of-type { grid-column: 1 / -1; }
.plan-line .line-total { font-weight: 700; font-variant-numeric: tabular-nums; align-self: center; }
@media (max-width: 760px) { .plan-line { grid-template-columns: 1fr 1fr; } }
.cat-bars { display: grid; gap: var(--space-3); }
.cat-bar { display: grid; gap: var(--space-1); }
.cat-bar .row { display: flex; justify-content: space-between; gap: var(--space-3); font-variant-numeric: tabular-nums; }
.big-figure { font-family: var(--font-display); font-size: var(--step-4); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* Profile (one-page) */
.profile-sheet { background: #fff; color: #13232b; border-radius: var(--radius-l); border: 1px solid var(--line); padding: var(--space-6); display: grid; gap: var(--space-4); box-shadow: var(--shadow); }
.profile-sheet h2 { color: #13232b; font-size: var(--step-3); }
.profile-sheet .pname { display: flex; align-items: center; gap: var(--space-3); }
.profile-sheet .pbox { border-radius: var(--petal-corner); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.profile-sheet .pbox h3 { font-size: var(--step-1); color: #13232b; }
.profile-sheet .pbox p, .profile-sheet .pbox li { color: #13232b; white-space: pre-line; }
.profile-sheet .p-yellow { background: #fff4cc; } .profile-sheet .p-blue { background: #dcEffb; } .profile-sheet .p-green { background: #e9f5da; }
.profile-sheet .p-magenta { background: #fadff0; } .profile-sheet .p-purple { background: #eee4f6; } .profile-sheet .p-orange { background: #ffe9d6; }
.profile-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Activity explorer */
.idea-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.idea { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--petal-corner); background: var(--surface); border: 1.5px solid var(--line); }
.idea .idea-top { display: flex; align-items: center; gap: var(--space-3); }
.idea .idea-icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 100% 6px 100% 6px; background: var(--c-tint); color: var(--c-ink); flex: none; }
.idea h3 { font-size: var(--step-1); }
.idea .meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.idea .where { font-size: var(--step--1); color: var(--ink-2); }

/* Glossary */
.glossary-list { display: grid; gap: var(--space-3); }
.term { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-2); }
.term-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.term h3 { font-size: var(--step-1); }
.term .also { font-size: var(--step--1); color: var(--ink-2); }
.az { display: flex; flex-wrap: wrap; gap: .3rem; }
.az a, .az span { min-width: 2.2rem; min-height: 2.2rem; display: grid; place-items: center; border-radius: 8px; font-weight: 700; text-decoration: none; }
.az a { background: var(--band); color: var(--ink); }
.az a:hover { background: var(--ink); color: var(--paper); }
.az span { color: var(--ink-3); }

/* Fit check */
.quiz-q { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.quiz-q h3 { font-size: var(--step-1); }
.result-card { padding: var(--space-5); border-radius: var(--petal-corner); background: var(--c-tint); display: grid; gap: var(--space-3); }

/* Resource library */
.filters { display: grid; gap: var(--space-4); }
.resource-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.resource { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); border-top: 5px solid var(--c, var(--line-strong)); }
.resource h3 { font-size: var(--step-1); }
.resource .r-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.resource .r-phone { font-weight: 700; font-variant-numeric: tabular-nums; }
.resource .r-link { margin-top: auto; font-weight: 700; }
.count-line { font-weight: 700; color: var(--ink-2); }

/* Map of cities (stylized) */
.coast { width: 100%; max-width: 560px; height: auto; }

/* Notice for preview build */
.preview-only { display: none; }
:root[data-env="preview"] .preview-only { display: block; }
:root[data-env="preview"] .live-only { display: none !important; }

/* External link marker */
a[data-external] .ext { width: .85em; height: .85em; margin-left: .2em; vertical-align: -.05em; opacity: .75; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: .7em 1.1em; border-radius: 12px; font-weight: 700; z-index: 70; box-shadow: var(--shadow); max-width: calc(100% - 32px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Print ---------- */
.print-only { display: none; }
@media print {
  :root { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .utility, .site-header, .reading-panel, .site-footer, .no-print, .listen-bar, .toast, .skip-link, .breadcrumbs { display: none !important; }
  .print-only { display: block !important; }
  .section, .page-hero { padding-block: 1rem; background: #fff !important; }
  a { color: #000; }
  .profile-sheet { box-shadow: none; border: 0; padding: 0; }
  .panel { border: 0; padding: 0; }
  .tool-shell { display: block; }
  details { break-inside: avoid; }
  details > *:not(summary) { display: block !important; }
}

/* Chip buttons (bloom selector and filters) */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-btn {
  display: inline-flex; align-items: center; gap: .4em;
  font: inherit; font-weight: 700; font-size: var(--step--1); line-height: 1.2;
  padding: .45em .85em; min-height: 44px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.chip-btn .icon { color: var(--c-ink, var(--ink-2)); }
.chip-btn:hover { border-color: var(--c, var(--ink-3)); }
.chip-btn[aria-pressed="true"] { background: var(--c-tint, var(--band)); border-color: var(--c, var(--ink)); box-shadow: inset 0 0 0 2px var(--c, var(--ink)); }
.bloom-center { fill: var(--ink-2); }
.mt { margin-top: var(--space-5); }

/* Easy Read layout: picture on the left, short lines on the right */
.er-list { display: grid; gap: var(--space-5); }
.er-section { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-5); align-items: start; padding: var(--space-5); border-radius: var(--petal-corner); background: var(--surface); border: 2px solid var(--c-tint, var(--line)); }
.er-section .er-pic { width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 100% 10px 100% 10px; background: var(--c); color: #fff; }
.er-section .er-pic .icon { width: 2.4rem; height: 2.4rem; }
.er-section .er-text { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--step-1); min-width: 0; }
.er-section .er-text h2 { font-size: var(--step-3); }
.er-section .er-text ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.er-section .er-text li { margin: 0; }
.er-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: center; }
@media (max-width: 560px) { .er-section { grid-template-columns: 1fr; } .er-section .er-pic { width: 4rem; height: 4rem; } }
.area-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.area { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: 14px; background: var(--c-tint); font-weight: 700; color: var(--ink); }
.area .icon { color: var(--c-ink); width: 1.6rem; height: 1.6rem; }

.term h2, .card h2.h3, .panel h2.h3, .idea h2.idea-title { font-size: var(--step-1); }
.card h2.h3 { font-size: var(--step-2); }

/* Mobile header tweaks */
.primary-nav .mobile-only { display: none; }
@media (max-width: 1239px) { .site-header.menu-open .primary-nav .mobile-only { display: block; } }
@media (max-width: 640px) {
  .utility nav { display: none; }
  .utility .wrap { justify-content: flex-end; }
}
@media (max-width: 520px) {
  .btn-get-started span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn-get-started { padding-inline: .8em; }
  .site-header .wrap { gap: var(--space-2); }
}

/* ---------- Draft 9: printed pages look like the screen (color kept) ---------- */
.inv-sheet { gap: var(--space-4); overflow: hidden; position: relative; padding-top: calc(var(--space-6) + 6px); }
.inv-band { position: absolute; inset: 0 0 auto 0; height: 10px; background: linear-gradient(90deg, #f6a91c, #ef7d2d, #e5484d, #ca1a93, #7b45c4, #2c56c9, #1f9bd6, #6bb83a); }
.inv-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.inv-logo { width: 110px; height: auto; }
.inv-head > div:nth-child(2) { flex: 1 1 14rem; }
.inv-kicker { margin: 0; font-weight: 800; font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: #8a3b0f; }
.inv-head h2 { margin: 0; color: #13232b; }
.inv-total-chip { display: flex; flex-direction: column; align-items: flex-end; padding: .5em 1em; border-radius: 14px; background: #fff3b0; color: #3b2a00; }
.inv-total-chip span { font-size: var(--step--1); font-weight: 700; }
.inv-total-chip strong { font-family: var(--font-display, Georgia, serif); font-size: var(--step-3); line-height: 1.1; }
.inv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 8px; margin: 0; }
.inv-facts > div { background: var(--c-tint, #f5ead7); border-left: 5px solid var(--c, #a3865c); border-radius: 10px; padding: .45em .7em; color: #13232b; }
.inv-facts dt { font-size: var(--step--1); font-weight: 800; color: var(--c-ink, #47372a); }
.inv-facts dd { margin: 0; font-weight: 600; }
.inv-table { width: 100%; border-collapse: separate; border-spacing: 0; color: #13232b; }
.inv-table thead th { background: #1f4e6b; color: #fff; padding: .55em .7em; text-align: left; }
.inv-table thead th:first-child { border-radius: 10px 0 0 0; } .inv-table thead th:last-child { border-radius: 0 10px 0 0; }
.inv-table td { padding: .5em .7em; border-bottom: 1px solid #e4dccd; }
.inv-table tbody tr:nth-child(even) td { background: #faf6ee; }
.inv-table tfoot th { background: #e6f3ea; color: #0d3b2a; padding: .55em .7em; text-align: left; font-size: var(--step-1); }
.inv-table .num { text-align: right; }
.inv-cert { color: #13232b; background: #f3f0fa; border-radius: 12px; padding: .7em .9em; margin: 0; font-size: var(--step--1); }
.inv-signs { display: grid; gap: var(--space-4); color: #13232b; }
.inv-signs p { display: flex; align-items: flex-end; gap: .5em; margin: 0; font-weight: 700; }
.inv-signs span { flex: 1; border-bottom: 2px solid #13232b; min-height: 1.6em; } .inv-signs span.short { flex: 0 0 8rem; }

@media print {
  html, body, * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { margin: 12mm; }
  .profile-sheet, .inv-sheet { box-shadow: none !important; border: 0 !important; padding: 10px 0 0 !important; }
  .inv-sheet .table-wrap { overflow: visible !important; }
  .inv-table tr, .inv-facts > div, .ps-box { break-inside: avoid; }
  /* member print sheets (profile, plans, logs, timesheets): color accents like the screen */
  .print-sheet .ps-page { color: #13232b; position: relative; padding-top: 10px; }
  .print-sheet .ps-page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #f6a91c, #ef7d2d, #e5484d, #ca1a93, #7b45c4, #2c56c9, #1f9bd6, #6bb83a); }
  .print-sheet .ps-head { border-bottom: 0 !important; background: #fdf3df; border-radius: 12pt; padding: 10pt 12pt !important; margin-top: 8pt; }
  .print-sheet .ps-kicker { color: #8a3b0f; }
  .print-sheet .ps-box { border: 0 !important; border-left: 5pt solid var(--pc, #2c56c9) !important; background: var(--pt, #eef3fc); border-radius: 8pt; }
  .print-sheet .ps-box:nth-of-type(6n+2) { --pc: #6bb83a; --pt: #eef7e8; }
  .print-sheet .ps-box:nth-of-type(6n+3) { --pc: #ca1a93; --pt: #fbecf5; }
  .print-sheet .ps-box:nth-of-type(6n+4) { --pc: #ef7d2d; --pt: #fdf0e6; }
  .print-sheet .ps-box:nth-of-type(6n+5) { --pc: #7b45c4; --pt: #f3eefb; }
  .print-sheet .ps-box:nth-of-type(6n) { --pc: #1f9bd6; --pt: #e9f6fc; }
  .print-sheet .ps-week th, .print-sheet .ps-table th { background: #1f4e6b; color: #fff; }
  .print-sheet .ps-week th, .print-sheet .ps-week td { border-color: #c9b791 !important; }
}

/* My world picker (Reading tools) */
.world-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.world-pick { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .35em .8em .35em .4em; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: var(--step--1); cursor: pointer; }
.world-pick .wp-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--sw, #e9dfcf); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.world-pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.world-pick:focus-visible { outline: 3px solid var(--focus, #29298e); outline-offset: 2px; }
.sw-none { --sw: repeating-linear-gradient(45deg, #f5ead7 0 6px, #fffdf7 6px 12px); }
:root.is-landing, :root.is-landing body { height: 1px !important; overflow: hidden !important; scroll-padding: 0 !important; }