/* Self-hosted typeface (Kacen approved the download 2026-09-22). Instrument Sans, variable 400–700, SIL Open Font License 1.1, latin subset. Source: Google Fonts (fonts.gstatic.com), files in assets/fonts/. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("assets/fonts/instrument-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* SophistiKacen — styles.css
   Plain CSS, no build step. Tokens on :root; dark mode redefines them.
   Palette: paper (cool off-white), ink (deep navy), teal (action), pink (the "after" accent). */

:root {
  --paper: #f5f6f8;
  --paper-2: #eceef2;
  --ink: #131c2e;
  --ink-2: #4a5468;
  --line: #d3d8e0;
  --teal: #196f6d;
  --teal-ink: #ffffff;
  --pink: #e9b7c0;
  --pink-ink: #3a1f26;
  --focus: #0b5fa8;
  --shadow: 0 1px 0 rgba(19, 28, 46, .06);

  /* Hero case switch. Title Case since v15 ("When You Can't Let It Slide."); for sentence case change this one value to: none.
     Checked in Chromium: "can't" renders "Can't" (the apostrophe does not start a new word). */
  --hero-case: capitalize;

  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-0: 1rem;        /* 16px */
  --fs-1: 1.125rem;    /* 18px */
  --fs-2: 1.375rem;    /* 22px */
  --fs-3: 1.75rem;     /* 28px */
  --fs-4: clamp(2.4rem, 1.4rem + 4.2vw, 4.75rem);
  --wrap: 1280px;        /* ONE container for every section (v7 alignment fix); the two variants below are kept as aliases so old class names still resolve */
  --wrap-wide: 1280px;
  --wrap-narrow: 1280px;
  --gutter: 16px;
  --ease: .28s cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1320;
    --paper-2: #151c2c;
    --ink: #eef0f4;
    --ink-2: #aab2c0;
    --line: #2a3346;
    --teal: #7fd3ce;
    --teal-ink: #0b1a1a;
    --pink: #e9b7c0;
    --pink-ink: #2a151b;
    --focus: #8ec5ff;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1320;
  --paper-2: #151c2c;
  --ink: #eef0f4;
  --ink-2: #aab2c0;
  --line: #2a3346;
  --teal: #7fd3ce;
  --teal-ink: #0b1a1a;
  --pink: #e9b7c0;
  --pink-ink: #2a151b;
  --focus: #8ec5ff;
  --shadow: none;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-1);
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; text-wrap: balance; }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); }
p { margin: 0; }
p + p { margin-top: .75em; }

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); margin-inline: auto; }
@media (min-width: 720px) { :root { --gutter: 32px; } }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 6px; z-index: 100;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--gutter); }

/* ---- header ---- */
.site-header { padding: 14px 0; }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-height: 44px; }
.brand__mark { width: 44px; height: 44px; object-fit: contain; }
.brand__name { font-weight: 600; font-size: var(--fs-1); letter-spacing: .01em; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); text-decoration: none; font-weight: 500; border-radius: 6px; }
.nav a:hover { background: var(--paper-2); }
.nav__mail { color: var(--teal) !important; }
@media (max-width: 560px) {
  .nav li:not(:last-child) { display: none; }
  .nav a { padding: 0 6px; }
}
/* v15: on phones the mark reads small beside the big H1; 48px mark, 20px wordmark. The row stays on one line when the nav fits, otherwise the nav wraps to its own line. */
@media (max-width: 768px) {
  .brand { gap: 12px; }
  .brand__mark { width: 48px; height: 48px; }
  .brand__name { font-size: 1.25rem; }
}

