/* The Realist Nurse, public site.
   Brand from the logo: warm off white paper, charcoal RN monogram, a lavender butterfly. Fraunces for display,
   Manrope for body, Pinyon Script only for the signature.
   Token driven, mobile first (375, 768, 1024, 1440), no framework. Motion is progressive: hidden start states
   only apply under html.js, body.has-motion and prefers-reduced-motion: no-preference, and only until
   motion.js (or the site.js safety net) says so. Every kit class keeps working: the account portal and the
   commerce pages (assets/css/commerce.css) build on them. */

/* ---------------------------------------------------------------- tokens */
:root {
  /* color (docs/BUILD-CONTRACT.md) */
  --paper: #FBFAF7;
  --tint: #F4F0F6;
  --card: #FFFFFF;
  --ink: #2B2A2E;
  --dim: #5E5A64;
  --faint: #8C8793;            /* large or decorative text only */
  --line: #E7E2EA;
  --line-2: #D6CEDC;
  --accent: #7A3E9D;
  --accent-dark: #5F2D7D;
  --accent-soft: #F1E6F8;
  --on-accent: #FFFFFF;
  --lav: #CB6CE6;              /* decorative only, never text */
  --lav-2: #E3B8F2;
  --dark: #1F1D22;
  --on-dark: #F6F2F8;
  --on-dark-dim: #C9C1CF;
  --ok: #2E7D5B;
  --warn: #9A6B12;
  --bad: #B3261E;
  --ok-soft: #E9F4EE;
  --warn-soft: #FBF2E1;
  --bad-soft: #FBEAE8;
  --placeholder: #736E79;

  /* type */
  --font: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --soft: 'SOFT' 80, 'WONK' 0;
  --font-script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lead: clamp(1.125rem, 1.04rem + .38vw, 1.3125rem);
  --fs-h3: clamp(1.1875rem, 1.12rem + .3vw, 1.375rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --fs-h1: clamp(2.375rem, 1.6rem + 3.4vw, 4.25rem);
  --fs-display: clamp(2.625rem, 1.5rem + 4.6vw, 5.25rem);

  /* space */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;

  /* shape and depth: shadows are tinted with the charcoal violet, never flat grey */
  --r-xs: 8px;
  --r-sm: 12px;
  --radius: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(43, 30, 56, .05), 0 2px 6px rgba(43, 30, 56, .04);
  --shadow: 0 1px 2px rgba(43, 30, 56, .05), 0 8px 24px -6px rgba(43, 30, 56, .10);
  --shadow-lg: 0 2px 6px rgba(43, 30, 56, .05), 0 24px 60px -18px rgba(61, 31, 86, .28);
  --shadow-glow: 0 18px 50px -20px rgba(203, 108, 230, .55);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t: 280ms;
  --t-slow: 700ms;
}

/* Metric matched fallbacks so the swap to the web fonts barely moves the layout. */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 101%;
}
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  ascent-override: 102.6%;
  descent-override: 28.9%;
  line-gap-override: 0%;
  size-adjust: 103.9%;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-base); line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-dark); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); text-wrap: balance; }
h1, h2, h3, .font-display { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: var(--soft); }
h1, h2 { font-weight: 500; line-height: 1.08; letter-spacing: -.018em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h4 { font-family: var(--font); font-size: var(--fs-md); font-weight: 700; line-height: 1.3; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: inherit; color: var(--accent); }
em { font-style: italic; }
strong { font-weight: 700; }
small { font-size: var(--fs-xs); }
::selection { background: var(--lav-2); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.cta-band :focus-visible, .on-dark :focus-visible { outline-color: var(--lav-2); }
.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: 12px; top: -80px; z-index: 1000; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }

.ic { width: 1.2em; height: 1.2em; flex: none; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 860px; }
.section { padding: var(--section) 0; position: relative; }
.section--tight { padding: calc(var(--section) * .55) 0; }
.section--tint { background: var(--tint); }
.section--flush-top { padding-top: 0; }

/* Haikei layered waves at the edges of a tinted section (assets/img/bg, generated by bin/gen-backgrounds.php) */
.wave-top, .wave-bottom { position: relative; }
.wave-top::before, .wave-bottom::after {
  content: ''; position: absolute; left: 0; right: 0; height: clamp(36px, 5vw, 80px); pointer-events: none;
  background-repeat: no-repeat; background-size: 100% 100%;
}
.wave-top::before { top: -1px; background-image: url('../img/bg/waves-tint.svg'); }
.wave-bottom::after { bottom: -1px; background-image: url('../img/bg/waves-tint-up.svg'); }

.eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); margin: 0 0 .9rem; letter-spacing: .01em; }
.eyebrow::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lav); box-shadow: 0 0 0 4px var(--accent-soft); }
.lead { font-size: var(--fs-lead); color: var(--dim); max-width: 60ch; line-height: 1.65; margin: 0; }
.hint, .hint-text { color: var(--dim); font-weight: 500; font-size: .9em; }
.hint-text { font-size: var(--fs-sm); margin: .3rem 0 0; }
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 12px 24px; border-radius: var(--r-pill); border: 1.5px solid var(--bd);
  background: var(--bg); color: var(--fg); font: 700 var(--fs-sm)/1.2 var(--font); letter-spacing: .005em;
  text-decoration: none; cursor: pointer; touch-action: manipulation; text-align: center;
  transition: background var(--t) var(--ease-out), color var(--t) var(--ease-out), border-color var(--t), box-shadow var(--t), transform var(--t-fast);
}
.btn .ic { width: 18px; height: 18px; transition: transform var(--t) var(--ease-out); }
.btn:hover { color: var(--fg); }
.btn:hover .ic:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn--primary { --bg: var(--ink); --fg: #fff; --bd: var(--ink); }
.btn--primary:hover { --bg: #3D3B42; --bd: #3D3B42; box-shadow: 0 10px 24px -10px rgba(43, 42, 46, .55); }
.btn--accent { --bg: var(--accent); --fg: var(--on-accent); --bd: var(--accent); }
.btn--accent:hover { --bg: var(--accent-dark); --bd: var(--accent-dark); box-shadow: var(--shadow-glow); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line-2); }
.btn--ghost:hover { --bg: var(--card); --bd: var(--ink); }
.btn--light { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.btn--light:hover { --bg: var(--accent-soft); --bd: var(--accent-soft); }
.btn--outline-light { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .45); }
.btn--outline-light:hover { --bg: rgba(255, 255, 255, .1); --bd: #fff; }
.btn--sm { min-height: 44px; padding: 9px 18px; font-size: .875rem; }
.btn--lg { min-height: 54px; padding: 14px 30px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: var(--s-5); }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; text-decoration: none; min-height: 44px; }
.link-arrow .ic { width: 18px; height: 18px; transition: transform var(--t) var(--ease-out); }
.link-arrow:hover .ic { transform: translateX(3px); }
/* motion-primitives Magnetic: the wrapper is moved by site.js, the button inside keeps its own hover */
.magnetic { display: inline-flex; will-change: transform; }

/* ---------------------------------------------------------------- header */
.announce { background: var(--ink); color: #fff; text-align: center; font-size: var(--fs-sm); padding: 8px 0; }
.site-header {
  position: sticky; top: 0; z-index: 60; isolation: isolate;
  border-bottom: 1px solid transparent; transition: box-shadow var(--t), border-color var(--t);
}
/* The frosted glass sits on a pseudo element: a backdrop-filter on the header itself would trap the fixed
   mobile menu inside the header box. */
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(251, 250, 247, .82); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); transition: background var(--t); }
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -12px rgba(43, 30, 56, .18); }
.site-header.is-stuck::before, body.nav-open .site-header::before { background: rgba(255, 255, 255, .94); }
.header__in { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; min-height: 44px; }
.brand__logo { width: auto; height: 52px; transform-origin: left center; transition: transform var(--t) var(--ease-out); }
.site-header.is-stuck .brand__logo { transform: scale(.86); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.brand__sub { font-size: .75rem; font-weight: 600; color: var(--dim); letter-spacing: .04em; }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer;
}
.nav-toggle .ic { width: 22px; height: 22px; }
.header__cta { display: none; }
@media (min-width: 560px) and (max-width: 1023.98px) {
  .header__cta { display: inline-flex; margin-left: auto; }
  .header__cta + .nav-toggle { margin-left: 4px; }
}
.nav-toggle .ic--close { display: none; }
.nav-toggle[aria-expanded="true"] .ic--open { display: none; }
.nav-toggle[aria-expanded="true"] .ic--close { display: block; }

