/*
 * GTM Audit, design v2.
 * Source: gtm-audit-wesbite-v2/styles.css, pruned to the rules the live pages use (same order, so the cascade is unchanged).
 * To port a later prototype change, edit the matching rule here; WordPress-only rules are at the end.
 */
:root {
  --peri: #7b80d4;
  --peri-soft: #aab0ec;
  --peri-pale: #eceefc;
  --lilac: #f5f2fd;
  --ink: #1d1236;
  --ink-soft: #3f365d;
  --pink: #ffb3c1;
  --cyan: #76c7ee;
  --line: rgba(29, 18, 54, 0.14);
  --sans: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: 24px; --edge: clamp(20px, 3vw, 40px); --max: 1280px;
  --r-btn: 6px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, figure { margin: 0; padding: 0; }
ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: var(--s4); top: -64px; background: var(--ink); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--r-btn); z-index: 100; transition: top 0.2s; }
.skip:focus { top: var(--s4); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--edge); }
.t-bold { font-weight: 700; letter-spacing: -0.025em; }
.t-accent { font-weight: 700; letter-spacing: -0.025em; }

h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.02; text-wrap: balance; }

/* word-split mask */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.14em 0.12em 0.32em; margin: -0.14em -0.12em -0.32em; }
.wi { display: inline-block; will-change: transform; }

