/* ============================================================
   APRIL — components
   ============================================================ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section {
  padding-block: var(--section-y);
  position: relative;
}

/* alternating band */
.philo {
  background: var(--surface-2);
}

[data-theme='dark'] .philo {
  background: var(--surface-2);
}

/* ============================================================
   the mark
   ============================================================ */
.mark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('../assets/april-mark.svg') center / contain no-repeat;
  mask: url('../assets/april-mark.svg') center / contain no-repeat;
  flex: none;
}

.mark--sm {
  width: 26px;
  height: 26px;
}

.mark--md {
  width: 40px;
  height: 40px;
}

.mark--inline {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  margin-inline: 0.12em;
  color: var(--accent);
}

/* ------------------------------------------------------------
   the opening mark — the first thing anyone sees

   Three rings leave the centre on a slow, evenly spaced cycle,
   and a dotted dial turns behind them almost too slowly to
   notice. The intent is an instrument at rest and listening,
   not a logo showing off: nothing bounces, nothing springs,
   and the tempo never changes.
   ------------------------------------------------------------ */
.signal {
  --sig: clamp(230px, 40vw, 400px);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sig);
  aspect-ratio: 1;
  margin-inline: auto;
  /* One colour, no motion. Blue on paper, white in the dark. The mark is
     the one thing on this page that is not trying to be interesting. */
  color: #14367e;
}

[data-theme='dark'] .signal {
  color: #ffffff;
}

.signal__mark {
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------
   the wordmark, set well clear of the mark
   ------------------------------------------------------------ */
.hero__title {
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
}

.hero__word {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.5vw, 4.6rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.07em;
  text-indent: 0.07em;
  color: var(--text);
}

.eyebrow--hero {
  margin-top: var(--space-5);
  margin-bottom: 0;
  color: var(--accent);
}

/* ============================================================
   header
   ============================================================ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 56px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  margin-right: auto;
}

.brand:hover {
  color: var(--text);
}

.brand .mark {
  color: var(--accent);
}

.brand__word {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand__sub {
  font-size: var(--text-xs);
  color: var(--text-faint);
  padding-left: 0.6rem;
  border-left: 1px solid var(--border-strong);
  letter-spacing: 0;
}

.navlinks {
  display: flex;
  gap: var(--space-6);
}

.navlinks a {
  font-size: var(--text-label);
  color: var(--text-muted);
  letter-spacing: -0.005em;
}

.navlinks a:hover {
  color: var(--text);
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.22s var(--ease);
}

.icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  transform: scale(1.06);
}

.nav-cta {
  padding: 0.44rem 1.05rem;
  font-size: var(--text-label);
}

.sm-only {
  display: none;
}

/* ============================================================
   buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.4rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: -0.012em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.24s var(--ease);
}

.btn:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.btn--solid {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 500;
}

.btn--solid:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

.btn--wa {
  background: var(--wa);
  border-color: transparent;
  color: #fff;
  font-weight: 500;
}

[data-theme='dark'] .btn--wa {
  color: #06210f;
}

.btn--wa:hover {
  background: var(--wa-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -12px rgba(18, 137, 74, 0.6);
}

[data-theme='dark'] .btn--wa:hover {
  color: #06210f;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.42;
  pointer-events: none;
}

/* ============================================================
   hero
   ============================================================ */
.hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background: var(--glow);
  pointer-events: none;
}

/* The landing page is centred on the mark. Everything below it hangs from
   the same axis, and every measure stays capped so centred text never runs
   long enough to be hard to read. */
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  max-width: 19ch;
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
  margin-inline: auto;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}

.hero__lede {
  max-width: 40rem;
  margin: var(--space-6) auto 0;
  font-size: var(--text-lede);
  line-height: 1.46;
  color: var(--text-muted);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* spec strip — the readout, ruled not boxed */
.hero__strip {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-strong);
}

.hero__strip > div {
  padding: 0;
  border: 0;
}

.hero__strip b {
  display: block;
  font-family: var(--font-num);
  font-size: var(--text-h3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 0.45rem;
  color: var(--text);
}

.hero__strip div {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  font-family: var(--font-num);
  color: var(--text-faint);
}

.hero__wave {
  display: none;
}

.mark--ghost {
  display: none;
}

/* ============================================================
   section heads
   ============================================================ */
.eyebrow {
  margin: 0 0 var(--space-5);
  font-family: var(--font-num);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--accent);
}

