/* ============================================================================
   Aesthera theme
   ============================================================================
   Design read: B2B healthcare infrastructure for med spa owners (non-technical
   clinic operators). Warm photographic premium-consumer language on a dark
   charcoal base. Native CSS, hand-built components.

   Dials: DESIGN_VARIANCE 6 / MOTION_INTENSITY 4 / VISUAL_DENSITY 3

   Locked decisions (design-taste-frontend pre-flight):
   - ONE theme. The page is dark end to end. No section inverts.
   - ONE accent (blush). Used identically in every section.
   - ONE radius system: pill (999px) for interactive, 14px for surfaces.
   - ZERO uppercase eyebrows, zero monospace labels, zero numbered markers
     on non-sequenced content, zero arrows appended to buttons.
   - ZERO em dashes.
   ========================================================================== */

:root {
  --deep:  #0d1013;   /* deepest band            */
  --base:  #14181c;   /* page base               */
  --raise: #1b2126;   /* raised surface          */
  --line:  rgba(255,255,255,.13);
  --line-strong: rgba(255,255,255,.24);
  --white: #ffffff;
  --body:  #c3ccd4;
  --muted: #8f9ca7;
  --blush: #e8a598;
  --blush-hi: #f2b7ab;
  --blush-ink: #3a1f1a;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --text: Archivo, ui-sans-serif, system-ui, sans-serif;

  --pill: 999px;
  --radius: 14px;

  --ease: cubic-bezier(.32,.72,0,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);

  --gut: clamp(20px, 5vw, 40px);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--base);
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; color: var(--white); margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--blush); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ---------------------------------------------------------------- header */
.bar { position: sticky; top: 0; z-index: 40; background: rgba(20,24,28,.86); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); min-height: 68px; display: flex; align-items: center; gap: 30px; }
.wordmark { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--white); text-decoration: none; margin-right: auto; white-space: nowrap; }
.wordmark::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--blush); margin-right: 9px; vertical-align: middle; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav a.lnk { color: #d5dde4; text-decoration: none; font-size: 15px; white-space: nowrap; transition: color .2s var(--ease); }
.nav a.lnk:hover, .nav a.lnk:focus-visible { color: var(--white); }
.nav a.lnk[aria-current] { color: var(--white); box-shadow: inset 0 -2px 0 var(--blush); }
.nav .pill { background: var(--blush); color: var(--blush-ink); text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px 19px; border-radius: var(--pill); white-space: nowrap; transition: background .25s var(--ease); }
.nav .pill:hover { background: var(--blush-hi); }

/* Homepage guide index. A ruled two-column list, chosen over a card grid:
   four identical cards is one of the documented AI-default tells. */
.guide-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line); }
.guide-list a { display: block; padding: 22px 0 20px; border-bottom: 1px solid var(--line); text-decoration: none; }
.guide-list .t { display: block; color: var(--white); font-size: 1.03rem; font-weight: 600; line-height: 1.4; margin-bottom: 6px; transition: color .2s var(--ease); }
.guide-list .d { display: block; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 46ch; }
.guide-list a:hover .t, .guide-list a:focus-visible .t { color: var(--blush); }
.guide-more { margin: 26px 0 0; }
.guide-more a { color: var(--blush); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.guide-more a:hover { color: var(--blush-hi); }
@media (max-width: 820px) { .guide-list { grid-template-columns: 1fr; gap: 0; } }

/* Nav dropdown. Both hover and keyboard focus open it, so it is reachable
   without a pointer. The 14px top padding is a bridge: without it the menu
   closes while the pointer crosses the gap. */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav a.caret { display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
.nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(225deg) translateY(-1px); }
.nav-menu { position: absolute; top: 100%; left: -18px; padding-top: 14px; display: none; z-index: 40; }
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { display: block; }
.nav-menu-in { background: var(--raise); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px; min-width: 340px; max-width: 380px; box-shadow: 0 22px 48px rgba(0,0,0,.55); }
.nav-menu-in a { display: block; padding: 11px 13px; border-radius: 9px; color: #d5dde4; font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: background .18s var(--ease), color .18s var(--ease); }
.nav-menu-in a:hover, .nav-menu-in a:focus-visible { background: rgba(255,255,255,.06); color: var(--white); }
.nav-menu-in a[aria-current] { color: var(--white); }
.nav-menu-in .all { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--blush); font-weight: 600; }

/* --------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--pill); background: var(--blush); color: var(--blush-ink); font: 600 16px var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .25s var(--ease), transform .25s var(--ease); }
.btn:hover { background: var(--blush-hi); }
.btn:active { transform: scale(.985); }
.btn-ghost { display: inline-flex; align-items: center; min-height: 54px; padding: 0 26px; border: 1px solid var(--line-strong); border-radius: var(--pill); color: var(--white); font: 600 15px var(--text); text-decoration: none; transition: border-color .25s var(--ease), background .25s var(--ease); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.06); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(13,16,19,.93) 0%, rgba(13,16,19,.84) 46%, rgba(13,16,19,.52) 66%, rgba(13,16,19,.10) 88%),
  linear-gradient(0deg, var(--base) 0%, rgba(20,24,28,.86) 14%, rgba(20,24,28,.34) 40%, rgba(20,24,28,0) 58%); }
.hero-in { position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 120px var(--gut) 74px; }
.hero h1 { font-size: clamp(2.9rem, 6.2vw, 5.6rem); line-height: .95; max-width: 15ch; }
.hero .sub { margin: 26px 0 34px; font-size: clamp(1.06rem, 1.4vw, 1.22rem); line-height: 1.5; color: #d5dde4; max-width: 40ch; }

/* ------------------------------------------------- proof strip (was in hero) */
.proof { background: var(--base); border-bottom: 1px solid var(--line); }
.proof-in { max-width: var(--wrap); margin: 0 auto; padding: 34px var(--gut); display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.proof h3 { font-family: var(--text); font-size: 15px; font-weight: 600; letter-spacing: 0; margin: 0 0 7px; }
.proof p { margin: 0; font-size: 14.5px; color: var(--muted); max-width: 32ch; }

/* ----------------------------------------------------------------- bands */
.band { padding: clamp(64px, 9vw, 116px) 0; }
.band-deep { background: var(--deep); }
.band-head { max-width: 640px; margin-bottom: clamp(38px, 5vw, 60px); }
.band h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 20ch; }
.band .lede { margin: 20px 0 0; font-size: 1.08rem; line-height: 1.55; color: var(--muted); max-width: 46ch; }

/* -------------------------------------------- bento: six programs (family 1) */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cell { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--raise); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 208px; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.cell:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.cell h3 { font-size: 1.3rem; margin: 0 0 9px; }
.cell p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.cell .shot { position: absolute; inset: 0; opacity: .5; transition: opacity .4s var(--ease); }
.cell .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cell:hover .shot { opacity: .62; }
.cell .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--raise) 6%, rgba(27,33,38,.55) 52%, rgba(27,33,38,.15) 100%); }
.cell > * { position: relative; }
.cell-wide { grid-column: span 3; }
.cell-third { grid-column: span 2; }
.cell-full { grid-column: span 6; min-height: 168px; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .cell-wide, .cell-third, .cell-full { grid-column: span 1; }
}