.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__link { color: var(--ink); text-decoration: none; font-weight: 600; }
.nav__sub { display: none; }
.nav__svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav__svc a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); min-height: 44px; }
.nav__svc a:hover, .nav__svc a[aria-current="page"] { background: var(--accent-soft); }
.nav__svc strong { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.nav__svc small { display: block; color: var(--dim); font-size: .8125rem; line-height: 1.45; margin-top: 2px; }
.nav__svc-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.nav__svc-ic .ic { width: 18px; height: 18px; }
.nav__all { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; padding: 10px; min-height: 44px; }
.nav__all .ic { width: 16px; height: 16px; }
.header__login { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); text-decoration: none; min-height: 44px; padding: 0 6px; }
.header__login .ic { width: 18px; height: 18px; color: var(--accent); }
.header__login:hover { color: var(--accent); }
.portal-nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.portal-nav a { font-weight: 600; text-decoration: none; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.portal-nav a:hover, .portal-nav a[aria-current="page"] { color: var(--accent); }

/* Mobile and tablet menu: a panel under the header. Without JS it is simply shown under the header. */
@media (max-width: 1023.98px) {
  .header__menu { display: none; }
  .js .header__menu {
    position: fixed; left: 0; right: 0; top: var(--menu-top, var(--header-h)); bottom: 0; z-index: 59;
    display: flex; flex-direction: column; gap: 20px; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: var(--paper);
    border-top: 1px solid var(--line); visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), visibility 0s linear var(--t);
  }
  .js .header__menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out); }
  html:not(.js) .header__in { flex-wrap: wrap; }
  html:not(.js) .header__menu { display: flex; flex-direction: column; width: 100%; padding-bottom: 16px; }
  html:not(.js) .nav-toggle { display: none; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__item > .nav__link { display: flex; align-items: center; min-height: 56px; font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.75rem; font-weight: 500; }
  .nav__item--menu { display: grid; grid-template-columns: 1fr; padding-bottom: 12px; }
  .nav__panel { display: block; }
  .nav__all { display: none; }
  .header__actions { display: grid; gap: 10px; }
  .header__actions .magnetic, .header__actions .btn { width: 100%; }
  .header__actions .btn { min-height: 52px; font-size: 1rem; }
  .header__login { justify-content: center; border: 1px solid var(--line-2); border-radius: var(--r-pill); min-height: 52px; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 400px) {
  .brand__logo { height: 44px; }
  .brand__name { font-size: .9375rem; }
}

/* Desktop: inline navigation, the services menu opens on hover or with its toggle button. */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .header__menu { display: flex; align-items: center; gap: 20px; flex: 1; }
  .nav { margin: 0 auto; }
  .nav__list { display: flex; align-items: center; gap: 2px; }
  .nav__item { position: relative; display: flex; align-items: center; }
  .nav__link { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: var(--fs-sm); border-radius: var(--r-pill); transition: background var(--t-fast), color var(--t-fast); }
  .nav__link:hover { background: rgba(241, 230, 248, .7); color: var(--accent-dark); }
  .nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); }
  .nav__item--menu .nav__link { padding-right: 6px; }
  .nav__sub { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 44px; border: 0; background: transparent; color: var(--dim); cursor: pointer; border-radius: var(--r-xs); }
  .nav__sub .ic { width: 16px; height: 16px; transition: transform var(--t) var(--ease-out); }
  .nav__sub[aria-expanded="true"] .ic { transform: rotate(180deg); }
  .nav__panel {
    position: absolute; top: calc(100% + 10px); left: -16px; width: 440px; padding: 10px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), visibility 0s linear var(--t);
  }
  .nav__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .nav__item--menu:hover .nav__panel, .nav__item--menu.is-open .nav__panel {
    visibility: visible; opacity: 1; transform: none; transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out);
  }
  .nav__all { width: 100%; margin-top: 6px; border-radius: var(--r-sm); background: var(--tint); padding: 10px 14px; }
  .header__actions { display: flex; align-items: center; gap: 10px; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .brand__text { display: none; }
}

/* ---------------------------------------------------------------- page hero (inner pages) */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--tint); padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem); }
.page-hero__art { position: absolute; z-index: -1; right: -120px; top: -90px; width: min(560px, 80vw); aspect-ratio: 1; background: url('../img/bg/blob-soft.svg') center/contain no-repeat; opacity: .9; pointer-events: none; }
.page-hero__art::after { content: ''; position: absolute; right: 28%; bottom: 22%; width: 96px; height: 81px; background: url('../img/bg/butterfly.png') center/contain no-repeat; opacity: .8; transform: rotate(-8deg); }
.page-hero__in { position: relative; }
.page-hero__in > * { max-width: 56rem; }
.page-hero h1 { margin-bottom: .35em; }
.page-hero + .section { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.page-hero .lead { max-width: 54ch; }
.crumbs { font-size: var(--fs-sm); color: var(--dim); margin-bottom: 1.2rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs li + li::before { content: ''; width: 6px; height: 6px; margin: 0 6px 0 2px; border-right: 1.5px solid var(--faint); border-top: 1.5px solid var(--faint); transform: rotate(45deg); }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 767.98px) { .page-hero__art { right: -180px; top: -60px; opacity: .55; } .page-hero__art::after { display: none; } }

/* ---------------------------------------------------------------- section heads */
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section-head h2 { margin-bottom: .4em; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }
.section-head--split { max-width: none; display: grid; gap: 16px 48px; align-items: end; }
.section-head--split h2, .section-head--split .lead { margin: 0; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.15fr .85fr; } }