.sec-head {
  max-width: none;
  margin: 0 0 clamp(2.75rem, 5vw, 4rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-strong);
  text-align: left;
}

.sec-head h2 {
  max-width: 26ch;
}

.sec-head > .lede {
  max-width: 34rem;
}

/* two-column head: statement left, framing right */
.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  max-width: none;
}

.sec-head--split .lede {
  margin: 0;
  padding-bottom: 0.35rem;
}

.lede {
  max-width: 36rem;
  margin: var(--space-6) auto 0;
  font-size: var(--text-lg);
  line-height: 1.48;
  color: var(--text-muted);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin-block: var(--space-12);
}

/* ============================================================
   panels + tick lists
   ============================================================ */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.panel:hover {
  box-shadow: var(--shadow-md);
}

.panel__no {
  display: block;
  font-family: var(--font-num);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}

.panel--accent {
  border-color: var(--accent-line);
}

.panel h3 {
  margin-bottom: var(--space-5);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.008em;
}

.ticks {
  display: grid;
  gap: var(--space-4);
}

.ticks li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-muted);
  letter-spacing: -0.012em;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.14em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314367e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 0.7rem no-repeat;
}

[data-theme='dark'] .ticks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fabff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.ticks strong {
  color: var(--text);
  font-weight: 600;
}

.ticks--neg li::before {
  background: var(--surface-3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")
    center / 0.7rem no-repeat;
}

/* ============================================================
   notice
   ============================================================ */
.notice {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, 2.4vw, 1.6rem) clamp(1.25rem, 3vw, 2rem);
  max-width: 52rem;
  margin-inline: auto;
}

[data-theme='dark'] .notice {
  background: var(--surface);
}

.notice p {
  font-size: var(--text-label);
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 0.7em;
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice strong {
  color: var(--text);
}

/* ============================================================
   report tiers
   ============================================================ */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.tier--featured {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}

.tier--featured:hover {
  box-shadow: var(--shadow-lg);
}

.tier__flag {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-num);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-accent);
  white-space: nowrap;
}

.tier__no {
  display: block;
  font-family: var(--font-num);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-faint);
  letter-spacing: var(--track-mono);
  margin-bottom: 0.7rem;
}

.tier h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  line-height: 1.14;
}

.tier__price {
  margin-top: var(--space-5);
  font-family: var(--font-num);
  font-size: 2.15rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.tier__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
}

.tier__now {
  flex: none;
}

/* The comparison price. Struck through and set in the house blue, so the eye
   reads the saving before it reads the sentence explaining it. */
.tier__was {
  flex: none;
  font-size: 1.16rem;
  font-weight: 400;
  color: var(--accent);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--accent) 62%, transparent);
  letter-spacing: -0.01em;
}

.tier__pages {
  flex: none;
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: -0.01em;
}

.tier__anchor {
  margin-top: 0.55rem;
  font-size: var(--text-sm);
  color: var(--text-faint);
}

.tier ul {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.tier ul li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--text-label);
  line-height: 1.5;
  color: var(--text-muted);
}

.tier ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314367e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

[data-theme='dark'] .tier ul li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fabff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.tier ul li strong {
  color: var(--text);
}

.tier__foot {
  display: grid;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-8);
}

.tier__foot .btn {
  width: 100%;
}

/* ============================================================
   people
   ============================================================ */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-5);
}

.person {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--space-6);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease);
}

.person:hover {
  box-shadow: var(--shadow-md);
}

.person__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--surface-3);
}

.person__role {
  display: inline-block;
  font-family: var(--font-num);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 0.24rem 0.7rem;
  border-radius: var(--r-pill);
  margin-bottom: var(--space-3);
}

.person__body h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.008em;
  line-height: 1.16;
}

.person__title {
  margin: 0.3rem 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-faint);
}

.person__body p {
  font-size: var(--text-label);
  line-height: 1.55;
  color: var(--text-muted);
}

.person__wa {
  margin-top: var(--space-5);
  padding: 0.55rem 1.1rem;
  font-size: var(--text-label);
}

.metaphor {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 42rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.24;
  text-wrap: balance;
}

/* ============================================================
   process
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}

.step {
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border-strong);
  counter-increment: step;
}

.step::before {
  content: '0' counter(step);
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-num);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  color: var(--accent);
}

.step h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.008em;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.step p {
  font-size: var(--text-label);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ============================================================
   contact
   ============================================================ */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.channel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: all 0.28s var(--ease);
}

