/* =============================================================================
   HELMWISE — design system
   Built for a calm, trauma-informed, premium feel that out-classes template sites.
   Techniques: OKLCH + color-mix tokens · fluid clamp() type & space · CSS grid +
   subgrid · container queries · :has() · scroll-driven reveals · View Transitions ·
   focus-visible · logical properties · aspect-ratio · content-visibility.
   EVERY motion is gated behind prefers-reduced-motion. Resting states are the
   visible states, so unsupported browsers degrade with zero breakage.

   Fonts: defaults to a warm system stack (no network, no privacy leak — good for a
   YMYL audience). To upgrade to self-hosted Fraunces + Inter, drop WOFF2 files in
   /assets/fonts/, uncomment the @font-face block, and swap --font-head/--font-body.
============================================================================= */

/* Self-hosted premium variable fonts (no third-party requests, fast, privacy-safe).
   Fraunces = high-contrast editorial display. Inter = clean modern UI/body. */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces.woff2") format("woff2");font-weight:300 800;font-display:swap;font-style:normal;}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter.woff2") format("woff2");font-weight:300 800;font-display:swap;font-style:normal;}

/* ----------------------------------------------------------------- tokens --- */
:root {
  /* Colour — sRGB hex fallback first, OKLCH override second.
     Browsers that don't grok oklch() keep the hex; ~95%+ get the OKLCH ramp. */
  --bg:        #f7f4ee;  --bg: oklch(0.985 0.006 80);
  --surface:   #f0ece3;  --surface: oklch(0.965 0.008 80);
  --surface-2: #e7e1d5;  --surface-2: oklch(0.94 0.01 80);
  --ink:       #2b2722;  --ink: oklch(0.30 0.02 75);
  --ink-soft:  #5c554c;  --ink-soft: oklch(0.46 0.02 75);
  --line:      #d8d0c2;  --line: oklch(0.88 0.012 80);

  --brand:      #4f7a63;  --brand: oklch(0.55 0.07 152);   /* grounded sage */
  --brand-deep: #355a47;  --brand-deep: oklch(0.42 0.07 152);
  --brand-tint: #e4ece6;  --brand-tint: color-mix(in oklch, var(--brand) 14%, var(--bg));

  --accent:      #c8794f;  --accent: oklch(0.68 0.10 45);   /* warm terracotta — CTAs only */
  --accent-deep: #a85e38;  --accent-deep: oklch(0.58 0.11 45);

  --blue: #7796b4;  --blue: oklch(0.62 0.06 240);          /* soft trust blue */
  --ring: #4f7a63;  --ring: oklch(0.55 0.12 152);

  /* Fluid type scale (Utopia, 320→1280px, ~1.2 ratio) */
  --step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
  --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
  --step-0:  clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --step-1:  clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
  --step-2:  clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
  --step-3:  clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
  --step-4:  clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
  --step-5:  clamp(2.4883rem, 2.0271rem + 2.3061vw, 3.8147rem);

  /* Fluid space scale */
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --space-xs:  clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
  --space-s:   clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --space-m:   clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --space-l:   clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --space-xl:  clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  --shadow-1: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent),
              0 4px 12px color-mix(in oklch, var(--ink) 6%, transparent);
  --shadow-2: 0 2px 6px color-mix(in oklch, var(--ink) 9%, transparent),
              0 14px 34px color-mix(in oklch, var(--ink) 10%, transparent);

  --font-head: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --measure: 65ch;
  --wrap: 72rem;
  --wrap-narrow: 44rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 260ms;

  color-scheme: light dark;
}