/* ---------------------------------------------------------------- cards, grids, chips */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .6rem;
}
.card h3 { margin: 0; }
.card p { color: var(--dim); margin: 0; }
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); margin-bottom: .25rem; }
.card__icon .ic { width: 22px; height: 22px; }
.card__link { margin-top: auto; padding-top: .6rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.card__link .ic { width: 18px; height: 18px; transition: transform var(--t) var(--ease-out); }
.card__link:hover .ic { transform: translateX(3px); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.panel h2 { font-family: var(--font); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; margin-bottom: 4px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span, span.chip, li.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--card); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.3;
}
.chip span { cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.chip span:hover { border-color: var(--accent); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip--soft, span.chip--soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.checks li { display: flex; gap: .65rem; align-items: flex-start; color: var(--dim); }
.checks .ic { color: var(--accent); margin-top: .28em; width: 18px; height: 18px; }
.checks strong { color: var(--ink); }

.quote-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); margin: 0; }
.quote-card blockquote { margin: 0 0 .8rem; color: var(--ink); }
.quote-card figcaption { color: var(--dim); font-size: var(--fs-sm); }
.stars { display: flex; gap: 2px; color: #B58A1B; margin: 0 0 .6rem; }
.stars .ic { width: 16px; height: 16px; }

.empty { text-align: center; padding: 3.5rem 1rem; color: var(--dim); }
.empty .card__icon { margin: 0 auto 1rem; }
.count { color: var(--dim); font-weight: 500; }

/* spotlight (motion-primitives Spotlight): a soft lavender light follows the pointer, moved by site.js */
.spot { position: relative; overflow: hidden; isolation: isolate; }
.spot__light {
  position: absolute; z-index: -1; left: 0; top: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(227, 184, 242, .55), rgba(241, 230, 248, .35) 40%, transparent 70%);
  opacity: 0; pointer-events: none; transition: opacity 240ms ease; will-change: transform, opacity;
}
.spot.is-lit .spot__light { opacity: 1; }

/* ---------------------------------------------------------------- forms */
.form { margin: 0; }
.form__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (min-width: 720px) {
  .form__grid { grid-template-columns: repeat(6, 1fr); }
  .form__grid > .field { grid-column: span 3; }
  .form__grid > .field--third { grid-column: span 2; }
  .form__grid > .field--wide { grid-column: span 4; }
  .form__grid > .field--full { grid-column: 1 / -1; }
}
.field label, .field legend { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.field .hint { font-weight: 500; }
.req { color: var(--bad); }
fieldset.field, fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; width: 100%; min-height: 48px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:hover, select:hover, textarea:hover { border-color: #BFB4C7; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--accent); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235E5A64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
textarea { min-height: 8rem; resize: vertical; }
.radios { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.radios legend { width: 100%; margin-bottom: 4px; }
.radios label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; min-height: 44px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 24px; }
.form__note { color: var(--dim); font-size: var(--fs-xs); margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.form__note .ic { width: 15px; height: 15px; color: var(--accent); }
.form__msg { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--bad-soft); border: 1px solid #F0C4BF; color: #8A1F18; font-size: var(--fs-sm); font-weight: 600; }
.form__success { text-align: center; padding: 1.5rem .5rem; }
.form__success h3 { margin-bottom: .3rem; }
.form__success p { color: var(--dim); margin: 0; }
.form__success-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); margin-bottom: .8rem; }
.form__success-ic .ic { width: 24px; height: 24px; }
.form.is-done .form__grid, .form.is-done .form__foot, .form.is-done .cf-turnstile, .form.is-done .signup-form__row, .form.is-done > .form__note { display: none; }
.cf-turnstile { margin-top: 16px; }

.flash { border-radius: var(--r-sm); padding: 12px 16px; font-size: var(--fs-sm); margin: 0 0 1rem; display: flex; gap: .6rem; align-items: flex-start; border: 1px solid transparent; }
.flash p { margin: 0; }
.flash .ic { width: 18px; height: 18px; margin-top: .15em; }
.flash--ok { background: var(--ok-soft); border-color: #BFDDCD; color: #1E5A40; }
.flash--err { background: var(--bad-soft); border-color: #F0C4BF; color: #8A1F18; }
.flash--warn { background: var(--warn-soft); border-color: #EBD7A8; color: #6E4C0B; }
.flash--note { background: var(--accent-soft); border-color: #E2CDEE; color: var(--accent-dark); }

.auth-wrap { max-width: 28rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter); }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); box-shadow: var(--shadow); }
.auth-card h1 { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.5rem); }
.auth-card .field { margin-bottom: 16px; }
.auth-card .lead { font-size: var(--fs-base); margin-bottom: 1.2rem; }
.auth-help { font-size: var(--fs-sm); color: var(--dim); margin: 1.2rem 0 0; line-height: 1.9; }
.data-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.data-list li { display: grid; grid-template-columns: minmax(0, 14ch) 1fr; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.data-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.data-list dt, .data-list .k { color: var(--dim); font-weight: 600; font-size: var(--fs-sm); }
@media (max-width: 480px) { .data-list li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------------------------------------------------------------- accordion (motion-primitives Accordion, on native details) */
.acc-list { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; min-height: 64px; cursor: pointer; font-weight: 700; font-size: var(--fs-md); line-height: 1.4; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--accent-dark); }
.acc__ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); transition: transform var(--t) var(--ease-out), background var(--t), color var(--t), border-color var(--t); }
.acc__ic .ic { width: 16px; height: 16px; }
.acc[open] .acc__ic { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.acc__body { padding: 0 56px 22px 0; color: var(--dim); }
.acc__body p { margin: 0 0 .8em; }
.acc__body p:last-child, .acc__body ul:last-child { margin-bottom: 0; }
.acc__body ul { padding-left: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .acc[open] .acc__body { animation: accIn 420ms var(--ease-out); }
}
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .acc__body { padding-right: 0; } }

/* legacy kit FAQ item */
.faq-item { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { color: var(--dim); margin: .7rem 0 0; }

/* ---------------------------------------------------------------- prose, blog, pager */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 0; }
.prose h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); margin: 2.2rem 0 .6rem; }
.prose h3 { margin: 1.6rem 0 .4rem; }
.prose p, .prose li { color: #45424B; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose blockquote { border-left: 3px solid var(--lav); margin: 1.4rem 0; padding: .2rem 0 .2rem 1.1rem; color: var(--dim); font-style: italic; }
.prose img { border-radius: var(--radius); }
.prose a { font-weight: 600; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; }
.filters a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 8px 16px; text-decoration: none; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; background: var(--card); }
.filters a:hover { border-color: var(--accent); }
.filters a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters a[aria-current="true"] .count { color: rgba(255, 255, 255, .7); }
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink); border: 1px solid var(--line-2); font-weight: 600; }
.pager a:hover { border-color: var(--accent); }
.pager span[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager .ic { width: 16px; height: 16px; }
.pager__gap { border: 0 !important; }
.post-card { padding: 0; overflow: hidden; gap: 0; transition: box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-out); }
.post-card:hover { box-shadow: var(--shadow); }
.post-card__media { display: block; aspect-ratio: 16 / 10; background: var(--tint) url('../img/bg/blob-soft.svg') center/70% no-repeat; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__media .ic { width: 40px; height: 40px; color: var(--accent); margin: auto; height: 100%; }
.post-card__body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card__meta { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); margin: 0; }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a:hover { color: var(--accent-dark); }
.post-layout { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 1fr) 320px; } .post-aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.post-aside .card + .card { margin-top: 16px; }
.post-aside h2 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; margin: 0; }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- home: hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0 clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(60% 55% at 88% 18%, rgba(227, 184, 242, .45), transparent 70%),
  radial-gradient(45% 40% at 8% 92%, rgba(241, 230, 248, .9), transparent 70%); }