.channel:hover {
  color: var(--text);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-line);
}

.channel svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
}

.channel b {
  display: block;
  font-size: var(--text-label);
  font-weight: 500;
}

.channel small {
  color: var(--text-faint);
}

/* ============================================================
   footer
   ============================================================ */
.foot {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding-block: var(--space-12);
  font-size: var(--text-sm);
  color: var(--text-faint);
}

[data-theme='dark'] .foot {
  background: var(--surface-2);
}

.foot__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-10);
  justify-content: space-between;
}

.foot__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.foot__brand .mark {
  color: var(--accent);
}

.foot__brand strong {
  display: block;
  color: var(--text);
  font-size: var(--text-label);
  letter-spacing: 0.02em;
}

.foot__brand small {
  color: var(--text-faint);
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.foot nav a {
  color: var(--text-muted);
}

.foot nav a:hover {
  color: var(--text);
}

/* ============================================================
   floating WhatsApp
   ============================================================ */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.2rem;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #fff;
  font-size: var(--text-label);
  font-weight: 500;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
  transition: all 0.28s var(--ease);
}

[data-theme='dark'] .wa-float {
  color: #06210f;
}

.wa-float svg {
  width: 19px;
  height: 19px;
}

.wa-float:hover {
  background: var(--wa-hover);
  color: #fff;
  transform: translateY(-2px) scale(1.02);
}

[data-theme='dark'] .wa-float:hover {
  color: #06210f;
}

/* ============================================================
   assessment
   ============================================================ */
.progress {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  z-index: 50;
}

.progress__bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.form-wrap {
  max-width: 46rem;
  margin-inline: auto;
}

.fset {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.fset__head {
  margin-bottom: var(--space-6);
}

.fset__k {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.fset__t {
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: var(--track-tight);
}

.picker + .q,
.fset > .q:first-of-type:not(:first-child) {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

.q + .q {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

.qn {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 0.55rem;
}

.q__label {
  display: block;
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  line-height: 1.32;
  margin-bottom: 0.55rem;
  text-wrap: pretty;
}

.q__hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-bottom: var(--space-4);
}

/* the stated depth requirement — a rule, not a running tally */
.q__floor {
  font-family: var(--font-num);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  margin-top: var(--space-2);
  margin-bottom: 0;
}

input[type='text'],
input[type='email'],
input[type='number'],
textarea,
select {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0.8rem 0.95rem;
  font-size: var(--text-base);
  letter-spacing: -0.012em;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  resize: vertical;
}

[data-theme='dark'] input[type='text'],
[data-theme='dark'] input[type='email'],
[data-theme='dark'] input[type='number'],
[data-theme='dark'] textarea,
[data-theme='dark'] select {
  background: var(--surface-2);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

textarea {
  min-height: 8.5rem;
  line-height: 1.55;
}

.q__count {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-family: var(--font-num);
}

.q__count.is-ok {
  color: var(--wa);
}

.skills {
  display: grid;
  gap: var(--space-3);
}

.skills__row {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: center;
  gap: var(--space-3);
}

.skills__row span {
  font-size: var(--text-sm);
  color: var(--text-faint);
  font-family: var(--font-num);
}

/* tier picker */
.picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.pick {
  display: block;
  cursor: pointer;
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  transition: all 0.22s var(--ease);
}

[data-theme='dark'] .pick {
  background: var(--surface-2);
}

.pick:hover {
  border-color: var(--accent-line);
}

.pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pick b {
  display: block;
  font-size: var(--text-label);
  font-weight: 500;
}

.pick small {
  color: var(--text-faint);
}

.pick:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* consent */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  margin-top: var(--space-6);
}

[data-theme='dark'] .consent {
  background: var(--surface-2);
}

.consent input[type='checkbox'] {
  width: 22px;
  height: 22px;
  margin: 0.1rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.consent label {
  font-size: var(--text-label);
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}

ul.legal {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

ul.legal li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--text-label);
  line-height: 1.55;
  color: var(--text-muted);
}

ul.legal li::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* selfie */
.selfie {
  display: grid;
  gap: var(--space-4);
}

.selfie__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.selfie__stage video,
.selfie__stage canvas,
.selfie__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selfie__idle {
  text-align: center;
  padding: var(--space-6);
  font-size: var(--text-label);
  color: var(--text-faint);
  max-width: 26rem;
}

.selfie__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* an oval to frame the face by, shown only while the camera is live */
.selfie__guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46%;
  aspect-ratio: 3 / 4;
  border: 1.5px dashed rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  display: none;
}

.selfie__stage.is-live .selfie__guide {
  display: block;
}

/* the live feed is mirrored so people can frame themselves the way a mirror
   behaves; the captured file is written unmirrored */
.selfie__stage.is-live video {
  transform: scaleX(-1);
}

/* --- phones: the camera takes the whole screen so the face is actually
       large enough to see --- */
@media (max-width: 760px) {
  .selfie__stage {
    aspect-ratio: 3 / 4;
  }

  body.cam-live {
    overflow: hidden;
  }

  .selfie__stage.is-live {
    position: fixed;
    inset: 0;
    z-index: 400;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: #000;
  }

  .selfie__stage.is-live .selfie__guide {
    width: 62%;
  }

  .selfie__row.is-live {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 401;
    justify-content: center;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  }

  .selfie__row.is-live .btn {
    min-height: 3rem;
  }

  .selfie__row.is-live #camClose {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
  }
}

/* errors + thanks */
.formerr {
  margin-top: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-label);
  color: var(--text);
}