/* Calm dark mode — lower chroma, warm dark, never pure black/white.
   Auto when the OS prefers dark AND the visitor has not chosen a theme; always when
   they pick dark via the toggle. The token list is intentionally mirrored in both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1a1815; --bg: oklch(0.20 0.008 80);
    --surface: #221d16; --surface: oklch(0.245 0.01 80);
    --surface-2: #2c2823; --surface-2: oklch(0.29 0.012 80);
    --ink: #ece6db; --ink: oklch(0.92 0.012 85);
    --ink-soft: #b6ada0; --ink-soft: oklch(0.78 0.014 85);
    --line: #3a352e; --line: oklch(0.34 0.012 80);
    --brand: #82ab92; --brand: oklch(0.74 0.06 152);
    --brand-deep: #a7c8b4; --brand-deep: oklch(0.82 0.05 152);
    --brand-tint: #25302a; --brand-tint: color-mix(in oklch, var(--brand) 16%, var(--bg));
    --accent: #e0966a; --accent: oklch(0.76 0.09 45);
    --accent-deep: #eeae86; --accent-deep: oklch(0.82 0.08 45);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
    --shadow-2: 0 2px 8px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --bg: #1a1815; --bg: oklch(0.20 0.008 80);
  --surface: #221d16; --surface: oklch(0.245 0.01 80);
  --surface-2: #2c2823; --surface-2: oklch(0.29 0.012 80);
  --ink: #ece6db; --ink: oklch(0.92 0.012 85);
  --ink-soft: #b6ada0; --ink-soft: oklch(0.78 0.014 85);
  --line: #3a352e; --line: oklch(0.34 0.012 80);
  --brand: #82ab92; --brand: oklch(0.74 0.06 152);
  --brand-deep: #a7c8b4; --brand-deep: oklch(0.82 0.05 152);
  --brand-tint: #25302a; --brand-tint: color-mix(in oklch, var(--brand) 16%, var(--bg));
  --accent: #e0966a; --accent: oklch(0.76 0.09 45);
  --accent-deep: #eeae86; --accent-deep: oklch(0.82 0.08 45);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
  --shadow-2: 0 2px 8px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.45);
}

/* Accessibility-bar overrides (set on <html> by the a11y panel, persisted) */
:root[data-a11y-text="large"] { font-size: 115%; }
:root[data-a11y-text="xlarge"] { font-size: 132%; }