.hero__in { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); align-items: center; }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 1.4rem; padding: 6px 14px 6px 8px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.hero__kicker img { width: 30px; height: auto; }
@media (max-width: 479.98px) {
  .hero .btn-row > .magnetic, .hero .btn-row > .btn, .hero .btn-row .btn { width: 100%; }
  .hero__kicker { font-size: .8125rem; }
}
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.02em; font-weight: 500; margin-bottom: .4em; }
.display em { display: block; }
.hero__lead { font-size: var(--fs-lead); color: var(--dim); max-width: 50ch; margin-bottom: 0; }
.hero .btn-row { margin-top: 2rem; }
.cred-chips { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cred-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); border: 1px solid var(--line); font-size: .875rem; font-weight: 600; color: var(--ink); }
.cred-chips .ic { width: 18px; height: 18px; color: var(--accent); }

.hero__visual { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 72px auto; }
.hero__portrait { grid-column: 4 / 13; grid-row: 1 / 3; }
.hero .pq { grid-column: 1 / 13; grid-row: 2 / 4; position: relative; z-index: 2; }
@media (min-width: 640px) {
  .hero__visual { grid-template-rows: auto 160px auto; max-width: 620px; width: 100%; margin-inline: auto; }
  .hero__portrait { grid-column: 6 / 13; }
  .hero .pq { grid-column: 1 / 10; }
}
@media (min-width: 1024px) {
  .hero__in { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; }
  .hero__copy { padding-top: clamp(1rem, 3vw, 3.5rem); }   /* top aligned, so answering the question never moves the copy */
  .hero__visual { grid-template-rows: auto 210px auto; max-width: none; margin: 0 -8px 0 0; }
  .hero__portrait { grid-column: 4 / 13; }
  .hero .pq { grid-column: 1 / 11; }
}

/* portrait slot: her photo, or the RN monogram composition until there is one */
.portrait { margin: 0; position: relative; }
.portrait__frame { position: relative; overflow: hidden; border-radius: 200px 200px var(--r-xl) var(--r-xl); aspect-ratio: 4 / 5; background: var(--tint) url('../img/bg/hero-blob.svg') center/cover no-repeat; box-shadow: var(--shadow-lg); border: 6px solid #fff; }
.portrait__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.portrait__mono { position: absolute; inset: 0; display: grid; place-items: center; }
.portrait__rn { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 500; font-size: clamp(6.5rem, 4rem + 9vw, 11rem); line-height: .8; letter-spacing: -.04em; color: var(--ink); font-optical-sizing: auto; font-variation-settings: 'SOFT' 30; transform: translateY(6%); }
.portrait__script { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%) rotate(-4deg); font-family: var(--font-script); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); color: var(--ink); white-space: nowrap; text-shadow: 0 0 12px var(--tint), 0 0 4px var(--tint); }
.portrait__fly { position: absolute; width: 38%; height: auto; left: 12%; top: 13%; transform: rotate(-6deg); }
.portrait__cap { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; padding: 8px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-sm); line-height: 1.3; backdrop-filter: blur(6px); }
.portrait__cap strong { font-size: .875rem; }
.portrait__cap span { font-size: .75rem; color: var(--dim); font-weight: 600; }
.hero .portrait__cap { top: 22px; bottom: auto; right: 0; transform: translateX(10%); }
.hero .portrait__mono { bottom: 34%; }
.hero .portrait__rn { font-size: clamp(5rem, 3rem + 7vw, 8.5rem); }
.hero .portrait__script { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); }
.hero .portrait__fly { width: 30%; left: 14%; top: 9%; }