.thanks {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding-block: var(--space-16);
}

.thanks__card {
  max-width: 34rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(2rem, 5vw, 3.25rem);
  box-shadow: var(--shadow-lg);
}

.thanks__ring {
  width: 62px;
  height: 62px;
  margin: 0 auto var(--space-6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(160deg, #2b8fff, var(--accent));
  box-shadow: var(--shadow-accent);
}

.thanks__card h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  margin-bottom: var(--space-4);
}

.thanks__card p {
  color: var(--text-muted);
  font-size: var(--text-label);
  line-height: 1.6;
}

.thanks__relay {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-label);
  color: var(--text-muted);
}

.thanks__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-7);
}

.thanks__note {
  margin-top: var(--space-4);
  font-family: var(--font-num);
  font-size: 0.74rem;
  color: var(--text-faint);
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 960px) {
  .navlinks {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero__strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__strip > div:nth-child(3),
  .hero__strip > div:nth-child(4) {
    border-top: 1px solid var(--border);
  }
  .hero__strip > div:nth-child(odd) {
    border-left: 0;
  }
  .person {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .person__img {
    max-width: 11rem;
  }
  .foot__grid {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  .lg-only {
    display: none;
  }
  .sm-only {
    display: inline;
  }
  .brand__sub {
    display: none;
  }
  .wa-float span {
    display: none;
  }
  .wa-float {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }
  .hero__cta .btn {
    width: 100%;
  }
}

/* word counter injected by assessment.js */
.count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-family: var(--font-num);
  letter-spacing: 0;
}

.count.is-ok {
  color: var(--wa);
  font-weight: 600;
}

/* ============================================================
   long-form pages: terms, assessment intro
   ============================================================ */
main.legal {
  max-width: 44rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}

main.legal h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  margin-bottom: var(--space-4);
}

main.legal h2 {
  font-size: var(--text-h3);
  letter-spacing: var(--track-tight);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

main.legal p,
main.legal li {
  font-size: var(--text-label);
  line-height: 1.62;
  color: var(--text-muted);
}

main.legal strong {
  color: var(--text);
}

main.legal ul:not(.legal) {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

main.legal ul:not(.legal) li {
  position: relative;
  padding-left: 1.4rem;
}

main.legal ul:not(.legal) li::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* assessment intro block stays left-aligned */
.form-wrap .lede,
.form-wrap .eyebrow,
main.legal .lede,
main.legal .eyebrow {
  margin-inline: 0;
  text-align: left;
  max-width: 40rem;
}

main.legal .eyebrow,
.form-wrap .eyebrow {
  color: var(--accent);
  font-weight: 600;
}

main.legal .lede {
  color: var(--text-muted);
}

.form-wrap {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------------------
   The intake card on the finish screen. The number has to be the loudest
   thing on the page: it is the one piece of information the person needs in
   order to complete the hand-off, and the share sheet cannot supply it.
   ------------------------------------------------------------------------- */
.intake-card {
  margin: 1.5rem auto 1.25rem;
  padding: 1.1rem 1.25rem 1.2rem;
  max-width: 24rem;
  border: 1px solid var(--wa);
  border-radius: var(--radius-md, 14px);
  background: color-mix(in srgb, var(--wa) 7%, var(--surface));
  text-align: center;
}

.intake-card__k {
  margin: 0;
  font-family: var(--font-num);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.intake-card__n {
  margin: 0.4rem 0 0.35rem;
  font-family: var(--font-num);
  font-size: clamp(1.16rem, 5.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--wa);
  white-space: nowrap;
}

.intake-card__h {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* On the finish screen the floating Fin bubble sits on top of the one button
   that matters, so it stands down. Fin is still reachable from the row. */
body.is-thanks .wa-float {
  display: none;
}

/* ---------------------------------------------------------------------------
   The live word count under each long answer. It is quiet while they are
   short, and states plainly when the floor is cleared, so nobody meets the
   requirement for the first time as an error message after pressing send.
   ------------------------------------------------------------------------- */
.q__floor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.7rem;
}

.q__count {
  flex: none;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.q__floor.is-short .q__count {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  color: var(--accent);
}

.q__floor.is-met .q__count {
  border-color: var(--wa);
  background: color-mix(in srgb, var(--wa) 10%, transparent);
  color: var(--wa);
}

.q__floor.is-met .q__floorlabel {
  color: var(--wa);
}

.q__floorlabel {
  min-width: 0;
}

/* A button that is honest about waiting rather than one that looks ready and
   does nothing when pressed. */
.btn.is-waiting {
  opacity: 0.62;
  cursor: progress;
}

/* The three-word maxim under each report name. Set in the display serif and
   italicised so it reads as an inscription rather than as marketing copy —
   these are in the register of the oracle at Delphi, not of a product page.
   The rule beneath separates it from the price without drawing a box. */
.tier__maxim {
  margin: 0.3rem 0 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--accent);
}

/* "The Mirror" is one line while the other two titles wrap to two, which used
   to pass unnoticed. Once each card carries a maxim with a rule beneath it,
   that difference becomes three horizontal lines at three different heights.
   Reserving two lines of title in the multi-column layout puts the maxims,
   the rules and the prices on the same baseline across all three cards.
   Left alone in the single-column layout, where nothing sits side by side. */
@media (min-width: 40rem) {
  .tier h3 {
    /* two lines at this element's own 1.14 line-height */
    min-height: calc(2 * 1.14em);
  }
}

/* ============================================================
   the violin

   An exploded view of a real instrument, in CSS 3D. No frame, no box:
   the parts float on the page itself and travel with the scroll.

   js/violin.js sets four custom properties on #vrig — --p (0..1),
   --spread, --yaw, --pitch — and one class per active part. Everything
   below is a pure function of those, which is why the instrument comes
   apart on the way down and reassembles on the way up.

   Defaults here are the *assembled, readable* state, so if the script
   never runs the section is still a whole violin and six statements.
   ============================================================ */
.violinsec {
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: clip;
}

.vscroll {
  position: relative;
  height: 700vh;
}

.vstage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* the model owns the upper band of the stage, the statements the lower one, so
   they never collide however far the parts travel */
.vstage__model {
  position: absolute;
  left: 0;
  right: 0;
  top: 3.25rem;
  bottom: clamp(11rem, 26svh, 15rem);
  padding: 0 0.75rem;
  display: grid;
  place-items: center;
}

/* a very soft pool of light behind the instrument so it does not float on
   nothing */
.vstage__model::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, var(--accent-line) 0%, transparent 62%);
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- the 3D rig ---------- */
.vrig {
  --p: 0;
  --spread: 0;
  --yaw: 0deg;
  --pitch: 0deg;
  --roll: 0deg;
  --dolly: 0px;
  --drift: 0px;
  --lift: 0px;
  --zoom: 1;
  /* one design unit = --u pixels; js/violin.js sets it from the viewport */
  --u: 0.76;
  /* how far the parts are allowed to travel — smaller on narrow screens so the
     exploded view still fits without anything sliding off the edge */
  --fan: 1;

  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  translate: var(--drift) var(--lift);
  scale: calc(var(--u) * var(--zoom));
  will-change: translate, scale;
}

.vrig__pivot,
.vrig > .vp,
.vrig > .vtag {
  position: absolute;
  left: 0;
  top: 0;
}

/* ---------- one part ---------- */
.vp {
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);
  transform-style: preserve-3d;
  transform:
    rotateY(var(--yaw)) rotateX(var(--pitch)) rotateZ(var(--roll))
    translate3d(
      calc((var(--ax) + (var(--ex) - var(--ax)) * var(--spread) * var(--fan)) * 1px),
      calc((var(--ay) + (var(--ey) - var(--ay)) * var(--spread) * var(--fan)) * 1px),
      calc((var(--az) + (var(--ez) - var(--az)) * var(--spread) * var(--fan)) * 1px)
    );
  opacity: var(--o, 1);
  transition: opacity 0.45s var(--ease-out);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* the rig is sized in design units; scale the artwork with it */
.vp > img,
.vp > .vp__svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
}

.vp--strings {
  color: #e8e2d4;
}

[data-theme='light'] .vp--strings {
  color: #6d6656;
}

.vp--strings .vp__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* dimming: the part being talked about stays lit, the rest recede */
.vp[data-part] {
  --o: 1;
}

.vrig.is-focusing .vp[data-part] {
  --o: 0.42;
}

.vrig.is-focusing .vp.is-lit {
  --o: 1;
}

/* ---------- callouts: flat 2D, drawn onto wherever the part landed --------
   The labels are deliberately NOT inside the 3D rig — type in perspective is
   unreadable, and depth sorting would bury half of it behind a plate.
   js/violin.js measures each part's position on screen and points a line at
   it, so the arrow follows the part however the model is turned. */
.vtags {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.vleads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
  overflow: visible;
}

.vlead {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.vlead.is-on {
  opacity: 0.7;
}

.vlead__ln {
  stroke-dasharray: var(--len, 200) var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 0.6s var(--ease-out);
}

.vlead.is-on .vlead__ln {
  stroke-dashoffset: 0;
}

.vlead__dot {
  fill: var(--accent);
  stroke: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out) 0.25s;
}

.vlead.is-on .vlead__dot {
  opacity: 1;
}

.vtag {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: max-content;
  max-width: 15ch;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid var(--accent-line);
  translate: calc(var(--x, 0px) - var(--anchor, 0%)) calc(var(--y, 0px) - 50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.42s var(--ease-out), visibility 0.42s;
}

.vtag--l {
  --anchor: 100%;
  text-align: right;
}

.vtag.is-on {
  opacity: 1;
  visibility: visible;
}

.vtag b {
  display: block;
  font-family: var(--font-num);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text);
}

.vtag i {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted);
}

/* ---------- the six statements ---------- */
.vcaps {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4.5svh, 3rem);
  translate: -50% 0;
  width: min(92vw, 46rem);
  display: grid;
  z-index: 4;
  pointer-events: none;
  text-align: center;
}

.vcap {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-out),
    visibility 0.5s;
}