/* Strong high-contrast: pure black on white, dark brand, heavy borders, underlined links */
:root[data-a11y-contrast="on"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #ededed;
  --ink: #000000; --ink-soft: #000000; --line: #000000;
  --brand: #0b4636; --brand-deep: #06281f; --brand-tint: #dde9e5;
  --accent: #7a3310; --accent-deep: #552207; --blue: #123a63;
}
:root[data-a11y-contrast="on"] body { background: #fff; color: #000; }
:root[data-a11y-contrast="on"] .muted,
:root[data-a11y-contrast="on"] .lede,
:root[data-a11y-contrast="on"] .card p { color: #000; }
:root[data-a11y-contrast="on"] .card,
:root[data-a11y-contrast="on"] .buybox,
:root[data-a11y-contrast="on"] .field input,
:root[data-a11y-contrast="on"] .field textarea,
:root[data-a11y-contrast="on"] .field select { border: 2px solid #000; }
:root[data-a11y-contrast="on"] a:not(.btn) { color: #06281f; text-decoration: underline; }
:root[data-a11y-contrast="on"] .btn--primary { background: #552207; }
:root[data-a11y-contrast="on"] .hero-banner::after { background: rgba(0,0,0,.7); }

/* Underline + highlight all links */
:root[data-a11y-links="on"] a { text-decoration: underline; text-underline-offset: 0.18em; }
:root[data-a11y-links="on"] a:not(.btn):not(.brand) { background: color-mix(in oklch, var(--accent) 16%, transparent); border-radius: 3px; }

/* Readable font: swap the display serif + body for a high-legibility sans */
:root[data-a11y-font="readable"] body,
:root[data-a11y-font="readable"] h1, :root[data-a11y-font="readable"] h2,
:root[data-a11y-font="readable"] h3, :root[data-a11y-font="readable"] h4,
:root[data-a11y-font="readable"] .brand {
  font-family: Verdana, "Segoe UI", Tahoma, Arial, sans-serif !important;
  letter-spacing: 0 !important; font-variation-settings: normal !important;
}

/* Wider letter/word spacing for readability */
:root[data-a11y-spacing="wide"] body { letter-spacing: 0.05em; word-spacing: 0.14em; }
:root[data-a11y-spacing="wide"] p, :root[data-a11y-spacing="wide"] li { line-height: 1.95; }

/* Taller line height */
:root[data-a11y-lineheight="tall"] p,
:root[data-a11y-lineheight="tall"] li,
:root[data-a11y-lineheight="tall"] .lede { line-height: 2.15; }

/* Reduce motion on demand */
:root[data-a11y-motion="off"] *, :root[data-a11y-motion="off"] *::before, :root[data-a11y-motion="off"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}

/* Larger cursor (SVG; Safari falls back to system cursor) */
:root[data-a11y-cursor="big"], :root[data-a11y-cursor="big"] * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M5 2l14 7-6 2-2 6z" fill="%23000" stroke="%23fff" stroke-width="1.2"/></svg>') 4 4, auto;
}

/* ------------------------------------------------------------------ reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  /* avoid sticky-header obscuring anchored targets (WCAG 2.4.11) */
  scroll-padding-block-start: 6.5rem;
}

img, picture, svg, video { display: block; max-inline-size: 100%; height: auto; }
img { background: var(--surface); }
a { color: var(--brand-deep); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { color: var(--accent-deep); }
strong { font-weight: 650; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--ink);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, li { text-wrap: pretty; }

ul, ol { padding-inline-start: 1.25em; }

/* ------------------------------------------------------------- primitives --- */
.wrap { inline-size: min(100% - 2 * var(--space-m), var(--wrap)); margin-inline: auto; }
.wrap--narrow { inline-size: min(100% - 2 * var(--space-m), var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.prose { max-inline-size: var(--measure); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose h2 { margin-block-start: var(--space-xl); }
.prose h3 { margin-block-start: var(--space-l); }
.flow > * + * { margin-block-start: var(--space-s); }
.center { text-align: center; margin-inline: auto; }
.muted { color: var(--ink-soft); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-deep);
}
.eyebrow::before { content: ""; inline-size: 1.8rem; block-size: 2px; background: currentColor; opacity: 0.65; flex: none; }
.lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; max-inline-size: var(--measure); }

.skip-link {
  position: absolute; inset-inline-start: var(--space-s); inset-block-start: -3rem;
  background: var(--brand-deep); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  z-index: 100; transition: inset-block-start var(--t-fast) var(--ease);
}
.skip-link:focus { inset-block-start: var(--space-s); }

/* ----------------------------------------------------------- crisis strip --- */
.crisis-bar {
  background: var(--brand-deep);
  color: #fff;
  font-size: var(--step--1);
  padding-block: 0.5rem;
}
.crisis-bar .wrap {
  display: flex; flex-wrap: wrap; gap: 0.4rem var(--space-m);
  align-items: center; justify-content: center; text-align: center;
}
.crisis-bar a { color: #fff; font-weight: 600; text-decoration: underline; }
.crisis-bar a:hover, .crisis-bar a:focus-visible { color: #fff; text-decoration-thickness: 0.12em; }
.crisis-bar b { font-weight: 650; }

/* -------------------------------------------------------------- site head --- */
.site-head {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-block-end: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head { background: var(--bg); }
}
.site-head .wrap { display: flex; align-items: center; gap: var(--space-m); padding-block: 0.75rem; }
.brand { display: inline-flex; align-items: baseline; gap: 0.45rem; font-family: var(--font-head); font-weight: 600; font-size: var(--step-1); color: var(--ink); text-decoration: none; font-optical-sizing: auto; font-variation-settings: "SOFT" 0, "WONK" 0; }
.brand .dot { color: var(--accent); }
.brand:hover { color: var(--ink); }

.nav { margin-inline-start: auto; }
.nav ul { display: flex; gap: clamp(0.5rem, 1.6vw, 1.4rem); list-style: none; padding: 0; align-items: center; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--step--1); font-weight: 550; padding: 0.4rem 0.2rem; border-block-end: 2px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-block-end-color: var(--brand); }
.nav-cta { margin-inline-start: 0.4rem; }

.nav-toggle { display: none; }

/* mobile nav */
@media (max-width: 60rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink);
    border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; font: inherit; font-size: var(--step--1); cursor: pointer;
    min-block-size: 44px;
  }
  .theme-toggle { margin-inline-start: auto; }
  .nav {
    position: fixed; inset: 0 0 0 auto; inline-size: min(92vw, 26rem); z-index: 45;
    background: var(--bg); border-inline-start: 1px solid var(--line);
    box-shadow: var(--shadow-2); padding: calc(var(--space-xl) + 1rem) var(--space-l) var(--space-l);
    transform: translateX(105%); transition: transform var(--t-med) var(--ease);
    margin: 0; overflow-y: auto;
  }
  .nav[data-open="true"] { transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .nav a { font-size: var(--step-1); font-weight: 600; padding: 0.95rem 0.4rem; min-block-size: 52px; display: flex; align-items: center; border-block-end: 1px solid var(--line); }
  .nav a:hover, .nav a[aria-current="page"] { border-block-end-color: var(--line); color: var(--brand-deep); }
  .nav-cta { margin: var(--space-m) 0 0; justify-content: center; font-size: var(--step-0); }
  body:has(.nav[data-open="true"]) { overflow: hidden; } /* :has() lock-scroll, no JS */
  /* tap-away backdrop behind the drawer */
  .nav-backdrop { position: fixed; inset: 0; z-index: 38; background: rgba(12,9,5,.5); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease); }
  body:has(.nav[data-open="true"]) .nav-backdrop { opacity: 1; pointer-events: auto; }
  /* keep floating controls out of the way while the drawer is open */
  body:has(.nav[data-open="true"]) .fab-stack, body:has(.nav[data-open="true"]) .a11y { display: none; }
}
.nav-backdrop { display: none; }
@media (max-width: 60rem) { .nav-backdrop { display: block; } }
@media (prefers-reduced-motion: reduce) { .nav, .nav-backdrop { transition: none; } }

/* ---------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 600; font-size: var(--step-0);
  padding: 0.8rem 1.4rem; min-block-size: 48px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--accent-deep); color: #fff; box-shadow: var(--shadow-2); }
.btn--ghost { background: transparent; color: var(--brand-deep); border-color: var(--brand); }
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-deep); }
.btn--on-dark { background: #fff; color: var(--brand-deep); }
.btn--on-dark:hover { background: var(--bg); color: var(--brand-deep); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

/* ------------------------------------------------------------------- hero --- */
.hero { padding-block: clamp(3rem, 6vw, 6rem); position: relative; overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 85% -10%, var(--brand-tint), transparent 60%),
    radial-gradient(50% 60% at 5% 110%, color-mix(in oklch, var(--blue) 18%, var(--bg)), transparent 55%);
}
.hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
@container (min-width: 52rem) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; } }
.hero h1 { margin-block-end: var(--space-s); }
.hero .lede { margin-block-end: var(--space-m); }
.hero__media {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--brand-tint), var(--surface-2));
  box-shadow: var(--shadow-2); display: grid; place-items: center; color: var(--ink-soft);
}
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.trust-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.3rem; margin-block-start: var(--space-l); font-size: var(--step--1); font-weight: 500; }
.trust-row span { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); }
.trust-row span::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--brand); flex: none; }