/* Dark mode: the mark is a black ink drawing; invert it rather than recolour it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__mark,
  :root:not([data-theme="light"]) .site-footer__lockup { filter: invert(1); }
}
:root[data-theme="dark"] .brand__mark,
:root[data-theme="dark"] .site-footer__lockup { filter: invert(1); }

/* ---- hero ---- */
.hero { padding: clamp(32px, 6vw, 88px) 0 clamp(40px, 6vw, 72px); }
.hero__kicker { color: var(--ink-2); font-weight: 500; margin-bottom: 14px; }
.hero__title { font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.03em; max-width: 14ch; text-transform: var(--hero-case); }
.hero__lead { font-size: var(--fs-2); line-height: 1.4; max-width: 34em; margin-top: 22px; color: var(--ink); }
.hero__note { color: var(--ink-2); font-size: var(--fs-0); margin-top: 14px; }
.hero .wrap--wide { margin-top: clamp(32px, 5vw, 64px); }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: var(--fs-1); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform var(--ease), background-color var(--ease);
}
.btn--primary { background: var(--teal); color: var(--teal-ink); border-color: var(--teal); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost { color: var(--ink); border-color: var(--ink-2); background: transparent; }  /* ink-2 keeps the button boundary above 3:1 in both themes */
.btn--ghost:hover { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn--primary:hover { transform: none; } }

/* ---- comparison component ---- */
.cmp { margin: 0; scroll-margin-top: 16px; }
.cmp__stage {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;          /* horizontal drags go to the slider; vertical swipes still scroll the page */
  cursor: ew-resize;
  box-shadow: var(--shadow);
}
.cmp__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;          /* letterbox instead of distort if a pair's dimensions differ */
  background: #fff;
  pointer-events: none;
}
.cmp__before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  transition: clip-path var(--ease);
}
.cmp__divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px;
  background: var(--pink);
  box-shadow: 0 0 0 1px rgba(19, 28, 46, .35);
  transition: left var(--ease);
  pointer-events: none;
}
.cmp__handle {
  position: absolute; top: 50%; left: var(--pos);
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--pink); color: var(--pink-ink);
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  cursor: ew-resize;
  touch-action: none;
  transition: left var(--ease), transform var(--ease);
}
.cmp__handle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; transform: scale(1.06); }
.cmp__stage.is-dragging .cmp__before,
.cmp__stage.is-dragging .cmp__divider,
.cmp__stage.is-dragging .cmp__handle { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cmp__before, .cmp__divider, .cmp__handle { transition: none; }
}
/* Tags sit over the slide image, so their colours are fixed, not theme tokens. */
.cmp__tag {
  position: absolute; top: 12px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .875rem; font-weight: 600; letter-spacing: .01em; line-height: 1.3;
  pointer-events: none;
}
.cmp__tag--before { left: 12px; background: rgba(19, 28, 46, .78); color: #fff; }
.cmp__tag--after { right: 12px; background: var(--pink); color: var(--pink-ink); }
.cmp__corner { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.cmp__corner .cmp__tag { position: static; }
/* Package badge: neutral (paper on a navy hairline), deliberately not the accent. #131c2e on #f5f6f8 = 15.6:1 in both themes. */
.cmp__tier {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(245, 246, 248, .94); color: #131c2e;
  box-shadow: 0 0 0 1px rgba(19, 28, 46, .55);
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em; line-height: 1.3; white-space: nowrap;
}
.cmp__caption { color: var(--ink-2); font-size: var(--fs-0); margin-top: 10px; padding-inline: 2px; }
.cmp--hero .cmp__stage { border-radius: 14px; }

/* ---- sections ---- */
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section--tint { background: var(--paper-2); }
.section__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.section__lead { margin-top: 14px; max-width: 40em; color: var(--ink-2); font-size: var(--fs-1); }
.section__foot { margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: var(--fs-1); }

.preview-badge {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  border: 1px dashed var(--ink-2); border-radius: 6px;
  color: var(--ink-2); font-size: .875rem; font-weight: 500;
}

/* audience reach: one cumulative line, one line per event, one footnote */
.reach--total { margin-top: 18px; max-width: 40em; font-weight: 500; color: var(--ink); }
.reach--total:empty { display: none; }
.reach__note { margin-top: 28px; max-width: 60em; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }

/* event groups inside Work */
.event { margin-top: clamp(36px, 5vw, 56px); scroll-margin-top: 16px; }
.event:first-child { margin-top: 28px; }
.event__head { border-top: 2px solid var(--ink); padding-top: 14px; }
.event__head h3 { font-size: var(--fs-2); }
.event__meta { margin-top: 4px; color: var(--ink); }
.event__reach { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-0); }
.event__reach:empty { display: none; }
.gallery { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: 20px; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .event__head { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: baseline; }
  .event__head h3 { grid-row: 1 / span 2; }
  .event__meta { margin-top: 0; }
}

/* pillars: three columns, a hairline on top of each marks the group */
.pillars { display: grid; gap: 28px; margin-top: 32px; }
.pillar { border-top: 2px solid var(--ink); padding-top: 16px; }
.pillar h3 { font-size: var(--fs-2); }
.pillar p { margin-top: 10px; color: var(--ink); max-width: 36em; }
.pillar:first-child { border-top-color: var(--pink); }
@media (min-width: 820px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* why: six reasons as a second row inside the physicians section; bold lead + one sentence each */
.why__title { margin-top: clamp(40px, 6vw, 64px); font-size: var(--fs-2); }
.why { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 18px 40px; }
.why li { border-top: 1px solid var(--line); padding-top: 12px; font-size: var(--fs-0); line-height: 1.5; color: var(--ink); max-width: 36em; }
.why li strong { display: block; font-weight: 600; font-size: var(--fs-1); margin-bottom: 4px; }
.why__foot { margin-top: 22px; color: var(--ink-2); font-size: var(--fs-0); max-width: 60em; }
@media (min-width: 640px) { .why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .why { grid-template-columns: repeat(3, 1fr); } }

/* steps: a real sequence, so numbered */
.steps { list-style: none; counter-reset: step; margin: 32px 0 0; padding: 0; display: grid; gap: 22px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; row-gap: 0; align-items: start; }
.steps li > * { grid-column: 2; }   /* number sits in column 1; heading and text both stay in column 2 */
.steps li::before {
  content: counter(step);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--ink); font-weight: 600; font-size: var(--fs-1);
}
.steps p { margin-top: 6px; color: var(--ink); max-width: 40em; }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .steps li { grid-template-columns: 1fr; }
  .steps li > * { grid-column: 1; }
  .steps li::before { margin-bottom: 14px; }
}
#how .cta-row { margin-top: 36px; }