.vcap.is-on {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.vcap__k {
  font-family: var(--font-num);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.vcap__t {
  margin: 0.7rem 0 0;
  font-size: clamp(0.92rem, 1.55vw, 1.03rem);
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}

.vcap__q {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.3vw, 1.55rem);
  line-height: 1.32;
  color: var(--text);
  text-wrap: balance;
}

.vcap__close {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.24;
  color: var(--text);
  text-wrap: balance;
}

.vcap__sub {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ---------- progress ---------- */
.vprog {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: min(88vw, 40rem);
  height: 1px;
  background: var(--rule);
  z-index: 4;
}

.vprog__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  opacity: 0.55;
}

/* ---------- after ---------- */
.vafter {
  max-width: 42rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

.vafter a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  white-space: nowrap;
}

.vafter a:hover {
  border-bottom-color: currentColor;
}

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .vscroll {
    height: 620vh;
  }

  .vstage__model {
    top: 3rem;
    bottom: 17.5rem;
  }

  .vrig {
    --u: 0.5;
    --fan: 0.55;
    perspective: 1100px;
  }

  .vtag {
    max-width: 11ch;
  }

  .vtag b {
    font-size: 0.6rem;
  }

  .vtag i {
    font-size: 0.66rem;
  }

  .vtag__txt {
    max-width: 11ch;
  }

  .vtag__txt b {
    font-size: 0.6em;
  }

  .vtag__txt i {
    font-size: 0.64em;
  }

  .vcaps {
    width: 90vw;
    bottom: 0.9rem;
  }

  .vcap__t {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .vcap__q {
    font-size: 1.12rem;
  }

  .vcap__close {
    font-size: 1.32rem;
  }

  .vcap__sub {
    font-size: 0.82rem;
  }
}

/* ---------- no script, or reduced motion: show it whole ---------- */
.vscroll.is-static {
  height: auto;
  padding: clamp(2rem, 6vw, 4rem) 0;
}

.is-static .vstage {
  position: static;
  height: auto;
  display: block;
}

.is-static .vstage__model {
  position: static;
  height: min(72svh, 560px);
}

.is-static .vstage__model::before {
  display: none;
}



.is-static .vrig {
  --u: 1;
  --spread: 0;
  --yaw: 0deg;
  --pitch: 0deg;
}

.is-static .vp {
  opacity: 1 !important;
}

.is-static .vtags {
  display: none;
}

.is-static .vcaps {
  position: static;
  translate: none;
  width: min(92vw, 46rem);
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

.is-static .vcap {
  grid-area: auto;
  opacity: 1 !important;
  visibility: visible !important;
  translate: none !important;
}

.is-static .vprog {
  display: none;
}

/* ============================================================
   the "know more" pages

   Long-form persuasion, set narrow. A why / what / how spine runs
   down the left on wide screens so the reader can see the shape of
   the argument before they have read it.
   ============================================================ */
.tier__more {
  border-style: dashed;
}

.rp {
  padding-top: var(--space-8);
}

/* the way back, top and bottom */
.rp__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-num);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}