/* ---- Dark, cinematic hero (premium personal-brand register) ---- */
.hero--dark { color: #f3ede2; isolation: isolate; }
.hero--dark::before {
  background:
    radial-gradient(65% 85% at 82% -15%, color-mix(in oklch, var(--accent) 34%, transparent), transparent 60%),
    radial-gradient(60% 80% at -8% 115%, color-mix(in oklch, var(--brand) 40%, transparent), transparent 58%),
    linear-gradient(165deg, #1d1812, #241d15 52%, #14100b);
}
.hero--dark .eyebrow { color: color-mix(in oklch, var(--accent) 65%, white); }
.hero--dark h1 { color: #fff; font-size: clamp(2.7rem, 1.9rem + 3.8vw, 4.7rem); line-height: 1.0; letter-spacing: -0.035em; }
.hero--dark .lede { color: color-mix(in oklch, #f3ede2 84%, transparent); }
.hero--dark .trust-row span { color: color-mix(in oklch, #f3ede2 74%, transparent); }
.hero--dark .trust-row span::before { background: var(--accent); }
.hero--dark .btn--ghost { color: #fff; border-color: color-mix(in oklch, #fff 42%, transparent); }
.hero--dark .btn--ghost:hover { background: color-mix(in oklch, #fff 12%, transparent); color: #fff; border-color: #fff; }
.hero--dark .hero__media {
  background: #14100b; border: 1px solid color-mix(in oklch, #fff 12%, transparent);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.7);
}

/* -------------------------------------------------------- cards / grids --- */
.grid { display: grid; gap: var(--space-m); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.card h3 { font-size: var(--step-1); }
.card p { color: var(--ink-soft); font-size: var(--step-0); }
.card .card__more { margin-block-start: auto; font-weight: 600; color: var(--brand-deep); font-size: var(--step--1); }
a.card { text-decoration: none; color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in oklch, var(--brand) 40%, var(--line)); }
}
.card__icon { inline-size: 2.4rem; block-size: 2.4rem; color: var(--brand-deep); }
/* a card that contains an icon gets a touch more top padding (:has()) */
.card:has(.card__icon) { padding-block-start: var(--space-m); }

/* feature band */
.band { background: var(--surface); border-block: 1px solid var(--line); }
.band--brand { background: var(--brand-deep); color: #fff; border-color: transparent; }
.band--brand h2, .band--brand h3 { color: #fff; }
.band--brand .lede, .band--brand p { color: color-mix(in oklch, #fff 86%, var(--brand)); }
.band--brand a:not(.btn) { color: #fff; }

/* steps */
.steps { counter-reset: step; display: grid; gap: var(--space-m); }
.steps li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  inline-size: 2.8rem; block-size: 2.8rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: var(--step-1);
  display: grid; place-items: center; box-shadow: var(--shadow-1); flex: none;
}
.steps ol, .steps ul { padding: 0; }

/* --------------------------------------------------- comparison table --- */
.compare {
  display: grid; gap: var(--space-m); align-items: stretch;
  grid-template-columns: 1fr;
  container-type: inline-size;
}
@media (min-width: 48rem) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; background: var(--surface); }
.compare__col header { padding: var(--space-m); background: var(--surface-2); }
.compare__col[data-kind="coaching"] header { background: var(--brand-tint); }
.compare__col header h3 { margin: 0; }
.compare__col header p { color: var(--ink-soft); font-size: var(--step--1); margin-block-start: 0.3rem; }
.compare__col dl { margin: 0; padding: var(--space-m); display: grid; gap: var(--space-s); }
.compare__col dt { font-weight: 650; font-size: var(--step--1); color: var(--brand-deep); text-transform: uppercase; letter-spacing: 0.05em; }
.compare__col dd { margin: 0.15rem 0 0; color: var(--ink-soft); }

/* -------------------------------------------------------------- callouts --- */
.callout {
  border-inline-start: 4px solid var(--brand); background: var(--brand-tint);
  border-radius: var(--radius-sm); padding: var(--space-s) var(--space-m); color: var(--ink);
}
.callout--warn { border-inline-start-color: var(--accent); background: color-mix(in oklch, var(--accent) 10%, var(--bg)); }
.callout--info { border-inline-start-color: var(--blue); background: color-mix(in oklch, var(--blue) 12%, var(--bg)); }
.callout strong { color: var(--ink); }
.callout p + p { margin-block-start: 0.5rem; }

.note-todo { /* visible build-time TODO marker; should not survive to a live page */
  border: 2px dashed var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--bg));
  border-radius: var(--radius-sm); padding: var(--space-s) var(--space-m); color: var(--ink); font-size: var(--step--1);
}

/* pills / chips */
.pill { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--surface-2); color: var(--ink-soft); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: var(--step--2); font-weight: 600; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------- forms --- */
.form { display: grid; gap: var(--space-s); }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 600; font-size: var(--step--1); }
.field .hint { font-size: var(--step--2); color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--step-0); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem;
  min-block-size: 48px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-block-size: 8rem; line-height: 1.55; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; border-color: var(--brand);
}
/* gentle, non-alarming validity cue using :has() + :user-invalid (no red shaking) */
.field:has(:user-invalid) input, .field:has(:user-invalid) textarea { border-color: var(--accent-deep); }
.field:has(:user-invalid) .hint { color: var(--accent-deep); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-s); }
.consent input { min-block-size: auto; inline-size: 1.2rem; block-size: 1.2rem; margin-block-start: 0.2rem; }
.consent label { font-weight: 450; font-size: var(--step--1); color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; } /* honeypot */

/* -------------------------------------------------------------- footer --- */
.site-foot { background: var(--surface); border-block-start: 1px solid var(--line); padding-block: var(--space-2xl) var(--space-xl); margin-block-start: var(--space-2xl); font-size: var(--step--1); }
.foot-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .foot-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.site-foot h2, .site-foot h3 { font-family: var(--font-body); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; margin-block-end: var(--space-2xs); }
.site-foot ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--brand-deep); text-decoration: underline; }
.foot-brand .brand { font-size: var(--step-1); }
.foot-legal { margin-block-start: var(--space-xl); padding-block-start: var(--space-m); border-block-start: 1px solid var(--line); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.6rem var(--space-m); align-items: center; }
.foot-disclaimer { margin-block-start: var(--space-s); color: var(--ink-soft); font-size: var(--step--2); max-inline-size: 60ch; }

/* ---------------------------------------------------------- a11y / focus --- */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: color-mix(in oklch, var(--brand) 30%, var(--bg)); }

/* respect contrast preference */
@media (prefers-contrast: more) {
  :root { --ink-soft: var(--ink); --line: var(--ink); }
  .card, .field input, .field textarea { border-width: 2px; }
}

/* ------------------------------------------------------- motion / reveal --- */
/* Resting state is the FINAL state. Motion only enhances where supported AND wanted. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    @keyframes reveal { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } }
  }
  /* tasteful entry for cards when they pop into the DOM grid */
  @supports (transition-behavior: allow-discrete) {
    .card { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
  }
}

/* Soft cross-document page transitions (progressive; no SPA framework) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------------ utilities --- */
.long-list { content-visibility: auto; contain-intrinsic-size: auto 600px; } /* perf on long pages */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--space-l); }
.tag { font-size: var(--step--2); color: var(--ink-soft); }
.article-meta { color: var(--ink-soft); font-size: var(--step--1); display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* article body rhythm */
.article-body { max-inline-size: var(--measure); }
.article-body > * + * { margin-block-start: var(--space-s); }
.article-body h2 { margin-block-start: var(--space-xl); }
.article-body h3 { margin-block-start: var(--space-l); }
.article-body ul, .article-body ol { display: grid; gap: 0.4rem; }
.article-body blockquote { border-inline-start: 4px solid var(--brand); padding-inline-start: var(--space-m); color: var(--ink-soft); font-style: italic; }

/* =============================================================================
   Floating UI + theme toggle + accessibility bar (yoseth-style)
============================================================================= */

/* Header theme toggle */
.theme-toggle {
  display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; flex: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand-deep); }
.theme-toggle svg { inline-size: 20px; block-size: 20px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

/* Floating action stack (bottom-right): back-to-top + contact */
.fab-stack { position: fixed; inset-block-end: clamp(1rem, 3vw, 1.6rem); inset-inline-end: clamp(1rem, 3vw, 1.6rem); z-index: 50; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-end; }
.fab {
  inline-size: 56px; block-size: 56px; border-radius: 999px; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-2);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), opacity var(--t-med) var(--ease);
}
.fab svg { inline-size: 24px; block-size: 24px; }
.fab--contact { background: var(--accent); text-decoration: none; }
.fab--contact:hover { background: var(--accent-deep); color: #fff; }
.fab--top { background: var(--brand-deep); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; }
body[data-scrolled="true"] .fab--top { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) { .fab:hover { transform: translateY(-2px); } body[data-scrolled="true"] .fab--top:hover { transform: translateY(-2px); } }

/* Contact FAB expanding menu */
.contact-fab { position: relative; }
.contact-fab__menu {
  position: absolute; inset-block-end: calc(100% + 0.6rem); inset-inline-end: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-2); padding: 0.5rem; min-inline-size: 15rem; display: grid; gap: 0.2rem;
  opacity: 0; transform: translateY(8px) scale(0.97); transform-origin: bottom right; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.contact-fab[data-open="true"] .contact-fab__menu { opacity: 1; transform: none; pointer-events: auto; }
.contact-fab__menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: var(--step--1); font-weight: 550; }
.contact-fab__menu a:hover { background: var(--brand-tint); color: var(--brand-deep); }
.contact-fab__title { font-size: var(--step--2); color: var(--ink-soft); padding: 0.3rem 0.7rem; }
@media (prefers-reduced-motion: reduce) { .contact-fab__menu, .fab--top { transition: none; } }

/* Accessibility button + panel (bottom-left) */
.a11y { position: fixed; inset-block-end: clamp(1rem, 3vw, 1.6rem); inset-inline-start: clamp(1rem, 3vw, 1.6rem); z-index: 50; }
.a11y-btn {
  inline-size: 52px; block-size: 52px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--brand-deep); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-1);
}
.a11y-btn svg { inline-size: 26px; block-size: 26px; }
.a11y-btn:hover { border-color: var(--brand); }
.a11y-panel {
  position: absolute; inset-block-end: calc(100% + 0.6rem); inset-inline-start: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-2); padding: var(--space-s); inline-size: min(21rem, 88vw);
  max-block-size: min(74vh, 34rem); overflow-y: auto;
  opacity: 0; transform: translateY(8px); transform-origin: bottom left; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.a11y-group { font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 700; margin-block: 0.7rem 0.3rem; }