/* ---------------------------------------------------------------- practice question card (the hero moment) */
.pq { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: clamp(1.1rem, .9rem + 1vw, 1.6rem); }
.pq__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pq__tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-sm); color: var(--accent); margin: 0; }
.pq__tag .ic { width: 18px; height: 18px; }
.pq__type { font-size: .75rem; font-weight: 700; color: var(--dim); background: var(--tint); border-radius: var(--r-pill); padding: 4px 10px; }
.pq__q { font-weight: 700; font-size: 1.0625rem; line-height: 1.45; color: var(--ink); margin: 0 0 14px; padding: 0; }
.pq__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pq__opt { position: relative; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; min-height: 52px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; font-size: var(--fs-sm); line-height: 1.45; transition: border-color var(--t-fast), background var(--t-fast); }
.pq__opt:hover { border-color: var(--accent); background: #fff; }
.pq__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pq__opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.pq__letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); font-weight: 800; font-size: .8125rem; color: var(--dim); background: #fff; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.pq__mark { width: 22px; height: 22px; display: none; }
.pq__mark .ic { width: 22px; height: 22px; }
.pq__opt.is-picked .pq__letter { background: var(--ink); color: #fff; border-color: var(--ink); }
.pq.is-answered .pq__opt.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.pq.is-answered .pq__opt.is-correct .pq__letter { background: var(--ok); border-color: var(--ok); color: #fff; }
.pq.is-answered .pq__opt.is-correct .pq__mark--ok { display: block; color: var(--ok); }
.pq.is-answered .pq__opt.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.pq.is-answered .pq__opt.is-wrong .pq__letter { background: var(--bad); border-color: var(--bad); color: #fff; }
.pq.is-answered .pq__opt.is-wrong .pq__mark--no { display: block; color: var(--bad); }
.pq__live { margin: 12px 0 0; font-weight: 700; font-size: var(--fs-sm); min-height: 0; }
.pq__live:empty { display: none; }
.pq__live.is-ok { color: var(--ok); }
.pq__live.is-no { color: var(--bad); }
.pq__why { margin-top: 12px; border-top: 1px solid var(--line); }
.pq__why > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding-top: 6px; cursor: pointer; font-weight: 700; font-size: var(--fs-sm); color: var(--accent); }
.pq__why > summary::-webkit-details-marker { display: none; }
.pq__why > summary .ic { width: 16px; height: 16px; transition: transform var(--t) var(--ease-out); }
.pq__why[open] > summary .ic { transform: rotate(180deg); }
.pq__why-body { font-size: var(--fs-sm); color: var(--dim); }
.pq__why-body p { margin: 0 0 .7em; }
.pq__why-body ul { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 6px; }
.pq__why-body li { padding-left: 14px; border-left: 2px solid var(--line-2); }
.pq__why-body li.is-key { border-left-color: var(--ok); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .pq__why[open] .pq__why-body { animation: accIn 420ms var(--ease-out); } }
.pq__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px; border-radius: var(--r-sm); background: var(--accent-soft); }
.pq__more p { margin: 0; color: var(--accent-dark); font-weight: 700; width: 100%; }
.pq__more .btn { min-height: 44px; }
.pq__reset { margin-top: 10px; border: 0; background: none; padding: 0 2px; min-height: 44px; font: 600 var(--fs-sm)/1 var(--font); color: var(--dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pq__reset[hidden] { display: none; }
.pq__note { font-size: .75rem; color: var(--dim); margin: 10px 0 0; }

/* ---------------------------------------------------------------- home: sound familiar */
.feel { overflow: hidden; }
.feel::before { content: ''; position: absolute; right: -120px; top: 40px; width: 520px; height: 390px; background: url('../img/bg/circle-scatter.svg') center/contain no-repeat; opacity: .7; pointer-events: none; }
.feel__head { max-width: 40rem; margin-bottom: clamp(2.2rem, 1.6rem + 2vw, 3.5rem); position: relative; }
.feel__head h2 { font-size: var(--fs-h2); }
.feel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; }
.feel__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.3rem, 1rem + 1.2vw, 2rem); display: flex; flex-direction: column; gap: 14px; }
.feel__thought { margin: 0; font-family: var(--font-display); font-variation-settings: var(--soft); font-style: italic; font-size: clamp(1.75rem, 1.5rem + .9vw, 2.125rem); line-height: 1.18; color: var(--ink); }
.feel__answer { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--tint); color: var(--dim); display: flex; gap: 10px; }
.feel__answer .ic { color: var(--accent); width: 20px; height: 20px; margin-top: .2em; }
@media (min-width: 768px) {
  .feel__list { grid-template-columns: 1fr 1fr; }
  .feel__item:nth-child(even) { transform: translateY(28px); }
  .feel__list { padding-bottom: 28px; }
}
.feel__turn { margin: clamp(3.5rem, 2.5rem + 4vw, 6rem) auto 0; max-width: 54rem; text-align: center; }
.feel__ink { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); line-height: 1.3; color: var(--ink); margin: 0; font-weight: 400; }
.feel__ink strong { font-weight: 500; font-style: italic; color: var(--accent-dark); }
.feel__by { margin: 1.4rem 0 0; color: var(--dim); font-weight: 600; font-size: var(--fs-sm); }
.pillars { list-style: none; margin: clamp(3.5rem, 2.5rem + 3vw, 5rem) 0 0; padding: 0; display: grid; gap: 28px 32px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillars li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.pillars .card__icon { margin: 0; width: 44px; height: 44px; }
.pillars h3 { font-size: 1.0625rem; margin: 2px 0 4px; }
.pillars p { margin: 0; color: var(--dim); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- home: services bento (21st.dev bento grid) */
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
.bento__card { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); box-shadow: var(--shadow-sm); transition: box-shadow var(--t) var(--ease-out), border-color var(--t); }
.bento__card:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.bento__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bento__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.bento__ic .ic { width: 24px; height: 24px; }
.bento__kind { font-size: .75rem; font-weight: 700; color: var(--dim); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 4px 10px; }
.bento__card h3, .bento__title { margin: 6px 0 0; font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); font-weight: 600; line-height: 1.25; }
.bento__card h3 a, .bento__title a { color: inherit; text-decoration: none; }
.bento__card h3 a:hover, .bento__title a:hover { color: var(--accent-dark); }
.bento__card p { margin: 0; color: var(--dim); }
.bento__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.bento__list li { display: flex; gap: 10px; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.bento__list .ic { width: 18px; height: 18px; color: var(--accent); margin-top: .15em; }
.bento__foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bento__price { font-weight: 800; font-size: var(--fs-sm); color: var(--ink); }
.bento__price small { display: block; font-weight: 600; color: var(--dim); font-size: .75rem; }
.bento__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.bento__links .link-arrow { font-size: var(--fs-sm); }
.bento__card--feature { background: linear-gradient(160deg, #fff 40%, var(--accent-soft)); }
.plan { margin: 18px 0 4px; padding: 16px; border-radius: var(--radius); background: rgba(255, 255, 255, .85); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.plan__h { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; color: var(--dim); margin-bottom: 10px; }
.plan__h .ic { width: 16px; height: 16px; color: var(--accent); }
.plan__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan__rows li { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); padding: 8px 10px; border-radius: var(--r-sm); background: var(--paper); }
.plan__day { font-size: .75rem; font-weight: 800; color: var(--accent-dark); background: var(--accent-soft); border-radius: var(--r-pill); text-align: center; padding: 3px 0; }
.plan__rows em { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--dim); white-space: nowrap; }
@media (max-width: 480px) { .plan__rows li { grid-template-columns: 44px 1fr; } .plan__rows em { grid-column: 2; } }
.bento__card--feature h3, .bento__card--feature .bento__title { font-weight: 500; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.1; }
.bento__card--wide { background: var(--ink); color: #fff; border-color: var(--ink); }
.bento__card--wide p { color: var(--on-dark-dim); }
.bento__card--wide h3, .bento__card--wide .bento__title, .bento__card--wide .bento__price { color: #fff; }
.bento__card--wide .bento__ic { background: rgba(255, 255, 255, .1); color: var(--lav-2); }
.bento__card--wide .bento__kind { color: var(--on-dark-dim); border-color: rgba(255, 255, 255, .25); }
.bento__card--wide .link-arrow { color: var(--lav-2); }
.bento__card--wide .spot__light { background: radial-gradient(circle at center, rgba(203, 108, 230, .35), transparent 70%); }
.bento__card--wide :focus-visible { outline-color: var(--lav-2); }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__card--feature { grid-column: 1 / -1; }
  .bento__card:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .bento__card { grid-column: span 4; }
  .bento__card--feature { grid-column: 1 / 8; grid-row: span 2; padding: 2.4rem; }
  .bento__card--side { grid-column: 8 / 13; }
  .bento__card--wide { grid-column: 8 / 13; }
  .bento__card:last-child:nth-child(even) { grid-column: span 4; }
}
.svc__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 18px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(255, 255, 255, .7); }
.svc__more p { margin: 0; color: var(--dim); }
.svc__more strong { color: var(--ink); }

/* ---------------------------------------------------------------- how it works (pinned on desktop by motion.js) */
.how__in { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
.how__intro .lead { margin-bottom: 0; }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.how__steps::before { content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 1.5px; background: linear-gradient(var(--lav), var(--line-2)); }
.how__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; padding: 4px 0 18px; }
.how__n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--lav); font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.75rem; font-weight: 500; color: var(--accent-dark); line-height: 1; }
.how__step h3 { margin: 10px 0 6px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); }
.how__step p { color: var(--dim); margin: 0 0 12px; max-width: 52ch; }
.how__bits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.how__bits li { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--accent-dark); background: var(--accent-soft); border-radius: var(--r-pill); padding: 5px 12px; }
.how__bits .ic { width: 14px; height: 14px; }
@media (min-width: 1024px) {
  .how__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
  .how__intro { position: sticky; top: calc(var(--header-h) + 48px); }
}
/* pinned state: one step at a time on a stage, with a progress rail of the four steps */
.how.is-pinned { padding-top: calc(var(--header-h) + 40px); min-height: 100vh; display: flex; align-items: center; }
.how.is-pinned .how__in { width: 100%; align-items: center; }
.how.is-pinned .how__intro { position: static; }
.how__progress { display: none; }
.how.is-pinned .how__progress { display: block; position: relative; margin: 2rem 0 0; padding-left: 26px; max-width: 22rem; }
.how.is-pinned .how__marks { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.how__rail { position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.how__rail span { position: absolute; inset: 0; background: linear-gradient(var(--lav), var(--accent)); transform-origin: top; transform: scaleY(0); }
.how__marks li { position: relative; padding: 8px 0; font-weight: 700; color: var(--faint); transition: color var(--t); }
.how__marks li::before { content: ''; position: absolute; left: -25px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2); transition: border-color var(--t), background var(--t); }
.how__marks li.is-on { color: var(--ink); }
.how__marks li.is-on::before { border-color: var(--accent); background: var(--accent); }
.how.is-pinned .how__steps { display: grid; grid-template-areas: 'stage'; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.how.is-pinned .how__steps::before { display: none; }
.how.is-pinned .how__step { grid-area: stage; grid-template-columns: 1fr; gap: 0; padding: clamp(2rem, 1.5rem + 2vw, 3rem); min-height: 400px; align-content: start; }
.how.is-pinned .how__n { width: auto; height: auto; border: 0; background: none; place-items: start; font-size: clamp(4.5rem, 3rem + 4vw, 7rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--lav); margin-bottom: 16px; }
.how.is-pinned .how__step h3 { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1.1; margin-top: 0; }
.how.is-pinned .how__step p { font-size: var(--fs-md); }

/* ---------------------------------------------------------------- bootcamp spotlight */
.boot__in { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .boot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.boot__card { position: relative; isolation: isolate; border-radius: var(--r-xl); padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.boot__card h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.boot__card .lead { font-size: var(--fs-md); }
/* motion-primitives GlowEffect, breathe mode: transform and opacity only */
.boot__glow { position: absolute; inset: 8% 6% -4%; z-index: -2; border-radius: inherit; background: radial-gradient(closest-side, rgba(203, 108, 230, .5), rgba(227, 184, 242, .25) 60%, transparent); filter: blur(28px); opacity: .8; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .boot__glow { animation: breathe 6s ease-in-out infinite alternate; } }
@keyframes breathe { from { transform: scale(.96); opacity: .65; } to { transform: scale(1.04); opacity: .95; } }
.boot__card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--card); }
/* motion-primitives BorderTrail: a light travels the card border on a rect() offset path */
.trail { position: absolute; inset: -1px; border-radius: inherit; border: 2px solid transparent; pointer-events: none; z-index: 1;
  -webkit-mask: linear-gradient(transparent, transparent) padding-box, linear-gradient(#000, #000) border-box; -webkit-mask-composite: source-in;
  mask: linear-gradient(transparent, transparent) padding-box, linear-gradient(#000, #000) border-box; mask-composite: intersect; }
.trail span { position: absolute; width: 140px; aspect-ratio: 1; background: radial-gradient(closest-side, var(--lav), var(--accent) 45%, transparent 75%); offset-path: rect(0 auto auto 0 round 140px); offset-anchor: center; offset-distance: 0%; }
@media (prefers-reduced-motion: no-preference) { .trail span { animation: trail 9s linear infinite; } }
@keyframes trail { to { offset-distance: 100%; } }
@supports not (offset-path: rect(0 auto auto 0)) { .trail { display: none; } .boot__card { border-color: var(--lav-2); } }
@media (prefers-reduced-motion: reduce) { .trail { display: none; } .boot__card { border-color: var(--lav-2); } }
.boot__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1px; margin: 1.8rem 0 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.boot__facts div { background: var(--paper); padding: 14px 16px; }
.boot__facts dt { font-size: .75rem; font-weight: 700; color: var(--dim); margin-bottom: 2px; }
.boot__facts dd { margin: 0; font-weight: 800; color: var(--ink); line-height: 1.35; }
.boot__facts dd small { display: block; font-weight: 600; color: var(--dim); }
.boot__seats { color: var(--accent-dark) !important; }
.boot__soon { display: flex; gap: 12px; align-items: flex-start; margin: 1.8rem 0 0; padding: 16px 18px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.boot__soon .ic { width: 22px; height: 22px; margin-top: .1em; }
.boot__soon p { margin: 0; }
.boot__weeks h3 { margin-bottom: 4px; }
.boot__weeks > p { color: var(--dim); margin-bottom: 1.2rem; }
.wk { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 54px; height: 30px; margin-right: 14px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-dark); font-size: .75rem; font-weight: 800; }
.boot__weeks .acc summary { justify-content: flex-start; }
.boot__weeks .acc summary > span:first-child { flex: 1; display: flex; align-items: center; }
.boot__weeks .acc__body { padding-left: 68px; }
@media (max-width: 600px) { .boot__weeks .acc__body { padding-left: 0; } .wk { width: 48px; margin-right: 10px; } }

/* ---------------------------------------------------------------- meet Chakeidra */
.meet__in { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 1024px) { .meet__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.meet__media { position: relative; isolation: isolate; }
.meet__media::before { content: ''; position: absolute; z-index: -1; right: -36px; top: -44px; width: 240px; height: 240px; background: url('../img/bg/blob-soft.svg') center/contain no-repeat; }
.meet__note { position: relative; margin: 0; padding: clamp(2rem, 1.5rem + 2vw, 3rem); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.meet__note img.meet__fly { width: 92px; height: auto; margin-bottom: 1rem; }
.meet__quote { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.375rem); line-height: 1.22; margin: 0 0 1.5rem; color: var(--ink); }
.meet__sign { font-family: var(--font-script); font-size: clamp(2.75rem, 2.2rem + 2vw, 3.75rem); line-height: 1; color: var(--accent-dark); margin: 0; }
.meet__role { margin: .4rem 0 0; font-size: var(--fs-sm); color: var(--dim); font-weight: 600; }
.meet__photo { margin-top: 1.5rem; }
.meet__photo .portrait__frame { aspect-ratio: 1; border-radius: var(--r-lg); }
.meet__copy .lead { margin-bottom: 1.2rem; }
.meet__copy > p { color: #45424B; max-width: 62ch; }
.creds { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .creds { grid-template-columns: 1fr 1fr; } }
.creds li { background: var(--card); padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.creds__big { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 2.75rem; line-height: 1; font-weight: 500; color: var(--accent-dark); min-width: 2.2ch; font-variant-numeric: tabular-nums lining-nums; }
.creds .card__icon { margin: 0; }
.creds strong { display: block; font-size: var(--fs-sm); line-height: 1.35; }
.creds span.creds__sub { display: block; font-size: .8125rem; color: var(--dim); line-height: 1.4; }

/* ---------------------------------------------------------------- repeat test takers */
.retake__in { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 1024px) { .retake__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.retake__steps { list-style: none; counter-reset: rs; margin: 2rem 0 0; padding: 0; display: grid; gap: 18px; }
.retake__steps li { counter-increment: rs; display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.retake__steps li::before { content: counter(rs); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--lav); font-weight: 800; color: var(--accent-dark); }
.retake__steps strong { display: block; color: var(--ink); }
.retake__steps span { color: var(--dim); }
.cpr { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
.cpr__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.cpr__head strong { font-size: var(--fs-sm); }
.cpr__head span { font-size: .75rem; font-weight: 700; color: var(--dim); background: var(--tint); padding: 4px 10px; border-radius: var(--r-pill); }
.cpr__scale { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; font-size: .6875rem; font-weight: 700; color: var(--dim); margin-bottom: 6px; }
.cpr__scale span:last-child { display: flex; justify-content: space-between; }
.cpr__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cpr__rows li { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; font-size: .8125rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cpr__bar { position: relative; height: 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--bad-soft) 0 33.3%, var(--warn-soft) 33.3% 66.6%, var(--ok-soft) 66.6%); border: 1px solid var(--line); }
.cpr__bar i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.cpr__rows li.is-focus { color: var(--accent-dark); }
.cpr__rows li.is-focus .cpr__bar i { background: var(--accent); }
.cpr figcaption { margin-top: 16px; font-size: .8125rem; color: var(--dim); display: flex; gap: 8px; }
.cpr figcaption .ic { width: 16px; height: 16px; color: var(--accent); margin-top: .2em; }
@media (max-width: 420px) { .cpr__scale, .cpr__rows li { grid-template-columns: minmax(0, 1fr) 110px; } }

/* ---------------------------------------------------------------- testimonials (motion-primitives InfiniteSlider, vertical columns) */
.voices__cols { position: relative; display: grid; gap: 16px; grid-template-columns: 1fr; }
.voices__col { min-width: 0; }
.voice { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.voice blockquote { margin: 0 0 1rem; color: var(--ink); font-size: 1rem; line-height: 1.65; }
.voice figcaption { display: flex; align-items: center; gap: 12px; }
.voice__av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; }
.voice__meta strong { display: block; font-size: var(--fs-sm); line-height: 1.3; }
.voice__meta span { display: block; font-size: .8125rem; color: var(--dim); }
.voices__track { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.voices__track > li[aria-hidden="true"] { display: none; }
/* static (no JS, reduced motion, or fewer than three stories): one tidy grid */
.voices__cols:not(.is-moving) { display: block; }
.voices__cols:not(.is-moving) .voices__col:nth-child(n+2) { display: none; }
.voices__cols:not(.is-moving) .voices__track { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
@media (min-width: 768px) { .voices__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .voices__cols { grid-template-columns: repeat(3, 1fr); } }
/* animated: each column scrolls up on its own; the copy (aria-hidden) closes the loop */
.js .voices__cols.is-moving { height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.js .voices__cols.is-moving .voices__track > li[aria-hidden="true"] { display: block; }
.js .voices__cols.is-moving .voices__track { will-change: transform; }
@media (max-width: 767.98px) { .js .voices__cols.is-moving .voices__col:nth-child(n+2) { display: none; } .js .voices__cols.is-moving { height: 560px; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .js .voices__cols.is-moving .voices__col:nth-child(n+3) { display: none; } }
.voices__ctl { display: flex; justify-content: center; margin-top: 20px; }
.marquee-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--card); font: 600 var(--fs-sm)/1 var(--font); color: var(--ink); cursor: pointer; }
.marquee-toggle .ic { width: 16px; height: 16px; }
.marquee-toggle .ic--play { display: none; }
.marquee-toggle[aria-pressed="true"] .ic--pause { display: none; }
.marquee-toggle[aria-pressed="true"] .ic--play { display: block; }
.marquee-toggle[hidden] { display: none; }

/* ---------------------------------------------------------------- study resources */
.res__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.prod { padding: 0; overflow: hidden; gap: 0; }
.prod__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--tint) url('../img/bg/blob-soft.svg') center/62% no-repeat; overflow: hidden; color: var(--accent); }
.prod__media img { width: 100%; height: 100%; object-fit: cover; }
.prod__media .ic { width: 44px; height: 44px; }
.prod__cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 44%; aspect-ratio: 3 / 4; padding: 12% 10% 10%; border-radius: 6px 12px 12px 6px; background: linear-gradient(155deg, #fff 0%, var(--accent-soft) 55%, var(--lav-2) 100%); box-shadow: -6px 0 0 -2px rgba(122, 62, 157, .18) inset, var(--shadow-lg); transform: rotate(-3deg); transition: transform var(--t-slow) var(--ease-out); }
.prod:hover .prod__cover { transform: rotate(0) translateY(-4px); }
.prod__cover img { width: 38%; height: auto; }
.prod__cover-t { font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 600; font-size: clamp(.95rem, .8rem + .5vw, 1.15rem); line-height: 1.1; color: var(--ink); }
.prod__cover-b { font-size: .5625rem; font-weight: 800; letter-spacing: .06em; color: var(--accent-dark); }
.prod__badge { position: absolute; left: 12px; top: 12px; font-size: .75rem; font-weight: 800; color: var(--accent-dark); background: #fff; border-radius: var(--r-pill); padding: 4px 10px; box-shadow: var(--shadow-sm); }
.prod__body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.prod__body h3 { font-size: 1.125rem; }
.prod__body h3 a { color: inherit; text-decoration: none; }
.prod__body h3 a::after { content: ''; position: absolute; inset: 0; }
.prod__body h3 a:focus-visible { outline: none; }
.prod:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.prod__price { margin-top: auto; padding-top: .6rem; font-weight: 800; color: var(--ink); }
.guide { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; padding: clamp(1.6rem, 1.2rem + 2.5vw, 3.5rem); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.guide::before { content: ''; position: absolute; z-index: -1; right: -110px; top: -130px; width: 360px; height: 360px; background: url('../img/bg/blob-soft.svg') center/contain no-repeat; opacity: .6; }
@media (min-width: 1024px) { .guide { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.guide h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.guide .checks { margin-top: 1.2rem; }
.signup-form__row { display: grid; gap: 14px; align-items: end; }
@media (min-width: 640px) { .signup-form__row { grid-template-columns: 1fr 1.4fr; } .signup-form__row .btn { grid-column: 1 / -1; justify-self: start; } }
.signup-form label { white-space: nowrap; }
.signup-form .form__note { margin-top: 12px; }
.signup-form .btn { min-height: 48px; }

/* ---------------------------------------------------------------- FAQ preview and FAQ page */
.faq__in { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
@media (min-width: 1024px) { .faq__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .faq__head { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; } }
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); margin-bottom: 1rem; }
.faq-toc { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 4px; }
.faq-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; color: var(--ink); }
.faq-toc a:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ---------------------------------------------------------------- closing call to action (the one dark band) */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--dark) url('../img/bg/blurry-gradient.svg') center/cover no-repeat; color: var(--on-dark); padding: clamp(4.5rem, 3rem + 6vw, 8rem) 0; text-align: center; }
.cta-band__in { max-width: 52rem; position: relative; }
.cta-band__fly { width: 84px; height: auto; margin: 0 auto 1.4rem; filter: brightness(1.25) saturate(1.1); opacity: .95; }
.cta-band h2 { color: #fff; font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); margin-bottom: .4em; }
.cta-band p { color: var(--on-dark-dim); font-size: var(--fs-lead); max-width: 46ch; margin: 0 auto; }
.cta-band .btn-row { justify-content: center; margin-top: 2.2rem; }

/* ---------------------------------------------------------------- footer (light) */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); padding: clamp(3.5rem, 2.5rem + 3vw, 5rem) 0 1.5rem; color: var(--dim); font-size: var(--fs-sm); }
.footer__grid { display: grid; gap: 2.4rem 2rem; grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; max-width: 26rem; }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .footer__brand { grid-column: auto; } }
.footer__logo { display: inline-block; }
.footer__logo img { width: 112px; height: auto; }
.footer__tag { margin: 1rem 0 1.2rem; line-height: 1.65; }
.footer__h { font-family: var(--font); font-size: var(--fs-sm); font-weight: 800; color: var(--ink); margin: 0 0 .9rem; letter-spacing: 0; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--dim); text-decoration: none; }
.footer__links a:hover { color: var(--accent); text-decoration: underline; }
.footer__links--icons li { display: flex; gap: 10px; align-items: center; }
.footer__links--icons .ic { width: 18px; height: 18px; color: var(--accent); }
.footer__legal { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.footer__note { font-size: var(--fs-xs); color: var(--dim); margin: 0 0 1rem; max-width: 80ch; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: var(--fs-xs); }
.footer__legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; }
.footer__legal-links a { color: var(--dim); display: inline-flex; min-height: 36px; align-items: center; }
.powered-by a { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-weight: 600; text-decoration: none; min-height: 36px; }
.powered-by a:hover { color: var(--accent); }
.pb-icon { background: none; padding: 0; border-radius: 0; }
.portal-footer { border-top: 1px solid var(--line); padding: 2rem 0; color: var(--dim); font-size: var(--fs-sm); text-align: center; background: var(--paper); }
.portal-footer p { margin: 0 0 .5rem; }
.portal-footer__small { color: var(--dim); font-size: var(--fs-xs); }
.portal-footer .powered-by a { justify-content: center; }

/* mobile quick bar: one button, slides in after the hero (site.js), steps aside near the closing band */
.mobile-bar { display: none; }
@media (max-width: 767.98px) {
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: block; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 250, 247, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform var(--t) var(--ease-out); }
  .mobile-bar.is-shown { transform: none; }
  html:not(.js) .mobile-bar { position: static; transform: none; }
  .mobile-bar .btn { min-height: 50px; }
  body:not(.portal) .site-footer { padding-bottom: 6rem; }
}

/* ---------------------------------------------------------------- service pages */
.svc-page__in { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
@media (min-width: 1024px) { .svc-page__in { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .svc-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.svc-block + .svc-block { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.svc-block h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); margin-bottom: .6rem; }
.svc-block > p { color: #45424B; max-width: 64ch; }
.who-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 10px; }
.who-list li { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.who-list .ic { width: 20px; height: 20px; color: var(--accent); margin-top: .15em; }
.get-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 1rem; }
.get-grid .card { box-shadow: none; }
.get-grid h3 { font-size: 1.0625rem; }
.session-steps { list-style: none; counter-reset: ss; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; border-left: 1.5px solid var(--lav-2); }
.session-steps li { counter-increment: ss; position: relative; padding: 0 0 22px 30px; }
.session-steps li::before { content: counter(ss); position: absolute; left: -15px; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--lav); font-size: .8125rem; font-weight: 800; color: var(--accent-dark); }
.session-steps strong { display: block; color: var(--ink); }
.session-steps span { color: var(--dim); }
.svc-aside .card { gap: .8rem; box-shadow: var(--shadow); }
.svc-aside__price { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 2.25rem; font-weight: 500; line-height: 1.1; color: var(--ink); margin: 0; }
.svc-aside__price small { display: block; font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; color: var(--dim); margin-top: 4px; }
.svc-aside .data-list li { grid-template-columns: minmax(0, 9ch) 1fr; font-size: var(--fs-sm); }
.related { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.related a.card { text-decoration: none; color: inherit; transition: box-shadow var(--t), border-color var(--t); }
.related a.card:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.related a.card h3 { font-size: 1.125rem; }
.related__price { font-weight: 800; color: var(--ink) !important; font-size: var(--fs-sm); }

/* services index: one row per service */
.svc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.svc-row { display: grid; gap: 18px 36px; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h) + 20px); }
.svc-row__title { margin: 12px 0 6px; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 500; }
.svc-row__title a { color: inherit; text-decoration: none; }
.svc-row__title a:hover { color: var(--accent-dark); }
.svc-row__main p { color: var(--dim); margin: 0; max-width: 46ch; }
.svc-row .bento__top { justify-content: flex-start; }
.svc-row__points { align-self: center; }
.svc-row__points li { color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
.svc-row__act { display: grid; gap: 8px; align-content: center; }
.svc-row__price { margin: 0 0 4px; font-family: var(--font-display); font-variation-settings: var(--soft); font-size: 1.625rem; font-weight: 500; line-height: 1.1; color: var(--ink); }
@media (min-width: 768px) { .svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .svc-row__act { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: center; } .svc-row__act .btn { width: auto; } }
@media (min-width: 1100px) { .svc-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 230px; } .svc-row__act { grid-column: auto; grid-template-columns: 1fr; } .svc-row__act .btn { width: 100%; } }

/* services index: how to choose */
.chooser { display: grid; gap: 14px; }
.chooser__row { display: grid; gap: 10px 24px; padding: 20px 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); align-items: center; }
@media (min-width: 768px) { .chooser__row { grid-template-columns: 1.1fr 1fr auto; } }
.chooser__row p { margin: 0; }
.chooser__if { font-family: var(--font-display); font-variation-settings: var(--soft); font-style: italic; font-size: 1.75rem; line-height: 1.2; color: var(--ink); }
.chooser__then { color: var(--dim); }
.chooser__then strong { color: var(--ink); }

/* about page */
.about-intro { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 1024px) { .about-intro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .about-intro .portrait { position: sticky; top: calc(var(--header-h) + 24px); } }
.about-intro .portrait { max-width: 420px; }
@media (max-width: 767.98px) { .about-intro .portrait { max-width: 320px; margin-inline: auto; } }
.pull { font-family: var(--font-display); font-variation-settings: var(--soft); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.25; margin: 2rem 0; padding-left: 1.2rem; border-left: 3px solid var(--lav); color: var(--ink); font-style: italic; }
.values { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* contact page */
.contact__in { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .contact__in { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); } }
.contact__ways { display: grid; gap: 14px; }
.contact__ways .card { box-shadow: none; }
.contact__ways h2 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; margin: 0; }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow); }
.form-card h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); }