.rp__back:hover {
  color: var(--accent);
}

.rp__back svg {
  transition: transform 240ms var(--ease-out);
}

.rp__back:hover svg {
  transform: translateX(-3px);
}

.rp__back--end {
  margin-top: var(--space-12);
}

/* ---------- the hook ---------- */
.rp__hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}

.rp__hook {
  margin: var(--space-4) 0 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.rp__hooksub {
  margin: var(--space-6) 0 0;
  max-width: 44ch;
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

.rp__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-family: var(--font-num);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--text-faint);
}

.rp__meta .tier__now {
  font-size: 1.35rem;
  letter-spacing: 0;
  color: var(--text);
}

/* ---------- why / what / how ---------- */
.rp__sec {
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

.rp__sec--band {
  background: var(--surface-2);
  border-block: 1px solid var(--border);
}

.rp__grid {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: start;
}

.rp__num {
  margin: 0.35rem 0 0;
  font-family: var(--font-num);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--accent);
}

.rp__body {
  max-width: 40rem;
}

.rp__body > p {
  margin: 0 0 var(--space-6);
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--text-muted);
  text-wrap: pretty;
}

.rp__body > p:last-child {
  margin-bottom: 0;
}

.rp__lead {
  font-size: clamp(1.08rem, 1.7vw, 1.28rem) !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
}