/* initial hidden state only when JS+GSAP are ready */
.js [data-reveal], .js [data-stagger] > *, .js [data-hero-side] { opacity: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: var(--s3); padding: 13px 20px; border-radius: var(--r-btn); font-weight: 500; font-size: 0.9375rem; text-decoration: none; transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); will-change: transform; }
.btn svg { transition: transform 0.3s var(--ease); }
.btn--sm { padding: 9px 14px; font-size: 0.875rem; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--ghost { border: 1px solid var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--dark:hover { background: #2d1d52; box-shadow: 0 12px 32px -12px rgba(29, 18, 54, 0.5); }
  .btn--dark:hover svg { transform: translate(2px, -2px); }
  .btn--light:hover { box-shadow: 0 8px 24px -10px rgba(29, 18, 54, 0.4); }
  .btn--ghost:hover { background: var(--ink); color: #fff; }
}

/* nav */
.nav { position: absolute; z-index: 20; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max); display: flex; align-items: center; justify-content: space-between; padding: var(--s5) var(--edge); }
.brand { --logo: 1.25rem; display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none; font-size: var(--logo); line-height: 1; color: #fff; transition: color 0.3s; }
.brand__text { display: inline-flex; align-items: baseline; gap: 0.2em; white-space: nowrap; }
.brand__text .t-bold { font-weight: 700; letter-spacing: -0.02em; }
.brand__text .t-accent { font-weight: 500; letter-spacing: -0.01em; }
.brand--footer { --logo: 1.375rem; color: var(--ink); }
.brand__mark { height: 1.05em; width: auto; flex: none; color: inherit; overflow: visible; }

/* hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, #7a7fd3 0%, #8a90db 34%, #c3c8f4 66%, #fff 100%); overflow: hidden; isolation: isolate; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; touch-action: pan-y; cursor: grab; }
.hero__inner { display: grid; gap: var(--s6); justify-items: start; width: 100%; max-width: var(--max); margin-inline: auto; padding: 0 var(--edge) clamp(var(--s8), 11svh, var(--s9)); pointer-events: none; }
.hero__inner a { pointer-events: auto; }
.hero__title { font-size: clamp(2.25rem, 4.2vw, 4.5rem); line-height: 1.04; text-wrap: balance; max-width: 11.5em; }
.hero__title > span { display: block; text-wrap: balance; }
.hero__title .t-accent { color: #4a3f86; }
.hero__side { display: grid; gap: var(--s5); justify-items: start; }
.hero__side p { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--ink-soft); max-width: 40ch; }

/* sections */
.section { padding-block: clamp(var(--s9), 11vw, 144px); border-top: 1px solid var(--line); }

.who { background: var(--lilac); }

.steps { background: linear-gradient(180deg, var(--lilac), #fff 70%); }
.steps__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: end; margin-bottom: var(--s8); }
.steps__head p { color: var(--ink-soft); max-width: 44ch; font-size: 1.125rem; }

.faq { background: #fff; }
.faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s9); align-items: start; }
.faq__grid > h2 { position: sticky; top: var(--s10); }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa h3 { font-size: inherit; font-weight: inherit; }
.qa button { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); width: 100%; padding: var(--s5) 0; text-align: left; font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.qa i { position: relative; flex: none; width: 36px; height: 36px; border-radius: var(--r-btn); border: 1px solid var(--line); transition: background 0.3s, border-color 0.3s, transform 0.5s var(--ease); }
.qa i::before, .qa i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.5s var(--ease); }
.qa i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa.is-open i { background: var(--ink); border-color: var(--ink); color: #fff; }
.qa.is-open i::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 var(--s8) var(--s5) 0; color: var(--ink-soft); max-width: 60ch; }
@media (hover: hover) and (pointer: fine) { .qa button:hover i { border-color: var(--ink); } }

.cta { border-top: 1px solid var(--line); background: linear-gradient(180deg, #fff 0%, #c3c8f4 55%, #aab0ec 100%); padding-block: clamp(var(--s9), 14vw, 176px) clamp(var(--s8), 8vw, var(--s9)); text-align: center; }
.cta__inner { display: grid; gap: var(--s6); justify-items: center; }
.cta h2 { font-size: clamp(2.5rem, 6.4vw, 5.5rem); max-width: 14em; }
.cta h2 > span { display: block; }
.cta p { color: var(--ink-soft); max-width: 38ch; font-size: 1.125rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

.footer { border-top: 1px solid var(--line); position: relative; background: linear-gradient(180deg, #aab0ec 0%, #7b80d4 100%); overflow: hidden; }
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); padding-block: var(--s6); font-size: 0.9375rem; position: relative; z-index: 2; }
.footer__bar nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.footer__bar a { text-decoration: none; transition: opacity 0.2s; }
@media (hover: hover) and (pointer: fine) { .footer__bar a:hover { opacity: 0.6; } }
.footer__stage { position: relative; height: clamp(200px, 30vw, 420px); }
.footer__word { position: absolute; left: 0; right: 0; top: 0; text-align: center; white-space: nowrap; font-size: clamp(3.75rem, 16.5vw, 17rem); line-height: 0.9; color: rgba(255, 255, 255, 0.92); z-index: 1; display: flex; justify-content: center; gap: 0.04em; }
.footer__word .t-accent { color: rgba(255, 255, 255, 0.78); }
.ridge { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.ridge__layer { position: absolute; inset: 0; will-change: transform; }
.ridge__canvas { position: absolute; left: 0; top: 0; max-width: none; will-change: transform; animation: ridge-drift 60s linear infinite; }
.ridge.is-paused .ridge__canvas { animation-play-state: paused; }
@keyframes ridge-drift { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .ridge__canvas { animation: none; } }

/* responsive */
@media (max-width: 960px) {
  body { font-size: 17px; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s5); }
  .steps__head, .faq__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .faq__grid > h2 { position: static; }
  .qa__a p { padding-right: 0; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .hero { min-height: 100svh; }
  .hero__title { font-size: clamp(2.25rem, 10.5vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js [data-reveal], .js [data-stagger] > *, .js [data-hero-side] { opacity: 1; }
}

/* hero: full-width split, text left / cube right */
@media (min-width: 961px) {
  .hero { justify-content: center; padding-top: 96px; }
  .hero__inner { padding-bottom: 0; }
  .hero__inner > * { max-width: 52%; }
}

/* two-tone headlines */
h2 .t-accent { color: #5b61c4; }
.cta h2 .t-accent { color: #4a3f86; }

.problem { background: #fff; color: var(--ink); }

/* Stripe-style frame: hairlines down both edges of the fixed-width column */
body { position: relative; }
.frame { position: absolute; inset: 0; z-index: 4; display: flex; justify-content: center; pointer-events: none; }
.frame::before { content: ""; width: 100%; max-width: var(--max); height: 100%; border-inline: 1px solid var(--line); }
@media (max-width: 1320px) { .frame { display: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.who { background: var(--lilac); overflow: hidden; }

/* what I look for: stacked cards, each with a live 3D scene */
.look { background: #fff; }
.look__head { display: grid; justify-items: center; gap: var(--s5); text-align: center; max-width: 960px; margin: 0 auto clamp(var(--s8), 8vw, var(--s9)); }
.look__head p { color: var(--ink-soft); max-width: 52ch; font-size: 1.125rem; }
.stack { display: grid; gap: clamp(28px, 7vh, 64px); padding-bottom: clamp(var(--s6), 6vh, var(--s8)); }
.slab { position: sticky; top: calc(84px + var(--i) * 22px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); min-height: min(600px, calc(100svh - 110px)); padding: var(--s3); border: 1px solid rgba(29, 18, 54, 0.07); border-radius: 12px; background: var(--bg, #eef0fd); box-shadow: 0 -24px 60px -36px rgba(29, 18, 54, 0.28); transform-origin: 50% 0; will-change: transform; }
.slab__copy { display: flex; flex-direction: column; gap: var(--s4); padding: clamp(24px, 3.4vw, 48px); }
.slab__title { font-size: clamp(2.125rem, 3.8vw, 3.5rem); line-height: 1.02; text-wrap: balance; }
.slab__title span { display: block; }
.slab__title .t-accent { color: #5b61c4; }
.slab__lead { color: var(--ink-soft); font-size: 1.125rem; line-height: 1.5; max-width: 32ch; }
.slab__q { margin: auto 0 0; padding: 22px 24px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(29, 18, 54, 0.08); border-radius: var(--r-md); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.slab__q::before { content: "“"; }
.slab__q::after { content: "”"; }
.slab__art { position: relative; min-height: 380px; overflow: hidden; border-radius: 8px; background: linear-gradient(180deg, #7a7fd3 0%, #9aa0e6 46%, #dcdff9 100%); }
.slab__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
@media (max-width: 960px) {
  .slab { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; }
  .slab__art { order: -1; min-height: 320px; }
}

/* responsive refinements */
@media (max-width: 480px) {
  .look__head p { font-size: 1.0625rem; }
}

/* ===== subpages: contact, privacy, terms ===== */
[hidden] { display: none !important; }
.subpage .nav--dark .brand { color: var(--ink); }
.subpage .nav--dark .btn--light { background: var(--ink); color: #fff; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (hover: hover) and (pointer: fine) { .subpage .nav--dark .btn--light:hover { background: #2d1d52; } }
.pagehead { position: relative; padding: clamp(112px, 14vw, 168px) 0 clamp(var(--s7), 6vw, var(--s9)); background: linear-gradient(180deg, #c9cdf6 0%, #e8eafc 55%, #fff 100%); border-bottom: 1px solid var(--line); }
.pagehead__inner { display: grid; gap: var(--s4); }
.pagehead__title { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; max-width: 16em; text-wrap: balance; }
.pagehead__title .t-accent { color: #4a3f86; }
.pagehead__meta { color: var(--ink-soft); font-size: 1rem; }
.pagehead__inner > * { animation: rise 0.9s var(--ease) both; }
.pagehead__inner > *:nth-child(2) { animation-delay: 0.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.todo { background: rgba(255, 179, 193, 0.5); color: var(--ink); padding: 1px 6px; border-radius: 4px; }

/* contact */
.contact { padding-block: clamp(var(--s8), 8vw, var(--s9)) clamp(var(--s9), 10vw, 144px); }
.contact__grid { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: clamp(var(--s8), 8vw, 120px); align-items: start; }
.contact__lead { font-size: clamp(1.1875rem, 1.8vw, 1.375rem); line-height: 1.5; color: var(--ink); max-width: 34ch; }
.facts { display: grid; gap: var(--s5); margin: var(--s7) 0; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s4); align-items: start; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); }
.facts svg { margin-top: 2px; color: var(--ink); }
.facts strong { color: var(--ink); font-weight: 600; }
.contact__alt { color: var(--ink-soft); }
.contact__alt a, .form__legal a, .form-alert a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.formcard { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 30px 70px -48px rgba(91, 97, 196, 0.55); }
.form { display: grid; gap: var(--s5); padding: clamp(24px, 3vw, 40px); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.field__opt { margin-left: var(--s2); font-weight: 400; color: var(--ink-soft); font-size: 0.875rem; }
.field input, .field textarea { width: 100%; padding: 14px 16px; border: 1px solid rgba(29, 18, 54, 0.28); border-radius: var(--r-btn); background: #fff; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color 0.2s, box-shadow 0.2s; }
.field textarea { resize: vertical; min-height: 128px; }
.field input:hover, .field textarea:hover { border-color: rgba(29, 18, 54, 0.5); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(123, 128, 212, 0.35); }
.field__hint { font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); }
.field__error { font-size: 0.875rem; font-weight: 500; color: #b3203f; }
.field.has-error input { border-color: #b3203f; box-shadow: 0 0 0 3px rgba(179, 32, 63, 0.14); }
.form-alert { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: 1px solid rgba(179, 32, 63, 0.35); border-radius: var(--r-md); background: #fff5f7; color: #7d1530; }
.form-alert svg { flex: none; margin-top: 2px; }
.form-alert p { font-size: 0.9375rem; line-height: 1.5; }
.form__submit { justify-content: center; width: 100%; padding-block: 15px; position: relative; }
.btn__spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
.form__submit.is-loading { pointer-events: none; opacity: 0.9; }
.form__submit.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__legal { font-size: 0.875rem; color: var(--ink-soft); text-align: center; }
.form-success { display: grid; justify-items: center; gap: var(--s4); padding: clamp(40px, 5vw, 72px) var(--s6); text-align: center; }
.form-success:focus { outline: none; }
.form-success__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--ink); color: #fff; }
.form-success h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.form-success p { font-size: 1.125rem; color: var(--ink-soft); }
.form-success .btn { margin-top: var(--s3); }

/* legal pages */
.legal { padding-block: clamp(var(--s8), 7vw, var(--s9)) clamp(var(--s9), 10vw, 144px); }
.legal__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(var(--s7), 7vw, 96px); align-items: start; }
.legal__toc { position: sticky; top: var(--s8); }
.legal__toc ol { display: grid; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.legal__toc a { display: block; margin-left: -1px; padding: 9px 16px; border-left: 2px solid transparent; font-size: 0.9375rem; line-height: 1.35; color: var(--ink-soft); text-decoration: none; transition: color 0.2s, border-color 0.2s; }
.legal__toc a[aria-current="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { color: var(--ink); } }
.legal__body { max-width: 68ch; }
.draft-note { margin-bottom: var(--s7); padding: var(--s4) var(--s5); border: 1px dashed rgba(29, 18, 54, 0.3); border-radius: var(--r-md); background: #fbfaff; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }
.legal__body section { scroll-margin-top: var(--s8); padding-bottom: var(--s7); }
.legal__body h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin-bottom: var(--s4); }
.legal__body p, .legal__body li { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
.legal__body p + p, .legal__body p + ul, .legal__body ul + p { margin-top: var(--s4); }
.legal__body ul { margin: var(--s3) 0 0; padding-left: 1.25rem; }
.legal__body li + li { margin-top: var(--s2); }
.legal__body a { color: var(--ink); text-underline-offset: 3px; }

/* compact footer */
@media (max-width: 960px) {
  .contact__grid, .legal__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .legal__toc { position: static; }
  .legal__toc ol { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); }
  .legal__toc a { margin-left: 0; margin-bottom: -1px; border-left: 0; border-bottom: 2px solid transparent; }
  .legal__toc a[aria-current="true"] { border-bottom-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .pagehead__inner > * { animation: none; } .btn__spinner { animation-duration: 1.6s; } }

/* headings with a single typeface: let two-tone titles flow and balance */
h1, h2, h3 { text-wrap: balance; }
.cta h2 { max-width: 12em; }
.cta h2 > span { display: block; text-wrap: balance; }

/* logo variations page */

/* ===== single font, one calm animation style ===== */
.nav .btn--light { background: #fff; color: var(--ink); border: 0; }
@media (hover: hover) and (pointer: fine) { .nav .btn--light:hover { background: #f1f2fd; box-shadow: none; } }
.btn { will-change: auto; }
.steps { background: #fff; }

/* financials: numbered rows */

/* who: four rows and one photo */
.who { background: var(--lilac); }

/* half a day: facts row + three columns */
.st3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); margin: var(--s8) 0 0; padding: 0; list-style: none; }
.st3__col { border-top: 2px solid var(--ink); padding-top: var(--s5); }
.st3__top { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s5); }
.st3__n { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #5b61c4; }
.st3 h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.st3__list { margin: 0; }
.st3__list > div { display: grid; gap: 4px; padding: var(--s4) 0; border-top: 1px solid var(--line); }
.st3__list dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #5b61c4; }
.st3__list dd { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 960px) {
  .st3 { grid-template-columns: 1fr; gap: var(--s7); }
}


/* two-tone section headings break where the colour changes */
.section h2 > span, .cta h2 > span { display: block; text-wrap: balance; }
.look__head h2 > span { display: inline; }

/* ===== quieter type, Stripe-like: medium headlines, muted second tone, light labels ===== */
:root { --muted: #6f6b8d; --muted-on-tint: #4d4580; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.03em; }
.t-bold, .t-accent { font-weight: 500; letter-spacing: -0.03em; }
h2 .t-accent, h3 .t-accent { color: var(--muted); }
.hero__title .t-accent, .cta h2 .t-accent, .pagehead__title .t-accent { color: var(--muted-on-tint); }
.slab__title .t-accent { color: var(--muted); }
.brand__text .t-bold { font-weight: 600; letter-spacing: -0.02em; }
.brand__text .t-accent { font-weight: 400; color: inherit; letter-spacing: -0.01em; }
.st3__n { font-weight: 500; color: var(--muted); }
.st3 h3 { font-weight: 500; }
.legal__toc a[aria-current="true"] { font-weight: 500; }
.slab__q { font-weight: 400; }

/* financials: pinned text on the left, full cards scroll past on the right */
.ps { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 112px); align-items: start; }
.ps__lead { position: sticky; top: 96px; display: grid; gap: var(--s5); }
.ps__lead h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.08; }
.ps__lead p { color: var(--ink-soft); font-size: 1.125rem; max-width: 42ch; }
.ps__list { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.ps__card { display: flex; flex-direction: column; min-height: 540px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 30px 60px -48px rgba(91, 97, 196, 0.35); }
.ps__text { display: grid; gap: var(--s2); padding: var(--s6) var(--s6) 0; }
.ps__text p { font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; max-width: 30ch; }
.ps__art { position: relative; flex: 1; min-height: 320px; margin-top: var(--s6); overflow: hidden; background: var(--wash, var(--lilac)); }
.ps__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.9s var(--ease); }
@media (hover: hover) and (pointer: fine) { .ps__card:hover .ps__img { transform: translateY(-8px) scale(1.015); } }
@media (max-width: 960px) {
  .ps { grid-template-columns: 1fr; gap: var(--s7); }
  .ps__lead { position: static; }
  .ps__card { min-height: 0; }
}

/* ===== product panels inside the problem cards (decorative sample UI) ===== */
.ps__card { --muted: #6f6b8d; --pink: #ff8fa6; --peri: #7b80d4; }
.up { position: absolute; left: 7%; top: 10%; bottom: -1px; width: 86%; padding: 16px 18px 0; overflow: hidden; background: #fff; border: 1px solid rgba(29, 18, 54, 0.1); border-radius: 8px 8px 0 0; box-shadow: 0 30px 60px -28px rgba(29, 18, 54, 0.4); font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.up .mut { color: var(--muted); }
.up__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.up__bar b { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; margin-right: 6px; }
.tab { color: var(--muted); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.tab.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.push { margin-left: auto; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-style: normal; font-size: 11.5px; background: #f1f2fd; color: var(--ink); white-space: nowrap; }
.chip--bad { background: #ffe3e9; color: #b3203f; }
.stage { font-style: normal; padding: 2px 7px; border-radius: 4px; background: #eceefc; color: #4d4580; font-size: 11.5px; }
.nm { font-weight: 500; }
.bad { color: #d8486a; }

/* table */
.trow { display: grid; grid-template-columns: 1.5fr 1.1fr 1.5fr 1fr; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(29, 18, 54, 0.08); transition: background 0.3s; }
.trow--th { padding: 6px 0; border-top: 0; border-bottom: 1px solid rgba(29, 18, 54, 0.12); color: var(--muted); font-size: 11.5px; }
.dt s { position: relative; text-decoration: none; color: var(--muted); }
.dt s::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: currentColor; transform-origin: left; }
.dt em { font-style: normal; margin-left: 8px; }
.dt em::before { content: "→ "; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .trow:not(.trow--th):hover { background: #f7f7fd; } }

/* floating card */
.float { position: absolute; top: 14px; right: 14px; display: grid; gap: 2px; padding: 8px 12px; background: #fff; border: 1px solid rgba(29, 18, 54, 0.1); border-radius: 6px; box-shadow: 0 14px 28px -14px rgba(29, 18, 54, 0.4); }
.float small { color: var(--muted); font-size: 11px; }
.float b { font-weight: 500; font-size: 12.5px; }
.float::before { content: ""; position: absolute; left: -4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }

/* coverage */
.big { font-size: 34px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; margin: 2px 0 14px; }
.big small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.seg { display: grid; grid-template-columns: 72fr 20fr 8fr; gap: 3px; height: 26px; }
.seg i { display: block; border-radius: 4px; transform-origin: left; }
.seg__e { background: repeating-linear-gradient(135deg, rgba(123, 128, 212, 0.55) 0 4px, rgba(123, 128, 212, 0.18) 4px 8px); border: 1px solid var(--peri); }
.seg__m { background: var(--peri); }
.seg__l { background: var(--ink); }
.seg__lab { display: grid; grid-template-columns: 72fr 20fr 8fr; gap: 3px; margin: 6px 0 16px; color: var(--muted); font-size: 11.5px; }
.seg__lab b { display: block; color: var(--ink); font-weight: 500; font-size: 12.5px; }
.mrow { display: grid; grid-template-columns: 90px 64px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(29, 18, 54, 0.08); }
.mbar { display: block; height: 8px; border-radius: 3px; background: #f1f2fd; overflow: hidden; }
.mbar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--peri); transform-origin: left; }
.mbar i.hatch { background: repeating-linear-gradient(135deg, var(--peri) 0 4px, rgba(123, 128, 212, 0.35) 4px 8px); }
.mbar i.ink { background: var(--ink); }
.float--seg { top: 50px; right: 18%; }

/* quota chart */
.seg2 { margin-left: auto; display: inline-flex; padding: 2px; border-radius: 6px; background: #f1f2fd; font-size: 11.5px; }
.seg2 i { font-style: normal; padding: 2px 9px; border-radius: 4px; color: var(--muted); }
.seg2 i.on { background: var(--ink); color: #fff; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: 130px; }
.chart .grid { stroke: rgba(29, 18, 54, 0.08); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.chart .ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .ln--q { stroke: var(--ink); }
.chart .ln--a { stroke: var(--peri); }
.chart .dash { stroke: var(--pink); stroke-width: 1; stroke-dasharray: 3 3; fill: none; vector-effect: non-scaling-stroke; }
.chart .note { position: absolute; left: 49%; top: -2px; transform: translateX(-100%); margin-left: -6px; }
.months { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10.5px; color: var(--muted); }
.stats2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.stats2 > div { padding: 10px 12px; border: 1px solid rgba(29, 18, 54, 0.1); border-radius: 6px; display: grid; gap: 2px; }
.stats2 b { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.stats2 .pv { color: #5b61c4; }
.stats2 span { color: var(--muted); }

/* two slides */
.up--slides { display: grid; grid-template-columns: 1fr 92px 1fr; gap: 6px; align-items: stretch; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; left: 5%; width: 90%; }
.slide { display: grid; gap: 3px; align-content: start; padding: 14px 14px 12px; background: #fff; border: 1px solid rgba(29, 18, 54, 0.1); border-radius: 6px 6px 0 0; box-shadow: 0 30px 60px -28px rgba(29, 18, 54, 0.4); }
.slide small { color: var(--muted); font-size: 11px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid rgba(29, 18, 54, 0.08); }
.slide span { color: var(--muted); }
.slide b.tot { font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; margin-top: 4px; }
.neq { display: grid; justify-items: center; align-content: start; gap: 8px; padding-top: 64px; }
.neq .chip { white-space: normal; text-align: center; }
.neq > i:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid rgba(29, 18, 54, 0.14); font-style: normal; font-size: 16px; box-shadow: 0 8px 18px -8px rgba(29, 18, 54, 0.4); }

/* capacity */
.rrow { display: grid; grid-template-columns: 26px 70px 34px 1fr 38px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(29, 18, 54, 0.08); }
.av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eceefc; color: #4d4580; font-style: normal; font-size: 10px; font-weight: 500; }
.rb { display: block; height: 8px; border-radius: 3px; border: 1px dashed var(--pink); overflow: hidden; }
.rb.is-full { border-color: transparent; background: transparent; }
.rb i { display: block; height: 100%; width: var(--w); background: var(--peri); transform-origin: left; }
.pc { text-align: right; font-variant-numeric: tabular-nums; }
.float--low, .float--cap { top: auto; bottom: 18px; right: 16px; }

/* entry: one calm animation, played once when the card scrolls into view */
.js .ps__card .trow:not(.trow--th), .js .ps__card .mrow, .js .ps__card .rrow, .js .ps__card .stats2 > div, .js .ps__card .slide, .js .ps__card .float, .js .ps__card .neq { opacity: 0; transform: translateY(10px); }
.js .ps__card.is-in .trow:not(.trow--th), .js .ps__card.is-in .mrow, .js .ps__card.is-in .rrow { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) calc(var(--i, 0) * 110ms + 250ms), transform 0.6s var(--ease) calc(var(--i, 0) * 110ms + 250ms); }
.js .ps__card.is-in .stats2 > div, .js .ps__card.is-in .slide, .js .ps__card.is-in .neq { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 0.5s, transform 0.6s var(--ease) 0.5s; }
.js .ps__card.is-in .float { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 1.2s, transform 0.6s var(--ease) 1.2s; }
.js .ps__card .dt s::after { transform: scaleX(0); }
.js .ps__card.is-in .dt s::after { transform: scaleX(1); transition: transform 0.5s var(--ease) calc(var(--i, 0) * 110ms + 600ms); }
.js .ps__card .seg i, .js .ps__card .mbar i, .js .ps__card .rb i { transform: scaleX(0); }
.js .ps__card.is-in .seg i { transform: none; transition: transform 0.9s var(--ease) 0.3s; }
.js .ps__card.is-in .mbar i, .js .ps__card.is-in .rb i { transform: none; transition: transform 0.9s var(--ease) calc(var(--i, 0) * 110ms + 400ms); }
.js .ps__card .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ps__card.is-in .ln--q { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) 0.3s; }
.js .ps__card.is-in .ln--a { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease) 0.8s; }
.js .ps__card .note, .js .ps__card .chart .dash { opacity: 0; }
.js .ps__card.is-in .note, .js .ps__card.is-in .chart .dash { opacity: 1; transition: opacity 0.6s 1.4s; }
@media (prefers-reduced-motion: reduce) { .js .ps__card * { transition: none !important; } }
@media (max-width: 600px) { .up { font-size: 11.5px; } .trow { grid-template-columns: 1.4fr 1fr 1.3fr; } .trow > span:nth-child(2) { display: none; } .float { display: none; } .up:has(.float) .up__bar { padding-right: 0; } }

/* sticky left column needs every ancestor to leave overflow alone */
.problem, .problem .wrap, .ps { overflow: visible; }
.ps__lead { align-self: start; }
.ps__card { will-change: transform, opacity; }

/* ARR card: the same three components, counted differently */
.stk { display: flex; gap: 3px; height: 12px; margin: 12px 0 10px; }
.stk i { display: block; width: var(--w); border-radius: 3px; transform-origin: left; }
.stk .s1 { background: var(--peri); }
.stk .s2 { background: repeating-linear-gradient(135deg, rgba(123, 128, 212, 0.6) 0 4px, rgba(123, 128, 212, 0.2) 4px 8px); border: 1px solid var(--peri); }
.stk .s3 { background: var(--pink); }
.stk .ex { border: 1px dashed var(--pink); background: transparent; }
.cmp { display: grid; margin: 0; padding: 0; list-style: none; }
.cmp li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(29, 18, 54, 0.08); }
.cmp li b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cmp .dot { display: block; width: 8px; height: 8px; border-radius: 2px; }
.cmp .dot.s1 { background: var(--peri); }
.cmp .dot.s2 { background: repeating-linear-gradient(135deg, var(--peri) 0 2px, #cfd2f5 2px 4px); }
.cmp .dot.s3 { background: var(--pink); }
.cmp li.off { color: var(--muted); }
.cmp li.off span { text-decoration: line-through; text-decoration-color: rgba(111, 107, 141, 0.6); }
.cmp li.off b { font-weight: 400; color: #d8486a; font-size: 11.5px; }
.js .ps__card .cmp li { opacity: 0; transform: translateY(8px); }
.js .ps__card.is-in .cmp li { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) calc(var(--i, 0) * 120ms + 700ms), transform 0.6s var(--ease) calc(var(--i, 0) * 120ms + 700ms); }
.js .ps__card .stk i { transform: scaleX(0); }
.js .ps__card.is-in .stk i { transform: none; transition: transform 0.9s var(--ease) 0.5s; }


/* ===== solution: centred header, alternating rows, soft top and bottom edges ===== */
.solution { border-top: 0; color: #fff; padding-block: clamp(160px, 18vw, 260px);
  background: linear-gradient(180deg, #fff 0%, #e9e6f7 7%, #5a4f8a 17%, #1d1236 30%, #1d1236 70%, #3b2f66 85%, #cfcbe8 95%, #f5f2fd 100%); }
.solution h2 .t-accent { color: #aab0ec; }

/* each row reveals as it reaches the viewport; the asset slides in from its own side */

/* solution: begin the fade higher (overlapping the problem section's empty bottom padding) and reach solid plum before the heading */
.solution { margin-top: -140px; position: relative; z-index: 0; padding-top: clamp(300px, 28vw, 400px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ebe8f8 6%, #8a82bd 12%, #3b2f66 18%, #1d1236 24%, #1d1236 72%, #3b2f66 86%, #cfcbe8 95%, #f5f2fd 100%); }
.problem { position: relative; z-index: 1; background: transparent; }
.problem .wrap { position: relative; z-index: 2; }

/* solution fade as its own layer: it drifts upward as the section scrolls into view (scroll-driven parallax) */
.solution { --fy: 0px;
  background: linear-gradient(180deg, #1d1236 0%, #1d1236 72%, #3b2f66 86%, #cfcbe8 95%, #f5f2fd 100%); }
.solution > .wrap { position: relative; z-index: 1; }

/* ===== solution edges v3: long eased fades, grain against banding, parallax at both ends ===== */
.problem { padding-bottom: clamp(260px, 24vw, 340px); }
.solution { --fy: 0px; --fy2: 0px; margin-top: 0; background: #1d1236;
  padding-top: clamp(380px, 32vw, 480px); padding-bottom: clamp(520px, 46vw, 680px); }
.who { position: relative; z-index: 1; border-top: 0; }

/* clearance: the fade starts well below the problem section, even at full parallax drift */
.problem { padding-bottom: clamp(360px, 30vw, 440px); }
.solution { padding-top: clamp(480px, 38vw, 580px); }

/* v4: fades are alpha ramps over the plum, so the layers have no visible end edge */

/* v5: the top fade begins exactly at the section edge, fully white, and only then blends into the plum */
.solution { padding-top: clamp(560px, 44vw, 680px); }

/* ===== v6: curtain. The next section's colour rises over the empty space above it as you scroll, soft-edged and minimal ===== */
.problem { padding-bottom: clamp(220px, 18vw, 280px); }
.solution { --cy: -1; --cw: -1; background: #1d1236; padding-top: clamp(200px, 15vw, 240px); padding-bottom: clamp(220px, 17vw, 260px); }
.who { --cw: -1; }
.who { overflow: visible; }

/* ===== v7: curtain exactly like the reference: a solid, full-height backdrop grows upward from the section's top edge and covers the section above before this one arrives ===== */
.problem { position: relative; z-index: 0; padding-bottom: clamp(120px, 10vw, 160px); }
.solution { position: relative; z-index: 1; --cy: -1; background: #1d1236; padding-top: clamp(160px, 13vw, 200px); padding-bottom: clamp(140px, 11vw, 180px); }
.who { position: relative; z-index: 2; --cw: -1; overflow: visible; }

/* v8: curtain edge fades like the hero (long eased gradient on the far edge) */

/* solution assets: all three are white product panels */

/* bottom curtain stays short so it only rises over the empty space under the last row */
.solution { padding-bottom: clamp(280px, 22vw, 340px); }

/* ===== v9: curved curtain edge (elliptical fade, longer) ===== */

/* ===== who: pinned portrait + large lead + 2x2 hairline grid ===== */
.who { padding-block: clamp(96px, 10vw, 160px); }

/* v10: linear (not S-curved) fade that starts earlier and runs the full height; no bottom curtain */
.solution { padding-bottom: clamp(140px, 11vw, 180px); }

/* v11: revert the solution section's edges to the original: a solid plum band, no curtain, no fades */
.problem { position: static; z-index: auto; padding-bottom: clamp(96px, 11vw, 144px); }
.solution { position: static; z-index: auto; background: #1d1236; border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: clamp(96px, 11vw, 144px); }
.who { position: static; z-index: auto; }

/* ===== v12: the original solution layout restored: centred header, one connected asset, three steps, light background ===== */

/* ===== solution: claim, evidence, question, joined by a line that draws once ===== */

/* play once when the stage scrolls into view */

.solution { position: static; z-index: auto; background: transparent; color: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(96px, 11vw, 144px); }
.solution h2 .t-accent { color: var(--muted, #6f6b8d); }

/* ===== solution as a pinned, scroll-driven showcase (steps on the left, one panel on the right that changes with the step) ===== */

/* pinned mode (desktop, motion allowed): three screens tall, the stage stays put */

/* each panel replays its own small animation when it becomes the active one */

/* who: white background, full portrait with the name and role laid over the bottom-left (no caption under the image) */
.who { background: #fff; }

/* ===== solution v2: horizontal stage. Heading across the top, one wide panel, three steps in a row beneath; panels slide sideways ===== */
/* panels travel sideways: waiting ones sit to the right, finished ones leave to the left */

/* ===== who v3: copy on the left, portrait card on the right at the same height; caption bar turns dark on hover ===== */
.who { background: #fff; }

/* ===== who v4: centred header; plain portrait card with the name over it, beside four rows of equal height ===== */
.wh4__head { display: grid; justify-items: center; gap: var(--s4); text-align: center; margin: 0 auto clamp(var(--s7), 5vw, var(--s8)); max-width: 760px; }
.wh4__head h2 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.08; }
.wh4__head h2 > span { display: block; }
.wh4__head p { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); color: var(--ink-soft); }

/* ===== site nav: links, mobile menu ===== */
.nav__right { display: flex; align-items: center; gap: var(--s5); }
.nav__links { display: flex; align-items: center; gap: var(--s5); }
.nav__links a { position: relative; padding-block: 6px; color: #fff; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: opacity 0.2s; }
.nav--dark .nav__links a { color: var(--ink); }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { opacity: 0.65; } }
.nav__toggle { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; color: #fff; }
.nav--dark .nav__toggle { color: var(--ink); }
.nav__toggle span, .nav__toggle span::before { content: ""; position: absolute; left: 12px; width: 20px; height: 1.75px; background: currentColor; border-radius: 1px; transition: transform 0.3s var(--ease); }
.nav__toggle span { top: 21px; }
.nav__toggle span::before { left: 0; top: -6px; width: 20px; }
.nav__toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); }
@media (max-width: 760px) {
  .nav__right { gap: var(--s3); }
  .nav__toggle { display: block; }
  .nav__links { display: none; position: absolute; top: calc(100% - var(--s2)); left: var(--edge); right: var(--edge); z-index: 30; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) var(--s5); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 48px -24px rgba(29, 18, 54, 0.4); overscroll-behavior: contain; }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a, .nav--dark .nav__links a { padding: var(--s4) 0; color: var(--ink); font-size: 1.125rem; }
  .nav__links a + a { border-top: 1px solid var(--line); }
  .nav__links a[aria-current="page"]::after { display: none; }
  .nav__links a[aria-current="page"] { color: #5b61c4; }
}

/* ===== about + how it works ===== */
.pagehead__lead { max-width: 44ch; color: var(--ink-soft); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; }
.page-sec { padding-block: clamp(var(--s8), 9vw, 128px); border-top: 1px solid var(--line); }
.page-sec:first-of-type { border-top: 0; }
.page-sec__head { display: grid; gap: var(--s4); max-width: 720px; margin-bottom: clamp(var(--s7), 5vw, var(--s8)); }
.page-sec__head h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.08; }
.page-sec__head h2 .t-accent { color: #5b61c4; }
.page-sec__head p { color: var(--ink-soft); font-size: 1.125rem; max-width: 52ch; }
.page-sec .wh4__head { margin-bottom: clamp(var(--s7), 5vw, var(--s8)); }
.page-sec--faq { background: #fff; }

/* ===== articles + 404 ===== */
.backlink { display: inline-flex; align-items: center; gap: var(--s2); width: fit-content; color: var(--ink-soft); font-size: 0.9375rem; text-decoration: none; }
.backlink svg { transition: transform 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .backlink:hover { color: var(--ink); } .backlink:hover svg { transform: translateX(-2px); } }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); color: var(--ink-soft); font-size: 0.9375rem; }
.byline strong { color: var(--ink); font-weight: 500; }
.byline__sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.article { padding-block: clamp(var(--s7), 7vw, var(--s9)) clamp(var(--s8), 8vw, 128px); }
.prose { max-width: 68ch; margin-inline: auto; }
.prose > * + * { margin-top: var(--s5); }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.7; color: var(--ink-soft); }
.prose h2 { margin-top: var(--s8); font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.15; color: var(--ink); }
.prose h3 { margin-top: var(--s7); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--s2); }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose blockquote { margin-inline: 0; padding: var(--s5) var(--s6); background: var(--lilac); border-radius: var(--r-md); font-size: 1.25rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); }
.authorcard { display: grid; gap: var(--s2); max-width: 68ch; margin: var(--s8) auto 0; padding-top: var(--s5); border-top: 1px solid var(--line); }
.authorcard strong { font-size: 1.125rem; font-weight: 500; }
.authorcard p { color: var(--ink-soft); }
.authorcard a { color: var(--ink); text-underline-offset: 3px; }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.articles { display: grid; border-top: 1px solid var(--line); }
.notfound { min-height: calc(100svh - 120px); display: grid; align-items: center; padding-block: clamp(112px, 14vw, 168px) var(--s9); background: linear-gradient(180deg, #c9cdf6 0%, #e8eafc 55%, #fff 100%); }
.notfound__inner { display: grid; gap: var(--s5); justify-items: start; }
.notfound__code { font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; color: #5b61c4; }
.notfound h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; max-width: 14em; }
.notfound h1 .t-accent { color: #4a3f86; }
.notfound p { color: var(--ink-soft); font-size: 1.125rem; max-width: 40ch; }

/* contact form honeypot: off-screen, not display:none, so bots still fill it */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== home: latest articles carousel ===== */
.news { background: var(--lilac); }
.news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6); }
.news__head h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.08; }
.news__head h2 .t-accent { color: #5b61c4; }
.news__ctrl { display: flex; align-items: center; gap: var(--s3); }
.news__all { margin-right: var(--s3); font-size: 0.9375rem; font-weight: 500; text-underline-offset: 3px; }
.news__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-btn); background: var(--peri-pale); color: #4a3f86; transition: background 0.3s var(--ease), opacity 0.3s; }
.news__arrow:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .news__arrow:not(:disabled):hover { background: #dfe2fa; } }
.news__track { display: flex; gap: 8px; height: clamp(400px, 42vw, 520px); }
.news__item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r-md); background: #cfd2f5; transition: flex-grow 0.7s var(--ease); }
.news__item.is-active { flex-grow: 12; }
.news__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news__item::after { content: ""; position: absolute; inset: 0; background: rgba(29, 18, 54, 0.28); pointer-events: none; transition: opacity 0.5s var(--ease); }
.news__item.is-active::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .news__item:not(.is-active):hover::after { opacity: 0.1; } }
.news__title { position: absolute; z-index: 2; left: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); max-width: 10em; color: #fff; font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); pointer-events: none; }
.news__item.is-active .news__title { opacity: 1; transform: none; transition-delay: 0.25s; }
.news__open, .news__pick { position: absolute; inset: 0; z-index: 3; display: block; border-radius: inherit; }
.news__pick { cursor: pointer; }
.news__open:focus-visible, .news__pick:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.news__caps { margin-top: var(--s5); }
.news__cap { display: none; grid-template-columns: 1fr auto; gap: var(--s6); align-items: start; }
.news__cap.is-active { display: grid; animation: rise 0.6s var(--ease) both; }
.news__cap p { max-width: 62ch; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.5; }
.news__cap strong { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) {
  .news__track { flex-direction: column; height: 560px; gap: 6px; }
  .news__item.is-active { flex-grow: 5; }
  .news__title { top: 50%; bottom: auto; transform: translateY(-50%); font-size: 1.0625rem; opacity: 1; max-width: none; left: 16px; right: 16px; }
  .news__item.is-active .news__title { top: auto; bottom: 20px; transform: none; font-size: 1.75rem; max-width: 10em; }
  .news__cap { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ===== article detail + list ===== */
.article__cover { max-width: 960px; margin: 0 auto var(--s8); border-radius: var(--r-lg); overflow: hidden; background: #cfd2f5; }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article__nav { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; max-width: 68ch; margin: var(--s7) auto 0; padding-top: var(--s5); border-top: 1px solid var(--line); }
.article__nav a { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 500; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .article__nav a:hover { color: #5b61c4; } }
.acard { display: grid; grid-template-columns: 220px 1fr; gap: var(--s6); align-items: center; padding: var(--s6) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.acard__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.acard__body { display: grid; gap: var(--s2); }
.acard__meta { color: var(--ink-soft); font-size: 0.9375rem; }
.acard h2 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; }
.acard p { color: var(--ink-soft); max-width: 60ch; }
@media (hover: hover) and (pointer: fine) { .acard:hover h2 { color: #5b61c4; } }
@media (max-width: 600px) { .acard { grid-template-columns: 1fr; gap: var(--s4); } }

/* ===== about: photo and one paragraph ===== */
.about-solo { padding: clamp(112px, 14vw, 168px) 0 clamp(var(--s8), 9vw, 128px); background: linear-gradient(180deg, #c9cdf6 0%, #e8eafc 38%, #fff 72%); }
.about-solo__inner { display: grid; justify-items: center; gap: clamp(var(--s7), 6vw, var(--s8)); }
.about-solo__photo { width: min(100%, 440px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); background: #cfd2f5; box-shadow: 0 30px 60px -30px rgba(29, 18, 54, 0.45); }
.about-solo__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.about-solo__text { max-width: 30em; text-align: center; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.38; letter-spacing: -0.015em; color: var(--ink-soft); text-wrap: pretty; }
.about-solo__text strong { color: var(--ink); font-weight: 600; }
.news__item img { object-position: 50% 35%; }
.news__item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(29, 18, 54, 0) 45%, rgba(29, 18, 54, 0.55) 100%); opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }
.news__item.is-active::before { opacity: 1; }
@media (max-width: 760px) { .news__item::before { background: linear-gradient(180deg, rgba(29, 18, 54, 0) 40%, rgba(29, 18, 54, 0.6) 100%); } }
.article__cover img, .acard__img { height: auto; }

/* ===== home rhythm: who + what I look for share one tint, the rest sit on white ===== */
.who, .look { background: var(--lilac); }
.who { padding-bottom: clamp(var(--s8), 8vw, var(--s9)); }
.who .wh4__head { margin-bottom: 0; }
.look { border-top: 0; padding-top: 0; }
.news { background: #fff; }
/* fade in from white at the top of the shared tint, like the closing banner */
.who { background: linear-gradient(180deg, #fff 0, var(--lilac) clamp(200px, 22vw, 320px)); }

/* footer: more room above the bar, links that read clearly on the periwinkle */
.footer__bar { align-items: center; row-gap: var(--s5); padding-top: clamp(56px, 7vw, 96px); padding-bottom: var(--s7); font-size: 1rem; }
.footer__bar, .footer__bar a { color: var(--ink); }
.footer__line { font-weight: 500; }
.footer__bar nav { gap: var(--s3) var(--s6); }
.footer__bar nav a { font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1.5px; transition: text-decoration-color 0.2s; }
@media (hover: hover) and (pointer: fine) { .footer__bar a:hover { opacity: 1; } .footer__bar nav a:hover { text-decoration-color: currentColor; } }
@media (max-width: 760px) { .footer__bar { flex-direction: column; align-items: flex-start; } .footer__bar nav { gap: var(--s3) var(--s5); } }

/* what I look for: one fixed palette — white cards, brand periwinkle panel, lilac question box */
.look .slab { background: #fff; border-color: var(--line); }
.look .slab__q { background: var(--lilac); border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ===== card palette: three brand tints, one per card, same order in both sections ===== */
:root {
  --tint-peri: #eceefc; --tint-pink: #fff0f3; --tint-cyan: #e8f6fd;
  --wash-peri: linear-gradient(150deg, #c9cdf6 0%, #eceefc 100%);
  --wash-pink: linear-gradient(150deg, #ffd3dc 0%, #fff0f3 100%);
  --wash-cyan: linear-gradient(150deg, #bfe6f8 0%, #e8f6fd 100%);
}
.look .slab { background: var(--tint-peri); border-color: rgba(29, 18, 54, 0.07); }
.look .slab:nth-child(5n + 2), .look .slab:nth-child(5n + 5) { background: var(--tint-pink); }
.look .slab:nth-child(5n + 3) { background: var(--tint-cyan); }
.look .slab__q { background: rgba(255, 255, 255, 0.8); border-color: rgba(29, 18, 54, 0.08); }
.steps .st3 { margin-top: 0; }

/* ===== method scene: text scrolls, the circle stays pinned and morphs (approach borrowed from actactuaires.com) =====
   Left: one full-screen block per step, title and paragraph centred, each scroll-revealed (fade in + translate, staggered).
   Right: the circle is sticky. Scroll position morphs it between four states. Finished state is the default. */
.solution.mx-section { padding-block: 0; }
.mx-head { text-align: center; padding-top: clamp(96px, 11vw, 144px); padding-bottom: clamp(24px, 4vw, 56px); }
.mx-head h2 { margin: 0 auto; max-width: 18ch; font-size: clamp(2.25rem, 4.6vw, 3.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); text-wrap: balance; }
.mx-head h2 .t-bold { color: var(--ink); }
.mx-head h2 .t-accent { color: #6f6b8d; }
.mx-head p { margin: var(--s5) auto 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-soft); }

.mx-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 900px) {
  .mx-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(32px, 5vw, 80px); }
  .mx-steps { grid-column: 1; grid-row: 1; }
  .mx-art { grid-column: 2; grid-row: 1; }
}

/* left: one block per step, vertically centred */
.mx-steps { margin: 0; padding: 0; list-style: none; }
.mx-step { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: 30ch; }
.mx-h { margin: 0; font-size: clamp(1.9rem, 3vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; color: var(--ink); text-wrap: balance; }
.mx-h .t-bold { color: var(--ink); }
.mx-h .t-accent { color: #6f6b8d; }
.mx-p { margin: var(--s5) 0 0; max-width: 36ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-soft); }

/* scroll reveal: fade in + translate up, title first then paragraph (stagger). Set only once JS is running. */
.js .mx-step:not(.is-in) .mx-h, .js .mx-step:not(.is-in) .mx-p { opacity: 0; transform: translateY(40px); }
.mx-h, .mx-p { transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.mx-p { transition-delay: 0.14s; }

/* right: pinned visual */
.mx-art { position: relative; }
.mx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; align-content: center; gap: 12px; }
.mx-dg { width: min(100%, 620px, calc(100svh - 150px)); height: auto; aspect-ratio: 1; display: block; overflow: visible; }

@media (max-width: 899px) {
  .mx-layout { display: flex; flex-direction: column; }
  .mx-art { display: contents; }
  .mx-pin { order: -1; position: sticky; top: 0; z-index: 3; height: 42vh; height: 42svh; background: #fff; align-content: center; padding-block: 8px; }
  .mx-dg { width: auto; height: calc(42svh - 24px); }
  .mx-step { min-height: 62vh; min-height: 62svh; max-width: none; }
  .mx-h { font-size: 1.7rem; }
}

/* the diagram: a hairline instrument drawing. Finished state (3) is the default; the script sets earlier states. */
.mx-dg text { font-family: var(--sans); font-feature-settings: "tnum" 1, "lnum" 1; }
.mx-hair { fill: none; stroke: #5057b8; stroke-opacity: 0.3; stroke-width: 1; }
.mx-hair--in { stroke-opacity: 0.14; }
.mx-ticks { transform-box: view-box; transform-origin: 50% 50%; animation: mx-spin 260s linear infinite; }
.mx-ticks circle { fill: none; stroke: #5057b8; }
.mx-tick-minor { stroke-width: 7; stroke-opacity: 0.34; }
.mx-tick-major { stroke-width: 13; stroke-opacity: 0.5; }
@keyframes mx-spin { to { transform: rotate(360deg); } }

.mx-c { stroke: #5057b8; stroke-opacity: 0.8; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mx-leader { fill: none; stroke: #5057b8; stroke-opacity: 0.55; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mx-node { fill: #5057b8; }
.mx-rule { stroke: #5057b8; stroke-opacity: 0.5; stroke-width: 1; }
.mx-rim { fill: none; stroke: #fff; stroke-opacity: 0.2; stroke-width: 1; }
.mx-c-prove { stroke: #5057b8; stroke-opacity: 0.75; stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.mx-bar-prove { stroke: #5057b8; stroke-opacity: 0.6; stroke-width: 1; stroke-dasharray: 2 4; }

.mx-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.7px; fill: #6f6b8d; text-anchor: middle; }
.mx-eyebrow--dark { fill: #1d1236; }
.mx-claim { font-size: 36px; font-weight: 500; letter-spacing: -1px; fill: #1d1236; text-anchor: middle; }
.mx-fig { font-size: 40px; font-weight: 500; letter-spacing: -1.2px; fill: #1d1236; text-anchor: middle; }
.mx-fig--md { font-size: 32px; letter-spacing: -0.9px; }
.mx-fig--sm { font-size: 22px; letter-spacing: -0.5px; text-anchor: start; }
.mx-cap { font-size: 12.5px; fill: #6f6b8d; text-anchor: middle; }
.mx-cap--start { text-anchor: start; }
.mx-cap--end { text-anchor: end; }
.mx-inv .mx-eyebrow { fill: rgba(255, 255, 255, 0.72); }
.mx-inv .mx-fig { fill: #fff; }
.mx-inv .mx-cap { fill: rgba(255, 255, 255, 0.62); }
.mx-g-prove text { paint-order: stroke; stroke: #f6f6fe; stroke-width: 5px; stroke-linejoin: round; }
.mx-dg g, .mx-dg text { transform-box: fill-box; transform-origin: center; }

/* finished state (3): what holds beside what must be proved, and the proportion between them */
.mx-dg .mx-g-claim, .mx-dg .mx-g-mid, .mx-dg .mx-g-late, .mx-dg .mx-g-old, .mx-dg .mx-g-lens, .mx-dg .mx-lab-early { opacity: 0; }
.mx-dg .mx-g-mid, .mx-dg .mx-g-late { transform: scale(0.88); }
.mx-dg .mx-g-old { transform: translateX(36px); }
.mx-dg .mx-g-claim { transform: scale(0.97); }
.mx-dg .mx-g-early, .mx-dg .mx-g-prove, .mx-dg .mx-g-hold, .mx-dg .mx-g-bar { opacity: 1; transform: none; }
.mx-dg .mx-g-early .mx-c { stroke-opacity: 0; }
.mx-dg .mx-g-mid .mx-c, .mx-dg .mx-g-late .mx-c, .mx-dg .mx-g-old .mx-c, .mx-dg .mx-g-mid .mx-leader, .mx-dg .mx-g-late .mx-leader { stroke-dashoffset: 1; }
/* 0: the claim */
.mx-dg[data-state="0"] .mx-g-claim { opacity: 1; transform: none; }
.mx-dg[data-state="0"] .mx-g-early { opacity: 0; transform: scale(0.88); }
.mx-dg[data-state="0"] .mx-g-early .mx-c { stroke-dashoffset: 1; }
.mx-dg[data-state="0"] .mx-g-prove, .mx-dg[data-state="0"] .mx-g-hold, .mx-dg[data-state="0"] .mx-g-bar { opacity: 0; transform: scale(0.9); }
/* 1: the pipeline by stage */
.mx-dg[data-state="1"] .mx-g-mid, .mx-dg[data-state="1"] .mx-g-late { opacity: 1; transform: none; }
.mx-dg[data-state="1"] .mx-g-mid .mx-c, .mx-dg[data-state="1"] .mx-g-late .mx-c, .mx-dg[data-state="1"] .mx-g-mid .mx-leader, .mx-dg[data-state="1"] .mx-g-late .mx-leader { stroke-dashoffset: 0; }
.mx-dg[data-state="1"] .mx-lab-early { opacity: 1; }
.mx-dg[data-state="1"] .mx-g-early .mx-c, .mx-dg[data-state="2"] .mx-g-early .mx-c { stroke-opacity: 0.8; }
.mx-dg[data-state="1"] .mx-g-prove, .mx-dg[data-state="1"] .mx-g-hold, .mx-dg[data-state="1"] .mx-g-bar { opacity: 0; transform: scale(0.9); }
/* 2: where the story and the data overlap */
.mx-dg[data-state="2"] .mx-g-early { transform: translate(65px, -10px); }
.mx-dg[data-state="2"] .mx-lab-early { opacity: 1; transform: translate(-58px, 0); }
.mx-dg[data-state="2"] .mx-g-old, .mx-dg[data-state="2"] .mx-g-lens { opacity: 1; transform: none; }
.mx-dg[data-state="2"] .mx-g-old .mx-c { stroke-dashoffset: 0; }
.mx-dg[data-state="2"] .mx-g-prove, .mx-dg[data-state="2"] .mx-g-hold, .mx-dg[data-state="2"] .mx-g-bar { opacity: 0; transform: scale(0.9); }

/* motion: strokes draw, groups ease, soft and slow. Only after the script has set the starting state. */
.mx-dg.is-ready .mx-g-claim, .mx-dg.is-ready .mx-g-early, .mx-dg.is-ready .mx-lab-early, .mx-dg.is-ready .mx-g-mid, .mx-dg.is-ready .mx-g-late,
.mx-dg.is-ready .mx-g-old, .mx-dg.is-ready .mx-g-lens, .mx-dg.is-ready .mx-g-prove, .mx-dg.is-ready .mx-g-hold, .mx-dg.is-ready .mx-g-bar { transition: opacity 0.9s var(--ease), transform 1.5s var(--ease); }
.mx-dg.is-ready .mx-c, .mx-dg.is-ready .mx-leader { transition: stroke-dashoffset 1.7s cubic-bezier(0.45, 0.05, 0.2, 1) 0.15s, stroke-opacity 0.9s var(--ease); }
.mx-dg.is-ready .mx-g-mid { transition-delay: 0.1s; } .mx-dg.is-ready .mx-g-late { transition-delay: 0.22s; }
.mx-dg.is-ready .mx-g-old, .mx-dg.is-ready .mx-g-hold { transition-delay: 0.15s; }
.mx-dg.is-ready .mx-g-lens { transition-delay: 0.45s; }
.mx-dg.is-ready .mx-g-prove { transition-delay: 0.3s; }
.mx-dg.is-ready .mx-g-bar { transition-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) { .mx-dg *, .mx-dg, .mx-h, .mx-p { transition: none !important; } .mx-ticks { animation: none; } .js .mx-step:not(.is-in) .mx-h, .js .mx-step:not(.is-in) .mx-p { opacity: 1; transform: none; } }

/* who section: words in the paragraph reveal */
.about-solo__text .tw, .about-solo__lead .tw { display: inline-block; will-change: transform, opacity; }
.about-solo__photo { will-change: clip-path; }

/* who section: lead line, Sold / Built / Invested / Taught, closing text; more air before the next section */
.about-solo__lead { margin: 0; max-width: 21em; text-align: center; font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.22; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.about-solo__lead strong { font-weight: 600; }
.about-solo__verbs { width: 100%; max-width: 1040px; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) clamp(20px, 3vw, 40px); }
.about-solo__verbs > div { position: relative; padding-top: 22px; }
.about-solo__verbs .v-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(29, 18, 54, 0.32); }
.about-solo__verbs dt { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.about-solo__verbs dd { margin: 12px 0 0; max-width: 24ch; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 900px) { .about-solo__verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .about-solo__verbs { grid-template-columns: 1fr; } }
.who { padding-bottom: clamp(160px, 16vw, 260px); }

/* look-for cards: plain white for all five (the question box stays a soft lilac so it reads on white) */
.look .slab, .look .slab:nth-child(n) { background: #fff; border-color: var(--line); }
.look .slab__q { background: var(--lilac); border-color: var(--line); }

/* contact page: stack below 960px (the two-column rule above would otherwise win) */
@media (max-width: 960px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .contact__lead, .contact__next { max-width: none; }
  .formcard { width: 100%; }
}
@media (max-width: 520px) {
  .form { padding: 22px 18px; }
  .field__row { flex-wrap: wrap; row-gap: 2px; }
}

/* ===== method section on tablet and phone: a plain scroll, each step with its own diagram ===== */
.mx-flow.mx-layout { display: flex; flex-direction: column; gap: 0; padding-bottom: clamp(48px, 10vw, 88px); }
.mx-flow .mx-art { display: none; }
.mx-flow .mx-step { min-height: 0; max-width: none; justify-content: flex-start; padding-block: clamp(32px, 8vw, 56px); }
.mx-flow .mx-step + .mx-step { border-top: 1px solid var(--line); }
.mx-flow .mx-figure { margin-bottom: 26px; }
.mx-flow .mx-figure .mx-dg { display: block; width: min(100%, 480px); max-height: none; margin: 0 auto; }
.mx-flow .mx-h { font-size: clamp(1.6rem, 5.6vw, 2.25rem); max-width: 22ch; }
.mx-flow .mx-p { max-width: 46ch; }
.js .mx-flow .mx-step .mx-figure { transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.js .mx-flow .mx-step:not(.is-in) .mx-figure { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) { .js .mx-flow .mx-step .mx-figure { transition: none; } .js .mx-flow .mx-step:not(.is-in) .mx-figure { opacity: 1; transform: none; } }

/* privacy and terms on tablet and phone: the contents list wraps into tappable chips, nothing scrolls sideways */
@media (max-width: 960px) {
  .legal { padding-top: var(--s6); }
  .legal__toc { padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
  .legal__toc::before { content: "On this page"; display: block; margin-bottom: var(--s3); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); }
  .legal__toc ol { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; border: 0; }
  .legal__toc a { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid rgba(29, 18, 54, 0.22); border-radius: 999px; background: #fff; font-size: 0.9375rem; line-height: 1.25; }
  .legal__toc a[aria-current="true"] { color: #fff; background: var(--ink); border-color: var(--ink); font-weight: 500; }
  .legal__body { max-width: none; }
  .legal__body section { scroll-margin-top: 24px; padding-bottom: var(--s6); }
}
@media (max-width: 520px) {
  .legal__body p, .legal__body li { font-size: 1rem; line-height: 1.65; }
  .legal__body h2 { font-size: 1.375rem; }
  .legal__toc a { padding-inline: 12px; }
}

/* phone: the charts and circle diagrams are drawn on a wide canvas, so their labels need to be larger to stay readable when scaled down */
@media (max-width: 640px) {
  .mx-flow .mx-dg .mx-eyebrow { font-size: 14.5px; letter-spacing: 1.4px; }
  .mx-flow .mx-dg .mx-cap { font-size: 16.5px; }
  .mx-flow .mx-dg .mx-fig--sm { font-size: 26px; }
  .mx-flow .mx-dg .mx-fig { font-size: 42px; }
  .mx-flow .mx-dg .mx-fig--md { font-size: 33px; }
  .cta__actions { flex-direction: column; align-items: stretch; width: min(100%, 300px); margin-inline: auto; }
  .cta__actions .btn { justify-content: center; }
}
.mx-flow .mx-step:first-child { padding-top: 0; }
@media (max-width: 520px) {
  .empty__actions { display: grid; gap: 12px; width: min(100%, 300px); }
  .empty__actions .btn { justify-content: center; }
}

/* ===== WordPress integration (not in the prototype) =====
   Everything above is the prototype's styles.css, pruned to the rules its pages use, in the same order. */

/* Stacked question cards: sticky offset per card (the prototype wrote --i inline). */
.stack > .slab:nth-child(1) { --i: 0; } .stack > .slab:nth-child(2) { --i: 1; } .stack > .slab:nth-child(3) { --i: 2; }
.stack > .slab:nth-child(4) { --i: 3; } .stack > .slab:nth-child(5) { --i: 4; } .stack > .slab:nth-child(6) { --i: 5; }
.stack > .slab:nth-child(7) { --i: 6; } .stack > .slab:nth-child(8) { --i: 7; } .stack > .slab:nth-child(9) { --i: 8; }
.stack > .slab:nth-child(n + 10) { --i: 9; }

/* Article body: the post-content block carries .prose; out-rank core's flow-layout spacing. */
.wp-block-post-content.prose > * { margin-block: 0; }
.wp-block-post-content.prose > * + * { margin-block-start: var(--s5); }
.wp-block-post-content.prose > h2 { margin-block-start: var(--s8); }
.wp-block-post-content.prose > h3 { margin-block-start: var(--s7); }
.wp-block-post-content.prose > :first-child { margin-block-start: 0; }
.prose blockquote > p, .prose blockquote > * { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.prose blockquote > * + * { margin-top: var(--s3); }
.prose blockquote cite { display: block; margin-top: var(--s3); font-size: 0.9375rem; font-weight: 400; font-style: normal; color: var(--ink-soft); }
.prose figure { margin-inline: 0; }
.prose figure img { height: auto; border-radius: var(--r-md); }
.prose figcaption { margin-top: var(--s2); font-size: 0.9375rem; color: var(--ink-soft); }

/* Article list pager. */
.articles__pager { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s6); }
.articles__pager a { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 500; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .articles__pager a:hover { color: #5b61c4; } }

/* Contact facts are rich text: keep inline formatting from breaking the two-column row. */
.facts li > span { display: block; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* Cloudflare Turnstile widget in the contact form: reserve its height so the button does not jump. */
.form .turnstile { margin-bottom: var(--s5); min-height: 65px; }