/* legal pages and the 404 */
.legal-note { margin-bottom: 2rem; }
.lost { text-align: center; max-width: 40rem; margin: 0 auto; }
.lost img { width: 120px; margin: 0 auto 1.5rem; }
.lost h1 { font-size: var(--fs-h1); }
.lost .btn-row { justify-content: center; }
.lost__links { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); text-align: left; }
.lost__links a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); text-decoration: none; font-weight: 700; color: var(--ink); }
.lost__links a:hover { border-color: var(--accent); }
.lost__links .ic { width: 20px; height: 20px; color: var(--accent); }

/* ---------------------------------------------------------------- reveal and motion gates */
@media (prefers-reduced-motion: no-preference) {
  /* the kit's reveal (InView): CSS path, used on pages without GSAP */
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* Hero intro: hidden only until motion.js takes over. site.js adds .motion-off after 1.5s if GSAP never
     arrives, so a blocked CDN can never leave the hero blank. visibility keeps the layout, so nothing shifts. */
  .js body.has-motion:not(.motion-off) .hero [data-split],
  .js body.has-motion:not(.motion-off) .hero [data-fade],
  .js body.has-motion:not(.motion-off) .hero__visual > * { visibility: hidden; }
}
.split-line { padding-bottom: .06em; margin-bottom: -.06em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .feel__item:nth-child(even) { transform: none; }
}