/* ------------------------------------------------ layer stack (family 2) */
.stack { max-width: 820px; }
.stack-top { background: var(--white); color: #14181c; border-radius: var(--radius) var(--radius) 0 0; padding: 34px 36px; }
.stack-top .mark { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; }
.stack-top .mark span { color: #d9482b; }
.stack-top p { margin: 12px 0 0; font-size: 15px; color: #4a5560; max-width: 44ch; }
.stack-under { background: var(--raise); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 28px 36px 30px; }
.stack-under .rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stack-under b { display: block; font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 5px; }
.stack-under span { font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) {
  .stack-under .rows { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stack-top, .stack-under { padding-left: 22px; padding-right: 22px; }
}

/* -------------------------------------------- split comparison (family 3) */
.split { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.split > div { padding: 34px 32px; }
.split .keep { background: var(--raise); }
.split .run { background: var(--deep); }
.split h3 { font-size: 1.2rem; margin: 0 0 18px; }
.split ul { margin: 0; padding: 0; list-style: none; }
.split li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.split li:last-child { border-bottom: 0; }
.split li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--blush); }
.split .run li::before { background: var(--muted); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* --------------------------------------------- launch sequence (family 4) */
.seq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.seq > div { padding: 28px 26px 28px 0; border-right: 1px solid var(--line); }
.seq > div:last-child { border-right: 0; padding-right: 0; }
.seq > div + div { padding-left: 26px; }
.seq b { display: block; font-family: var(--display); font-size: 1.18rem; font-weight: 600; color: var(--white); margin-bottom: 9px; }
.seq p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 900px) {
  .seq { grid-template-columns: 1fr; border-top: 0; }
  .seq > div { border-right: 0; border-top: 1px solid var(--line); padding: 22px 0; }
  .seq > div + div { padding-left: 0; }
}

/* ------------------------------------------------------------ gallery band */
/* The gallery children are <img> now, so they carry an intrinsic aspect ratio.
   Without an explicit height, grid stretch renders them at natural size and the
   row balloons. Heights mirror the original min-heights; object-fit crops. */
.gallery { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.gallery .shot-lg, .gallery .col .shot-sm { border-radius: var(--radius); width: 100%; display: block; object-fit: cover; object-position: center; }
.gallery .shot-lg { height: 420px; }
.gallery .col { display: grid; gap: 16px; }
.gallery .shot-sm { height: 202px; }
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr; } .gallery .shot-lg { height: 280px; } }

/* --------------------------------------------------------------- FAQ (5) */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; color: var(--white); font-family: var(--display); font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; transition: color .2s var(--ease); }
.faq summary:hover { color: var(--blush); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-right: 2px solid var(--blush); border-bottom: 2px solid var(--blush); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { margin: -4px 0 24px; max-width: 70ch; color: var(--muted); }

/* --------------------------------------------------------------- form (6) */
.lead { background: var(--deep); }
.lead-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px, 6vw, 78px); align-items: start; }
.lead h2 { font-size: clamp(1.9rem, 3.1vw, 2.8rem); max-width: 15ch; }
.lead .lede { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 34ch; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { display: grid; gap: 8px; font-size: 14px; font-weight: 500; color: #d5dde4; }
label.wide { grid-column: 1 / -1; }
input, select { width: 100%; min-height: 52px; padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(255,255,255,.05); color: var(--white); font: 16px var(--text); transition: border-color .2s var(--ease), background .2s var(--ease); }
input::placeholder { color: #7d8994; }
input:focus, select:focus { outline: 3px solid rgba(232,165,152,.4); outline-offset: 1px; border-color: var(--blush); background: rgba(255,255,255,.08); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #aab6c1 50%), linear-gradient(135deg, #aab6c1 50%, transparent 50%); background-position: calc(100% - 21px) 23px, calc(100% - 15px) 23px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
form button { grid-column: 1 / -1; justify-self: start; }
.status { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--muted); }
.status.err { color: #f0a396; }
.success { grid-column: 1 / -1; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: rgba(255,255,255,.05); }
@media (max-width: 900px) { .lead-in { grid-template-columns: 1fr; } form { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- article (7) */
.article { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 7vw, 84px) var(--gut) clamp(64px, 8vw, 104px); }
.article .crumb { margin: 0 0 26px; font-size: 14px; color: var(--muted); }
.article .crumb a { color: var(--body); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.article .crumb a:hover { color: var(--white); }
.article h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.02; max-width: 22ch; }
.article .answer { margin: 30px 0 56px; padding: 26px 0 28px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); font-size: clamp(1.12rem, 1.6vw, 1.34rem); line-height: 1.5; color: #dfe6ec; max-width: 62ch; }
.article .updated { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.article .byline { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.article .byline a { color: var(--blush); text-decoration: none; border-bottom: 1px solid rgba(232,165,152,.35); }
.article .byline a:hover { border-bottom-color: var(--blush); }
.article h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 58px 0 16px; max-width: 26ch; }
.article h3 { font-size: 1.06rem; margin: 34px 0 8px; }
.article p, .article li { max-width: 68ch; }
.article ul, .article ol { margin: 0 0 26px; padding-left: 22px; }
.article li { margin-bottom: 9px; }
.article table { width: 100%; max-width: 940px; margin: 14px 0 38px; border-collapse: collapse; font-size: 15px; }
.article th, .article td { padding: 15px 18px 15px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.article th { color: var(--white); font-weight: 600; font-size: 14px; }
.article td:first-child, .article th:first-child { color: var(--white); font-weight: 500; width: 16%; }
.article td:nth-child(3) { padding-right: 0; }
/* :not(.btn) matters: .article a (0,1,1) outranks .btn (0,1,0), so without the
   exclusion a CTA button inside an article renders blush text on blush fill. */
.article a:not(.btn) { color: var(--blush); text-decoration: none; border-bottom: 1px solid rgba(232,165,152,.4); }
.article a:not(.btn):hover { border-bottom-color: var(--blush); }
.article .todo { margin: 44px 0; padding: 26px 30px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--raise); }
.article .todo h2 { margin: 0 0 12px; font-size: 1.3rem; }

/* --------------------------------------------------------------- CTA (8) */
.cta { margin: 0 0 0; padding: 44px 46px; border-radius: var(--radius); background: var(--raise); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.cta h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.cta p { margin: 0; color: var(--muted); max-width: 56ch; }
.cta .btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: max-content;
  max-width: 100%;
  height: 54px;
  min-height: 54px;
  line-height: 1.2;
}
@media (max-width: 900px) { .cta { padding: 30px 24px; gap: 24px; } }

/* ------------------------------------------------------------- footer (9) */
.site-footer { background: var(--deep); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 84px) 0 28px; }
.footer-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.footer-top { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 6vw, 96px); padding-bottom: 56px; }
.footer-wordmark { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--white); text-decoration: none; }
.footer-wordmark::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--blush); margin-right: 9px; vertical-align: middle; }
.footer-top > div > p { margin: 20px 0 26px; max-width: 38ch; font-size: 15px; color: var(--muted); }
.footer-cta { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: var(--pill); background: var(--blush); color: var(--blush-ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .25s var(--ease); }
.footer-cta:hover { background: var(--blush-hi); }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-nav h3 { font-family: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0; margin: 0 0 16px; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 11px; }
.footer-nav a { color: var(--body); text-decoration: none; font-size: 15px; transition: color .2s var(--ease); }
.footer-nav a:hover { color: var(--white); }
.footer-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.footer-base a { color: var(--muted); text-decoration: none; margin-left: 20px; }
.footer-base a:hover { color: var(--white); }
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .footer-base { flex-direction: column; }
  .footer-base a { margin: 0 20px 0 0; }
}

/* ------------------------------------------------------------ components */
.lab-main { max-width: var(--wrap); margin: 0 auto; padding: 64px var(--gut) 96px; }
.lab-section { padding: 34px 0 54px; border-top: 1px solid var(--line); }
.lab-section h2 { font-size: 1.5rem; margin-bottom: 26px; }
.lab-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 26px; border-radius: var(--radius); background: var(--raise); }
.lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lab-card { padding: 22px; border-radius: var(--radius); background: var(--raise); border: 1px solid var(--line); }
@media (max-width: 900px) { .lab-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.reveal { opacity: 1; }
/* Reveal-on-scroll only applies when JS is present, so the page is fully
   readable with JS disabled instead of showing blank sections. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav { min-height: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0 var(--gut); }
  .wordmark { margin: 15px 0 6px; }
  .nav-links { gap: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav .pill { align-self: flex-start; margin-bottom: 14px; }
  .nav-menu, .nav a.caret { display: none !important; }
  .hero { min-height: 0; }
  .hero-in { padding: 68px var(--gut) 52px; }
  .hero h1 { font-size: clamp(2.5rem, 10.5vw, 3.5rem); }
  .proof-in { grid-template-columns: 1fr; gap: 22px; padding: 26px var(--gut); }
  .band { padding: 60px 0; }
}

/* Skip link. Off-screen until focused, so it is invisible to mouse users but a
   keyboard user can jump the whole nav on any page. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;
  background:var(--blush);color:#15100F;font-weight:600;border-radius:0 0 8px 0}
.skip-link:focus{left:0;outline:2px solid var(--white);outline-offset:2px}
/* Visually hidden, still announced: used to keep heading order valid. */
.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}