/* April, speaking in her own voice — set apart from the argument around it */
.rp__q {
  margin: 0 0 var(--space-8);
  padding-left: var(--space-6);
  border-left: 2px solid var(--accent-line);
}

.rp__q p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.22rem, 2.4vw, 1.68rem);
  line-height: 1.28;
  letter-spacing: -0.014em;
  color: var(--text);
  text-wrap: balance;
}

.rp__how {
  font-family: var(--font-display) !important;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.022em;
  color: var(--text) !important;
  text-wrap: balance;
}

/* ---------- the end ---------- */
.rp__end {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem);
}

.rp__close {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.rp__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.rp__fine {
  margin: var(--space-8) 0 0;
  max-width: 46ch;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-faint);
}

@media (max-width: 46rem) {
  .rp__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Keyboard users get a way past the masthead; everyone else never sees it. */
.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 200;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--accent);
  color: #0d0f13;
  font-size: var(--text-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 180ms var(--ease-out);
}

.skip:focus-visible {
  transform: translateY(0);
}

/* ---------- the theme switch ----------
   Two icons, one visible: the reader sees where the button will take them
   rather than where they already are. */
.theme-btn {
  position: relative;
}

.theme-btn__sun,
.theme-btn__moon {
  transition:
    opacity 220ms var(--ease-out),
    transform 320ms var(--ease-out);
}

.theme-btn__sun {
  position: absolute;
  inset: 0;
  margin: auto;
}

[data-theme='dark'] .theme-btn__moon {
  opacity: 0;
  transform: rotate(-40deg) scale(0.7);
}

[data-theme='light'] .theme-btn__sun {
  opacity: 0;
  transform: rotate(40deg) scale(0.7);
}

/* ---------------------------------------------------------------------------
   The vault door in the masthead. Deliberately quiet: it is not for clients,
   so it must not compete with the one button that is.
   ------------------------------------------------------------------------- */