.a11y-group:first-of-type { margin-block-start: 0.3rem; }
.a11y[data-open="true"] .a11y-panel { opacity: 1; transform: none; pointer-events: auto; }
.a11y-panel h2 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; margin-block-end: var(--space-2xs); }
.a11y-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block: 0.5rem; }
.a11y-opt {
  font: inherit; font-size: var(--step--1); font-weight: 550; cursor: pointer;
  padding: 0.5rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); min-block-size: 40px;
}
.a11y-opt[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-deep); }
.a11y-panel .a11y-reset { margin-block-start: 0.4rem; font-size: var(--step--2); color: var(--ink-soft); background: none; border: none; cursor: pointer; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .a11y-panel { transition: none; } }

/* keep FABs clear of very small screens' edges and each other */
@media (max-width: 26rem) { .fab, .a11y-btn { inline-size: 50px; block-size: 50px; } }

/* =============================================================================
   Editorial homepage components (yochino register)
============================================================================= */

/* Full-bleed image hero with dual-gradient scrim, content bottom-left */
.hero-banner {
  position: relative; isolation: isolate; overflow: clip; color: #fff;
  min-block-size: clamp(460px, 70vh, 680px); display: flex; align-items: flex-end;
}
.hero-banner > picture, .hero-banner > picture img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(18,14,9,.20), rgba(18,14,9,.48) 56%, rgba(18,14,9,.90)),
    linear-gradient(to right, rgba(18,14,9,.62), rgba(18,14,9,0) 64%);
}
.hero-banner .wrap { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.hero-banner .eyebrow { color: #d6ece3; }
.hero-banner h1 {
  color: #fff; max-inline-size: 19ch; margin-block: 0.4rem var(--space-s);
  font-size: clamp(2.6rem, 1.7rem + 3.9vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em;
  text-shadow: 0 2px 22px rgba(0,0,0,.4);
}
.hero-banner .lede { color: rgba(255,255,255,.92); max-inline-size: 44ch; }
.hero-banner .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.hero-banner .btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.hero-banner .trust-row { color: rgba(255,255,255,.82); }
.hero-banner .trust-row span { color: rgba(255,255,255,.82); }
.hero-banner .trust-row span::before { background: var(--accent); }

/* Alternating banded section */
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }

/* Tag pills (semantic colour variants) */
.pill--brand { background: color-mix(in oklch, var(--brand) 18%, var(--bg)); color: var(--brand-deep); }
.pill--accent { background: color-mix(in oklch, var(--accent) 16%, var(--bg)); color: var(--accent-deep); }
.pill--blue { background: color-mix(in oklch, var(--blue) 18%, var(--bg)); color: var(--ink); }

/* Card with zooming media frame */
.card-media { overflow: clip; border-radius: var(--radius-sm); aspect-ratio: 3 / 2; }
.card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--t-med) var(--ease); }
@media (prefers-reduced-motion: no-preference) { a.card:hover .card-media img { transform: scale(1.05); } }

/* "Spec card" pricing / criteria table */
.buybox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); box-shadow: var(--shadow-1); }
.buybox dl { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem var(--space-m); margin: var(--space-2xs) 0 var(--space-s); }
.buybox dt { font-weight: 650; color: var(--brand-deep); }
.buybox dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 32rem) { .buybox dl { grid-template-columns: 1fr; gap: 0.2rem; } .buybox dd { margin-block-end: 0.5rem; } }

/* Checklist with circled check markers */
.checklist { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; }
.checklist li::before {
  content: "✓"; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; margin-block-start: 0.1rem;
  background: var(--brand-tint); color: var(--brand-deep); font-weight: 700; font-size: 0.85rem;
  display: grid; place-items: center; flex: none;
}