@media print {
  .site-header, .mobile-bar, .cta-band, .hero__bg, .site-footer .btn, .voices__ctl { display: none !important; }
  body { background: #fff; }
  .pq__why-body { display: block !important; }
}

/* ---------------------------------------------------------------- landing page: the consultation request */
.consult__in { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 1024px) { .consult__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .consult__copy { position: sticky; top: 110px; } }
.consult__steps { list-style: none; counter-reset: cs; margin: 1.6rem 0 1.4rem; padding: 0; display: grid; gap: .9rem; }
.consult__steps li { counter-increment: cs; position: relative; padding-left: 3rem; display: grid; gap: .1rem; }
.consult__steps li::before { content: counter(cs); position: absolute; left: 0; top: .05rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 600 1rem/1 var(--font-display); }
.consult__steps strong { color: var(--ink); }
.consult__steps span { color: var(--dim); font-size: var(--fs-sm, .95rem); }
.consult__note { display: flex; gap: .5rem; align-items: center; color: var(--dim); font-size: .92rem; margin: 0; }
.consult__note .ic { width: 1.05em; height: 1.05em; color: var(--accent); flex: none; }
.consult__form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: clamp(1.3rem, 1rem + 2vw, 2.4rem); }

/* chips inside a form field wrap in a row (the .field grid rule would stack them) */
.field.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field.chips legend { flex: 0 0 100%; }

/* mobile: decorative pieces (portrait tag, butterflies, glows) must never widen the page */
main { overflow-x: clip; }
.acc summary > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.field.chips { flex-direction: row; justify-content: flex-start; }