/* Mobile navigation. Below 900px the link strip is replaced by a real disclosure
   panel: the strip scrolled horizontally with the scrollbar hidden, which clipped
   the last sections mid-word and gave no affordance that anything was off-screen. */
.nav-toggle{display:none;align-items:center;gap:9px;background:none;border:1px solid var(--line);
  color:var(--white);font:inherit;font-weight:600;font-size:.92rem;padding:10px 14px;
  border-radius:8px;cursor:pointer;min-height:44px}
.nav-toggle:focus-visible{outline:2px solid var(--blush);outline-offset:2px}
.nt-bars,.nt-bars::before,.nt-bars::after{display:block;width:16px;height:1.5px;background:currentColor;
  content:"";position:relative}
.nt-bars::before{position:absolute;top:-5px}.nt-bars::after{position:absolute;top:5px}
.nav-panel{display:none}

@media (max-width: 900px){
  html.js .nav-links{display:none}
  html.js .nav-toggle{display:inline-flex}
  /* Fully opaque. A translucent panel lets the page behind ghost through the
     menu, and a mobile menu has nothing to blur for. */
  html.js .nav-panel{display:none;position:absolute;left:0;right:0;top:100%;
    background:#0F1113;border-bottom:1px solid var(--line);
    padding:10px 22px 26px;box-shadow:0 18px 40px rgba(0,0,0,.5);
    max-height:calc(100vh - 68px);overflow-y:auto}
  /* Keep the mobile header to one compact row: wordmark and Menu. The CTA lives
     in the panel and in the hero, so it does not need to wrap to a third line. */
  html.js .nav{padding-top:12px;padding-bottom:12px;align-items:center}
  html.js .nav > .pill{display:none}
  html.js .nav-toggle{margin-left:auto}
  html.js .nav-panel[data-open="true"]{display:block}
  .nav-panel a{display:block;padding:13px 0;color:var(--white);font-weight:500;
    border-bottom:1px solid var(--line);min-height:44px}
  .nav-panel a.np-child{padding-left:16px;color:var(--muted);font-weight:400}
  .nav-panel a[aria-current="page"]{color:var(--blush)}
  .nav-panel .np-group{display:block;padding:20px 0 6px;color:var(--blush);
    font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
  .nav-panel .np-group:first-child{padding-top:8px}
  .nav{position:relative;flex-wrap:wrap}
}


/* ---------------------------------------------------------------- sources
   Named primary sources at the foot of pages that make regulatory or fee claims. */
.sources-band { border-top: 1px solid var(--line); }
.src-note {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: .95rem;
  margin: 0 0 18px;
}
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 78ch; }
.src-list li {
  position: relative;
  padding-left: 20px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.src-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.src-list a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.src-list a:hover { color: var(--accent); }
.src-date { color: var(--ink-faint); white-space: nowrap; }


/* ------------------------------------------------- two-column editorial layout
   Prose is capped at 68ch for readability, which alone left 675px of a 1240px
   container empty on desktop. The rail occupies that column with a jump list. */
.article-body { display: flex; gap: clamp(40px, 4.5vw, 76px); align-items: flex-start; }
.article-main { flex: 1 1 auto; min-width: 0; }
.article-main p, .article-main li { max-width: 72ch; }
.article-main table { max-width: 100%; }
/* jump links must clear the sticky header */
.article-main h2 { scroll-margin-top: 100px; }
.article-main h3 { scroll-margin-top: 100px; }

.article-rail {
  flex: 0 0 296px;
  position: sticky;
  top: 92px;
  align-self: flex-start;
  /* the nav scrolls internally so the CTA stays pinned; scrolling the whole card
     clipped the button off the bottom of a 507px box holding 825px of content */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 124px);
  padding: 22px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .028);
}
.rail-head {
  margin: 0 0 12px;
  padding: 0 10px;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail-nav {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  display: grid;
  gap: 1px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.rail-nav::-webkit-scrollbar { width: 6px; }
.rail-nav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.rail-nav a {
  display: block;
  padding: 7px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 7px 7px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s;
}
.rail-nav a:hover { color: var(--white); background: rgba(255, 255, 255, .05); }
.rail-nav a.is-active {
  color: var(--white);
  border-left-color: var(--accent);
  background: rgba(255, 255, 255, .06);
}
.rail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 0 0 54px;
  width: 100%;
  min-height: 54px;
  margin-top: 16px;
  padding: 0 14px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.2;
  border-bottom: 0;
}
/* .article a:not(.btn) is (0,2,1), so a bare .rail-nav a (0,1,1) loses the border-bottom
   fight and every rail item renders with the blush article-link underline. Match specificity. */
.article .rail-nav a { border-bottom: 0; }
/* below the two-column breakpoint the rail is a desktop aid, so it steps aside */
@media (max-width: 1000px) {
  .article-body { display: block; }
  .article-rail { display: none; }
}


/* Grouped dropdown: Learn holds Compliance (9) and Guides (4), so one flat list of 13
   would be unreadable. Two labelled columns instead. */
.nav-menu-in.nav-menu-cols { display: flex; gap: 6px; min-width: 0; max-width: none; padding: 10px; }
.nm-col { min-width: 246px; display: flex; flex-direction: column; }
.nm-group {
  padding: 8px 13px 7px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.nm-col + .nm-col { border-left: 1px solid var(--line); padding-left: 6px; }

/* The grouped menu is ~600px wide. Anchored left on the last nav item it ran 249px past
   the viewport and clipped the second column, so the final item anchors right instead. */
.nav-item:last-child .nav-menu { left: auto; right: -18px; }
@media (max-width: 1180px) {
  .nav-item:last-child .nav-menu { right: -8px; }
}