.vault-btn {
  opacity: 0.4;
  transition: opacity 0.25s var(--ease-out), color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
}

.vault-btn:hover,
.vault-btn:focus-visible {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}

body.is-admin {
  background: var(--bg);
}

body.is-admin .vault-btn {
  display: none;
}

/* ============================================================================
   THE GATE
   A small box that unfolds under the padlock. It is not a page, on purpose:
   a visitor who clicks the padlock finds nothing to read and nowhere to go.
   ========================================================================== */
.gate {
  position: fixed;
  z-index: 120;
  width: min(320px, calc(100vw - 24px));
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out), transform 0.28s var(--ease-out);
}

.gate.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (max-width: 640px) {
  .gate {
    left: 12px;
    right: 12px;
    width: auto;
  }
}

.gate__faces {
  display: grid;
  gap: 0.4rem;
  margin-bottom: var(--space-4);
}

.gate__face {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
}

.gate__face:hover {
  background: var(--surface-2);
  color: var(--text);
}

.gate__face.is-on {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-2);
}

.gate__face img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.25s var(--ease-out);
}

.gate__face.is-on img {
  filter: none;
}

.gate__fname {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.gate__key {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.gate__key:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.gate__go {
  width: 100%;
  margin-top: 0.55rem;
}

.gate__err {
  min-height: 1.1em;
  margin: 0.5rem 0 0;
  color: var(--accent);
  font-size: var(--text-xs);
  text-align: center;
}

.vault-btn.is-on {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================================
   TYPE SYSTEM — Helvetica Neue (product pages, assessment, terms)
   Bold for what names or counts; Light for what you read; Medium for the small
   uppercase labels. Mirrors the front page so the site reads as one voice.
   ========================================================================== */
body:not(.is-admin) { font-weight: 300; }
body:not(.is-admin) strong,
body:not(.is-admin) b { font-weight: 700; }
body:not(.is-admin) h1,
body:not(.is-admin) h2,
body:not(.is-admin) h3,
body:not(.is-admin) h4,
body:not(.is-admin) .hero__word,
body:not(.is-admin) .panel h3,
body:not(.is-admin) .tier h3,
body:not(.is-admin) .person__body h3,
body:not(.is-admin) .step h3,
body:not(.is-admin) .rp__hook,
body:not(.is-admin) .rp__how {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
body:not(.is-admin) h3,
body:not(.is-admin) .panel h3,
body:not(.is-admin) .tier h3,
body:not(.is-admin) .person__body h3,
body:not(.is-admin) .step h3 { letter-spacing: -0.02em; line-height: 1.15; }
body:not(.is-admin) h1 em,
body:not(.is-admin) h2 em,
body:not(.is-admin) .hero__word em,
body:not(.is-admin) .rp__hook em { font-weight: 300; font-style: italic; letter-spacing: -0.02em; }
body:not(.is-admin) .metaphor,
body:not(.is-admin) .tier__maxim,
body:not(.is-admin) .vcap__q,
body:not(.is-admin) .vcap__close,
body:not(.is-admin) .rp__q p,
body:not(.is-admin) .rp__close {
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.35;
}
body:not(.is-admin) .hero__strip b,
body:not(.is-admin) .tier__price,
body:not(.is-admin) .intake-card__n {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
body:not(.is-admin) .eyebrow,
body:not(.is-admin) .panel__no,
body:not(.is-admin) .tier__flag,
body:not(.is-admin) .tier__no,
body:not(.is-admin) .person__role,
body:not(.is-admin) .intake-card__k,
body:not(.is-admin) .vtag b,
body:not(.is-admin) .vcap__k,
body:not(.is-admin) .rp__back,
body:not(.is-admin) .rp__meta,
body:not(.is-admin) .rp__num,
body:not(.is-admin) .hero__strip div {
  font-weight: 600;
  letter-spacing: 0.12em;
}
body:not(.is-admin) .step::before,
body:not(.is-admin) .q__floor,
body:not(.is-admin) .q__count,
body:not(.is-admin) .skills__row span,
body:not(.is-admin) .thanks__note,
body:not(.is-admin) .count,
body:not(.is-admin) .gate__key { font-weight: 500; letter-spacing: 0.01em; }
body:not(.is-admin) .tier__pages { font-weight: 400; }
body:not(.is-admin) .btn,
body:not(.is-admin) button { font-weight: 600; }
body:not(.is-admin) p,
body:not(.is-admin) li { letter-spacing: 0; }