/* pricing: three cards, each in three scannable blocks (price+scope / you get / recommended for) */
.tiers { display: grid; gap: 16px; margin: 28px 0 0; }
.tier { border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: var(--paper); display: flex; flex-direction: column; }
.tier--featured { border-color: var(--ink); }
.tier dt { font-weight: 600; font-size: var(--fs-2); }
.tier dd { margin: 0; }
.tier__price { margin-top: 6px !important; color: var(--ink-2); }
.price { color: var(--ink); font-weight: 700; font-size: var(--fs-3); letter-spacing: -0.02em; }
.tier__unit { color: var(--ink-2); }
.tier__scope { margin-top: 12px !important; color: var(--ink); }
.tier__half { color: var(--ink-2); }
.tier__block { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--line); }
.tier__label { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.tier__block ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-0); line-height: 1.45; }
.tier__block li + li { margin-top: 4px; }
.tier__example { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-0); color: var(--ink); }
.tier__io { margin-top: 10px !important; font-size: var(--fs-0); color: var(--ink-2); }
.tier__io strong { color: var(--ink); font-weight: 600; }
/* consult: fourth option as a full-width strip under the three cards; no price */
.tier--consult { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 28px; border-style: dashed; }
.tier--consult dt { flex: 0 0 auto; }
.tier--consult .tier__scope { margin-top: 0 !important; flex: 1 1 28em; }
.tier--consult .tier__cta { flex: 0 0 auto; }
.tiers__rule {
  margin-top: 16px; padding: 14px 18px;
  border: 1px solid var(--ink); border-radius: 12px;
  color: var(--ink); font-size: var(--fs-1); max-width: 60em;
}
.tiers__note { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-0); }
@media (min-width: 820px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

/* about */
#about p { margin-top: 16px; font-size: var(--fs-2); line-height: 1.45; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 48px; color: var(--ink-2); font-size: var(--fs-0); }
.site-footer__row { display: grid; gap: 18px; }
.site-footer__lockup { width: 240px; height: auto; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__privacy { max-width: 48em; }
.site-footer__copy { margin-top: 0; }
@media (min-width: 820px) {
  .site-footer__row { grid-template-columns: auto 1fr; align-items: start; column-gap: 48px; }
  .site-footer__lockup { grid-row: 1 / span 3; }
}

/* ---- v5: nav current page, package examples on the main page, gallery groups ---- */
.nav a[aria-current="page"] { background: var(--paper-2); font-weight: 600; }
.section--first { padding-top: clamp(24px, 4vw, 48px); }
.page-title { font-size: var(--fs-3); }

.pkg__price { margin-top: 6px; color: var(--ink-2); }
.pkg__price .price { font-size: var(--fs-2); }
.pkg__label { margin-top: 18px; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pkg__list { margin: 8px 0 0; padding-left: 1.1em; font-size: var(--fs-1); line-height: 1.45; }
.pkg__list li + li { margin-top: 4px; }
.pkg__note { margin-top: 8px; font-size: var(--fs-1); color: var(--ink); }
.pkg__link { margin-top: 18px; font-weight: 600; }

/* gallery: size groups wrap the existing event blocks */
.size-group { margin-top: clamp(40px, 6vw, 72px); }
.size-group:first-child { margin-top: 32px; }
.size-group__title { font-size: var(--fs-3); }
.size-group__def { margin-top: 6px; color: var(--ink-2); max-width: 44em; }
.size-group .event:first-of-type { margin-top: 22px; }

/* ---- v6: hero copy as a stanza, tighter hero so the slider top is above the fold; craft strip ---- */
.hero { padding: clamp(16px, 2.5vw, 32px) 0 clamp(32px, 5vw, 56px); }
.hero__kicker { margin-bottom: 10px; }
.hero__lead { max-width: 40ch; margin-top: 16px; }   /* 40ch: wide enough that "It comes back conference-ready, on your deadline." stays one line at desktop */
.hero__line { display: block; }
.cta-row { margin-top: 22px; }
.hero__note { margin-top: 12px; }
.hero .wrap--wide { margin-top: clamp(20px, 3vw, 32px); }
.cmp--hero .cmp__handle { top: 20%; }   /* the hero handle sits high so the divider and its grip are visible without scrolling */

.craft { margin-top: clamp(40px, 6vw, 64px); border-top: 2px solid var(--ink); padding-top: 16px; }
.craft__title { font-size: var(--fs-2); }
.craft__lead { margin-top: 8px; color: var(--ink-2); max-width: 44em; }
.craft__grid { display: grid; gap: 20px 24px; margin-top: 20px; }
.craft__grid .cmp__caption { font-size: .9375rem; }
@media (min-width: 700px) { .craft__grid { grid-template-columns: 1fr 1fr; } }

/* ---- v7: pillar drawings, painted "how it works" sequence, why as its own section ---- */
.section--rule { border-top: 1px solid var(--line); }            /* physicians follows a plain section; a hairline separates them */
.pillar__art { width: clamp(72px, 9vw, 112px); margin-bottom: 14px; color: var(--ink); }
.pillar__art svg { display: block; width: 100%; height: auto; }
.art-accent { fill: var(--pink); }
.art-accent-stroke { stroke: var(--pink); }

/* why: now a section of its own, so the h2 carries the spacing */
#why .why { margin-top: 24px; }

/* sequence layout: sticky stage left, steps right */
.seq { display: grid; gap: 28px; margin-top: 28px; }
.seq__sticky { position: sticky; top: 0; z-index: 2; background: var(--paper-2); padding: 8px 0 10px; }
.seq__stage {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; width: min(100%, calc(38vh * 16 / 9)); margin-inline: auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow);
}
.seq__before, .seq__after { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.seq__before { object-fit: contain; }
.seq__frame { position: absolute; inset: 0; border: 3px solid var(--pink); border-radius: 10px; opacity: 0; pointer-events: none; }
.seq__folder { position: absolute; left: 16px; bottom: 14px; width: 56px; height: auto; color: #131c2e; opacity: 0; transform: translateX(-40px); pointer-events: none; }
.seq__label {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(19, 28, 46, .78); color: #fff; font-size: .875rem; font-weight: 600; letter-spacing: .01em; line-height: 1.3; pointer-events: none;
}
.seq__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.seq__tabs[hidden] { display: none; }
.seq__tab {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ink-2); background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-0); font-weight: 600; cursor: pointer;
}
.seq__tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* steps inside the sequence: one column, generous height so the scroll has room to paint */
.steps--seq { margin-top: 0; gap: 0; }
.steps--seq li { min-height: 46vh; padding: 18px 12px 18px 0; border-radius: 10px; color: var(--ink-2); outline-offset: 4px; }
.steps--seq li h3, .steps--seq li p { color: inherit; }
.steps--seq li::before { border-color: currentColor; transition: background-color var(--ease), color var(--ease); }
.steps--seq li.is-active { color: var(--ink); }
.steps--seq li.is-active::before { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.steps--seq li:last-child { min-height: 40vh; }
.seq--static .seq__sticky { position: static; }
.seq--static .steps--seq li { min-height: 0; }
#how .cta-row { margin-top: 28px; }

@media (min-width: 820px) {
  .steps--seq { grid-template-columns: 1fr; }
  .steps--seq li { grid-template-columns: 56px 1fr; column-gap: 12px; }
  .steps--seq li > * { grid-column: 2; }
  .steps--seq li::before { margin-bottom: 0; }
}
@media (min-width: 769px) {
  .seq { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 48px; align-items: start; }
  .seq__sticky { top: 24px; background: transparent; padding: 0; }
  .seq__stage { width: 100%; }
  .steps--seq li { min-height: 72vh; }
  .steps--seq li:last-child { min-height: 56vh; }
  .seq__folder { width: 72px; left: 20px; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .steps--seq li::before { transition: none; }
}

/* v7 copy: selling line in Why; "More work" stays in the phone nav now that the gallery button is gone */
.why__lead { margin-top: 14px; font-size: var(--fs-2); line-height: 1.35; max-width: 30em; }
.why__sub { margin-top: 6px; font-size: var(--fs-1); color: var(--ink-2); }
@media (max-width: 560px) { .nav li.nav__more { display: block; } }
.steps--seq li { align-content: center; }   /* heading and paragraph stay together inside the tall step */

/* v7 alignment: one left edge everywhere. Reading measure comes from max-width on the text, never from a narrower wrap. */
#about p { max-width: 40em; }
.craft__lead .hero__line { display: block; }

/* ---- v7: package examples side by side (>=1024px), aligned rows via subgrid; Comprehensive featured ---- */
.pkgs { display: grid; gap: 24px; margin-top: 28px; }
.pkg { display: grid; grid-template-columns: minmax(0, 1fr); padding: 18px 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); scroll-margin-top: 16px; }
.pkg--featured { border-color: var(--ink); }
.pkg__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pkg h3 { font-size: var(--fs-3); }
.pkg__flag { padding: 3px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 1px var(--ink-2); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.pkg__figure { margin-top: 16px; min-width: 0; }
.pkg__changed { margin-top: 16px; }
.pkg__changed .pkg__label { margin-top: 0; }
.pkg__not .pkg__label { margin-top: 14px; }
.pkg__link { margin-top: 16px; }
@media (min-width: 1024px) {
  .pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto 1fr auto; column-gap: 24px; row-gap: 0; align-items: start; }
  .pkg { grid-row: span 6; grid-template-rows: subgrid; }
  .pkgs .cmp__tier, .pkgs .cmp__tag { font-size: .75rem; padding: 3px 8px; }
}

/* ---- v8: "Describe your talk" intake dialog (intake.js builds the markup) ---- */
html.has-modal { overflow: hidden; }                     /* scroll lock while the dialog is open */
.intake {
  width: min(100% - 32px, 560px); max-height: min(100dvh - 32px, 760px);
  padding: 0; margin: auto; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
}
.intake:not([open]) { display: none; }
.intake::backdrop { background: rgba(14, 19, 32, .55); }
.intake__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.intake__who { display: flex; gap: 12px; align-items: center; }
.intake__mark { width: 32px; height: 32px; object-fit: contain; }
.intake__title { font-weight: 600; font-size: var(--fs-1); }
.intake__sub { color: var(--ink-2); font-size: .9375rem; margin-top: 2px; }
.intake__close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.intake__close:hover { background: var(--paper-2); }
.intake__body { padding: 16px 20px 8px; overflow: auto; flex: 1 1 auto; }
.intake__progress { color: var(--ink-2); font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.intake__bubble { margin-top: 10px; padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: var(--paper-2); max-width: 44ch; }
.intake__from { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.intake__prompt { font-size: var(--fs-2); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.intake__help { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-0); }
.intake__controls { margin-top: 16px; }
.intake__group + .intake__group, .intake__field, .intake__group + .intake__field { margin-top: 14px; }
.intake__label { display: block; font-size: .875rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.intake__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ink-2); background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-0); font-weight: 500; cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.intake__field input, .intake__field textarea, .intake__draft {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ink-2); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-0);
}
.intake__draft { margin-top: 6px; line-height: 1.45; resize: vertical; }
.intake__rush { margin-top: 10px; color: var(--ink); font-size: var(--fs-0); }
.intake__rush:empty { display: none; }
.intake__suggest { margin-top: 12px; font-size: var(--fs-0); color: var(--ink); }
.intake__suggest + .intake__label { margin-top: 12px; }
.intake__nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.intake__nav .btn { min-height: 44px; font-size: var(--fs-0); padding: 0 18px; }
.intake__nav .btn--primary { margin-left: auto; }
.intake__back[disabled] { opacity: .45; cursor: default; }
.intake__skip { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--teal); font: inherit; font-size: var(--fs-0); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
.intake__status { margin-top: 8px; color: var(--ink-2); font-size: .9375rem; min-height: 1.4em; }
.intake__note { padding: 10px 20px 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .875rem; }
@media (max-width: 560px) {
  .intake { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; border: 0; margin: 0; }
  .intake__nav .btn--primary { margin-left: 0; width: 100%; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .intake__mark { filter: invert(1); }
}
:root[data-theme="dark"] .intake__mark { filter: invert(1); }

/* ---- v7 amendments: flip sequence, enlarge dialog, pricing CTAs ---- */
:root { --ground: #e3e6ec; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #182031; } }
:root[data-theme="dark"] { --ground: #182031; }

/* the section's own ground: a faint radial vignette behind the slide */
.section--stage { background: radial-gradient(ellipse 70% 60% at 32% 45%, var(--ground) 0%, var(--paper-2) 70%); }
.seq__sticky { background: transparent; }
.seq__stage { perspective: 1600px; overflow: visible; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.seq__card {
  position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform;
  border-radius: 10px;
}
.seq__face {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.seq__face--back { transform: rotateY(180deg); }
.seq__shadow {
  position: absolute; left: 50%; bottom: -9%; width: 82%; height: 14%;
  transform: translateX(-50%); transform-origin: 50% 50%;
  background: radial-gradient(ellipse at center, rgba(19, 28, 46, .55) 0%, rgba(19, 28, 46, 0) 70%);
  filter: blur(6px); opacity: .35; pointer-events: none; will-change: transform, opacity;
}
.seq__label { z-index: 2; }
.seq--static .seq__card, .seq--static .seq__shadow { transition: none; }

/* steps: one viewport tall each, text centred beside the centred sticky slide */
.steps--seq li { min-height: calc(100dvh - 40vh); align-content: center; }
.steps--seq li:last-child { min-height: calc(100dvh - 40vh); }
@media (min-width: 769px) {
  .seq { align-items: start; }
  .seq__sticky { top: 50%; transform: translateY(-50%); }
  .steps--seq li, .steps--seq li:last-child { min-height: 100vh; }
}
@media (prefers-reduced-motion: reduce) { .seq__card { will-change: auto; } }

/* enlarge control on the package sliders (desktop only) */
.cmp__zoom {
  position: absolute; right: 10px; bottom: 10px; display: none; align-items: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(245, 246, 248, .94); color: #131c2e; box-shadow: 0 0 0 1px rgba(19, 28, 46, .55);
  font: inherit; font-size: .8125rem; font-weight: 600;
}
.cmp__zoom-label { display: none; }
.cmp__zoom:hover .cmp__zoom-label, .cmp__zoom:focus-visible .cmp__zoom-label { display: inline; }
@media (min-width: 1024px) { .cmp__zoom { display: inline-flex; } }
.zoom {
  padding: 0; border: 0; background: transparent; max-width: none; max-height: none;
  width: min(90vw, calc(90vh * 16 / 9)); margin: auto;
}
.zoom:not([open]) { display: none; }
.zoom::backdrop { background: rgba(14, 19, 32, .78); }
.zoom .cmp { margin: 0; }
.zoom .cmp__stage { border-radius: 12px; }
.zoom .cmp__caption { color: #eef0f4; }
.zoom__close {
  position: absolute; right: 0; top: -52px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(245, 246, 248, .94); color: #131c2e; display: grid; place-items: center;
}

/* pricing: CTA row; cards align on rows */
.tier__cta { margin-top: 16px !important; align-self: end; }
.tier__cta .btn { width: 100%; }
@media (min-width: 820px) {
  .tiers { grid-template-rows: repeat(8, auto); }
  .tier:not(.tier--consult) { grid-row: span 8; display: grid; grid-template-rows: subgrid; }
  .tier--consult { grid-row: auto; }
}

/* ---- v9: QA fixes (Alon, qa/sophistikacen-site-2026-09-22.md), defect numbers in brackets ---- */

/* [7] one UI-label size: 14px for badges, tags, flags, labels, notes; 12 / 13 / 15px dropped */
.cmp__tier, .pkg__flag, .tier__label, .pkg__label, .intake__from, .intake__progress, .intake__label,
.preview-badge, .cmp__tag, .seq__label, .intake__note, .cmp__zoom { font-size: .875rem; }
.pkgs .cmp__tier, .pkgs .cmp__tag { font-size: .875rem; padding: 3px 8px; }
.intake__sub, .craft__grid .cmp__caption, .reach__note, .intake__status { font-size: var(--fs-0); }

/* [8] touch targets */
.intake__close { flex: 0 0 44px; }
.seq__tab { min-height: 44px; }
.pkg__link a { display: inline-block; padding: 11px 0; }

/* [13] about measure */
#about p { max-width: 34em; }

/* [1] featured tier flag sits after the name */
.tier dt .pkg__flag { vertical-align: middle; margin-left: 6px; }

/* [9] price unit breaks on purpose below 1400px, one line above */
.pkg__unit { display: block; }
@media (min-width: 1400px) { .pkg__unit { display: inline; } .pkg__unit::before { content: "\00b7 "; } }

/* [2] hero badge pair lives outside the stage: over the figure's top-right on wide screens, a row under the stage on phones */
.cmp--hero { position: relative; }
.cmp__corner--out { position: absolute; top: 12px; right: 12px; z-index: 2; }
@media (max-width: 480px) {
  .cmp--hero { display: flex; flex-direction: column; }
  .cmp--hero .cmp__stage { order: 1; }
  .cmp--hero .cmp__corner--out { order: 2; position: static; justify-content: flex-end; margin-top: 8px; }
  .cmp--hero .cmp__caption { order: 3; }
}

/* [3] phone: opaque ground under the sticky slide, small fade below, card kept inside the container */
@media (max-width: 768px) {
  .seq__sticky { background: var(--ground); padding: 8px 0 16px; overflow: hidden; }
  .seq__sticky::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(var(--ground), transparent); pointer-events: none; }
  .seq__stage { width: min(100% - 24px, calc(38vh * 16 / 9)); }
  .seq__shadow { bottom: 2px; }
}

/* [4] flip shadow readable in both themes: dark core in light, light halo in dark (opacity .45–.85 from app.js) */
.seq__shadow { background: radial-gradient(ellipse at center, rgba(19, 28, 46, .95) 0%, rgba(19, 28, 46, 0) 70%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seq__shadow { background: radial-gradient(ellipse at center, rgba(238, 240, 244, .6) 0%, rgba(238, 240, 244, 0) 70%); }
}
:root[data-theme="dark"] .seq__shadow { background: radial-gradient(ellipse at center, rgba(238, 240, 244, .6) 0%, rgba(238, 240, 244, 0) 70%); }

/* [6] hero fold: tighter vertical rhythm, capped H1, stage capped to the viewport on short desktops, third CTA a text link on phones */
:root { --fs-4: clamp(2.3rem, 1.3rem + 3.8vw, 4.25rem); }
.site-header { padding: 10px 0; }
.hero { padding: clamp(12px, 2vw, 20px) 0 clamp(28px, 4vw, 48px); }
.hero__kicker { margin-bottom: 8px; }
.hero__title { line-height: 1.05; }
.hero__lead { margin-top: 12px; line-height: 1.3; }
.cta-row { margin-top: 18px; }
.hero__note { margin-top: 8px; }
.hero .wrap--wide { margin-top: clamp(14px, 2vw, 20px); }
@media (min-width: 900px) {
  .cmp--hero .cmp__stage { width: min(100%, calc(62vh * 16 / 9)); margin-inline: auto; }
  .cmp--hero .cmp__corner--out { right: calc((100% - min(100%, calc(62vh * 16 / 9))) / 2 + 12px); }
}
/* (v15: the hero's third CTA is gone at every width; its phone rule was removed here) */

/* insurance for the Enlarge dialog scroll lock (QA section 5) */
.zoom { overscroll-behavior: contain; }

/* ---- v10: "Sound familiar?" pains block (plain ground, hairline), About Dan measure ---- */
.pains { padding: clamp(36px, 5vw, 64px) 0; }
.pains__eyebrow { color: var(--ink-2); font-weight: 500; }
.pains__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px 48px; }
.pains__list li { font-size: var(--fs-1); line-height: 1.45; color: var(--ink); max-width: 34em; padding-left: 0; }
.pains__pivot { margin-top: 24px; font-size: var(--fs-2); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; max-width: 30em; text-wrap: balance; }
.pains .cta-row { margin-top: 18px; }
@media (min-width: 900px) { .pains__list { grid-template-columns: 1fr 1fr; } }
#about p { max-width: 34em; }

/* v10.1 (Alon's v10 recommendations, applied by Chief 2026-09-22) */
h2.pains__eyebrow { font-size: 1.125rem; line-height: 1.5; letter-spacing: 0; text-transform: none; margin: 0 0 18px; }
.pains__next { margin: 18px 0 0; }
.pains__next a { display: inline-block; padding: 11px 0; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pains__next a:hover, .pains__next a:focus-visible { color: var(--ink-2); }

/* ---- v12: one H1 with the service line, Questions, contact form ---- */
.hero__title .hero__kicker { display: block; font-size: var(--fs-1); font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-bottom: 8px; text-transform: none; }
.hero__title { text-transform: none; }
.hero__title-line { display: block; text-transform: var(--hero-case); }

.faq__list { margin: 20px 0 0; display: grid; gap: 18px 40px; }
.faq__item { border-top: 1px solid var(--line); padding-top: 12px; max-width: 40em; }
.faq__item dt { font-weight: 600; font-size: var(--fs-1); }
.faq__item dd { margin: 6px 0 0; color: var(--ink); font-size: var(--fs-0); line-height: 1.5; }
@media (min-width: 900px) { .faq__list { grid-template-columns: 1fr 1fr; } }

.contact { margin-top: 22px; max-width: 44em; }
.contact__row { display: grid; gap: 14px; }
@media (min-width: 640px) { .contact__row { grid-template-columns: 1fr 1fr; } }
.contact__field { margin-top: 14px; }
.contact__row .contact__field { margin-top: 0; }
.contact__field label { display: block; font-size: .875rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.contact__opt { font-weight: 400; }
.contact__field input, .contact__field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ink-2); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-0);
}
.contact__field textarea { resize: vertical; line-height: 1.45; }
.contact__field input[aria-invalid="true"], .contact__field textarea[aria-invalid="true"] { border-color: #b3261e; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-top: 14px; min-height: 0; }
.cf-turnstile:empty { display: none; }
.contact__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.contact__status { margin-top: 10px; color: var(--ink); font-size: var(--fs-0); min-height: 1.4em; }
.contact__status:empty { display: none; }
.contact__note { margin-top: 8px; color: var(--ink-2); font-size: .875rem; }
.intake__form .contact__field { margin-top: 12px; }
.intake__form .intake__draft { margin-top: 0; }

/* ---- v13: mobile text diet. One disclosure pattern: [data-more="group"] content + button.m-more[data-more-for="group"].
   >=769px: content plain and visible, buttons hidden. <=768px: content hidden until the button opens it (aria-expanded).
   details.m-details (FAQ): open on desktop (JS), closed on phones; the summary stays visible as the question. ---- */
.m-more {
  display: none; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px;
  border: 0; background: transparent; color: var(--teal); font: inherit; font-size: var(--fs-0); font-weight: 600;
  text-decoration: underline; text-underline-offset: .15em; cursor: pointer;
}
.pkg__more, .why__more { margin: 0; }
.tier__more { margin: 0 !important; }
@media (max-width: 768px) {
  .m-more { display: inline-flex; }
  [data-more]:not(.is-open) { display: none !important; }
  .pkg__more { margin-top: 6px; }
  .why__more { margin-top: 10px; }
  .why li span[data-more].is-open { display: inline !important; }
  .cmp__caption span[data-more].is-open, .craft__lead span[data-more].is-open, .tier__scope span[data-more].is-open { display: inline !important; }
  .why li strong { margin-bottom: 0; }
}
@media (min-width: 769px) {
  .m-more { display: none !important; }
}
/* package rows: the More row is a grid row of its own (0 height on desktop) */
@media (min-width: 1024px) {
  .pkgs { grid-template-rows: auto auto auto auto auto 1fr auto; }
  .pkg { grid-row: span 7; }
}
/* pricing rows: the Details row is a grid row of its own */
@media (min-width: 820px) {
  .tiers { grid-template-rows: repeat(9, auto); }
  .tier:not(.tier--consult) { grid-row: span 9; }
}
/* FAQ as details/summary */
.faq__item summary { cursor: pointer; list-style: none; font-weight: 600; font-size: var(--fs-1); min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--ink-2); font-weight: 500; font-size: var(--fs-2); line-height: 1; }
.faq__item[open] summary::after { content: "\2013"; }
.faq__item p { margin: 6px 0 0; color: var(--ink); font-size: var(--fs-0); line-height: 1.5; }
@media (min-width: 769px) {
  .faq__item summary { pointer-events: none; min-height: 0; }
  .faq__item summary::after { content: none; }
}

/* v13.1 (Kacen, 2026-09-22): "Describe your talk" is a primary CTA button before the packages, inside the Sound-familiar block. The hero keeps it on desktop; on phones the hero's third CTA is hidden because the block below carries it. */
.pains__cta { align-items: center; gap: 12px 20px; }
.pains__next-link { display: inline-block; padding: 11px 0; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) {
  .pains__cta { flex-direction: column; align-items: stretch; }
  .pains__cta .btn { width: 100%; }
  .pains__next-link { text-align: center; }
}

/* ---- v14: comparison labels under the image (all sliders), hero rhythm on phones ---- */
.cmp { container-type: inline-size; }
.cmp__labels { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 8px; }
.cmp__labels .cmp__tag { position: static; justify-self: start; }
.cmp__labels .cmp__tag--after { justify-self: end; }
.cmp__hint { color: var(--ink-2); font-size: .875rem; text-align: center; white-space: nowrap; }
@container (max-width: 319px) { .cmp__hint { display: none; } }
.cmp__caption { margin-top: 10px; }
.cmp__caption .cmp__tier { display: inline-block; vertical-align: middle; margin-right: 2px; }
.zoom .cmp__hint { color: #aab2c0; }
.zoom .cmp__labels { margin-top: 10px; }
/* the hero figure is a plain column again (the v9 corner rules no longer have an element to act on) */
.cmp--hero { display: block; }

/* hero rhythm on phones: one column, one left edge, consistent gaps */
@media (max-width: 768px) {
  .hero { padding-top: 8px; }
  .hero__title .hero__kicker { margin-bottom: 8px; }
  .hero__lead { margin-top: 12px; }
  .hero .cta-row { margin-top: 20px; flex-direction: column; gap: 12px; }
  .hero .cta-row .btn { width: 100%; }
  .hero .wrap--wide { margin-top: 20px; }
  .cmp--hero .cmp__labels { margin-top: 8px; }
  .cmp--hero .cmp__caption { margin-top: 10px; }
}

/* ---- v15 (Kacen's phone + desktop review, 2026-09-23): hero stripped, Title Case, phone header; "Sound familiar?" as a 3D quote cloud;
   strip in one column; alternating grounds with a third token (tint B); How-it-works heading visible on phones; sparkle canvas. ---- */

/* Tint B: a cooler neutral, third ground in the rotation (plain → A → plain → B …). Measured contrast on it, light: ink 14.50:1, muted ink 6.48:1, teal 5.06:1;
   dark: 15.24 / 8.14 / 10.03. Band order on index: hero plain · pains A · packages plain · strip B · physicians plain · how A (+ --ground) · why plain · pricing B · questions plain · about A · contact plain. */
:root { --paper-3: #e9edf4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper-3: #111a2c; } }
:root[data-theme="dark"] { --paper-3: #111a2c; }
.section--tint-b { background: var(--paper-3); }
.section--tint-b .tier { background: var(--paper); }

/* hero: eyebrow + H1 + one line + two buttons + slider. The line balances into two on phones ("Your science untouched." / "Your message heard.").
   Desktop stage cap: its height is what the fold leaves after the copy, so the labels row stays inside a 758px-tall window (floor 560px wide). */
.hero__lead { max-width: 48ch; text-wrap: balance; }
@media (min-width: 900px) {
  /* the cap sits on the whole figure, not the stage, so the labels row and caption stay under the slide; left-aligned (one left edge), not centred */
  .cmp--hero { width: min(100%, max(560px, calc((100vh - 424px) * 16 / 9))); margin-inline: 0; }
  .cmp--hero .cmp__stage { width: 100%; margin-inline: 0; }
}

/* quote cloud: six quotes on a perspective stage. Slot 0 is the crisp front quote at the container's left edge; slots 1–5 sit behind it, nearest first,
   smaller through perspective (translateZ), fainter and slightly blurred. Rotation = every item moves one slot closer, the front one recedes to slot 5.
   Only transform / opacity / filter / color transition. */
/* v16 rework: the quotes are centred cards (18px, 17px on phones inside the cloud only), eight of them; slots 6 and 7 are parked invisible behind
   slot 5 so a card fades in at the back and fades out as it leaves the front. The Why badges (.qcloud--badges) share this base. */
.qcloud { margin-top: 18px; }
.qcloud__stage { position: relative; height: min(44vh, 360px); overflow: hidden; container-type: inline-size; }   /* cqw in the slot offsets = % of the stage width */
.qcloud__list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 50%; }   /* perspective on the cards' parent: it only reaches direct children */
.qcloud__q {
  position: absolute; left: 50%; top: 50%; width: min(100%, 440px); margin: 0;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 10px 30px rgba(19, 28, 46, .08);
  font-size: var(--fs-1); font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; color: var(--ink); text-align: center; text-wrap: pretty;
  transform: translate3d(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px)), var(--sz, 0px));
  opacity: var(--so, 1); filter: blur(var(--sb, 0px));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s ease, filter .6s ease, color .6s ease;
  will-change: transform, opacity, filter; pointer-events: none;
}
.qcloud__q::before { content: "\201C"; }
.qcloud__q::after { content: "\201D"; }
.qcloud__q[data-slot="0"] { --sx: 0px; --sy: 0px; --sz: 0px; --so: 1; --sb: 0px; z-index: 8; }
.qcloud__q[data-slot="1"] { --sx: -34cqw; --sy: -120px; --sz: -240px; --so: .5; --sb: 1px; color: var(--ink-2); z-index: 7; }
.qcloud__q[data-slot="2"] { --sx: 34cqw; --sy: 145px; --sz: -320px; --so: .42; --sb: 1.2px; color: var(--ink-2); z-index: 6; }
.qcloud__q[data-slot="3"] { --sx: -32cqw; --sy: 150px; --sz: -400px; --so: .34; --sb: 1.6px; color: var(--ink-2); z-index: 5; }
.qcloud__q[data-slot="4"] { --sx: 36cqw; --sy: -150px; --sz: -450px; --so: .3; --sb: 1.8px; color: var(--ink-2); z-index: 4; }
.qcloud__q[data-slot="5"] { --sx: 0px; --sy: -235px; --sz: -560px; --so: .24; --sb: 2px; color: var(--ink-2); z-index: 3; }
.qcloud__q[data-slot="6"], .qcloud__q[data-slot="7"] { --sx: 0px; --sy: -235px; --sz: -700px; --so: 0; --sb: 2px; color: var(--ink-2); z-index: 1; }
@media (max-width: 900px) {
  /* tablets and phones: no room beside a centred card, so the ghosts sit above (1, 3, 5) and below (2, 4) it */
  .qcloud__q[data-slot="1"] { --sx: -12cqw; --sy: -95px; }
  .qcloud__q[data-slot="2"] { --sx: 12cqw; --sy: 100px; }
  .qcloud__q[data-slot="3"] { --sx: -6cqw; --sy: -215px; }
  .qcloud__q[data-slot="4"] { --sx: -10cqw; --sy: 225px; }
  .qcloud__q[data-slot="5"] { --sx: 0px; --sy: -60px; }
  .qcloud__q[data-slot="6"], .qcloud__q[data-slot="7"] { --sy: -60px; }
}
@media (max-width: 600px) {
  .qcloud__q { font-size: 1.0625rem; padding: 16px; }   /* 17px so the longest quote holds three lines at 375 */
}
/* Sound familiar (v16): a real section title, muted lead, centred like the strip */
.pains .wrap { text-align: center; }
.pains__lead { margin-inline: auto; }
.pains__pivot { margin-inline: auto; }
.pains__cta { justify-content: center; }
.qcloud__nav { display: flex; gap: 8px; margin-top: 10px; }
.qcloud__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink-2); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.qcloud__btn:hover { border-color: var(--ink); background: var(--paper); }
/* reduced motion (media query or the JS class): no rotation, one quote, the buttons step through */
.qcloud--static .qcloud__q { transition: none; }
.qcloud--static .qcloud__q:not([data-slot="0"]) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .qcloud__q { transition: none; will-change: auto; }
  .qcloud__q:not([data-slot="0"]) { display: none; }
}
.pains__pivot { margin-top: 22px; }

/* strip: its own section on tint B, one column of pairs at every width, generous spacing; on desktop the column is ~60% of the container, left-aligned */
.section.craft { margin-top: 0; border-top: 0; padding: clamp(48px, 7vw, 96px) 0; }
.craft__title { font-size: var(--fs-3); }
.craft__grid { grid-template-columns: 1fr; gap: clamp(36px, 5vw, 56px); margin-top: 28px; }
@media (min-width: 700px) { .craft__grid { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .craft__grid { width: min(100%, max(62%, 760px)); } }
.craft .section__foot { margin-top: clamp(36px, 5vw, 56px); }

/* pricing: a small label names the three cards as packages (card titles stay one word) */
.tiers__label { margin-top: 26px; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tiers__label + .tiers { margin-top: 10px; }

/* How it works on phones: the heading sticks above the stage so it is never covered; the section ground is flat --ground there so the two sticky bars are invisible */
@media (max-width: 768px) {
  #how { --how-head: 50px; background: var(--ground); }
  #how > .wrap > h2 {
    position: sticky; top: 0; z-index: 3; min-height: var(--how-head); line-height: 32px; padding: 9px var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); background: var(--ground);
  }
  .seq__sticky { top: var(--how-head); }
}

/* sparkle canvas: behind the card, a little larger than the stage, no layout impact */
.seq__spark { position: absolute; left: -10%; top: -14%; width: 120%; height: 128%; pointer-events: none; z-index: 0; }
.seq__card { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .seq__spark { display: none; } }

/* ---- v16 (Kacen's review of v15, 2026-09-23): centred strip, Why as a badge stage, How stage below the heading, gallery bands, note dialog, Contact link ---- */

/* 3. strip: the single column is centred (heading, intro, pairs, captions, CTA line); the pairs stay ~60% wide on desktop, full width on phones */
.craft .wrap { text-align: center; }
.craft__lead { margin-inline: auto; }
.craft__grid { margin-inline: auto; }
.craft__grid .cmp__caption { text-align: center; }
.craft .section__foot { justify-content: center; text-align: center; }

/* 4. How it works, desktop: the sticky stage stays in flow under the heading and lead until it reaches its centred position.
   app.js sets --seq-top = (viewport height - stage height) / 2; no translateY, which used to pull the stage up over the heading. */
@media (min-width: 769px) {
  .seq__sticky { top: var(--seq-top, 24px); transform: none; }
}
/* sparkles travel further above and below the card: taller canvas */
.seq__spark { top: -60%; height: 220%; }

/* 5. Why SophistiKacen: centred, badges on the quote-cloud engine */
#why .wrap { text-align: center; }
#why .why__lead, #why .why__sub, #why .why__foot { margin-inline: auto; }
#why .why__foot { margin-top: 26px; }
.qcloud__nav--centre { justify-content: center; }
.qcloud--badges { margin-top: 22px; }
.qcloud--badges .qcloud__stage { height: min(50vh, 440px); }
.qcloud--badges .qcloud__q {
  left: 50%; width: min(100% - 40px, 340px);
  font-size: var(--fs-0); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-indent: 0; text-align: center; text-wrap: pretty;
  padding: 22px 20px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 10px 30px rgba(19, 28, 46, .08);
  transform: translate3d(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px)), var(--sz, 0px));
}
.qcloud--badges .qcloud__q::before, .qcloud--badges .qcloud__q::after { content: none; }
.badge__art { display: block; width: 72px; margin: 0 auto 12px; color: var(--ink); }
.badge__art svg { display: block; width: 100%; height: auto; }
.badge__lead { display: block; font-size: var(--fs-2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.badge__text { display: block; margin-top: 8px; color: var(--ink-2); }
.qcloud--badges .qcloud__q:not([data-slot="0"]) .badge__lead, .qcloud--badges .qcloud__q:not([data-slot="0"]) .badge__art { color: var(--ink-2); }
/* badge slots: a stack, ghosts peeking out either side and behind (sx in % of the stage width) */
.qcloud--badges .qcloud__q[data-slot="1"] { --sx: -34cqw; --sy: 0px; --sz: -260px; --so: .55; --sb: 1px; }
.qcloud--badges .qcloud__q[data-slot="2"] { --sx: 34cqw; --sy: 0px; --sz: -300px; --so: .5; --sb: 1.2px; }
.qcloud--badges .qcloud__q[data-slot="3"] { --sx: -16cqw; --sy: 26px; --sz: -520px; --so: .36; --sb: 1.8px; }
.qcloud--badges .qcloud__q[data-slot="4"] { --sx: 16cqw; --sy: -26px; --sz: -560px; --so: .3; --sb: 2px; }
.qcloud--badges .qcloud__q[data-slot="5"] { --sx: 0px; --sy: -44px; --sz: -700px; --so: .22; --sb: 2px; }
@media (max-width: 600px) {
  .qcloud--badges .qcloud__q[data-slot="1"] { --sx: -14cqw; --sy: -22px; }
  .qcloud--badges .qcloud__q[data-slot="2"] { --sx: 14cqw; --sy: 22px; }
  .qcloud--badges .qcloud__q[data-slot="3"] { --sx: -8cqw; --sy: 40px; }
  .qcloud--badges .qcloud__q[data-slot="4"] { --sx: 8cqw; --sy: -40px; }
  .qcloud--badges .qcloud__q[data-slot="5"] { --sx: 0px; --sy: -56px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qcloud--badges .qcloud__q { box-shadow: 0 10px 30px rgba(0, 0, 0, .4); } }
:root[data-theme="dark"] .qcloud--badges .qcloud__q { box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }

/* 7. gallery: each talk-type group is a section band; the method note is a text-style button that opens a small dialog */
.section.size-group { margin-top: 0; padding: clamp(40px, 5vw, 64px) 0; }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--teal); font: inherit; font-size: var(--fs-0); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; cursor: pointer;
}
.reach__note { margin-top: 0; }
.note-dialog {
  width: min(100% - 32px, 560px); padding: 0; margin: auto; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .28); overscroll-behavior: contain;
}
.note-dialog:not([open]) { display: none; }
.note-dialog::backdrop { background: rgba(14, 19, 32, .55); }
.note-dialog__body { padding: 20px 22px 22px; }
.note-dialog__title { font-size: var(--fs-2); }
.note-dialog p { margin-top: 12px; font-size: var(--fs-0); line-height: 1.5; color: var(--ink); }
.note-dialog__close { margin-top: 18px; min-height: 44px; }

/* v17 (Chief, 2026-09-24): intake chat mode */
.intake__chat { display: flex; flex-direction: column; gap: 10px; max-height: min(46vh, 420px); overflow-y: auto; padding: 4px 2px; scroll-behavior: smooth; }
.intake__msg { max-width: 88%; border-radius: 14px; padding: 10px 14px; line-height: 1.45; }
.intake__msg p { margin: 0; white-space: pre-wrap; }
.intake__msg--dan { align-self: flex-start; background: var(--paper-2); }
.intake__msg--dan .intake__from { display: block; font-size: .8125rem; color: var(--ink-2); margin-bottom: 2px; }
.intake__msg--me { align-self: flex-end; background: var(--ink); color: var(--paper); }
.intake__composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 12px; }
.intake__input { width: 100%; min-height: 44px; resize: vertical; border: 1px solid var(--line-2, var(--line)); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--paper); color: var(--ink); }
.intake__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.intake__alt { margin: 10px 0 0; }
@media (prefers-reduced-motion: reduce) { .intake__chat { scroll-behavior: auto; } }
.intake__msg--thinking p:empty::after { content: "\2022\2022\2022"; letter-spacing: 3px; color: var(--ink-2); animation: sk-pulse 1.2s ease-in-out infinite; }
@keyframes sk-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .intake__msg--thinking p:empty::after { animation: none; opacity: .7; } }